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

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

Navigation per CSS-Datei anpassen

6. Sep 2004, 19:47

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]

Benutzeravatar
vscope
Beiträge: 477
Registriert: 24. Aug 2004, 22:11
Wohnort: Austria/Vienna
Kontaktdaten: ICQ Website

7. Sep 2004, 09:00

coole sache tbaddade thx fürs cssen ;)

lg

vscope

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

7. Sep 2004, 09:51

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

gast

7. Sep 2004, 17:09

Die Richtung stimmt schon mal, aber es geht auch ganz ohne Tabellen nur mit reinem HTML und CSS.

stuttgarter
Beiträge: 224
Registriert: 18. Feb 2005, 14:00
Wohnort: stuttgart

Einbauen in das Redaxo system ...

24. Feb 2005, 19:26

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

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

24. Feb 2005, 19:30

was willst denn genau machen??

Zurück zu „Allgemeines [R2]“