2

Magento buttons have a button/span/span structure, which I thought was silly at first. But it's really helpful for styling them, because those two elements give a designer an awful lot of flexibility without having to change the templates.

This got me to thinking that writing the templates for modules is more of a technical task than a design one. It's about writing HTML that can be everything to anyone, without any specific layout in mind.

So I have two questions: is the above thought correct, and are there any other similar conventions in Magento that I should bear in mind when writing templates? Things that aren't common sense, but obvious to the experienced developer?

2

The general advise when writing templates is to write it in such a way that it uses standard components that can be found in the main css file: /skin/frontend/default/default/css/styles.css. Marking up a price can be easily done by applying the correct CSS-classes.

There are various general CSS helper classes:

.hidden     
.nobr       
.wrap       
.a-left     
.a-center   
.a-right    
.v-top      
.v-middle   
.f-left    
.f-right     
.f-none     
.f-fix      
.no-display 
.no-margin  
.no-padding 
.no-bg      

.form-list class to mark up forms .std class for automatic markup of text .buttons-set when grouping buttons .data-table for tables .block for marking up blocks like in the sidebar, use in combination with .block-title and .block-content

There are a bunch more, I advise to look through the style.css yourself and you can do 80% of the markup of your custom module without writing a single line of CSS.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.