Difference between revisions of "Css ABC for Contao"

From Contao Community Documentation

(Created page with '=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 Foru…')
 
(Undo revision 1091 by AnaCarter (Talk))
 
(19 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
{{stub}}[[de:Css_ABC_in_Contao]]
 +
[[Category:First_steps]]
 +
{{AppliesTo|Version=for 2.9}}
 +
 
=Introduction=
 
=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.
+
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=
 
=Requirements=
−
Knoledge of HTML and CSS  
+
*Contao Installation ( Local test-environments: '''Contao2Go''': [http://de.contaowiki.org/Contao2Go (just german jet) USB-Stick oder Festplatte]  '''XAMPP''': [http://de.contaowiki.org/Xampp_Multidomain (just german jet) lokale Entwicklungsumgebung mit XAMPP] ).
 +
*Knoledge of HTML and CSS
  
 
=Resources=
 
=Resources=
 +
==Add On's==
 
Tools to show CSS specific data in a Webbrowser. Listed by Browsers (incomplete list).
 
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
+
'''NEW''':   [http://www.contao.org/extension-list/view/Firebug.10010009.en.html Firebug Extention for Contao], Activates Firebug lite in all browser for your website development.
  
−
Firefox: Firebug: http://getfirebug.com/ Web-Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/  
+
*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/
  
−
==Add On's==
 
 
==Wireframes==
 
==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.
 +
 +
<source lang="css">
 +
/* 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;}
 +
</source>
 +
 
==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>
 +
 +
=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.
 +
 +
=Examples frequently asked in IRC & Forum's=
 +
==Using html within a article==
 +
 +
==How to insert linked header-pictures==
 +
 +
==Create a existing Layout with contao Selectors==
 +
== ... ==
 +
 
=more=
 
=more=
 +
 
=soon=
 
=soon=

Latest revision as of 09:09, 16 February 2012

Stub.png 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


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

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.

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.

Examples frequently asked in IRC & Forum's

Using html within a article

How to insert linked header-pictures

Create a existing Layout with contao Selectors

...

more

soon

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

Contao Community Documentation

In other languages
Navigation
Discover
Understand
Enhance
Miscellaneous
Tools