Hauptnavigation mit unterschiedlichen Style

[Carnygel]

Hallo,
schon seit längerem betreibe ich eine Website mit Contenido und den regulären Moduls. Ich möchte aber gern das Modul Hauptnavigation wie folgt ändern:

Start (style wie bisher)
Wir (style wie bisher)
Beschreibung (style wie bisher)
ANGEBOT (style fett, andere Size - eventuell mit Hintergrund)
Ware 1 (style wie bisher)
Ware 2 (style wie bisher)
Ware 3 (style wie bisher)
SERVICE (style fett, andere Size - eventuell mit Hintergrund)
Service 1 (style wie bisher)
Service 2 (style wie bisher)
Service 3 (style wie bisher)
>Leerzeile<
Kontakt (style wie bisher)

Wie könnte ich vorgehen?
Die Kategorien kann ich anlegen. Soviel komme ich schon zurecht.
Aber ich kann die Kategorien nicht formatieren.

Wer kann helfen? Vielen Dank im voraus!

[GaMbIt_]

Versuchs doch mal mit Attributselektoren...

oder einfach die Nav-Elemente mit class="navelement" formatieren...

[Carnygel]

Leider bin ich dazu zu unerfahren. Kannst du mir das zeigen? Ich habe das ganz normale Modul eingebaut.

[GaMbIt_]

http://de.selfhtml.org/css/formate/zent ... utbedingte

das Ganze halt mit nem a nichtmit nem p wie im Beispiel...

[Carnygel]

Mein Script "Hauptnavigation" (Ausgabe) sieht so aus:

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : Hauptnavigation
* Author(s) : Jan Lengowski, Andreas Lindner, 4fb
* Copyright : Contenido - four for business, Andreas Lindner
* Created : 12.08.2005
************************************************/

#System properties in use:
#Type: navigation, Name: idcat_homepage
#Contains idcat of tree to be displayed in main navigation

#Includes
cInclude("frontend", "includes/functions.navigation.php");

#If no tree is selected, use client setting
$start_cat = "CMS_VALUE[0]";
if ($start_cat=='') {
$cApiClient = new cApiClient($client);
$start_cat = $cApiClient->getProperty('navigation','idcat_homepage');
}

if ( !is_object($db2) ) {
$db2 = new DB_Contenido;
}

/**
* Check if a category is child
* of another category
*
* @return boolean true/false
* @author Jan Lengowski <Jan.Lengowski@4fb.de>
* @copyright four for business AG 2003
*/
function catIsChildOf($id, $idparent) {

global $cfg, $client, $lang;

$db = new DB_Contenido;

$parent = $id;

while ( $parent != 0 ) {

$sql = "SELECT
a.parentid
FROM
".$cfg["tab"]["cat"]." AS a,
".$cfg["tab"]["cat_lang"]." AS b
WHERE
a.idclient = '".$client."' AND
b.idlang = '".$lang."' AND
a.idcat = b.idcat AND
a.idcat = '".$parent."'";

$db->query($sql);
$db->next_record();

$parent = $db->f("parentid");

if ($parent == $idparent) {
return true;
}

}

return false;

}

if ( catIsChildOf($idcat, $start_cat) ) {
$sel_idcat = $idcat;
} else {
$sel_idcat = $start_cat;
}

/* Include Template Class */
include_once($cfg["path"]["contenido"] . 'classes/class.template.php');

/**
* Array storing alle the
* navigation data
*/
$navitems = array();


/* Template Instance */
$tpl = new Template;

