CSS durch Code in node einbinden
Eingetragen von Anonymous (0)am 27.07.2005 - 15:17 Uhr in
Wenn Drupal die nodes läd und themed, wurde die page noch nicht gethemed.
Das bedeuted insbesondere, dass man in ein node Code schreiben kann, der Attribute der page ändert.
Im Folgen wird beschrieben, wie man so eine zusätzliche CSS Datei einbinden kann. Diese CSS Datei kann zum einen neue Klassen definieren, und zum anderen die Attribute bestehender Klassen und Elemente ändern.
Diese CSS Datei (xxx.css) beispielsweise:
/* new class */
div.beispiel {
font-size: 2em;
color: red;
border: 1px solid silver;
padding: 3px;
text-align: center;
font-weight: bold;
}
/* global overide */
body {
background-color: #f8f8ff;
}Wenn man diese Datei im Verzeichnis des benutzten themes platziert, wäre folgender Code im node nötig:
<?php
global $theme;
if (!$theme) $theme = init_theme();
theme_add_style(path_to_theme() . '/xxx.css');
?>
<div class="beispiel">
Beispiel
</div>- Anmelden oder Registrieren um Kommentare zu schreiben
interessante Möglichkeit
am 28.07.2005 - 08:23 Uhr
interessante Möglichkeit die ich so noch gar nicht probiert hab, müßte da nicht bei mehreren nodes auch mehrmals das
stylesheet hinzugefügt werden ?
ich persönlich tendiere eher dazu, jegliche Logik von der Darstellung (den *.tpl.phps) fernzuhalten und mache das jeweils via zentraler template.php (quasi eine weitere Darstellungsschicht im MVC Modell)
mittels
<?phpfunction _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
...zusätzliche Logik
$stylesheet = $vars['directory'].'DieStyleDatei.css';
$vars['styles'] .= theme_stylesheet_import($stylesheet, $media = 'all');
}
// calling function expects an array
if (empty($vars)) {
$vars = array();
}
return $vars;
}
?>
Ja und Nein
am 31.07.2005 - 20:18 Uhr
(1) Ja. Wenn man diesen Code in mehreren Nodes einfügt, wird das Stylesheet mehrfach importiert, wenn denn die Nodes mit dem gleichen Stylesheet auf der selben Seite ausgeführt werden.
Abhilfe durch eine kleine Veränderung im Code:
<?phpglobal $theme;
if (!$theme) $theme = init_theme();
$the_theme = path_to_theme() . '/xxx.css';
if ( array_search($the_theme, theme_add_style()) === FALSE )
theme_add_style($the_theme);
?>
(2) Dein Code demonstriert nicht, wie man einem ganz speziellen Node ein CSS hinzufügt. Bei dir wird allen Nodes vom Typ page das gleiche Stylesheet hinzugefügt. Bei mir ging es um ein einzelnes Node, egal von welchem Typ.
hmm mit fehlt ein
am 01.08.2005 - 08:14 Uhr
hmm mir fehlt ein entsprechender Anwendungsfall
aber du hast Recht, deine Lösung ist für den Fall, wenn man nur einen ganz besonderen Node anders darstellen will, perfekt
evtl. etwas wartungsfreundlicher wäre wohl eine flexinode Variante und entsprechender Style-Zuweisung via template.php, das schreib ich aber nur, falls das mal jemand braucht
css dynamisch
am 09.09.2005 - 12:15 Uhr
Um css dynamisch einzubinden, oder besser gesagt um dynamisch CSS-formatierungen vorzunehmen, gibt es noch eine andere interessante möglichkeit. Damit sparst du dir die arbeit, aufwändig irgendwelchen applikationscode zu ändern.
Mache einfach aus der CSS-datei eine PHP-datei (z. bsp. meine.css.php) und passe den link zur CSS-datei im header an. Damit kannst du dann innerhalb der CSS-datei, die ja dann eine PHP-datei ist, dynamisch CSS-formatierungen durchführen.
Da aber manche Browser so eine CSS-datei beim laden fehlerhaft interpretieren (wird nicht als CSS-datei erkannt), muss in dieser CSS-datei noch per PHP ein CSS-header gesendet werden.
Da ich gerade nicht an meinem rechner sitze, werde ich den PHP-code zum senden des CSS-headers heute abend posten.
Ich habe das beschriebene auf meinem rechner mal ausprobiert. Es funktioniert. Man kann damit mit einer CSS-datei umgehen wie mit einer PHP-datei.
Re: css dynamisch
am 27.09.2005 - 18:37 Uhr
Da aber manche Browser so eine CSS-datei beim laden fehlerhaft interpretieren (wird nicht als CSS-datei erkannt), muss in dieser CSS-datei noch per PHP ein CSS-header gesendet werden.
Ich denke das ist nicht ganz korrekt. Der Browser sollte sich nach der W3C Empfehlung nach dem Header der Datei richten und nicht nach der Dateiendung. Internet Explorer macht hier mal wieder eine unrühmliche Ausnahme und kümmert sich nicht um den Header. Das was Du als "fehlerhafte Interpretation" (Mozilla, Firefox) bezeichnest ist eigentlich das standardkonforme Verhalten.
Ich weiss das dies häufig falsch dargestellt wird: http://www.css-technik.de/details/284/5/CSS-Browser-Bugs.htm
Siehe dazu jedoch unter "Topical notes added in 2002-3" http://ppewww.ph.gla.ac.uk/~flavell/www/content-type.html
Man kann damit mit einer CSS-datei umgehen wie mit einer PHP-datei.
Das habe ich auch schon mal versucht. Funktioniert. Ich bin aber wieder von dieser Technik abgekommen, da es dann zu Problemen mit dem Browsercache kommen kann. Der Gag bei externen Style-Sheets ist ja gerade, dass sie gecached werden können und dadurch die HTML-Dateien kleiner sind. Wenn Du jetzt hingehst und per PHP das Style-Sheet änderst muss jedesmal zusätzlich das Style-Sheet abgerufen werden.
Ich denke eine sinnvollere Technik ist es für die Seite ein zusätzliches Style-Sheet zu schreiben und dieses zusätzlich einzubinden. Siehe auch unter Corporate Design mit CSS http://www.heise.de/ix/artikel/2003/03/050/
Blog Theme
am 27.09.2005 - 21:00 Uhr
... ist vielleicht eine Lösung ... Link zum Modul: http://drupal.org/node/19248
mfg holger
www.ebec.net | www.stnetwork.de