[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • Navigation per CSS-Datei anpassen

REDAXO Forum

Diskussionen, Fragen rund um das CMS REDAXO
https://redaxo.org/forum/

Navigation per CSS-Datei anpassen

https://redaxo.org/forum/viewtopic.php?t=36

Seite 1 von 1

Navigation per CSS-Datei anpassen

Verfasst: 6. Sep 2004, 19:47
von Thomas.Blum
Downloadbar unter http://www.blumbeet.com/download/bb_navigation.rar


Nachfolgend die Css-Datei (Beschreibung ist in jener)
Speichern als bb_navigation.css

Code: Alles auswählen

/*******************************************************************************

	Datei		:	bb_navigation.css
	Projekt		:	Redaxo Navigation
	Beschr		:	CSS Datei fuer NavigationsTemplate
					bb_navigation.template 
					
					In eure Standard-CSS-Datei bitte folgendes notieren
						@import url(/DEIN-CSS-PFAD/bb_navigation.css);

					
					FOLGENDES SOLLTE IN EURER STANDARD-CSS-DATEI NICHT FEHLEN 
						body { padding:0px; margin:0px; background-color:#FFFFFF; color:#000000; font-family: verdana, arial, helvetica, sans-serif; font-size:11px; }
						table { border:0px none #FFFFFF; padding:0px; margin:0px; border-spacing:0px; }
						tr { border:0px none #FFFFFF; padding:0px; margin:0px; }
						td { border:0px none #FFFFFF; padding:0px; margin:0px; vertical-align:top; }
						img { border:0px none #FFFFFF; }
						a, a:link, a:visited { text-decoration:none; color:#000000; }
						a:hover { text-decoration:underline; color:#000000; }
					DAMIT WIRD ALLES ERSTEINMAL AUF NULL GESETZT, DAMIT MAN DANACH AN DAS GESTALTEN GEHEN KANN 
					
	Autor		:	ORIGINAL
					Thomas Blum (TBaDDadE)
					mail[at]blumbeet.com
					http://www.blumbeet.com
					
	Erstellt	:   06.09.2004
	Modifiziert	:


	© BLUMBEET, http://www.blumbeet.com, 2004 BY THE GNU GENERAL PUBLIC LICENSE
*******************************************************************************/
	

/*******************************************************************************
	NAVIGATION
	
	Anmerkung:
	MainMenu = Hauptnavigation = Hauptordner im RedaxoBackend
	SubMenu = Unternavigation = Unterordner vom Hauptordnern im RedaxoBackend
	
	Aktiv = Status bei der aufgerufenen Seite
	Inaktiv = Status bei der nicht aufgerufenen Seiten
	
	Icon =	wenn Icon gewuenscht dann im Template die Pfade, Breite und Hoehe anpassen (Zeile 38 + 39)
			wenn kein Icon gewuenscht dann im Template die Breite und Hoehe auf 0 einstellen (Zeile 38 + 39)
	Button = der Button als solches
	
	
	SourceCode der ausgegeben wird bzw. hier zur Veranschaulichung wo sich die einzelnen Klassen befinden
	
	<table class="Menu" cellspacing="0">
	<tr>
		<td>
		<table id=MainMenu class=MainMenu cellspacing=0>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=1>HOME</a></td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=3>NEWS</a></td>

		</tr>
		<tr>
			<td class=MainAktivIcon><img src=/files/na.gif width=0 height=0 alt=blank /></td>
			<td class=MainAktivButton><a href=index.php?article_id=2>BOARDS</a></td>
		</tr>
		<tr>
			<td class=MainInaktivIcon></td>
			<td>
			<table id=SubMenu class=SubMenu cellspacing=0>
			<tr>
				<td class=SubInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
				<td class=SubInaktivButton><a href=index.php?article_id=17>ALLGEMEIN</a></td>
			</tr>
			<tr>
				<td class=SubInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
				<td class=SubInaktivButton><a href=index.php?article_id=18>LERN MICH KENNEN</a></td>
			</tr>
			<tr>
				<td class=SubInaktivIcon></td>
				<td class=SubInaktivButtonLeer>&nbsp;</td>
			</tr>
			</table>
			</td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=8>OPEN BOARD</a></td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=5>USERLISTE</a></td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=21>TEST Board</a></td>
		</tr>
		<tr>
			<td></td>
			<td class=MainInaktivButtonLeer>&nbsp;</td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=11>KONTAKT</a></td>
		</tr>
		<tr>
			<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
			<td class=MainInaktivButton><a href=index.php?article_id=12>IMPRESSUM</a></td>
		</tr>
		</table>
		</td>
	</tr>
	</table><br />
	
*******************************************************************************/

/*	formatiert die Tabelle des Menu
	<table class="Menu"> */
.Menu {
	width:100%;
	border:1px solid #D4D4D4;
	background-color:#FFFFFF;
}


/*	formatiert die Tabelle des MainMenu
	<table class="MainMenu"> */
.MainMenu { width:100%; }


/*	formatiert die Zelle des Icon im MainMenu
	<td class="MainAktivIcon"> bzw. <td class="MainInaktivIcon"> */
.MainMenu .MainAktivIcon {
	width:0px;
	text-align:center;
	vertical-align:middle;
	background-color:transparent;
	padding:0px 0px 0px 0px;
}

.MainMenu .MainInaktivIcon {
	width:0px;
	text-align:center;
	vertical-align:middle;
	background-color:transparent;
	padding:0px 0px 0px 0px;
}


/*	formatiert die Zelle des Button im MainMenu
	<td class="MainAktivButton"> bzw. <td class="MainInaktivButton"> */
.MainMenu .MainAktivButton {
	font-size:11px;
	background-color:transparent;
	vertical-align:middle;
}

.MainMenu .MainInaktivButton {
	font-size:11px;
	background-color:transparent;
	vertical-align:middle;
}


/*	formatiert den Link in der Zelle des Button im MainMenu
	<a class="MainAktivButton"> bzw. <a class="MainInaktivButton"> */
.MainMenu .MainAktivButton a:link, .MainMenu .MainAktivButton a:visited {
	display:block;
	border-left:4px solid #CCCCCC;
	border-right:8px solid #CCCCCC;
	padding:10px 10px 10px 10px;
	color:#333333;
	text-decoration:none;
	background-color:#DDDDDD;
}

.MainMenu .MainAktivButton a:hover {
	display:block;
	text-decoration:underline;
}

.MainMenu .MainInaktivButton a:link, .MainMenu .MainInaktivButton a:visited {
	display:block;
	border-left:4px solid #DDDDDD;
	border-right:8px solid #DDDDDD;
	padding:10px 10px 10px 10px;
	color:#999999;
	text-decoration:none;
	background-color:#EEEEEE;
}

.MainMenu .MainInaktivButton a:hover {
	display:block;
	border-left:4px solid #CCCCCC;
	border-right:8px solid #CCCCCC;
	color:#333333;
	text-decoration:none;
	background-color:#DDDDDD;
}


/*	formatiert den Button im MainMenu dessen Hauptordner keine Bezeichnung hat
	<td class="MainInaktivButtonLeer"> */
.MainMenu .MainInaktivButtonLeer {
	border-left:4px solid #DDDDDD;
	border-right:8px solid #DDDDDD;
	padding:10px 10px 10px 10px;
	background-color:#EEEEEE;
}


/*	formatiert die Tabelle des SubMenu
	<table class="SubMenu"> */
.SubMenu { width:100%; margin:0px 0px 0px 0px; background-color:#CCCCCC; }


/*	formatiert die Zelle des Icon im SubMenu
	<td class="SubAktivIcon"> bzw. <td class="SubInaktivIcon"> */
.SubMenu .SubAktivIcon {
	width:0px;
	text-align:center;
	vertical-align:middle;
	background-color:transparent;
	padding:0px 0px 0px 0px;
}

.SubMenu .SubInaktivIcon {
	width:0px;
	text-align:center;
	vertical-align:middle;
	background-color:transparent;
	padding:0px 0px 0px 0px;
}


/*	formatiert die Zelle des Button im SubMenu
	<td class="SubAktivButton"> bzw. <td class="SubInaktivButton"> */
.SubMenu .SubAktivButton {
	font-size:11px;
	vertical-align:middle;
	background-color:transparent;
	border-left:8px solid #CCCCCC;
}

.SubMenu .SubInaktivButton {
	font-size:11px;
	vertical-align:middle;
	background-color:transparent;
	border-left:8px solid #CCCCCC;
}


/*	formatiert den Link in der Zelle des Button im SubMenu
	<a class="SubAktivButton"> bzw. <a class="SubInaktivButton"> */

.SubMenu .SubAktivButton a:link, .SubMenu .SubAktivButton a:visited {
	display:block;
	border-left:4px solid #CCCCCC;
	border-right:8px solid #CCCCCC;
	padding:10px 10px 10px 10px;
	color:#333333;
	text-decoration:none;
	background-color:#DDDDDD;
}

.SubMenu .SubAktivButton a:hover {
	display:block;
	text-decoration:underline;
}

.SubMenu .SubInaktivButton a:link, .SubMenu .SubInaktivButton a:visited {
	display:block;
	border-left:4px solid #DDDDDD;
	border-right:8px solid #DDDDDD;
	padding:10px 10px 10px 10px;
	color:#999999;
	text-decoration:none;
	background-color:#EEEEEE;
}

.SubMenu .SubInaktivButton a:hover {
	display:block;
	border-left:4px solid #CCCCCC;
	border-right:8px solid #CCCCCC;
	color:#333333;
	text-decoration:none;
	background-color:#DDDDDD;
}


/*	formatiert den Button im SubMenu dessen Unterordner keine Bezeichnung hat
	<td class="SubInaktivButtonLeer"> */
.SubMenu .SubInaktivButtonLeer {
	height:24px;
	font-size:2px;
	border-left:4px solid #DDDDDD;
	border-right:8px solid #DDDDDD;
	padding:0px 0px 0px 0px;
	background-color:#EEEEEE;
}

Nachfolgend die Template-Datei (Beschreibung ist in jener)
Speichern als bb_navigation.template

Code: Alles auswählen

<!-- ---------------------------------------------------------------------------

	Datei		:	bb_navigation.template
	Projekt		:	Redaxo Navigation
	Beschr		:	Diese Datei als Template im RedaxoBackend speichern 
					und im Haupttemplate mit dieser Zeile aufrufen 
					include $REX[INCLUDE_PATH]."/generated/templates/??.template";
					
					?? TemplateZahl einfuegen

					Das Layout kann ueber die mitgelieferte CSS-Datei gestaltet werden
					
					
					Wenn Icons gewuenscht dann in dieser Datei die Pfade, Breite und Hoehe anpassen (Zeile 38 + 39)
					Wenn keine Icons gewuenscht dann in dieser Datei die Breite und Hoehe auf 0 einstellen (Zeile 38 + 39)
					 
	Autor		:	ORIGINAL
					Redaxo Entwickler
	
					MODIFIKATION
					Thomas Blum (TBaDDadE)
					mail[at]blumbeet.com
					http://www.blumbeet.com
					
	Erstellt	:
	Modifiziert	:	06.09.2004



---------------------------------------------------------------------------- -->

<table class="Menu" cellspacing="0">
<tr>
	<td><?

////////////////////////////////////////////////////////////////////////////////
// HIER DIE ICONS EINSTELLEN 
$AktivIcon = "<img src=/files/na.gif width=0 height=0 alt=blank />";
$InaktivIcon = "<img src=/files/np.gif width=0 height=0 alt=blank />";
////////////////////////////////////////////////////////////////////////////////


// USER STATUS FUER PERSOENLICHE NAVI
$utype_id = 1;
if ($FORM[USR]) $utype_id = $FORM[USER]->getValue("singlestatus");


// PFAD AUSLESEN
$cat_id = $this->getValue("category_id");
$path = explode("-",$this->getValue("path"));
$showpath = "/ <a href=index.php?article_id=8 class=white>Home</a>";
$cat1 = current($path)+0;
next($path);
$cat2 = current($path)+0;
next($path);
$cat3 = current($path)+0;


// 2. NAVI

$NAV2 = "";
$cat_id = $cat2;

@include $REX[INCLUDE_PATH]."/generated/categories/$cat_id.list.category";
$NAV = $REX[RECAT][$cat_id];

for ($i=0;$i<count($NAV);$i++)
{

 $id = current($NAV);
 $aid = $REX[CAT][$id][article_id];
 $name = $REX[CAT][$id][name];

 if ($i==0) $NAV2 .= "<table id=SubMenu class=SubMenu cellspacing=0>";

		//<table>  Nochmal Eingerueckt um bessere Uebersicht zu bekommen



 @include $REX[INCLUDE_PATH]."/generated/articles/$aid.article";

 $type_id = $REX[ART][$aid][type_id];
 if ($aid == 1) $type_id = 1; // HOME PAGE AUSNAHME
 $CST = true;
 if ($type_id>$utype_id) $CST = false;

 if ($cat3==$id and $REX[CAT][$id][status]==1 and $CST)
 {
    $NAV2 .= "<tr>
			<td class=SubAktivIcon>$AktivIcon</td>
			<td class=SubAktivButton>"."<a href=index.php?article_id=$aid>$name</a></td>
		</tr>";

 }elseif ($REX[CAT][$id][status]==1 and $CST)
 {	  
     if ($name == "")
     {
       $NAV2 .= "<tr>
			<td class=SubInaktivIcon></td>
			<td class=SubInaktivButtonLeer>&nbsp;</td>
		</tr>";
      
     }else
     {
       $NAV2 .= "<tr>
			<td class=SubInaktivIcon>$InaktivIcon</td>
			<td class=SubInaktivButton><a href=index.php?article_id=$aid>$name</a></td>
		</tr>";

      }

 }
   
 if (($i+1)==count($NAV)) $NAV2 .= "</table>";

		//</table>  Nochmal Eingerueckt um bessere Uebersicht zu bekommen

 next($NAV);
}


// 1. NAVI

$NAV1 = "";
$cat_id = 0;

@include $REX[INCLUDE_PATH]."/generated/categories/$cat_id.list.category";
$NAV = $REX[RECAT][$cat_id];

for ($i=0;$i<count($NAV);$i++)
{

 $id = current($NAV);
 $aid = $REX[CAT][$id][article_id];
 $name = $REX[CAT][$id][name];

 
 if ($i==0) $NAV1 .= "<table id=MainMenu class=MainMenu cellspacing=0>";

	//<table>  Nochmal Eingerueckt um bessere Uebersicht zu bekommen


 @include $REX[INCLUDE_PATH]."/generated/articles/$aid.article";

 $type_id = $REX[ART][$aid][type_id];
 if ($aid == 1) $type_id = 1; // HOME PAGE AUSNAHME
 $CST = true;
 if ($type_id>$utype_id) $CST = false;

 if ($cat2==$id and $REX[CAT][$id][status]==1 and $CST)
 {
    $NAV1 .= "<tr>
		<td class=MainAktivIcon>$AktivIcon</td>
		<td class=MainAktivButton>"."<a href=index.php?article_id=$aid>$name</a></td>
	</tr>";

   if ($NAV2 != "") $NAV1 .= "<tr>
		<td class=MainInaktivIcon></td>
		<td>$NAV2</td>
	</tr>";

 }elseif ($REX[CAT][$id][status]==1 and $CST)
 {
     if ($name == "")
     {
       $NAV1 .= "<tr>
		<td></td>
		<td class=MainInaktivButtonLeer>&nbsp;</td>
	</tr>";
      
     }else
     {
       $NAV1 .= "<tr>
		<td class=MainInaktivIcon>$InaktivIcon</td>
		<td class=MainInaktivButton><a href=index.php?article_id=$aid>$name</a></td>
	</tr>";

      }

 }
   
 if (($i+1)==count($NAV)) $NAV1 .= "</table>";

	//</table>  Nochmal Eingerueckt um bessere Uebersicht zu bekommen

 next($NAV);
}

echo $NAV1;

?>
	</td>
</tr>
</table><br />

Ich versteh zwar nichts von PHP, aber den Code so anzupassen das dieser per CSS gestaltet werden kann, das ist mein Ding. Wenn Ihr Hilfe braucht dann eMail an mich.

HOFFE es funktionert alles.

Gruss Thomas[/code]

Verfasst: 7. Sep 2004, 09:00
von vscope
coole sache tbaddade thx fürs cssen ;)

lg

vscope

Verfasst: 7. Sep 2004, 09:51
von Thomas.Blum
ich würde gern versuchen, das das layout aller module über css angepasst werden kann. nur sind die module ja schon innerhalb der beiden demos (bsp. board modul) unterschiedlich im php code. ich weiss nun jetzt von euch das sich redaxo sich sehr individuell dadurch anpassen lässt. aber ein modul zur suchfunktion oder die sitemap bzw. ein board modul etc. kann man doch als standard implementieren und dann über eine einzige css-datei layouten. oder schreibt ihr für jedes neue webprojekt jedes modul neu? wenn ihr mir solche "standard"module zur verfügung stellt, würde ich mich gern an die realisierung machen.

ist das nicht auch in eurem interesse? ihr müsstet dann nicht mehr für jedes neue webprojekt in das jeweilige modul um es gestalterisch anzupassen.

hoffe auf feedback gruss thomas

Verfasst: 7. Sep 2004, 17:09
von gast
Die Richtung stimmt schon mal, aber es geht auch ganz ohne Tabellen nur mit reinem HTML und CSS.

Einbauen in das Redaxo system ...

Verfasst: 24. Feb 2005, 19:26
von stuttgarter
Hallo

Ich habe ein prob...

Finde das Redaxo weltklasse, aber ich kann keine module einpflegen, kann mann das nicht irgendwo mal bildlich posten was Schritt für schtitt gemacht werden muss =?

Grüsse stuttgarter

Verfasst: 24. Feb 2005, 19:30
von Thomas.Blum
was willst denn genau machen??
Alle Zeiten sind UTC+02:00
Seite 1 von 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/