/**
* Recursive function for creating
* the navigation array
* @param Int $idcat Category id
*/
function nav($idcat) {

global $navitems, $client, $lang, $cfg, $start_cat;

$db = new DB_Contenido;
$db2 = new DB_Contenido;

$sql = "SELECT parentid FROM ".$cfg["tab"]["cat"]." WHERE idcat = '$idcat'";

$db->query($sql);
$db->next_record();

$parentid = $db->f("parentid");

if ( $parentid == 0 ) {

if ( $idcat != $start_cat ){

$navitems = array();

$sql = "SELECT
A.idcat,
C.name,
C.public,
C.idcatlang
FROM
".$cfg["tab"]["cat_tree"]." AS A,
".$cfg["tab"]["cat"]." AS B,
".$cfg["tab"]["cat_lang"]." AS C
WHERE
A.idcat = B.idcat AND
B.idcat = C.idcat AND
B.idclient = '$client' AND
C.idlang = '$lang' AND
C.visible = '1' AND
B.parentid = '".$start_cat."'
ORDER
BY A.idtree";

$db->query($sql);

while ($db->next_record()) {

/* Check for external redirects... */
$sql = "SELECT
a.external_redirect AS ext,
a.idartlang AS idartlang
FROM
".$cfg["tab"]["art_lang"]." AS a,
".$cfg["tab"]["cat_art"]." AS b,
".$cfg["tab"]["cat"]." AS c
WHERE
b.idcat = '".$db->f("idcat")."' AND
c.idclient = '".$client."' AND
c.idcat = b.idcat AND
a.idart = b.idart AND
a.idlang = '".$lang."'";

$db2->query($sql);
$flag = false;
while ($db2->next_record()&&!$flag) {
if (isStartArticle($db2->f("idartlang"), $db->f("idcat"), $lang))
{
$flag = true;
$target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

$navitems[$db->f("idcat")] = array("idcat" => $db->f("idcat"),
"name" => $db->f("name"),
"target" => $target,
"public" => $db->f("public"),
"idcatlang" => $db->f("idcatlang"));
}
}
}

}

return true;
}

$sql = "SELECT
A.idcat,
C.name,
C.public,
C.idcatlang
FROM
".$cfg["tab"]["cat_tree"]." AS A,
".$cfg["tab"]["cat"]." AS B,
".$cfg["tab"]["cat_lang"]." AS C
WHERE
A.idcat = B.idcat AND
B.idcat = C.idcat AND
B.idclient = '$client' AND
C.idlang = '$lang' AND
C.visible = '1' AND
B.parentid = '$parentid'
ORDER BY
A.idtree";

$db->query($sql);

while ($db->next_record()) {

/* Check for external redirects... */
$sql = "SELECT
a.external_redirect AS ext,
a.idartlang AS idartlang
FROM
".$cfg["tab"]["art_lang"]." AS a,
".$cfg["tab"]["cat_art"]." AS b,
".$cfg["tab"]["cat"]." AS c
WHERE
b.idcat = '".$db->f("idcat")."' AND
c.idclient = '".$client."' AND
c.idcat = b.idcat AND
a.idart = b.idart AND
a.idlang = '".$lang."'";

$db2->query($sql);
$flag = false;
while ($db2->next_record() && !$flag) {
if (isStartArticle($db2->f("idartlang"), $db->f("idcat"), $lang))
{
$flag = true;
$target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

$tmp_nav[$db->f("idcat")] = array("idcat" => $db->f("idcat"),
"name" => $db->f("name"),
"public" => $db->f("public"),
"idcatlang" => $db->f("idcatlang"),
"target" => $target);
}
}
}

$tmp_nav[$idcat]["sub"] = $navitems;
$navitems = $tmp_nav;

/* Function call */
nav($parentid);

} // end function

$sql = "SELECT
A.idcat,
C.name,
C.public,
C.idcatlang
FROM
".$cfg["tab"]["cat_tree"]." AS A,
".$cfg["tab"]["cat"]." AS B,
".$cfg["tab"]["cat_lang"]." AS C
WHERE
A.idcat = B.idcat AND
B.idcat = C.idcat AND
B.idclient = '$client' AND
C.idlang = '$lang' AND
C.visible = '1' AND
B.parentid = '$sel_idcat'
ORDER BY
A.idtree";

$db->query($sql);

