Difference between revisions of "Css ABC for Contao"
From Contao Community Documentation
(→Resources) |
(→Resources) |
||
| Line 6: | Line 6: | ||
=Resources= | =Resources= | ||
| + | ==Add On's== | ||
Tools to show CSS specific data in a Webbrowser. Listed by Browsers (incomplete list). | Tools to show CSS specific data in a Webbrowser. Listed by Browsers (incomplete list). | ||
*Chrome: | *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 | + | **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/ | *Firefox: Firebug: http://getfirebug.com/ | ||
**Web-Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/ | **Web-Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/ | ||
| − | + | ||
==Wireframes== | ==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 | ||
| + | |||
| + | <source lang="css"> | ||
| + | /* 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;} | ||
| + | </source> | ||
| + | |||
==CSS Classes/Selectors (from Music Accademy)== | ==CSS Classes/Selectors (from Music Accademy)== | ||
=more= | =more= | ||
=soon= | =soon= | ||
Revision as of 06:13, 7 July 2011
Contents
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/
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;}
