Blogarchiv
- May 2012
- March 2012
- February 2012
- January 2012
- November 2011
- October 2011
- September 2011
- July 2011
- June 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- May 2010
- April 2010
- March 2010
- January 2010
- December 2009
- October 2009
- August 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- February 2008
Der Trick: Stylesheets aufteilen – aber wie?
Es macht echt Sinn, sein Stylesheet in mehrere kleine Stylesheets aufzuteilen. Statt einem großen hat man dann viele kleine. Sehr sinnvoll. Wenn man dann schnell mal eine Änderung machen möchte, kann man das recht fix erledigen.
Wenn man eine Website von Hand erstellt, geht das Zerlegen des Stylesheets recht einfach. Man macht einfach aus der einen großen Datei (im Beispiel styles.css genannt) viele kleine Dateien (zum Beispiel fundament.css für radikales Reset, layout.css für grobes Layout, sonstige-styles.css für die Feinheiten). Wie das geht, ist klar: Man öffnet die styles.css, erstellt eine neue CSS- Datei und kopiert bestimmte Code- Abschnitte in die neue CSS- Datei hinein, die man dann am Ende zum Beispiel fundament.css nennt. Diese vielen kleinen Stylesheets kann man dann entweder direkt im HTML einbinden, nach dem Motto:
<head> ... <link rel="stylesheet" type="text/css" href="fundament.css"> ... </head>
Auf diese Weise kann man dann alle CSS- Dateien nacheinander im HTML einbinden.
Möglichkeit zwei ist aber viel eleganter: Man erstellt eine CSS- Datei, nennt sie zentrale.css (oder so ähnlich) und bindet in dieser zentrale.css die einzelnen Stylesheets mit der @import- Regel ein:
@import url("fundament.css"); ...
Im HTML wird dann nur (mit dem <link>- Element, siehe oben) die zentrale.css aufgerufen, der Quellcode wird dadurch ein wenig übersichtlicher gehalten.
Tipp: In Wordpress mit mehreren Stylesheets arbeiten
Natürlich kann man auch in Wordpress mit mehreren Stylesheets arbeiten. Bei meinen Versuchen, mein Stylesheet aufzuteilen, stellte sich heraus, dass es nicht mit der @import- Regel, die ich in styles.css eingebunden hatte, klappt.
Nach ein wenig googeln habe ich allerdings folgendes herausgefunden:
- Die fertigen kleinen Stylesheets werden in den Hauptordner deines Themes, wo auch die
styles.cssliegt, abgelegt und mit dem FTP- Programm deiner Wahl (mein persönlicher Favorit ist der Filezilla, ein Open-Source- Programm, das es auch für Linux gibt) in den Hauptordner deines Themes auf dem Webserver hochgeladen. - Öffne nun in Wordpress die Datei header.php in dem Wordpress- eigenen Editor.
- Gehe zu der Zeile, wo das Hauptstylesheet styles.css eingebunden wird:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> Füge – am Besten direkt unter dieser Zeile – folgende Zeile ein:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/comments.css" media="screen"/>comments.csssoll hier nur als Beispiel dienen. Füge stattdessen die Namen deiner Stylesheets ein – für jedes Stylesheet ein solches<link>- Element. Fertig.
Kommentare
Zu diesem Beitrag wurden keine Kommentare verfasst.