while ( $db->next_record() ) {

/* Check for external redirects... */
$sql = "SELECT
a.external_redirect AS ext,
a.idartlang AS idartlang
FROM
".$cfg["tab"]["art_lang"]." AS a,
".$cfg["tab"]["cat_art"]." AS b,
".$cfg["tab"]["cat"]." AS c
WHERE
b.idcat = '".$db->f("idcat")."' AND
c.idclient = '".$client."' AND
c.idcat = b.idcat AND
a.idart = b.idart AND
a.idlang = '".$lang."'";

$db2->query($sql);
#$db2->next_record();
$flag = false;
while ($db2->next_record()&&!$flag) {
if (isStartArticle($db2->f("idartlang"), $db->f("idcat"), $lang))
{
$flag = true;
$target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

$navitems[$db->f("idcat")] = array("idcat" => $db->f("idcat"),
"name" => $db->f("name"),
"public" => $db->f("public"),
"idcatlang" => $db->f("idcatlang"),
"target" => $target);
}
}
}

/* Create Navigation Array */
if(($sel_idcat=='')||($sel_idcat=='0')){
$cApiClient = new cApiClient($client);
$sel_idcat = $cApiClient->getProperty('navigation', 'idcat_homepage');
}

nav($sel_idcat);

/* Start Output buffer */
ob_start();

foreach ($navitems as $key => $data) {

/* 1. Navigation level */
if (checkCatPermission($data['idcatlang'],$data['public'])) {
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));

$tpl->next();
if ($idcat == $data['idcat']) {
$tpl->generate('templates/navfirst_on.html');
}elseif(is_array($data['sub'])){
$tpl->generate('templates/navfirst_open.html');
} else {
$tpl->generate('templates/navfirst_off.html');
}

/* 2. Navigation level */
if (is_array($data['sub'])) {
foreach ($data['sub'] as $key => $data) {
if (checkCatPermission($data['idcatlang'],$data['public'])) {
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));
$tpl->next();
if ($idcat == $data['idcat']) {
$tpl->generate('templates/navsecond_on.html');
}elseif(is_array($data['sub'])){
$tpl->generate('templates/navsecond_open.html');
} else {
$tpl->generate('templates/navsecond_off.html');
}

/* 3. Navigation level */
if (is_array($data['sub'])) {
foreach ($data['sub'] as $key => $data) {
if (checkCatPermission($data['idcatlang'],$data['public'])) {
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));
$tpl->next();

if ($idcat == $data['idcat']) {
$tpl->generate('templates/navthird_on.html');
}elseif(is_array($data['sub'])){
$tpl->generate('templates/navthird_open.html');
} else {
$tpl->generate('templates/navthird_off.html');
}

/* 4. Navigation level */
if (is_array($data['sub'])) {
foreach ($data['sub'] as $key => $data) {
if (checkCatPermission($data['idcatlang'],$data['public'])) {
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));
$tpl->next();
if ($idcat == $data['idcat']) {
$tpl->generate('templates/navfourth_on.html');
}elseif(is_array($data['sub'])){
$tpl->generate('templates/navfourth_open.html');
} else {
$tpl->generate('templates/navfourth_off.html');
}

/* 5. Navigation level */
if (is_array($data['sub'])) {
foreach ($data['sub'] as $key => $data) {
if (checkCatPermission($data['idcatlang'],$data['public'])) {
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));
$tpl->next();
if ($idcat == $data['idcat']) {
$tpl->generate('templates/navfifth_on.html');
} else {
$tpl->generate('templates/navfifth_off.html');
}
} // end if
} // end foreach
} // end if
} // end if
} // end foreach
} // end if
} // end if
} // end foreach
} // end if
} // end if
} // end foreach
} // end if
} // end if
} // end foreach

/* Read out buffer */
$html = ob_get_contents();

/* Clean buffer */
ob_end_clean();

/* Output buffer-contents */
echo $html;
?>

[GaMbIt_]

Ähhh ja und ??

[tono]

Ähhh ja und ??

Ich glaube das Problem ist nicht: Wie macht man eine HTML-Zeile fett? Sondern wie baut man eine Navigationsmodul um, damit von 20 gleichen Kategorien 3 fett dargestellt werden?
@Carnygel: Das ist in der Tat nicht ganz trival.

