Protostar Main Menü ändern (Farbe Text, Farbe Hintergrund, Fettdruck, Abstände

    Hallo,

    ich bin noch recht neu im Joomla Thema, aber kenne mich schon ganz gut mit den Möglichkeiten des Backends aus. Ich möchte im Protostar Main Menü (wirklich das Standard Main Menü) die Textfarbe und/oder die Hintergrundfarbe ändern.

    Was mit den Joomla-Backend-Mitteln machbar ist, habe ich schon versucht.

    Die den ganzen Beschreibungen im Internet hören meist mit dem Satz auf : Den Rest macht man dann im css oder in der user.css .... Ja aber was denn? Ich habe auch schon mit dem Inspektor (F12) rausgefunden, an welchen Stellen der template.css man was findet. Ich habe schon ein paar Änderungen gemacht, die natürlich mit dem nächsten Update weg waren. (Hatte ich aber für mich dokumentiert :) )

    Kann mir jemand mal ein paar Zeilen angeben, wie das konkret aussieht, wenn man die Schrift im Main Menü (iss noch Standard) in "fett" haben möchte, oder bei Maus-Hoover sich die Hintergrundfarbe ändern soll.

    Für ein paar Zeilen für meine user.css wäre ich für den Anfang sehr dankbar :)

    Ich kann mich dann weiter durch hangeln.

    (Will jetzt hier gar nicht erwähnen, dass es cool wäre, wenn man das pro Menüpunkt kann....)


    Danke schon mal im voraus.:)

    Du legste eine Datei user.css im selben Ordner wie die template.css ab.


    Du findest in der template.css so was in der Art


    .diesda {

    color: green;

    }


    Du kopierst den Block in die user.css und änderst ihn.


    .diesda {

    color: red;

    }


    Wenns nicht wirkt siehst im Inspektor nach, ob deine Zeilen ausgegraut sind. Dann musst die Anweisung in der user.css verschärfen.

    Im Zweifelsfall mit einem !important


    .diesda {

    color: red !important;

    }

    Hallo und danke.

    Leider ist es ja nicht ganz so übersichtlich und das ist mein Problem.

    Ich finde diese Stelle :

    (hoffe, der Screenshot ist noch da)


    und wenn ich rechts z.B. die Farbangaben ändere, tut sich auch was. Änderungen mit den Schiebereglern bringen links neue Einträge hinter a href und ändern das Design.


    In der Mitte das sieht so aus, wie unten eingefügt. Soll ich das so in die user.css kopieren? Was passiert dann?

    Ich weiß, dass nav-list und nav-pills etwas mit dem Menüdesign zu tun haben und für mich hieß das bisher : Finger weg... sonst bringst Du alles durcheinander ;-).


    Wenn ich diesen Bereich natürlich so in die User.css kopieren kann und Änderungen darin auch dann im Frontend zu sehen sind, ist das eine schöne Spielwiese. Kann mir aber nicht vorstellen, dass das so einfach ist.

    Und wenn es zum Crash gekommen ist, nur das alles wieder aus der user.css rauslöschen, und alles ist wieder OK, zumindest im Standard ????

    Danke für weitere Infos.



    Element {

    font-weight: 500;

    }

    .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-primary {

    background: #0088cc;

    }

    .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {

    color: #fff;

    background-color: #005e8d;

    }

    .nav > li > a:hover, .nav > li > a:focus {

    text-decoration: none;

    background-color: #eee;

    }

    .nav-pills > li > a {

    padding-top: 8px;

    padding-bottom: 8px;

    margin-top: 2px;

    margin-bottom: 2px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    }

    Zitat von berndso

    Soll ich das so in die user.css kopieren? Was passiert dann?

    Zitat von berndso

    Kann mir aber nicht vorstellen, dass das so einfach ist.

    Doch das ist es.

    Die user.css überschreibt die template.css. Ohne, dass was "passiert", weil du ja die user.css auch wieder zurückändern kannst. Die template.css bleibt ja unverändert bei deinen Aktionen und du kannst so jederzeit wieder zurück.


    Beide CSS-Dateien werden geladen. Erst die template.css, dann die user.css. Die Reihenfolge ist entscheidend. Was in der user.ccs steht hat Priorität vor den Anweisungen in der template.css. Was nicht in der user.css steht, wird von der template.css abgewickelt.


    In deinem Bild sehe ich z.B., dass das Element, das du links inspizierst mit

    Code
    .nav-pills > .active > a

    angesprochen wird, weil das in dem Kuddelmuddel rechts schwarz hervorgehoben wird.


    Es würde also grundlegend reichen, wenn du nur exakt das Ding anpassen willst und nur die background-color eben nur diesen Teil in die user.css zu übernehmen.

    Code
    .nav-pills > .active > a
{
 background-color: yellow;
}

    Wenn du in diesem Block, den du oben postest, nur das Padding ändern willst

    reicht also in der user.css

    Code
    .nav-pills > li > a {

padding-top: 28px;

padding-bottom: 28px;

}

    Alle anderen Formatierungen werden wie gehabt aus der template.css gezogen. Kannst natürlich auch die ganzen Blöcke kopieren, wenns einfacher für dich ist.


    Grundlegend hast schon recht mit der Befürchtung

    Zitat von berndso

    Ich weiß, dass nav-list und nav-pills etwas mit dem Menüdesign zu tun haben und für mich hieß das bisher : Finger weg... sonst bringst Du alles durcheinander

    Es gibt CSS-Anweisungen, z.B. direkt für den umschleißenden Container,

    Code
    .nav-pills {

}

    neben einigen anderen im CSS-System, die bei Änderung was global "kaputt" machen könnten. Dass z.B. auf veränderten Bildschirmbreiten unerwartet das Aussehen zerlegt und bei manchen CSS-Anweisungen/-Klassen sogar an Stellen, wo man nicht erwartet hätte, weil die eben die selbe Klasse nutzen.


    In anderen Fällen könnte das

    Code
    .nav-pills > li > a

    vielleicht auch ein anderes nav-pills-Menü ansprechen, z.B. im Fuß der Seite und da will man das aber gar nicht.


    Dann muss man die Anweisungen in der user.css exakt auf das Top-Menü ansetzen.


    Dafür hast dann dieses Forum, damit man dir hilft. Bräuchte man allerdings als Helfer oft einen Link.

    Nachtrag zum Thread-Titel:


    "Farbe Text, Farbe Hintergrund, Fettdruck" sollte im Normalfall immer unkritisch sein.


    "Abstände" kann kritisch sein. Meist Paddings weniger als Margins.


    Deshalb auch immer im Firefox zwischendrin mal das Tool "Extras > Webentwickler > Bildschirmgrößen testen" verwenden.

    (Alle Browser haben so was in der Art drinnen. Beim Firefox ist der Vorteil (für mich), dass das ein bisschen mehr abgekopelt ist vom Inspektor, der da nicht immer gleich zusätzlich aufgeht.)


    Nachtrag 2:


    Und natürlich kannst du Anweisungen "dazuerfinden", die in der template.css so nicht explizit stehen. Am obigen Beispiel

    Code
    .nav-pills > .active > a
{
 background-color: yellow;
}
    Code
    .nav-pills > .active > a
{
 background-color: yellow;
 cursor: cross-fade;
 border: 1px solid black;
 line-height: 120%;
}

    Ist jetzt natürlich nur "wilder Unsinn", was ich da genommen habe. Creativity rules! ;)

    Hallo,


    nehmen wir an, Du hast diesen "wilden Unsinn" von Re:Later gemacht > so funktioniert es nämlich, wie der Kollege schreibt :)


    Willst aber:

    Zitat von Re:Later

    In anderen Fällen könnte das

    Code
    .nav-pills > li > a

    vielleicht auch ein anderes nav-pills-Menü ansprechen, z.B. im Fuß der Seite und da will man das aber gar nicht.

    in die user.css die Fußzeile anders ansprechen:

    Code
    .footer .nav-pills > li > a {
background-color: black;
color:#fff;
border: 1px solid yellow; 
}

    Liebe Grüße

    Christine

    Hallo zusammen,

    ich danke Euch vielmals für die umfangreichen Informationen. Jetzt habe ich etwas, womit ich mich mal an die user.css heranwagen kann. Ich werde das erst einmal in meiner Sandbox machen, einer Testseite, in der auch mal was "kaputt gehen" kann. Ich hoffe, ich komme in den nächsten Tagen dazu, es klingt auf jeden Fall spannend :) . Eine Webseite scheint immer eine Baustelle zu sein....

    Ich komme mal auf den letzten Hinweis von Christine zurück, dass evt. ein falsches nav-pills verändert wird. Für footer ist das Beispiel genannt. Wie würde das für das Main-Menü aussehen? Wäre das vielleicht

    .mainmenu .nav-pills > li > a {

    oder müßte an dieser Stelle die Position angegeben werden, wie z.B. eben auch footer? Oder kann im "Standard"-Protostar keine Verwechslung passieren?


    Und für so viele gute Tipps auch einen Link ;) : https://zwar-kamp-lintfort.de/


    VG

    Bernd