Aussehen / Design Navigation_Main

[bpc_contenido]

Hallo zusammen.
Als eher unerfahrener hätte ich eine Frage zur neuen Version von Contenido. Wie oder wo wird das Aussehen des Moduls Navigation_Main bestimmt. Ich würde gerne die Navigation ohne die Aufzählungspunkte und nicht unterstrichen verwenden. Bei den alten Versionen konnte ich das über die Templates wie z.B. firstnavoff usw.
Vielleicht kann einem Anfänger hier geholfen werden.

Vielen Dank im Voraus.

[Halchteranerin]

Hast du in der css-Datei des Beispielmandanten geschaut?

[bpc_contenido]

Tut mir leid dass ich nicht fit bin, aber wo und wie muss ich da schauen?
Vielen Dank schonmal für die Hilfe

[yodatortenboxer]

Installation von Contenido inkl. Beispielmandant und Module.

Dann ins Contenido-Backend einloggen, dann oben auf Style und da auf Styleeditor und dort gibt es links nur eine Datei namens
contenido_sample.css.

Die anklicken und dann steht rechts der Inhalt der CSS-Datei.
Dort steht dann ab Zeile 148

Code: Alles auswählen

/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */

/* Level 1 */
#navigation ul {
    width:230px;
    margin:0;
    padding:0;
    /*background-color:#F2F2F2;*/
    background-color:transparent;
}
#navigation ul li {
    width:220px;
    margin:0;
    padding:0 0 0 10px;
    list-style-type:none;
}
#navigation ul li a {
    display:block;
    width:220px;
    height:19px;
    line-height:19px;
    margin:0;
    padding:0 0 0 10px;
    font-size:11px;
    color:#666;
    background-image:url(../images/navi_pfeil_zu.gif);
    background-repeat:no-repeat;
    background-position:210px 3px;
    border-bottom:1px solid #ccc;
    text-decoration:none;
}
#navigation ul li a:hover, #navigation ul li.active a {
    background-image:url(../images/navi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    color:#fff;
}

/* Level 2 */
#navigation ul.subNavigation {
    width:210px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li a {
    background-image:url(../images/subnavi_pfeil_zu.gif);
    background-repeat:no-repeat;
    background-position:199px 8px;
    border-bottom:1px dotted #ccc;
    color:#666;
    width:210px;
}
#navigation ul.subNavigation li.active a {
    color:#fff;
}
#navigation ul.subNavigation li a:hover, #navigation ul.subNavigation li.active a {
    background-image:url(../images/subnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

/* Level 3 */
#navigation ul.subSubNavigation {
    width:200px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li ul.subSubNavigation li a {
    background-image:none;
    border-bottom:0;
    color:#666;
    width:200px;
}
#navigation ul.subNavigation li ul.subSubNavigation li a:hover, #navigation ul.subNavigation li ul.subSubNavigation li.active a {
    background-image:url(../images/subsubnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

Ich würde gerne die Navigation ohne die Aufzählungspunkte und nicht unterstrichen verwenden.

Das währe dann im #navigation ul li das list-style-type:none; für die Aufzählung und im #navigation ul li a das text-decoration:none; für das nicht Unterstreichen.

Gruß yodatortenboxer

[bpc_contenido]

Vielen Dank für die rasche Unterstützung.
Jetzt komme ich in dem Bereich klar.

Danke nochmals

[diefl]

Generell ist eine listenbasierte Navigation ja ganz prima.
Meines Errachtens fehlt aber bei den Modul ein linkzustand bzw. eine css-klasse.
In der "alten" Hauptnavi gab es dafür ein template namens "mnavi_on.html" etc...

Für eine geöffnete 1ste Ebene mit aktiviertem Unternavigationspunkt habe ich jetzt nämlich die gleiche css-klasse (li class="active") wie für eine geöffnete 1ste Ebene ohne aktivem Untermenupunkt.

Verwende ich jetzt für "active" bspw. eine Hintergrundgrafik (Pfeil o.ä) bleibt dieser in der ersten Ebene stehen, auch wenn ich einen Submenupunkt aktiviere.


Das ist natürlich ziemlich doof, da sich so bei weitem nicht alles per css darstellen lässt. Schön wäre, wenn man für den ersten Fall z.b. li class="open" verwenden könnten.

Ich würde gerne folgendes erreichen:

Aktivierter Unterpunkt

Code: Alles auswählen

<ul>
<li><a href="front_content.php?idcat=2" title="Startseite">xxx</a></li>
<li><a href="front_content.php?idcat=4" title="xxx">xxx</a></li>
<li><a href="front_content.php?idcat=3" title="xxx">xxx</a></li>
<li class="[b]open[/b]"><a href="front_content.php?idcat=11" title="xxx">xxx</a>					
                              
<ul class="subNavigation">					
<li class="active"><a href="front_content.php?idcat=35" title="xxx">xxx</a></li>
</ul>
</li>

<li><a href="front_content.php?idcat=12" title="xxx">xxx</a></li>
</ul>
[/code]

Kein aktivierter Unterpunkt

Code: Alles auswählen

<ul>
<li><a href="front_content.php?idcat=2" title="Startseite">xxx</a></li>
<li><a href="front_content.php?idcat=4" title="xxx">xxx</a></li>
<li><a href="front_content.php?idcat=3" title="xxx">xxx</a></li>
<li class="active"><a href="front_content.php?idcat=11" title="xxx">xxx</a>					
                              
<ul class="subNavigation">					
<li><a href="front_content.php?idcat=35" title="xxx">xxx</a></li>
</ul>
</li>

<li><a href="front_content.php?idcat=12" title="xxx">xxx</a></li>
</ul>

Für eine Tip, wo in dem modul ich da drehen muss, um eine weitere Klasse für einen geöffneten menupunkt mit aktiviertem Unterpunkt zu vergeben, wäre ich sehr dankbar;-).
Ja, ich kann auch die alte Hauptnavi verwenden;-) - aber vieleicht hat jemand ja einen Ansatz.

[GaMbIt_]

Ja da wäre ich auch sehr interessiert

Ich muss mir aber das Modul noch mal genauer ansehen...