Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How do I style a static block? 
 
Daniel Whelan
Jr. Member
 
Total Posts:  6
Joined:  2009-11-09
 

I’ve created a static block…

<div class="block">
<div class="block-title">
<div class="block-title h2"><strong>Follow Us</strong></div>
</div>
<div class="block-content">
<a href="#" target="_blank"><img src="{{skin url=""}}images/socialicons24/facebook.png" alt="facebook" /></a>
<a href="#" target="_blank"><img src="{{skin url=""}}images/socialicons24/linkedin.png" alt="LinkedIn" /></a>
<a href="#" target="_blank"><img src="{{skin url=""}}images/socialicons24/twitter.png" alt="Twitter" /></a>
<a href="#"><img src="{{skin url=""}}images/socialicons24/feed.png" alt="RSS Feed” /></a>
</div>
</div>

I figured out how to get it to appear in the column I wanted it, and I figured out how to move it to the top of the column… but for some reason I can’t get it styled like the rest of the blocks on the page. It’s just the icons on the page, no box or anything. I’ve been messing with this for days… tried everything I can think of.

Thanks in advance,

Dan

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gyniolatry
Sr. Member
 
Total Posts:  132
Joined:  2009-11-26
Perth.au
 

Hi Dan,
Either change your classes to match an existing box /block or add css for your classes .

Use Firefox addon “Firebug” !!  ie.

Right clicking on the demo site Popular Tags box and choosing Inspect Element shows the following info -

<div class="box base-mini mini-product-tags">
<
div class="head">
<
h4>Popular Tags</h4>
</
div>
<
div class="content">
....ect

The Style Panel shows which css is effecting the element, what other properties it inherits and where to find it ..ie.
class “box base-mini mini-product-tags” =
.box boxes.css line 428
.base-mini boxes.css line 462

class “head” = .base-mini .head boxes.css line 463
class “content” = .mini-product-tags .content boxes.css line 488

To customise, change the class to <div class="box base-mini my-Links “ then add to your css
.base-mini .my-Links{ color:#2f2f2f; ect }

Hope this helps..

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top