Css ABC in Contao: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(→Add On's) |
(→CSS Klassen/Selektoren (aus Music Accademy)) |
||
| Zeile 46: | Zeile 46: | ||
<source lang="css"> | <source lang="css"> | ||
/** Layout **/ | /** Layout **/ | ||
| − | body | + | body {} |
| − | #left | + | #left {} |
| − | #top_image | + | #top_image {} |
| Zeile 55: | Zeile 55: | ||
.teaser | .teaser | ||
div.error, | div.error, | ||
| − | p.error | + | p.error {} |
| − | .mod_article .back | + | .mod_article .back {} |
| − | .mod_article .more | + | .mod_article .more {} |
/** Breadcrumb **/ | /** Breadcrumb **/ | ||
| − | .mod_breadcrumb | + | .mod_breadcrumb {} |
/** Gallery **/ | /** Gallery **/ | ||
| − | .ce_gallery .caption | + | .ce_gallery .caption {} |
/** Article **/ | /** Article **/ | ||
| − | .mod_article .pdf_link | + | .mod_article .pdf_link {} |
| − | .mod_article .pdf_link a | + | .mod_article .pdf_link a {} |
/** Lost password **/ | /** Lost password **/ | ||
| − | .mod_lostPassword | + | .mod_lostPassword {} |
| − | .mod_lostPassword td | + | .mod_lostPassword td {} |
.mod_lostPassword .text, | .mod_lostPassword .text, | ||
| − | .mod_lostPassword .password | + | .mod_lostPassword .password {} |
| − | .mod_lostPassword .captcha | + | .mod_lostPassword .captcha {} |
| − | .mod_lostPassword .captcha_text | + | .mod_lostPassword .captcha_text {} |
/** Listing **/ | /** Listing **/ | ||
| − | .ce_list ul | + | .ce_list ul {} |
| − | .ce_list li | + | .ce_list li {} |
/** Navigation **/ | /** Navigation **/ | ||
| − | .mod_navigation | + | .mod_navigation {} |
| − | .mod_navigation ul | + | .mod_navigation ul {} |
| − | .mod_navigation li | + | .mod_navigation li {} |
| − | .mod_navigation .level_2 | + | .mod_navigation .level_2 {} |
| − | .mod_navigation .level_2 li | + | .mod_navigation .level_2 li {} |
.mod_navigation a, | .mod_navigation a, | ||
.mod_navigation li, | .mod_navigation li, | ||
| − | .mod_navigation span | + | .mod_navigation span {} |
.mod_navigation .level_2 a, | .mod_navigation .level_2 a, | ||
.mod_navigation .level_2 li, | .mod_navigation .level_2 li, | ||
| − | .mod_navigation .level_2 span | + | .mod_navigation .level_2 span {} |
/** Accordion **/ | /** Accordion **/ | ||
| − | .ce_accordion | + | .ce_accordion {} |
| − | .toggler | + | .toggler {} |
| − | .toggler_first | + | .toggler_first {} |
| − | .toggler_first:hover | + | .toggler_first:hover {} |
| − | .accordion div | + | .accordion div {} |
/** Login form **/ | /** Login form **/ | ||
| − | .mod_login | + | .mod_login {} |
| − | .mod_login label | + | .mod_login label {} |
| − | .mod_login .checkbox_container | + | .mod_login .checkbox_container {} |
| − | .mod_login .checkbox_container label | + | .mod_login .checkbox_container label {} |
| − | .mod_login .submit_container | + | .mod_login .submit_container {} |
| − | #request_password | + | #request_password {} |
| − | #request_password a | + | #request_password a {} |
/** News **/ | /** News **/ | ||
.mod_newsmenu, | .mod_newsmenu, | ||
| − | .mod_eventmenu | + | .mod_eventmenu {} |
| − | #breaking_news | + | #breaking_news {} |
.mod_newsmenu ul, | .mod_newsmenu ul, | ||
.mod_newsmenu li, | .mod_newsmenu li, | ||
.mod_eventmenu ul, | .mod_eventmenu ul, | ||
| − | .mod_eventmenu li | + | .mod_eventmenu li {} |
.mod_newsmenu .year, | .mod_newsmenu .year, | ||
| − | .mod_eventmenu .year | + | .mod_eventmenu .year {} |
| − | .mod_newslist p | + | .mod_newslist p {} |
| − | .mod_newsreader .back | + | .mod_newsreader .back {} |
.mod_newslist .info, | .mod_newslist .info, | ||
| − | .mod_newsreader .info | + | .mod_newsreader .info {} |
| − | .mod_newslist .layout_short | + | .mod_newslist .layout_short {} |
| − | .mod_newsreader .ce_text | + | .mod_newsreader .ce_text {} |
.mod_article, | .mod_article, | ||
| − | .mod_newsreader | + | .mod_newsreader {} |
| − | .mod_newsreader h2 | + | .mod_newsreader h2 {} |
| − | .mod_newsreader .comment_default | + | .mod_newsreader .comment_default {} |
| − | .mod_newsreader .comment | + | .mod_newsreader .comment {} |
| − | .mod_newsreader .reply | + | .mod_newsreader .reply {} |
| − | .mod_newsreader .form | + | .mod_newsreader .form {} |
| − | .mod_newsreader .widget | + | .mod_newsreader .widget {} |
| − | .mod_newsreader .textarea | + | .mod_newsreader .textarea {} |
/** Search **/ | /** Search **/ | ||
| − | .mod_search | + | .mod_search {} |
| − | .mod_search .text | + | .mod_search .text {} |
| − | .mod_search .radio_container | + | .mod_search .radio_container {} |
| − | .mod_search .radio_container label | + | .mod_search .radio_container label {} |
| − | .mod_search .header | + | .mod_search .header {} |
| − | .mod_search h3 | + | .mod_search h3 {} |
| − | .mod_search .context | + | .mod_search .context {} |
| − | .mod_search .url | + | .mod_search .url {} |
| − | .mod_search .relevance | + | .mod_search .relevance {} |
| − | .mod_search .highlight | + | .mod_search .highlight {} |
/** Calendar **/ | /** Calendar **/ | ||
| − | table.calendar | + | table.calendar {} |
| − | table.calendar .head | + | table.calendar .head {} |
| − | table.calendar .current | + | table.calendar .current {} |
| − | table.calendar .label | + | table.calendar .label {} |
| − | table.calendar td | + | table.calendar td {} |
| − | table.calendar td.weekend | + | table.calendar td.weekend {} |
| − | table.calendar .today | + | table.calendar .today {} |
table.calendar .empty, | table.calendar .empty, | ||
| − | table.calendar .empty .header | + | table.calendar .empty .header {} |
| − | table.calendar td .header | + | table.calendar td .header {} |
| − | table.calendar td .event a | + | table.calendar td .event a {} |
/** Mini calendar **/ | /** Mini calendar **/ | ||
| − | #minicalendar | + | #minicalendar {} |
| − | table.minicalendar | + | table.minicalendar {} |
| − | table.minicalendar td | + | table.minicalendar td {} |
table.minicalendar td, | table.minicalendar td, | ||
| − | table.minicalendar .active a | + | table.minicalendar .active a {} |
| − | table.minicalendar .weekend | + | table.minicalendar .weekend {} |
| − | table.minicalendar .today | + | table.minicalendar .today {} |
| − | table.minicalendar .label | + | table.minicalendar .label {} |
| − | table.minicalendar .head | + | table.minicalendar .head {} |
| − | table.minicalendar .current | + | table.minicalendar .current {} |
/** Events **/ | /** Events **/ | ||
| − | .mod_eventlist | + | .mod_eventlist {} |
| − | .mod_eventlist .header | + | .mod_eventlist .header {} |
| − | .mod_eventlist .header.first | + | .mod_eventlist .header.first {} |
| − | .mod_eventlist .event | + | .mod_eventlist .event {} |
| − | .mod_eventlist .time | + | .mod_eventlist .time {} |
| − | .mod_eventreader .info | + | .mod_eventreader .info {} |
| − | .mod_eventreader .recurring | + | .mod_eventreader .recurring {} |
| − | .mod_eventreader .ce_text | + | .mod_eventreader .ce_text {} |
| − | .mod_eventreader .back | + | .mod_eventreader .back {} |
/** Personal data **/ | /** Personal data **/ | ||
| − | .mod_personalData | + | .mod_personalData {} |
| − | .mod_personalData fieldset | + | .mod_personalData fieldset {} |
| − | *+html .mod_personalData fieldset | + | *+html .mod_personalData fieldset {} |
| − | .mod_personalData legend | + | .mod_personalData legend {} |
| − | .mod_personalData .submit_container | + | .mod_personalData .submit_container {} |
| − | *+html .mod_personalData .submit_container | + | *+html .mod_personalData .submit_container {} |
| − | .mod_personalData td | + | .mod_personalData td {} |
.mod_personalData .text, | .mod_personalData .text, | ||
| − | .mod_personalData .password | + | .mod_personalData .password {} |
| − | .mod_personalData select | + | .mod_personalData select {} |
| − | *+html .mod_personalData select | + | *+html .mod_personalData select {} |
fieldset.radio_container, | fieldset.radio_container, | ||
| − | fieldset.checkbox_container | + | fieldset.checkbox_container {} |
/** Tables **/ | /** Tables **/ | ||
| − | .ce_table | + | .ce_table {} |
| − | .ce_table td | + | .ce_table td {} |
/** Listing **/ | /** Listing **/ | ||
| − | *+html .ce_list li | + | *+html .ce_list li {} |
/** Tables **/ | /** Tables **/ | ||
| − | .ce_table th | + | .ce_table th {} |
| − | .ce_table th a | + | .ce_table th a {} |
/** Pagination **/ | /** Pagination **/ | ||
| − | .pagination li | + | .pagination li {} |
/** Tables **/ | /** Tables **/ | ||
| − | #tps td | + | #tps td {} |
/** Pagination **/ | /** Pagination **/ | ||
| − | .pagination | + | .pagination {} |
/** Tables **/ | /** Tables **/ | ||
| − | #tps .col_0 | + | #tps .col_0 {} |
/** Pagination **/ | /** Pagination **/ | ||
| − | .pagination p | + | .pagination p {} |
/** Tables **/ | /** Tables **/ | ||
| − | #tps .explanation | + | #tps .explanation {} |
/** Pagination **/ | /** Pagination **/ | ||
| − | .pagination ul | + | .pagination ul {} |
| − | + | ||
</source> | </source> | ||
| + | |||
=Hilfreiche Erweiterungen um mit CSS zu arbeiten= | =Hilfreiche Erweiterungen um mit CSS zu arbeiten= | ||
*'''CSS Editor''': Damit ein einfaches bearbeiten der oben aufgeführten CSS "Schnipsel/Klassen/Selektoren" in Contao möglich ist, empfiehlt sich die Erweiterung "csseditor" zu installieren. | *'''CSS Editor''': Damit ein einfaches bearbeiten der oben aufgeführten CSS "Schnipsel/Klassen/Selektoren" in Contao möglich ist, empfiehlt sich die Erweiterung "csseditor" zu installieren. | ||
Version vom 13. Juli 2011, 02:32 Uhr
 |
Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.
Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis. |
| betrifft | |
|---|---|
| Contao Version | ab 2.9 |
Inhaltsverzeichnis
Einleitung
Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt die einem das Leben mit CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen mit sinvollem zu ergänzen.
Voraussetzung
- Contao Installation (Lokale Testumgebungen: Contao2Go:USB-Stick oder Festplatte XAMPP: lokale Entwicklungsumgebung mit XAMPP ).
- HTML und CSS Kenntnisse
Hilfsmittel
Add On's
Tools zum anzeigen CSS spezifischer daten. Nach Browser sortiert (liste unvollständig)
NEU: Firebug Erweiterung für Contao, Mit diesem Modul kann man den abgespeckten Firebug lite in allen Browsern aktivieren.
- Chrome:
- Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str & Shift & I).
- Web-Developer
- Firefox:
Wireframes
Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, bis wo sie eigentlich gehen. Dazu kann mann das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn mann dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann mann verfolgen, welche Abmessungen sich wie ändern.
/* 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 Klassen/Selektoren (aus 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 {}
Hilfreiche Erweiterungen um mit CSS zu arbeiten
- CSS Editor: Damit ein einfaches bearbeiten der oben aufgeführten CSS "Schnipsel/Klassen/Selektoren" in Contao möglich ist, empfiehlt sich die Erweiterung "csseditor" zu installieren.
