Sharing is helping.

We offer you this space to share your knowledge about Magento and learn from our experienced customers.


    Home Forums "How do I" questions Issue with my new static block

    This topic contains 3 replies, has 2 voices, and was last updated by  Anonymous 5 years, 11 months ago.

    Viewing 4 posts - 1 through 4 (of 4 total)
    • Author
      Posts
    • #5012

      Anonymous

      I have added a new block that is suppose to display right below my 4 images on the home page.

      http://kathy.syso.ca/.

      This static block is called “BelowOffiers” and this is what I have in my stylesheet for this:
      .canvas-home .BelowOffers { float: left; margin-left: 15px; width: 235px; }

      On the home page I entered the text “This is a test….”.
      Right now it is showing up just below my social icons – how do I fix this?

      Thanks.

      #5013

      Anonymous

      You named the class “BelowOffers” and the static block “BelowOffiers” ( note the typo ) , change the static block name to “BelowOffers”

      I checked the css , didn’t like much the way you positioned the “offers” div outside the “promo” div with negative margin-top -595px , it would be better if you put it inside the promo div , the same with the new static block you created ( BelowOffers ) , if you want if bellow the “offers” div put it inside the “promo” div , just make sure you have the “promo-right” div on top of the others with float right followed by the other 3 div’s with float left , then you will need to do some minor css changes to adjust the positions

      Here is a link with a print screen showing the result: http://img35.imageshack.us/img35/8964/syso.jpg , I edited the size and background-color of the new static block to make it visible

      If you can’t do that changes let me know and I will send you the html and css codes.

      daniel

      #5014

      Anonymous

      Hi Daniel,

      Yes I do need your help. Below is the code for the home page and the styles sheet.
      Notice in the stylesheet I changed -585 to -425 as I removed an image from the right side which is reflected in the code below.

      Thank you so much for helping me.

      /* Home Page Code */
      <div class=”canvas-home”>
      <div class=”promo”>{{block type=”cms/block” block_id=”helloslide”}}
      <div class=”promo-right”><img src=”{{skin url=’images/media/promo2.jpg’}}” alt=”Daily Deals” /><img src=”{{skin url=’images/media/promo6.jpg’}}” alt=”Past Deals” /><img src=”{{skin url=’images/media/promo7.jpg’}}” alt=”Upcoming Deals” /><img src=”{{skin url=’images/media/promo5.jpg’}}” alt=”Our Partners” /></div>
      </div>
      <div class=”subpromo”>
      <div class=”offers”><img src=”{{skin url=’images/media/sub01.jpg’}}” alt=”Test 1″ /><img src=”{{skin url=’images/media/sub02.jpg’}}” alt=”Test 2″ /><img src=”{{skin url=’images/media/sub03.jpg’}}” alt=”Test 3″ /><img src=”{{skin url=’images/media/sub04.jpg’}}” alt=”Test 4″ /></div>
      </div>
      <div class=”BelowOffiers”>This is a test message.</div>
      <div class=”featured-social”>{{block type=”catalog/product_list” category_id=”12″ template=”catalog/product/featured.phtml”}}</div>
      </div>

      /* Stylesheet area */

      /* PROMO STUFF */
      .canvas-home .promo-right { float: right; width: 265px; padding-right: 15px; padding-top: 5px; }
      .canvas-home .promo-right img { margin-bottom: 25px; }

      .canvas-home .promo-right img { filter:alpha(opacity=100);opacity:1; }
      .canvas-home .promo-right img:hover { filter:alpha(opacity=100);opacity:1; }

      .canvas-home .promo-right img.last { margin-bottom:0px; }
      .canvas-home .promo-bottom { clear: both; margin-top: 15px; }

      /* SUBPROMO & BRANDS */
      .canvas-home .subpromo { margin: 20px 0px; margin-left: 5px; clear:both; }
      .canvas-home .subpromo .brands { float: right; padding-right: 15px; }

      /* SUBPROMO & OFFERS */
      .canvas-home .subpromo .offers { float: left; margin-left: 10px; margin-top: -425px; }
      .canvas-home .subpromo .offers img { margin-right: 32px; float: left; white-space: pre-wrap;filter:alpha(opacity=100);opacity:1; border: 0px solid dimgray; }
      .canvas-home .subpromo .offers img:hover { filter:alpha(opacity=65);opacity:.5; }

      /* BELOWOFFERS */
      .canvas-home .BelowOffers { float: left; margin-left: 15px; }
      .canvas-home .BelowOffers img { margin-right: 32px; float: left; white-space: pre-wrap;filter:alpha(opacity=100);opacity:1; border: 0px solid dimgray; }

      #5015

      Anonymous

      Change your home page code and css to this:

      /* Home Page Code */
      <div class=”canvas-home”>
      <div class=”promo”>
      <div class=”promo-right”><img src=”{{skin url=’images/media/promo2.jpg’}}” alt=”Daily Deals” /><img src=”{{skin url=’images/media/promo6.jpg’}}” alt=”Past Deals” /><img src=”{{skin url=’images/media/promo7.jpg’}}” alt=”Upcoming Deals” /><img src=”{{skin url=’images/media/promo5.jpg’}}” alt=”Our Partners” /></div>
      {{block type=”cms/block” block_id=”helloslide”}}
      <div class=”subpromo”>
      <div class=”offers”><img src=”{{skin url=’images/media/sub01.jpg’}}” alt=”Test 1″ /><img src=”{{skin url=’images/media/sub02.jpg’}}” alt=”Test 2″ /><img src=”{{skin url=’images/media/sub03.jpg’}}” alt=”Test 3″ /><img src=”{{skin url=’images/media/sub04.jpg’}}” alt=”Test 4″ /></div>
      </div>
      <div class=”BelowOffers”>This is a test message.</div>
      </div>
      <div class=”featured-social”>{{block type=”catalog/product_list” category_id=”12″ template=”catalog/product/featured.phtml”}}</div>
      </div>

      /* Stylesheet area */

      /* PROMO STUFF */
      .canvas-home .promo-right { float: right; width: 280px; margin-top: 5px;}
      .canvas-home .promo-right img { margin-bottom: 25px; }

      .canvas-home .promo-right img { filter:alpha(opacity=100);opacity:1; }
      .canvas-home .promo-right img:hover { filter:alpha(opacity=100);opacity:1; }

      .canvas-home .promo-right img.last { margin-bottom:0px; }
      .canvas-home .promo-bottom { clear: both; margin-top: 15px; }

      /* SUBPROMO & BRANDS */
      .canvas-home .subpromo { margin: 20px 0px 20px 5px; float:left; }
      .canvas-home .subpromo .brands { float: right; padding-right: 15px; }

      /* SUBPROMO & OFFERS */
      .canvas-home .subpromo .offers { margin-left: 12px;}
      .canvas-home .subpromo .offers img { margin-right: 32px; float: left; white-space: pre-wrap;filter:alpha(opacity=100);opacity:1; border: 0px solid dimgray; }
      .canvas-home .subpromo .offers img:hover { filter:alpha(opacity=65);opacity:.5; }

      /* BELOWOFFERS */
      .canvas-home .BelowOffers { float:left; margin-left:15px; margin-top:20px; width:524px; height:150px; background-color:#E5E5E5; border:1px solid #000000; padding:20px; }
      .canvas-home .BelowOffers img { margin-right: 32px; float: left; white-space: pre-wrap;filter:alpha(opacity=100);opacity:1; border: 0px solid dimgray; }

      ========================================================

      Also , do the following change in custom.css

      Go to : skin > frontend > default > YOUR THEME > css > custom.css

      line 53 change the slider size to the following :

      #slider { height:314px; width:607px;)

    Viewing 4 posts - 1 through 4 (of 4 total)
    Reply To: Issue with my new static block
    Your information:





    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">