css Style Änderung abhängig zur aktuellen Seite

HansiLick · #1 (**permalink**) 02.01.2013, 20:43

Hi,
ich habe meine css Style alles ausgelagert in einer css Datei.

Auf manchen Seiten soll jedoch das Layout geändert werden.
Aktuell habe ich auf der entsprechenden Seite dann im head-Teil die css aufgeführt, die geändert werden sollen und somit überschreiben die ja den Befehl aus der ausgelagerten Datei.

Ist mir auf Dauer, vor allem wenn weitere Seiten hinzukommen, zu stressig und würde diese css Änderungen gerne auch in der allgemeinen css Datei aufführen.

Geht das irgendwie... Wäre super, wenn ich der entsprechenden Seite eine id geben könnte und dann in der ausgelagerten css Datei ein Bereich aktiviert wird, der auf die id anspringt...

Diese Teile ändern sich und stehen bei mir dann so oder abgeändert auf entsprechenden Seiten...
also nicht nur ein zwei Sachen, sondern schon mehrere, sonst hätte ich einfach eine neue class hinzugefügt...

Code:

<style type="text/css">
<!--
body{
	background: url(../img_layout/hg_2_gelb.png);
}
#wrapper{
	background: #ffffff url(../img_layout/hg_1_gelb.png) repeat-y left top;
}

#navi ul li a:hover, #navi ul li a.aktiv{
	background: url(../img_layout/hg_3_gelb.png) repeat left top;
}
#navi ul li ul li a:hover, #navi ul li ul li a.aktiv{
	background: url(../img_layout/hg_3_gelb.png) repeat left top;
}

#header{
	background: url(../img_layout/gelb.png) no-repeat right top;}
td{vertical-align: top;}
</style>

gabischatz · #2 (**permalink**) 02.01.2013, 21:34

Hi um so säter du Style angaben machst desto ehr werden diese angezeigt.
Alternativ kannst du mit php prüfen ob deine Seite ein Kriterium erfüllt und dann die entsprechende Datei laden.
Hier mal ein Beispiel aus WP:

PHP-Code:


			
<link rel='stylesheet' id='original_stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/css.css?ver=3.5' type='text/css' media='all' />

<?php if ( is_page(112) || is_page(550) || is_page(607)) {

/**

 * 607 = Startseite

 * 550 = Terminseite

 * 112 = Gästebuchsete



**/

?>

<meta http-equiv="pragma" content="no-cache" /> <?php //Verhindert das Webseiten oft auf Proyservern gespeichert werden. * Die Nutzung empfiehlt sich allerdings nur bei Seiten, die mehrmals täglich neue Inhalte präsentieren. ?>

<meta http-equiv="cache-control" content="no-cache" />



<meta http-equiv="expires" content="-1" /> <?php // ?>

    <?php if ( is_page(607)) {?>

<meta name="robots" content="nosnippet" /> <?php // Unterbindet das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse. ?>

    <?php }?>

    <?php if ( is_page(112)) {?>

<meta name="robots" content="nofollow" /> <?php //Der Suchroboter darf die Webseite zwar aufnehmen, aber soll den Hyperlinks auf der Seite nicht folgen. ?>

<link rel='stylesheet' id='stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/geastebuch.css?ver=3.5' type='text/css' media='all' />

    <?php }?>

<?php }else{?>

<meta http-equiv="cache-control" content="cache" /> <?php //Damit wird der Browser aufgefordert, die Seite im lokalen Speicher zu cachen. ?>

<?php }?>

MfG

HansiLick · #3 (**permalink**) 02.01.2013, 21:38

Muss ich dann die if clause in den head teil der einzelnen Seite setzen oder geht das auch im externen css Sheet?

Wie kann ich die Seiten mit den Nummern deklarieren?

Manfred62 · #4 (**permalink**) 03.01.2013, 06:19

gib einfach auf jeder Seite dem body eine individuelle id.

HansiLick · #5 (**permalink**) 03.01.2013, 15:00

Quasi so?

HTML-Code:

<body id="1">

Muss ich das dann in head Teil der Seiten machen, oder kann ich das in die ausgelagerte Css Datei stecken?
Muss dazu der Code noch umgewandelt werden?

Sollte es nicht in die externe Datei gehen, würde ich es in einer seperaten php Datei speichern und per include einbinden, so müsste ich nur diese eine Datei bei gewünschten Änderungen ändern.

Gibt es einen besseren Vorschlag?

Manfred62 · #6 (**permalink**) 03.01.2013, 15:30

Code:

<body id="seite1">

so gehört es ins html. Die css-Anweisungen kommen dann in die externe css Datei.
BTW: was willst du denn dort umwandeln?

HansiLick · #7 (**permalink**) 03.01.2013, 15:48

Zitat:

Zitat von Manfred62

Code:

<body id="seite1">

so gehört es ins html. Die css-Anweisungen kommen dann in die externe css Datei.
BTW: was willst du denn dort umwandeln?

Umwandeln?
Ich war mir nur nicht sicher, ob der php-Code, der oben geschrieben wurde, so von mir einfach in die css-Datei geschrieben werden kann. Oder ob man den vorher "auf css" umwandeln muss.

Das kann ich dann also einfach so in die css Datei schreiben?