[wosch]

Ich glaube das Problem ist nicht: Wie macht man eine HTML-Zeile fett? Sondern wie baut man eine Navigationsmodul um, damit von 20 gleichen Kategorien 3 fett dargestellt werden?
@Carnygel: Das ist in der Tat nicht ganz trival.

Doch, als "Halbautomat" müßte es recht einfach gehen.
Ich habe so etwas ähnliches mal für einen ganz speziellen Mousover-Effekt gemacht.

In der Navi kommt 5 x dieser Code vor:

Code: Alles auswählen

            $tpl->reset(); 
            $tpl->set('d', 'NAME',  $data['name']); 
            $tpl->set('d', 'TARGET', $data['target']); 
            $tpl->set('d', 'HREF',  $sess->url('front_content.php?idcat='.$data['idcat'])); 

Dort steht aber auch die Variable idcat zur Verfügung, und die ist einmalig.
Also ergänzt man den o.g. Code jeweils um diese Zeile:

Code: Alles auswählen

           $tpl->set('d', 'ID_CAT', $data['idcat']);

Nun nimmt man die einzelnen Modul-Templates, als Beispiel dieser Code:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
	<div class="navi"><a href="{HREF}" class="navileft_active" style="padding-left:10px;" title="{NAME}">{NAME}</a></div>
<!-- END:BLOCK -->

Und nun baut man in jedes Modul-Template folgendes ein:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
	<div class="navi"><span class="{ID_CAT}"><a href="{HREF}" class="navileft_active" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

Nun noch die ID dieser Kategorien die anders formatiert werden sollen merken und in der CSS nur für die Classen die besonders/anders ausgezeichnet werden die entsprechenden Format-Befehle geben.

Ungetestet, sollte aber gehen.

[tono]

Code: Alles auswählen

<span class="{ID_CAT}">

Genial, das merk ich mir falls ich das mal brauche.

[Carnygel]

@Wosch
Prima, ich denke, dass ich jetzt der Sache schon um einen großen Schritt weiterkomme, denn du hast mein Problem richtig erkannt.

Nun habe ich im Modul "Hauptnavigation" bei jedem dieser 5 Einträge die Zeile
$tpl->set('d', 'ID_CAT', $data['idcat']);
hinzugefügt.

Du hast geschrieben: Nun nimmt man die einzelnen Modul-Templates ...
Davon habe ich habe viele, wie z. B. banner.html, gallery.html, gallery_detail.html .... sowie navfifth_off.html, navfifh_on.html, navfirst_off.html, navfirst_on.html, navfirst_open.htlm, navsecond_off.html, navsecond_on.html, ...

Bei den nav.._on.html finde ich bereits diesen Code:

<!-- BEGIN:BLOCK -->
<div class="navi"><a href="{HREF}" class="navileft_active" style="padding-left:10px;" title="{NAME}">{NAME}</a></div>
<!-- END:BLOCK -->

Soll ich also in jedes nav..._on.html deinen Code:

<!-- BEGIN:BLOCK -->
<div class="navi"><span class="{ID_CAT}"><a href="{HREF}" class="navileft_active" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

einsetzen?


--

Dann ist mir der Satz:
"Nun noch die ID dieser Kategorien die anders formatiert werden sollen merken und in der CSS nur für die Classen die besonders/anders ausgezeichnet werden die entsprechenden Format-Befehle geben. "
nicht ganz klar.

Würde mich riesig freuen, wenn ich nochmals deine Unterstützung bekäme. Danke im voraus!

[wosch]

Du hast geschrieben: Nun nimmt man die einzelnen Modul-Templates ...

... die zur Hauptnavi gehören.
Also alles was mit nav_... beginnt.

In diesen Modul-Templates steht immer folgender Code:

Code: Alles auswählen

<a href="{HREF}" class="navileft_active" style="padding-left:10px;" title="{NAME}">{NAME}</a>

Wichtig ist hier der Anker a, die Classen und Style sind je nach Template unterschiedlich.
Um zu sehen worauf es ankommt vereinfachen wir es (nur hier zum Verstehen und erkennen!!!) so:

