Difference between revisions of "Css ABC for Contao"

From Contao Community Documentation

(→‎Add On's)
(→‎CSS Classes/Selectors (from Music Accademy))
Line 37: Line 37:
  
 
==CSS Classes/Selectors (from Music Accademy)==
 
==CSS Classes/Selectors (from Music Accademy)==
 +
 +
<source lang="css">
 +
/** 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
 +
 +
</source>
  
 
=more=
 
=more=
 
=soon=
 
=soon=

Revision as of 06:15, 7 July 2011

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).

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

more

soon

Retrieved from "https://en.contaowiki.org/index.php?title=Css_ABC_for_Contao&oldid=873"
Views
Personal tools

Contao Community Documentation

Navigation
Discover
Understand
Enhance
Miscellaneous
Tools