PHP-Code:


			
<?php if ( is_page(112) || is_page(550) || is_page(607)) { 

/** 

 * 607 = Startseite 

 * 550 = Terminseite 

 * 112 = Gästebuchsete 



**/ 

?> 

<meta http-equiv="pragma" content="no-cache" /> <?php //Verhindert das Webseiten oft auf Proyservern gespeichert werden. * Die Nutzung empfiehlt sich allerdings nur bei Seiten, die mehrmals täglich neue Inhalte präsentieren. ?> 

<meta http-equiv="cache-control" content="no-cache" /> 



<meta http-equiv="expires" content="-1" /> <?php // ?> 

    <?php if ( is_page(607)) {?> 

<meta name="robots" content="nosnippet" /> <?php // Unterbindet das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse. ?> 

    <?php }?> 

    <?php if ( is_page(112)) {?> 

<meta name="robots" content="nofollow" /> <?php //Der Suchroboter darf die Webseite zwar aufnehmen, aber soll den Hyperlinks auf der Seite nicht folgen. ?> 

<link rel='stylesheet' id='stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/geastebuch.css?ver=3.5' type='text/css' media='all' /> 

    <?php }?> 

<?php }else{?> 

<meta http-equiv="cache-control" content="cache" /> <?php //Damit wird der Browser aufgefordert, die Seite im lokalen Speicher zu cachen. ?> 

<?php }?>

Thielo · #8 (**permalink**) 03.01.2013, 17:17

Vergiss alles was in dem PHP-Code steht. Vergiss es einfach komplett

In die CSS-Datei gehört kein PHP (Außer man nutzt Variablen in der CSS-Datei die erst geparst werden müssen) und das was im genannten PHP steht, wird im header einer normalen Seite benutzt, was also nichts mit CSS zu tun hat.

Ebenfalls muss nichts umgewandelt werden.

Sehen wir folgende Beispiele:

HTML-Code:

<body><h1>Ich bin eine Überschrift</h1></body>

HTML-Code:

<body id="kontaktseite"><h1>Ich bin eine Überschrift</h1></body>

Du könntest nun die Überschrift im 2. Code-Container mit dem Selektor

Code:

#kontaktseite h1

ansprechen.

Vielleicht hilft dir diese Erklärung etwas

Manfred62 · #9 (**permalink**) 03.01.2013, 17:26

das mit dem php ist Stuss...
Noch ein Hinweis: eine id oder class muss mit einem Buchstaben anfangen.

Beispiel:

Code:

html:
<body id="seite1">
<body id="seite2">
<body id="seite3">

css:
#seite1 #wrapper {background: red;}
#seite2 #wrapper {background: blue;}
#seite3 #wrapper {background: green;}

HansiLick · #10 (**permalink**) 03.01.2013, 17:59

Zitat:

Zitat von Thielo

...

Danke auch für deine Erklärung.
Mir war im php Code aber nicht so ganz klar welcher Abschnitt nun die Bedingung und welcher die Auswirkung behandelt... konnte kein eindeutiges Muster im Code erkennen.

Zitat:

Zitat von Manfred62

das mit dem php ist Stuss...
Noch ein Hinweis: eine id oder class muss mit einem Buchstaben anfangen.

Beispiel:

Code:

html:
<body id="seite1">
<body id="seite2">
<body id="seite3">

css:
#seite1 #wrapper {background: red;}
#seite2 #wrapper {background: blue;}
#seite3 #wrapper {background: green;}

Die Idee ist natürlich am einfachsten, hab ich aber auch gar nicht dran gedacht...

Habe es nun so umgesetzt, jedoch ein Problem dabei.
Leider wird der code nicht übernommen...
Auch das Ändern der Bild URL mit fixem Pfad brachte keine Besserung.

Aktuell folgender Code:

HTML:

HTML-Code:

<link href="gb_style.css" rel="stylesheet" type="text/css">

<body id="nord_osten">

In der CSS-Datei:

PHP-Code:


			
#nord-osten body{
    background: url(../img_layout/hg_2_gelb.png);
}
#nord-osten #wrapper{
    background: #ffffff url(../img_layout/hg_1_gelb.png) repeat-y left top;
}

#nord-osten #navi ul li a:hover, #nord-osten #navi ul li a.aktiv{
    background: url(../img_layout/hg_3_gelb.png) repeat left top;
}
#nord-osten #navi ul li ul li a:hover, #nord-osten #navi ul li ul li a.aktiv{
    background: url(../img_layout/hg_3_gelb.png) repeat left top;
}

#nord-osten #header{
    background: url(../img_layout/gelb.png) no-repeat right top;}
#nord-osten td{vertical-align: top;}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
druck css problem: nur eine Seite wird ausgeduckt	diegaby	CSS	5	14.12.2010 16:49
CSS Style Seite komplett 100% Höhe	webdino	CSS	6	17.06.2010 15:28
Erste Seite mit CSS: Was kann man verbessern?	vht	Site- und Layoutcheck	4	08.11.2009 14:32
CSS Befehl(e) für Verlängerung der Seite	Angora	CSS	3	16.05.2008 16:43
Seite "halbiert" nach Klick auf Link - CSS Bug?	Nina	CSS	1	14.01.2004 14:20