Css ABC in Contao

Aus Contao Community Documentation


betrifft
Contao Version ab 2.9


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

  • HTML und CSS Kenntnisse


Hilfsmittel

Add On's

Tools zum anzeigen CSS spezifischer daten. Nach Browser sortiert (liste unvollständig)

Chrome: Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str & 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

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

weiteres

folgt

in Kürze

Ansichten
Meine Werkzeuge

Contao Community Documentation

Meiner Meinung nach, sollten zu kleine Webspacepakete entweder Webspaß-Pakete (man beachte die Ironie) oder Horsting-Pakete heißen!

Sascha Müller
In anderen Sprachen
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge