Approaches to block styling
Permalink
I've used a couple of different approaches to styling blocks.
1. create custom templates for blocks to apply a wrapper element with a class for the css to hook onto
2. use the design properties to apply css classes to blocks
Which method do you prefer?
Personally I'm leaning towards the custom template method - it's a little more work to set up but much easier for the user when you hand over the site.
1. create custom templates for blocks to apply a wrapper element with a class for the css to hook onto
2. use the design properties to apply css classes to blocks
Which method do you prefer?
Personally I'm leaning towards the custom template method - it's a little more work to set up but much easier for the user when you hand over the site.
I think of method 2 above as a more quick and dirty method (which I have nothing against at all). But ideally, I think method 1 is best, as it is a bit cleaner and gives you more direct control.
I agree with jgarcia. Of course, the line is getting even blurrier in 5.4, as we're enabling the custom designs described in #2 to be saved as presets, and thereby easily reused.
I think a good rule of thumb is that #2 is fine if a few criteria are met:
1. You _just_ need to change styling, and don't need to change any markup.
2. You don't need to tweak functionality or how the block grabs/displays its data at all.
3. You're not too picky about how the CSS is output.
4. You don't want to output any additional JavaScript or CSS with your template.
Otherwise, if you want more control in any of these areas, you'll want to go the custom templates, which let you add additional stylesheets/javascripts/images, and give you complete control over the markup.
I think a good rule of thumb is that #2 is fine if a few criteria are met:
1. You _just_ need to change styling, and don't need to change any markup.
2. You don't need to tweak functionality or how the block grabs/displays its data at all.
3. You're not too picky about how the CSS is output.
4. You don't want to output any additional JavaScript or CSS with your template.
Otherwise, if you want more control in any of these areas, you'll want to go the custom templates, which let you add additional stylesheets/javascripts/images, and give you complete control over the markup.
I agree that using the CSS settings is the most obvious choice where it's only a case of adding a CSS class for styling.
I think the problem lies in handing over to a non-webby content manager. I've witnessed several times today, somebody who had been shown what to do, entering either a misspelt class name or entering it into the id field.
no such problem with descriptively named custom templates, just pick "blue rounded box" or whatever from the drop-down and it's done.
I think the problem lies in handing over to a non-webby content manager. I've witnessed several times today, somebody who had been shown what to do, entering either a misspelt class name or entering it into the id field.
no such problem with descriptively named custom templates, just pick "blue rounded box" or whatever from the drop-down and it's done.
It's also nice to design the CSS in such a way that, as much as possible, you can apply styles without specifying classes. Applying styles specific to each section of your theme, then specific to common tags such as P, H1, H2, BLOCKQUOTE, etc. is a nice way to go. In most cases it works great across all block types and saves you the pain of creating unique styles for each block.
Other than that, I agree with everyone else
Other than that, I agree with everyone else
I think the design often dictates how you can set up the CSS. The theme guidelines advise against using greedy CSS selectors though styling generic tags in the context of a page area is good practice in order to properly style the clean markup in the blocks e.g.
[css]
#main-area h2{color:#f00;}
#sidebar-area h2{color:#333;}
[/css]
this issue arose from needing different style sets for different blocks in the same area e.g.
[css]
#sidebar-area .blue h2{color:#00f;}
#sidebar-area .red h2{color:#f00;}
[/css]
[css]
#main-area h2{color:#f00;}
#sidebar-area h2{color:#333;}
[/css]
this issue arose from needing different style sets for different blocks in the same area e.g.
[css]
#sidebar-area .blue h2{color:#00f;}
#sidebar-area .red h2{color:#f00;}
[/css]
If at all possible it seems smart to keep the client from having to manually enter class names. Selecting from a drop-down is much, much better.
If possible, you might instead wrap your Area in a div on the code level and apply your styles that way. Can also create multiple Areas where normally you'd just add multiple Blocks to a single Area, if that helps you get the style hooks you need.
You can use this approach rather than a custom template to completely relieve the client of having to select anything. The more you can take styling out of the client's hands, the better!
Of course, that's an ideal situation :-)
If possible, you might instead wrap your Area in a div on the code level and apply your styles that way. Can also create multiple Areas where normally you'd just add multiple Blocks to a single Area, if that helps you get the style hooks you need.
You can use this approach rather than a custom template to completely relieve the client of having to select anything. The more you can take styling out of the client's hands, the better!
Of course, that's an ideal situation :-)
