Codebeispiel - Unterschiedliche Stile für unterschiedliche Seiten

Beschreibung: Was tun wenn man verschiedene Styles auf verschiedenen Unterseiten benötigt? Beispielsweise möchte man je nach Position innerhalb der Seite andere Templates verwenden (z.B. für die Menüpunkte "Kontakt" und "Startseite"). In diesem Beispiel verwendet die Sektion "Startseite" eine andere Hintergrundfarbe (grau) als alle anderen Sektionen.

Beispiel 5.6. Unterschiedliche Stile für unterschiedliche Seiten - Index.php

<?php
    require '../../../cms/getcontent.php';  //DynPG-Funktionalität einbinden
    $DynPG->SetParam_PathToRoot('../../../cms/');  //DynPG-Pfad setzen
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<title>Hauptmenue-Tutorial</title>
 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
	<?php $DynPG->Write_CSS_JS_Header(); ?>  <!--Standard-Css von DynPG einbinden-->
 
	<link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
</head>
 
 
<body>
	<h1>Hauptmenue-Tutorial</h1>
 
	<table  border="0">
	<tr valign="top">
		<th align="left" style="width:230px" id="hauptmenue">
		<div style="border: 3px black solid">
		<?php
		//für alle anderen Gruppen Datei index.php verwenden
		$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../examples/code/different_page_styles/index.php');
 
		//für Gruppe mit ID 1 (Startseite) eine andere Datei (details.php) verwenden
		//(ID kann variieren, im Backend steht die ID der jeweiligen Gruppe)
		$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../examples/code/different_page_styles/details.php{query}'));
 
		$DynPG->SetParam_A_Anytime(true);	//immer anzeigen
		$DynPG->SetParam_A_Article(15);
		$DynPG->Write_Article();
		?>
		</div>
		</th>
 
		<th id="anzeige">
		<div style="border: 3px black solid">
		<?php
		$DynPG->SetParam_A_Anytime(false);  //nur anzeigen, wenn es der Kontext (also Position im Menü) es vorgibt!
		$DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
		$DynPG->Write_AllArticles();
		$DynPG->Write_Article();
		?>
		</div>
		</th>
		</tr>
	</table>
 
</body>
 
 
</html>

Beispiel 5.7. Unterschiedliche Stile für unterschiedliche Seiten - details.php

<?php
    require '../../../cms/getcontent.php';  //DynPG-Funktionalität einbinden
    $DynPG->SetParam_PathToRoot('../../../cms/');  //DynPG-Pfad setzen
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<title>Hauptmenue-Tutorial</title>
 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
	<?php $DynPG->Write_CSS_JS_Header(); ?>  <!--Standard-Css von DynPG einbinden-->
 
	<link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
</head>
 
 
<body>
	<h1>Hauptmenue-Tutorial</h1>
 
	<table  border="0">
		<tr valign="top">
		<th align="left" style="width:230px" id="hauptmenue">
		<div style="border: 3px black solid">
		<?php
		//für alle anderen Gruppen Datei index.php verwenden
		$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../examples/code/different_page_styles/index.php');
 
		//für Gruppe mit ID 1 (Startseite) eine andere Datei (details.php) verwenden
		//(ID kann variieren, im Backend steht die ID der jeweiligen Gruppe)
		$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../examples/code/different_page_styles/details.php{query}'));
 
		$DynPG->SetParam_A_Anytime(true);	//immer anzeigen
		$DynPG->SetParam_A_Article(15);
		$DynPG->Write_Article();
		?>
		</div>
		</th>
 
		<th id="anzeige">
		<div style="border: 3px black solid; background-color: #ddd;" >
		<?php
		$DynPG->SetParam_A_Anytime(false);	//nur anzeigen, wenn es der Kontext (also Position im Menü) es vorgibt!
		$DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
		$DynPG->Write_AllArticles();
		$DynPG->Write_Article();
		?>
		</div>
		</th>
		</tr>
	</table>
</body>
 
 
</html>

Beispiel 5.8. Unterschiedliche Stile für unterschiedliche Seiten - CSS-Datei

/*alle Links schwarz*/
a{color: black;}
 
 
 
/*===========================Hauptkategorien des Menüs==============================*/
#hauptmenue p{
	text-align: left;
}
 
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
#hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp
{
	padding: 0px 0px 5px 0px;
}
 
 
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p, 
#hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p
{
	position: relative;
	left: 40px;
}
 
/*Hintergrundbild für Menüeintrag1 setzen (passiv) 
(ACHTUNG: Die Nummer variiert bei jedem System!!!
Um sie herauszufinden muss im Quellcode der generierten HTML-Datei nachgeschaut werden, also einfach im Browser
den Quelltext anzeigen lassen!)*/
#group_fold_6 .level_0_r_i_exp 
{
	background: url("images/warning1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag1 setzen (aktiv)*/
#group_fold_6 .level_0_r_i_exp_hover, 
#group_fold_6 .level_0_r_a_exp_hover, #group_fold_6 .level_0_r_a_exp
{
	background: url("images/warning2.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag2 setzen (passiv) */
#group_fold_5 .level_0_r_i_exp 
{
	background: url("images/important1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag2 setzen (aktiv)*/
#group_fold_5 .level_0_r_i_exp_hover, 
#group_fold_5 .level_0_r_a_exp_hover, #group_fold_5 .level_0_r_a_exp
{
	background: url("images/important2.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag3 setzen (passiv) */
#group_fold_2 .level_0_r_i_exp 
{
	background: url("images/note1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag3 setzen (aktiv)*/
#group_fold_2 .level_0_r_i_exp_hover, 
#group_fold_2 .level_0_r_a_exp_hover, #group_fold_2 .level_0_r_a_exp
{
	background: url("images/note2.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag4 setzen (passiv) */
#group_fold_7 .level_0_r_i_exp 
{
	background: url("images/tip1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag4 setzen (aktiv)*/
#group_fold_7 .level_0_r_i_exp_hover, 
#group_fold_7 .level_0_r_a_exp_hover, #group_fold_7 .level_0_r_a_exp
{
	background: url("images/tip2.gif") no-repeat left top;
}
 
 
 
/*Hintergrundbild für Menüeintrag5 setzen (passiv) */
#group_fold_1 .level_0_r_i_exp 
{
	background: url("images/caution1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag5 setzen (aktiv)*/
#group_fold_1 .level_0_r_i_exp_hover, 
#group_fold_1 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp
{
	background: url("images/caution2.gif") no-repeat left top;
}
 
 
/*===========================Sub-Kategorien==============================*/
 
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p, 
#hauptmenue .level_1_r_a_exp_hover p, #hauptmenue .level_1_r_a_exp p
{
	position: relative;
	left: 60px;
}
 
 
/*===========================Sub-Sub-Kategorien==============================*/
 
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p, 
#hauptmenue .level_2_r_a_exp_hover p, #hauptmenue .level_2_r_a_exp p
{
	position: relative;
	left: 60px;
}
 
 
 
/*Navigation, Print-Button und Artikelheader unsichtbar machen*/
#dynpg_A_breadcrumb{display: none;}
 
#dynpg_AA_breadcrumb_navi{display: none;}
 
#dynpg_A_btnprint{display: none;}
 
#dynpg_A_header{display: none;}

Beispiel ausführen

Codebeispiel - Unterschiedliche Stile für unterschiedliche Seiten

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Andere Wikis

Werkzeuge