Css ABC in Contao: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(→‎Einleitung)
K (→‎Add On's: Typos)
 
(23 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
[[en:Css_ABC_for_Contao]]
+
{{stub}}[[en:Css_ABC_for_Contao]]
 
[[Category: Erste_Schritte]]
 
[[Category: Erste_Schritte]]
 
{{AppliesTo|Version=ab 2.9}}
 
{{AppliesTo|Version=ab 2.9}}
  
 
=Einleitung=
 
=Einleitung=
−
Dieses Tutorial soll 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.
+
Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt, die einem das Leben mit Contao und CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen, diese Anleitung mit nützlichen Tipps und Tricks zu ergänzen.
  
 
=Voraussetzung=
 
=Voraussetzung=
 +
 +
*Contao Installation. Als z.B. lokale Testumgebungen mit [[Contao2Go]] (auf USB-Stick oder portabler Festplatte) oder [[Xampp_Multidomain|XAMPP]] (lokale Entwicklungsumgebung).
 
*HTML und CSS Kenntnisse
 
*HTML und CSS Kenntnisse
−
 
  
 
=Hilfsmittel=
 
=Hilfsmittel=
 
==Add On's==
 
==Add On's==
−
Tools zum anzeigen CSS spezifischer daten. Nach Browser sortiert (liste unvollständig)
+
Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)
 +
 
 +
*Als Erweiterung in Contao (browserunabhängig)
 +
**[http://www.contao.org/erweiterungsliste/view/Firebug.10000003.de.html 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 (Strg+Shift+I).
 +
**[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer]
 +
 
 +
*Firefox:
 +
**[http://getfirebug.com/ Firebug]
 +
**[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web-Developer]
  
−
Chrome:
+
=Hilfreiche Erweiterungen um mit CSS zu arbeiten=
−
Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str & Shift & I).
+
*[http://www.contao.org/erweiterungsliste/view/csseditor.de.html CSS Editor]: Mit dieser Erweiterung ist ein einfaches Bearbeiten der CSS-Anweisungen in Contao möglich.
−
Web-Developer: https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
+
  
−
Firefox:
+
*[[Layout_additional_sources | Layout Additional Sources]]: Mit dieser Erweiterung lassen sich (unter anderem) einfach zusätzliche Dateien in ein Layout einfügen. Wer gerne seine '''.css und .js''' Dateien mit einem externen Editor verwendet, ist mit dieser Erweiterung auch gut bedient.
−
Firebug: http://getfirebug.com/
+
−
Web-Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
+
  
 
==Wireframes==
 
==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.
+
Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, wo sich diese in der Webseite befinden. Dazu kann man das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn man dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann man verfolgen, welche Abmessungen sich wie ändern.
 
<source lang="css">
 
<source lang="css">
 
/* Style sheet wireframes */
 
/* Style sheet wireframes */
Zeile 41: Zeile 50:
  
 
==CSS Klassen/Selektoren (aus Music Accademy)==
 
==CSS Klassen/Selektoren (aus Music Accademy)==
 +
Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als Basis für das auf der Beispiel-Webseite ''Music Academy'' basierenden Theme verwendet werden.
  
 
<source lang="css">
 
<source lang="css">
 
/** Layout **/
 
/** Layout **/
−
body
+
body {}
−
#left
+
#left {}
−
#top_image
+
#top_image {}
  
  
Zeile 53: Zeile 63:
 
.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>
  
 +
 +
 +
=Beispiele für häufig gestellte Fragen IRC & Forum's=
 +
==Formatieren der Navigation==
 +
'''Unterscheiden zwischen dem Standard-Navigationsmenu und einer individuellen Navigation'''
 +
<source lang="css">
 +
.mod_navigation {} /*Standard-Navigationsmenü*/
 +
.mod_customnav {} /*individiuelle Navigation*/
 
</source>
 
</source>
  
−
=weiteres=
+
'''Formatieren des aktiven Menupunktes'''
 +
<source lang="css">
 +
.mod_navigation .active {}
 +
</source>
 +
 
 +
'''Formatieren des Hauptmenüpunktes, wenn man sich eine Ebene tiefer befindet'''
 +
<source lang="css">
 +
.mod_navigation .trail {}
 +
</source>
 +
 
 +
==Html in einem Artikel verwenden==
 +
==Wie man ein verlinktes Bild im Header einfügt==
 +
==Ein existierendes Layout in Contao verwenden==
 +
 
 
=folgt=
 
=folgt=
 
=in Kürze=
 
=in Kürze=

Aktuelle Version vom 4. September 2011, 14:42 Uhr

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


Einleitung

Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt, die einem das Leben mit Contao und CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen, diese Anleitung mit nützlichen Tipps und Tricks zu ergänzen.

Voraussetzung

  • Contao Installation. Als z.B. lokale Testumgebungen mit Contao2Go (auf USB-Stick oder portabler Festplatte) oder XAMPP (lokale Entwicklungsumgebung).
  • HTML und CSS Kenntnisse

Hilfsmittel

Add On's

Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)

  • Als Erweiterung in Contao (browserunabhängig)
  • Chrome:
    • Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Strg+Shift+I).
    • Web-Developer

Hilfreiche Erweiterungen um mit CSS zu arbeiten

  • CSS Editor: Mit dieser Erweiterung ist ein einfaches Bearbeiten der CSS-Anweisungen in Contao möglich.
  • Layout Additional Sources: Mit dieser Erweiterung lassen sich (unter anderem) einfach zusätzliche Dateien in ein Layout einfügen. Wer gerne seine .css und .js Dateien mit einem externen Editor verwendet, ist mit dieser Erweiterung auch gut bedient.

Wireframes

Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, wo sich diese in der Webseite befinden. Dazu kann man das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn man dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann man 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)

Die Klassen/Selektoren können kopiert und direkt im "csseditor" (Erweiterung) eingefügt werden. Kann als Basis für das auf der Beispiel-Webseite Music Academy basierenden Theme verwendet werden. 

/** 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 {}


Beispiele für häufig gestellte Fragen IRC & Forum's

Formatieren der Navigation

Unterscheiden zwischen dem Standard-Navigationsmenu und einer individuellen Navigation 

.mod_navigation {} /*Standard-Navigationsmenü*/
.mod_customnav {} /*individiuelle Navigation*/

Formatieren des aktiven Menupunktes 

.mod_navigation .active {}

Formatieren des Hauptmenüpunktes, wenn man sich eine Ebene tiefer befindet 

.mod_navigation .trail {}

Html in einem Artikel verwenden

Wie man ein verlinktes Bild im Header einfügt

Ein existierendes Layout in Contao verwenden

folgt

in Kürze

Von „https://de.contaowiki.org/index.php?title=Css_ABC_in_Contao&oldid=4239“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Irgendwie wird es im Mumble immer ruhiger wenn sich der Kim-Faktor verkleinert.

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