Menü-Schriftgröße ändern

  • Guten Tag,

    ich als Joomla-Anfänger versuche gerade eine Vereinshomepage zu kreiieren. Nach mehreren Versuchen bin ich nun beim Protostar-Template gelandet. Oben auf der Seite befindet sich horizontal ein Hauptmenü. Jedoch ist mir dabei die Schrift zu klein, ich hätte diese Schrift gern eine Nummer größer, oder evtl auch fett, da das Menü sonst zu unscheinbar wirkt. Habe leider keine Ahnung, ob, oder wie dies umsetzbar ist.


    Unter http://www.kickers-gonnatal.de könnt ihr euch ein Bild davon machen.



    Ich würde mich über Hilfe riesig freuen, vielen Dank schon mal im Voraus :-)


    Beste Grüße :)

  • Eventuell so:


    Gehe unter Templates in das Template. Erstelle dort eine neue Datei namens user.css. Diese muss dann im Verzeichnis "css" liegen.

    Klicke die Datei an! Jetzt kannst du die noch leere Datei bearbeiten, d.h. css-Anweisungen reinschreiben, die dann die Standard-Werte überschreiben.


    Füge mal folgendes ein:


    Code
    1. .nav-tabs > li > a,
    2. .nav-pills > li > a {
    3. font-size:18px;
    4. font-weight:bold;
    5. }


    Speichern nicht vergessen. Spätestens wenn der Cache leer ist oder du die Seite im Browser aktualisiert hast, sollte die größere Schrift in Fett erscheinen.

  • Du solltest noch eine Datenschutzerklärung einbauen. Stichwort DSGVO.

    Anonsten kannst du eine user.css anlegen und das aussehen durch entsprechende Anweisungen ändern.

    Hilfreich ist e sicgh die Webentwicklertools z.B. im FF anzeigen zu lassen um zu sehen, warum die Dartsellung so erfolgt.

    Ich hoffe auf dem Bild kannst du ein bisschen was erkennen. Schriftgröße ist 13 px. Die Zeile ist 18 px, so dass man mit seinen gewünschten Werten aufpassen muss, da Änderungen auch Nebenwirkungen zeitigen können.

    Waren die anderen schneller.

    Ich meine die eigene css-Dtaei sollte user.css heißen.

    Eigene Datei ist wichtig wegen der Update-Sicherheit. Beim nächtsen Joomla-Update sind sonst deine Änderunegn weg.

  • Hallo,


    das mit der user.css hast Du ja schon prima hingekriegt.


    Wenn Du nicht willst, dass diese Änderungen sich (auch) auf das Footer Menü auswirken, also hier das Impressum, dann ein .navigation bei den .nav-pills davorsetzen.


    Wäre dann so abgeändert:

    Code
    1. .nav-tabs > li > a,
    2. .navigation .nav-pills > li > a {
    3. font-size:13px;
    4. font-weight:700;
    5. margin:auto;
    6. }

    Liebe Grüße

    Christine

  • Hallo alle zusammen,


    ich bedanke mich vielmals für alle zahlreich gegebenen Ratschläge und Hilfen! Habe dies mit einer user.css hinbekommen. Danke :-)


    Hätte eventuell noch eine kleine Frage:
    Rechts in der Menü-Box "Abteilungen" finde ich die Menü-Punkte leider ebenfalls etwas zu klein geraten. Wie kann man das etwas vergrößern?

    Ich freue mich von euch zu lernen ;-) :-D

    Vielen Dank :-)

  • Gehe mal ins entsprechende Modul und gib unter "erweitert" beim Modulklassensuffix folgendes ein:

    " well"

    Beachte das Leerzeichen vor well und lass die Hochkommata weg.

    Ändert sich schon was am Modul?


    Nun könntest du in der user.css Formatierungen am Modul vornehmen, exemplarisch:


    .... und so weiter! Keine Ahnung, ob hier font-size greift oder ob man nur die Optik des Moduls verändern kann!


    Ich nutze meistens die Möglichkeit von "CSS-Klasse von Link" unter "Linktyp" im jeweiligen Menüpunkt. Da trage ich dann z.B. "mainlevel" ein und ergänze in der user.css dann folgendes:


    Damit könnte man prinzipiell jedem Menüpunkt eine andere Schriftgröße geben.

    Geht womöglich eleganter! Vielleicht kennt jemand einen besseren Weg?

  • Hallo MrMoppeli94,

    als Neuer klinke ich mich mal mit ein paar allgemeineren Infos ein.

    Wie man mittels Developer-Tools die CSS-Regeln einer Webseite untersucht und diese dann in einer eigenen "custom.css" überschreibt, dazu gibt es jede Menge Videos. Hierzu hast du ja schon bereits einige Infos bekommen.

    Der Menüeintrag "1. Mannschaft" hat folgende CSS-Regel:

    Code
    1. .small {
    2. font-size: 11px;
    3. }

    Das ist m.E. zu klein!

    Für die Benutzerfreundlichkeit würde ich nicht kleiner als 14pt werden.

    Vielleicht legst du zunächst einmal folgendes Grobgerüst für deine Schriftgrößen fest:

    • Überschrift ... z.B. Helvetica Neue bold 24 pt (h1)
    • Überschrift 2. z.B. Ebene Helvetica Neue 20 pt (h2)
    • Überschrift 3. ... das ist nun der fragliche Eintrag "1. Mannschaft"!
    • Fließtext .. Georgia 18pt
    • Bildunterschrift ...Georgia kursiv 14pt (18 px → (10pt/13px) = ca. 14pt)

    Welche Schriftarten/Größen du hier verwendest, ist natürlich Geschmackssache. Die obige Auflistung ist jedoch - meine ich - als erste Orientierung sinnvoll (vgl. JACOBSEN, Jens: Website-Konzeption). Einmal festgelegt, musst du dann darauf achten, dass du immer die gleichen Schriftgrößen verwendest.

    mfg

    Christian

    Es gibt für jedes komplexe Problem eine einfache Lösung - und die ist falsch! (Umberto Eco)

  • Hallo Christian,

    ich weiß, dass diese Menü-Punkte zu klein sind. Daher meine 2.Frage in diesem Thread.


    Leider bin ich blutiger anfänger, daher habe ich gehofft, man könne mir erklären, wo genau, ich was ändern muss, dass sich die Schriftgröße ändert.


    Bin dir aber dankbar, für deinen Hinweis!


    MfG Moppel

  • Hallo MrMoppel,

    welche Vorkenntnisse du hast, erfahren wir natürlich erst nach und nach.

    Falls du keine CSS-Vorkenntnisse hast, dann sind umfangreichere Anpassungen für dich wahrscheinlich zunächst schwierig.

    Schau dir doch mal das Video zum Thema custom.css an (war das erste, was ich gefunden habe).

    Ich glaube, dass das der nächste Schritt ist.

    Hier wird mittels Browser (Chrome oder Firefox ganz egal) gezeigt, wie du die CSS-Regel findest, die zum Ändern bzw. Größe der Schriftart z.B. von "1. Mannschaft" notwendig ist. Probiere zunächst einmal direkt im Browser Änderungen der CSS-Datei vorzunehmen, diese werden natürlich nur temporär gespeichert und du siehst sofort, welche Auswirkungen deine Änderung hat.

    Gut ist es hier einfache CSS-Anweisungen einzufügen wie "border: 3px solid red;", um zu sehen, ob du dich an der richtigen Stelle befindest.

    Falls Englisch nicht so praktisch für dich ist, oder du weitere Videos benötigst, findest du z.B. unter Tutorial Garage deutsche Videos.

    Suchbegriffe könnten sein: Joomla 3 custom.css, ein Joomla Template anpassen u.ä.

    Wenn du dann festhängst, meldest du dich wieder.

    mfg

    Christian

    Es gibt für jedes komplexe Problem eine einfache Lösung - und die ist falsch! (Umberto Eco)