Introduction

This Tutorial should beginners help, do deal with Contao specific peculiarities. Also tools will be introduced to simplify working with CSS. A lot is from the Forum and from several Contao recources. Everyone is invited to add usefull tipps & tricks.

Requirements

Knoledge of HTML and CSS

Resources

Add On's

Tools to show CSS specific data in a Webbrowser. Listed by Browsers (incomplete list).

• Chrome:
  • Firebug: runs also in Chrome ... but a similar tool is allready built in in Chrome (Ctrl & Shift & I).
  • Web-Developer: https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

• Firefox:
  • Firebug: http://getfirebug.com/
  • Web-Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Wireframes

Sometimes it helps when single divisions (wrapper, header, header inside etc.) are colored to see the size of them. For this it's possible to use the listed CSS. It is just needed to integrate the listed CSS in you Page-Layout (preferably on last position). If there is some dummy-content in the single secctions, you can see the changes of the different messurements/sizes

/* Style sheet wireframes */
#wrapper{background-color:#FFFFC0;}
#header{background-color:#D7E9D6;}
#header .inside{background-color:#E9F3E9;}
#container{background-color:#EAFCF3;}
#left{background-color:#D7DCE7;}
#left .inside{background-color:#E9ECF2;}
#main{background-color:#E9E7D6;}
#main .inside{background-color:#F3F2E9;}
#right{background-color:#D7DCE7;}
#right .inside{background-color:#E9ECF2;}
#footer{background-color:#D7E9D6;}
#footer .inside{background-color:#E9F3E9;}

CSS Classes/Selectors (from Music Accademy)

more

soon