Cassiopeia, Klassen fürs mainmenu

  • Hallo!


    Ich spiele gerade mit Cassiopeia auf XAMPP herum. Das Main Menu habe ich auf die Position 'menu' gesetzt.

    Die einzigen Eintragungen in der user.css sind diese


    Code
    .container-header {
    background-color: white;
    background-image: none;
    }
    
    .container-header .mod-menu {
    color: #0088cc;
    background-color: #999;
    }

    Mich wundert, dass der Menüeintrag zur Startseite immer unterstrichen ist (BEISPIEL info2).
    Wie stelle ich das ab?

    Nach text-decoration: underline; habe ich gesucht, insbesondere auch bezüglich 'hover' .

    text-decoration: underline; ist wohl default. Habe aber nichts funktionsfähigens gefunden, um das einzustellen.


    Bei Protostar konnte ich ein Menüement klicken und es behielt seine Formatierung, solange der zugehörige Beitrag sichtbar war.

    Bei Cassiopeia gelingt mir das nicht.


    mfg

  • Hallo,

    über diese Klasse .metismenu.mod-menu .metismenu-item.active > a habe im Prinzip Zugriff (z.B. Farbe, Rahmen) auf die aktive 'Schaltfläche'.

    Aber den Strich unten entferne ich nicht.
    Es ist nicht 'underline' und auch nicht 'border-bottom'.


    vG

  • Hallo,


    Dieses: text-decoration: underline betrifft (auch) einen Unterstrich, wäre aber etwas höher angesetzt.


    Das hier betrifft aber:

    Mich wundert, dass der Menüeintrag zur Startseite immer unterstrichen ist (BEISPIEL info2).
    Wie stelle ich das ab?

    Auch in Joomla 3 ist das so, dass (normalerweise) das aktiv angeklickte Menü unterstrichen ist.


    Dass das bei Dir immer auf der Startseite liegt, glaube liegt ev. daran:



    Überprüfe mal obige Einstellung. Kann sein, dass bei Dir dort statt "Erstellen" > "Leeren" steht.

    Dann leerst Du das Feld und bei Basiseintrag erscheint dann: Aktuell.


    Liebe Grüße

    Christine

  • Ok, jetzt ist im mainmenu immer der aktuelle Menüeintrag unterstrichen. Kann so bleiben. Danke!


    Eine gute Einführung in das Menü von Cassiopeia gibt es hier

    https://blog.astrid-guenther.de/cassiopeia-banner/


    Im Template Stil wird das Brand 'CASSIOPEIA' ausgeblendet oder durch ein eigenes ersetzt. Menüzuordnung etc. wie gewohnt.

    Danach wird das mainmenu der Position 'menu' zugeordnet.


    Im Modul zum Mainmanu wird der Basiseintrag auf 'aktuell' gesetzt (s.o), das Layout 'collapsible dropdown' und der Modulstil 'vererbt' ausgewählt.

    Die Anzeige von Untermenüs muss ggf. noch erlaubt werden.


    Jetzt folgen Eingaben in user.css

    Der (lila) Background und sowie das Hamburger Menu werden formatiert

    Code
    .container-header {
    background-color: white;
    background-image: none;
    }
    
    
    .container-header .navbar-toggler {
    color: #0088cc;
    border: 1px solid #0088cc;
    }


    Die Menüleiste muss mit user.css farblich noch sichtbar gemacht werden.


    Ich nehme zusätzlich noch weitere css-Formatierungen (für alle Fälle) vor


    Soll der Menüeintrag nach Klick formatiert bleiben, solange der Beitrag angezeigt wird, verwende ich dies:

    Code
    .metismenu.mod-menu .metismenu-item.active > a {
    background-color: #ccc;
    color: #000;
    }


    #2 Mission completed!


    Jetzt muss ich nur noch eine Lösung für die Untermenüs finden.

    Wenn jemand eine Idee hat, bitte posten.


    vG

  • Hallo, ich nochmal

    Zitat

    Jetzt muss ich nur noch eine Lösung für die Untermenüs finden.

    Wenn jemand eine Idee hat, bitte posten.

    Mit diesen Zeilen in user.css habe ich das Submenü modifiziert


    Die Einstellungen von Items und Text werden tlw. von der obersten Ebene übernommen. Einfach mal ausprobieren.
    Danach sieht es so aus. (schrecklich aber exemplarisch!)


    #5 Mission complete completed


    vG

  • Ich bin auch an der stelle, und frage mich ob man nur die unterstrichene Linie Rot machen kann wenn man mit der Maus drüber fährt bzw. die aktive Seite die Linie Rot ist. Also das was jetzt wie ein Schatten aussehen tut Rot ist...

    Hat da jemand evtl. eine Idee zu Hilfe.

    Danke im voraus ...

  • Hallo Powermen,

    wenn ich die Aufgabenstellung richtig verstanden habe, könnte dieser Code hilfreich sein:


    Code
    .container-header .metismenu.mod-menu .metismenu-item>a:hover {
    text-decoration: underline dotted red 5px;
    }


    Den kannst Du ja mitnehmen in die neue Anfrage.


    vG