Code: Alles auswählen

<a href="{HREF}" irgendwas_anderes></a>

diesen Code um den Anker ergänzt du in allen Templates so mit dem span:

Code: Alles auswählen

<span class="{ID_CAT}"><a href="{HREF}" irgendwas_anderes></a></span>

Nun guckst du welche idcat die Kategorie SERVICE hat, merken (nehmen wir an es sei die 34)

Und im CSS kommt nun für die Class .34 der Befehl wie dieser Text zu formatieren ist.

[Carnygel]

Hallo,

dei den Modul-Templets habe ich mir die
navfirst_on.html vorgenommen:

<!-- BEGIN:BLOCK -->
<div class="navi">
<span class="{ID_CAT}"><a href="{HREF}" class="navileft_active" class="52
style="padding-left:10px;" title="{NAME}"> {NAME}</a></span>
</div>
<!-- END:BLOCK -->

und bei der style.css-Datei habe ich diese Ergänzug vorgenommen.

.52 {
color:#000000;
font-size:30px;
}


Doch es tut sich überhaupt nichts.

Irgendwo habe ich also noch einen Fehler drin.

Ändere ich in der css den Eintrag
a.navileft_active {
display:block;
background-color:#ffffff;
background:url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position:right;
padding-top:3px;
padding-bottom:3px;
color:rgb(51,79,119);
}

bei padding-top:30 px, dann verändert sich der Abstand von oben bei jedem Level.
Auch die color:rgb kann ich ändern.

Diesen Zusammenhang habe ich also schon mal begriffen.

Ist der Eintrag im Modul-Templet (s. o.) so korrekt?
Stimmt der CSS-Eintrag so?

Dann müsste es ja bei der Seite mit ID_CAT 52 funktionen - klappt aber leider nicht.
Also habe ich noch einen Denk- oder Schreibfehler.

Besten Gruß

[tono]

<span class="{ID_CAT}"><a href="{HREF}" class="navileft_active" class="52
style="padding-left:10px;" title="{NAME}"> {NAME}</a></span>

Hier fehlt hinter 52 ein Anführungszeichen.
52 sollte eigentlich auch {ID_CAT} heißen, sonst hast Du ja bei jeder Zeile wieder dasselbe.
Einem <a> zwei Klassen zuzuweisen ist auch nicht erlaubt, glaub ich.

[Carnygel]

Ja, dass zwei class nicht funktionieren, habe ich auch festgestellt. War also meinerseits nicht so gut ;-(

Den Befehl mit dem ID_CAT bzw. wie ich ihn korrekt einbaue, ist mir noch nicht ganz klar.

[wosch]

Den Befehl mit dem ID_CAT bzw. wie ich ihn korrekt einbaue, ist mir noch nicht ganz klar.

Alle Auszeichnungen in den Templates dürfen nicht angefaßt oder verändert werden.
Zusätzlich erfolgt nur:

Code: Alles auswählen

<span class="{ID_CAT}"> </span>

Und weil der Name der Kategorie gleichzeitig das ist was im Ankertag steht, setzen wir diesen span-Tag um den jeweiligen Anker-Tag.

Ein letztes Beispiel, anhand der navsecond_open.html:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
	<div class="navi">
	<span class="{ID_CAT}">
	<a href="{HREF}" class="navileft_open" style="padding-left:20px;" title="{NAME}">{NAME}</a>
	</span>
	</div>
<!-- END:BLOCK -->

Wenn du das gemacht hast wirst du eine Ausgabe bekommen (für die Kategorie SERVICE bekommen) die im Quelltext so oder ähnlich aussieht:

Code: Alles auswählen

	<div class="navi">
	<span class="34">
	<a href="front_content.php?idcat=34" class="navileft_open" style="padding-left:20px;" title="SERVICE ">SERVICE </a>
	</span>
	</div>

Und nun wird diese Klasse 34 durch den Eintrag im CSS so formattiert wie gewünscht.