phpwcms Support Forum

Hallo allerseits.
Ich bin gerade eine Website für eien Grundschule neu aufzubauen. Da das ganze etwas bunter gestaltet werden soll, möchte ich die Navigation gerne in verschiedenen Hintergrundfarben erstellen und zwar so daß auch die Ausklappmenüs die Hintergrundfarbe des "Hauptmenüpunktes" haben.
Beispiel:
+Home --> rot
+Unsere Schule -->blau
++Klasse 1 --> blau
++Klasse 2 --> blau
+Schulleben --> gelb
++Aktionen -->gelb
...usw.
Mein derzeitiges Grundgerüst für die Navigation sieht folgender Maßen aus:

Code: Select all

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand"></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <div class="nav navbar-nav">
            {NAV_LIST_UL:PB,0,2,active|nav navbar-nav,active}
          </div>
          </div><!--/.nav-collapse -->
      </div>     
    </nav>

        </div>

Ich weiß, das ist das Bootstrap Standartgerüst mit dem entsprechenden RT.
Ändere ich den RT nun wie gezeigt ab

Code: Select all

<div class="nav navbar-nav">
            {NAV_LIST_UL:PB,16,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,1,2,active|blue nav navbar-nav,active}
          </div>

so werden die Klassen gerendert und der Hintergrund ändert sich entsprechend.
Ebene 16 ist hier die Startseite (Home), Ebene 1 "Unsere Schule".
Bis dahin kein Problem.
Setze ich aber nun eine Kategorie als Unterkategorie in "Unsere Schule" ein, so wird diese nicht als Dropdown sondern daneben angezeigt. Siehe Screenshot

"Klasse 1" sollte eigentlich eine Unterkategorie von "Unsere Schule" sein.

Wo liegt mein Fehler oder müßte ich komplett anders an diese Sache heran gehen?

Ein Stückchen weiter bin ich schonmal gekommen indem ich die Kategoerieen mit Unterkategorieen nochmals in versteckte Kategorieen gepackt habe und so sieht das ganze im BE aus.

In der Vorlage unter Admin --> Haupt siehts so aus:

Code: Select all

....
<div id="navbar" class="navbar-collapse collapse">
          <div class="nav navbar-nav">
            {NAV_LIST_UL:PB,0,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,18,2,active|blue nav navbar-nav,active}
            {NAV_LIST_UL:PB,19,2,active|brown nav navbar-nav,active}
            {NAV_LIST_UL:PB,20,2,active|black nav navbar-nav,active}
            {NAV_LIST_UL:PB,21,2,active|violett nav navbar-nav,active}
            {NAV_LIST_UL:PB,22,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,23,2,active|blue nav navbar-nav,active}
            {NAV_LIST_UL:PB,24,2,active|brown nav navbar-nav,active}
          </div>
          .....

Und so klappts schonmal mit den Dropdowns, zwar nich nich tin den richtigen Farben, aber die Unterkateogiereen werden dort angezeigt, wo sie sein sollen.
Schauen wir mal weiter inwieweit sich Bootstrap verbiegen läßt daß ich auch die Dropdowns enstprechend farbig bkomme.

Achso... bis jetzt sieht die Navi so aus. Ist nur ein Versuchsbeispiel...

Wenn's klappt, den Rest dann per CSS ...

Hast du dafür mal ein Codebeispiel? DAS wäre mir neu oder hab ich was verpasst?

Du meinst im RT oder wie?

[EDIT]
Ich habe nun mal im BE in der Kategorie selbst imd Feld CSS Klasse die entsprechende Klasse eingetragen und das klappt. So wirds dann auch was mit dem farbigen Dropdown

Ich habe hier :

http://bootstrap-4.pepes-sandbox.de/news.html

gerade mal probiert (sieh in den erzeugten Quellcode):

Code: Select all

{NAV_LIST_UL:B, 0, , |navbar-nav|ebene-2|ebene-3, active, categorie-id, , , ,}

... zumindest könnte das ein Ansatz sein:

Probier ich gerne mal aus. DAS kannte ich noch nicht, aber wie so oft führen bei PHPWCMS viele Wege nach Rom

Danke dir erstmal

Ich bin jetzt mal weg und heute Abend erst wieder da.

Boah, Overkill. Gib einfach dem jeweiligen Hauptmenüpunkt eine individuelle Klasse mit und fertig.
Dann kannst Du das von oben nach unten durchreichen.

Siehe die Beispielklasse custom.

Äh.. ja.. ok.
Manchmal sieht man den Wald vor lauter Bäumen nicht. Danke für den Schubs

Aber funktioniert hatte das andere auch, wenn auch der Weg dorthin wesentlich umständlicher war

Ich habe jetzt auch mal nach Olivers Vorschlag versucht und die zusätzlichen Klassen in die Haupt-Kategorien eingefügt. Jetzt brauchte ich nur noch die CSS erweitern, etwa so:

/* Test für unterschiedlich farbig hinterlegte Menüpunkte und Dropdowns */
.nav-item.contentParts,
.nav-item.contentParts ul {
background-color: darkred;
}
.nav-item.auswahl-3,
.nav-item.auswahl-3 ul {
background-color: darkgreen;
}

Und dann sieht es so aus: http://bootstrap-4.pepes-sandbox.de/text-mit-bild.html

Japp. Ich habs ähnlich gemacht und es klappt einwandfrei.

phpwcms Support Forum

Bootstrap Navigation mehrfarbig gestalten

Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten

Re: Bootstrap Navigation mehrfarbig gestalten