Css ABC for Contao
From Contao Community Documentation
 |
Incomplete Article: This article is not finished yet and needs expansion.
Please expand it and remove this notice when it is finished. |
| Applies to | |
|---|---|
| Contao version | for 2.9 |
Contents
Introduction
This Tutorial should Contao 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
- Contao Installation ( Local test-environments: Contao2Go: (just german jet) USB-Stick oder Festplatte XAMPP: (just german jet) lokale Entwicklungsumgebung mit XAMPP ).
- Knoledge of HTML and CSS
Resources
Add On's
Tools to show CSS specific data in a Webbrowser. Listed by Browsers (incomplete list).
NEW: Firebug Extention for Contao, Activates Firebug lite in all browser for your website development.
- 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
Helpfule Extentions to work with CSS
- CSS Editor: Simple handling for CSS-Code. With this tool it is easy to cut & paste the example "CSS-Code/Classes/Selectors" in Contao. You can install this extention "csseditor" from the rpository.
