Css ABC for Contao
From Contao Community Documentation
| Applies to | |
|---|---|
| Contao version | for 2.9 |
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/
- 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)
/** Layout **/ body #left #top_image /** Article **/ .ce_text, .teaser div.error, p.error .mod_article .back .mod_article .more /** Breadcrumb **/ .mod_breadcrumb /** Gallery **/ .ce_gallery .caption /** Article **/ .mod_article .pdf_link .mod_article .pdf_link a /** Lost password **/ .mod_lostPassword .mod_lostPassword td .mod_lostPassword .text, .mod_lostPassword .password .mod_lostPassword .captcha .mod_lostPassword .captcha_text /** Listing **/ .ce_list ul .ce_list li /** Navigation **/ .mod_navigation .mod_navigation ul .mod_navigation li .mod_navigation .level_2 .mod_navigation .level_2 li .mod_navigation a, .mod_navigation li, .mod_navigation span .mod_navigation .level_2 a, .mod_navigation .level_2 li, .mod_navigation .level_2 span /** Accordion **/ .ce_accordion .toggler .toggler_first .toggler_first:hover .accordion div /** Login form **/ .mod_login .mod_login label .mod_login .checkbox_container .mod_login .checkbox_container label .mod_login .submit_container #request_password #request_password a /** News **/ .mod_newsmenu, .mod_eventmenu #breaking_news .mod_newsmenu ul, .mod_newsmenu li, .mod_eventmenu ul, .mod_eventmenu li .mod_newsmenu .year, .mod_eventmenu .year .mod_newslist p .mod_newsreader .back .mod_newslist .info, .mod_newsreader .info .mod_newslist .layout_short .mod_newsreader .ce_text .mod_article, .mod_newsreader .mod_newsreader h2 .mod_newsreader .comment_default .mod_newsreader .comment .mod_newsreader .reply .mod_newsreader .form .mod_newsreader .widget .mod_newsreader .textarea /** Search **/ .mod_search .mod_search .text .mod_search .radio_container .mod_search .radio_container label .mod_search .header .mod_search h3 .mod_search .context .mod_search .url .mod_search .relevance .mod_search .highlight /** Calendar **/ table.calendar table.calendar .head table.calendar .current table.calendar .label table.calendar td table.calendar td.weekend table.calendar .today table.calendar .empty, table.calendar .empty .header table.calendar td .header table.calendar td .event a /** Mini calendar **/ #minicalendar table.minicalendar table.minicalendar td table.minicalendar td, table.minicalendar .active a table.minicalendar .weekend table.minicalendar .today table.minicalendar .label table.minicalendar .head table.minicalendar .current /** Events **/ .mod_eventlist .mod_eventlist .header .mod_eventlist .header.first .mod_eventlist .event .mod_eventlist .time .mod_eventreader .info .mod_eventreader .recurring .mod_eventreader .ce_text .mod_eventreader .back /** Personal data **/ .mod_personalData .mod_personalData fieldset *+html .mod_personalData fieldset .mod_personalData legend .mod_personalData .submit_container *+html .mod_personalData .submit_container .mod_personalData td .mod_personalData .text, .mod_personalData .password .mod_personalData select *+html .mod_personalData select fieldset.radio_container, fieldset.checkbox_container /** Tables **/ .ce_table .ce_table td /** Listing **/ *+html .ce_list li /** Tables **/ .ce_table th .ce_table th a /** Pagination **/ .pagination li /** Tables **/ #tps td /** Pagination **/ .pagination /** Tables **/ #tps .col_0 /** Pagination **/ .pagination p /** Tables **/ #tps .explanation /** Pagination **/ .pagination ul
