Forums

Borders around blocks within sidebar

Permalink
This is probably a simple question but I'm in one of those "I've been staring at code all day and I can't think" moments, so any help is welcome.

I want to add a simple border around blocks I'm putting in my sidebar. Not a border around the whole sidebar but borders around each content block I add.

My sidebar CSS is very simple:

#sidebar {
   float:right;
   width:200px;
   margin:0px 10px 10px 10px;
   padding:0px 10px 10px 10px;
   border: 1px solid #00A060;
}


I know that puts the border around the whole thing and not where I need it but I can't figure out where to put that border code instead...
AltaPlanning
 
MysteriousCleon replied on at Permalink Reply
MysteriousCleon
What kind of content? It is easy to make, for instance, something like:
#sidebar p{border:1px solid black;}

but this will not solve the problem...

You can add your blocks, and then use "Inspect element" in google chrome if you use it. (just right-click on any element and choose Inspect element, this will give you a look on what kind if ids and classes are used - then just code that classes like
#sidebar .some-usefull-class{border:1px solid black;}

or, if you want to add specific blocks (many the same kind)- like for instance header and content, you can use Designer Content add-on, which is free and very usefull add-on. There you can add any class you want, and then style that classes...

The last idea (and the worst, but sometimes may be useful) is to add some divs in sidebar in the theme, and then add new area code in each div, and style that divs separatly, but then you have specific number of blocks in the sidebar, and you can't change it from CMS.

Maybe someone else have another ideas?
jordanlev replied on at Permalink Best Answer Reply
jordanlev
In your theme templates, modify the php code for your sidebar area like so:
$a = new Area('Sidebar');
$a->setBlockWrapperStart('<div class="my-awesome-class">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);


Now in your CSS put the border styles on the .my-awesome-class selector -- it will apply that to each individual block.
AltaPlanning replied on at Permalink Reply
AltaPlanning
Thank you. The setBlockWrapperStart code what exactly what I needed. Worked like a charm.
MysteriousCleon replied on at Permalink Reply
MysteriousCleon
Thanks jordanlew - there is so much to learn... :) This is great solution, I had no idea of.