[TYPO3-german] CSS Stylesheet Organisation

Tue Apr 1 10:27:56 CEST 2008

Hallo Andreas,
mir scheint der aufwand es über eine extra PHP datei zu machen. ziemlich  
gross.

ich persönlich komme eigendlich immer mit einer einzigen stylesheet datei  
+ css_styled_content
für ein projekt aus.

wenn ich verschiedene "farbschema" habe mache ich das z.b über classen  
oder id's

angenommen ich hätte auf der seite ein rotes und ein blaues schema

html sähe dann so aus:
<body id="red">
	<div id="header"></div>
	<div id="content"></div>
[...]

mein css ungefähr so so:

/* Positionierung */
#content {margin:10px padding:10px; border:2px solid}

/*farbe rot */
#red #header,
#red #content{background-color:#f00}

/*farbe blau */
#blue #header,
#blue #content{background-color:#00f}

ich trenne also postions angaben die immer für alles zutreffen von
farbangaben die nur für einzelne seiten zutreffen. meistens gibts dann

falls es sehr viele farbanpassungen gibt kann man die natürlich auch in  
ein extra stylesheet auslagern

dann hättest du ungfähr sowas:
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="blue.css" type="text/css">

so das man nur kleinigkeiten des defaults überschreibt.
falls es notwendig ist. und den "gemeinsammen code für beides hat.

gruss chris

On Mon, 31 Mar 2008 20:46:55 +0200, Andreas B.  
<ab at web157.webgo24-server11.de> wrote:

> Hallo zusammen,
>
> hab da mal ne Frage. Mir ist aufgefallen, dass man ja doch sehr viel  
> Zeit damit verbringt die Seiten zu formatieren, und dass ich immer  
> wieder in diverse CSS-Dateien z.B. die gleichen Farben eintrage.
>
> Mein Ansatz zur Optimierung war folgender, und ich würd gerne von euch  
> wissen, ob das so in Ordnung ist, oder ob es irgendwie einfacher geht.
>
> Mein Metatag in der HTML-Datei sieht so aus:
>
> <link rel="stylesheet" href="style.php" type="text/css">
>
> also keine CSS- sondern eine PHP-Datei.
>
> Damit das auch geht, steht in der style.php folgendes:
>
> <?php
>   header("Content-type: text/css");
>   include "includes/style_conf.inc";
>
> echo <<<EOT
> /* Grundeinstellungen */
> body {
>   font-family: $schriftart;
>   color: $font;
>   background: $back $back_body;
>   border: solid 10px $spot;
> }
> a {
>   color: $link; }
> /* to be continued */
> EOT;
> ?>
>
> Es wird in Zeile 3 also auch noch eine style_conf.inc includet, in  
> welcher die Standartwerte definiert sind. Sie sieht ungefähr so aus:
>
> <?php
>   // Farben
>   $font  = "#000000"; // Farbe Schrift
>   $back  = "#ffffff"; // Farbe Hintergrund
>   $spot  = "#ffff00"; // Farbe für Hervorgehobenes
>   $links = "#0000ff"; // Farbe für Links
>   $black = "#000000"; // Schwarz
>   $white = "#ffffff"; // Weiß
>   $error = "#ff0000"; // Fehlerfarbe
>   $even  = "#999999"; // Gerade Zeilennummern
>   $odd   =     $back; // Ungerade Zeilennummern
>
>   // Hintergrundbilder
>   $back_body      = "url(_pics/back_body.gif) no-repeat;";
>   $back_menu      = "url(_pics/back_menu.gif) no-repeat;";
>   $back_header    = "url(_pics/back_header.gif) no-repeat;";
>   $back_content   = "url(_pics/back_content.gif) no-repeat;";
>   $back_footer    = "url(_pics/back_footer.gif) no-repeat;";
>   $back_guestbook = "url(_pics/back_guestbook.gif) repeat-x;";
>
>   // Sonstiges
>   $schriftart = "Verdana, Arial, Helvetica, sans-serif";
> ?>
>
> Man könnte in dieser Datei sogar noch Browserweichen einbauen wie z.B.  
> folgende, wo allen IEs kleiner als 7, GIFs anstelle von PNGs geliefert  
> werden.
>
>   $png = ".png"; // normale Dateiendung
>   $browser = $_SERVER['HTTP_USER_AGENT'];
>   $start = stripos($browser, "MSIE ");
>   $browser = $start ? substr($browser, $start+5, 1) : 999;
>   if($browser < 7) {
>     $png = ".gif"; // Dateiendung für IE<7 gleich .gif
>   }
>
> Nun kann ich durch Änderungen in dieser style_conf.inc mit einem Schlag  
> die einzelnen Farben des gesammten Projekts bearbeiten. Dieses Konzept  
> habe ich in älteren Projekten von mir angewendet und es hat sich  
> wirklich bewährt, die Frage für mich ist jetzt, da ich jetzt an meinem  
> ersten Typo3 Projekt arbeite: Macht das mit Typo3 Sinn, geht das, oder  
> geht es sogar einfacher.
>
> Gruß Andreas
>
>
>

-- 
Christian Wolff // Berlin
http://www.connye.com

Latest Projects:
http://www.flycall.de | http://www.atr24.de | http://www.titanic.de