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
    .nav-tabs > li > a,
    .nav-pills > li > a {
    font-size:18px;
    font-weight:bold;
    }


    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
    .nav-tabs > li > a,
    .navigation .nav-pills > li > a {
    font-size:13px;
    font-weight:700;
    margin:auto;
    }

    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
    .small {
    font-size: 11px;
    }

    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

  • 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

  • Hallo, hab in den letzten Tagen unsere Vereinsseite mit Joomla 3 und dem Template Protostar neu aufgesetzt, hab es sogar schon geschafft sie zweisprachig zu machen


    Auf der Suche nach Tipps in Bezug auf die Schriftgröße von Menüs und Beitragstiteln hab ich mich jetzt schon bissl durchs Forum gearbeitet und viele gute Tipps gefunden, gleichmal danke vorweg dafür!


    Meine Frage: wie kann ich die Schriftgröße und Auszeichnung für den Menütyp "main menu" ändern? und für die Beitragstitel?

    siehe Attachment - ich habe re o (position 0) einige Menüpunkte und dann unter dem Slider welche; re o habe ich den Menütyp "main menu"


    anhand der Tipps weiter oben habe ich mir schon eine user.css angelegt mit dem Inhalt


    .nav-tabs > li > a,

    .navigation .nav-pills > li > a {

    font-size:15px;

    font-weight:700;

    margin:auto;

    }


    so habe ich die unteren Menüpunkte schön hingekriegt, die oberen Menüpunkte sollten eigentlich dieselbe Größe haben und auch fett sein



    muss dazusagen, ich bin zwar mit CMS und auch bissl HTML ganz gut bewandert, aber eher von der User-Seite, mit CSS usw. tu ich mir schwer


    herzlichen Dank im Voraus für Tipps

  • Ein Link zur Seite wäre hilfreich.


    (Und immer einen neuen Thread erstellen, wenn das Thema schon älter ist und der Thread bereits als 'Gelöst' markiert ist)


    Ok, Seite über die Suchmaschine gefunden.

    Ist aber 'Offline'.


    Online stellen oder Gastkonto einrichten. ;)

  • oh danke für die schnelle Reaktion, ja der Thread ist alt, aber ich dachte meine Frage ist ja fast genau die, die hier gestellt wurde ;)


    sorry, ja die Seite ist noch offline, solange ich dran bastle, hab jetzt einen User eingerichtet

    soll ich ihm mehr Rechte geben als "registered"?

  • ohje, tut mir leid

    ich bin selbst Admin in einem Forum und finde es immer besser, Fragen weiterzuführen als neu zu stellen, aber ich gestehe, ich hab die Forenregeln hier nicht studiert; hab auch nicht gesehen dass der Thread als "gelöst" markiert ist


    der Thread hat mir geholfen, aber nicht ganz, ein Teil der Navigation reagiert nicht auf die Schriftgrößenänderung, und ich möchte auch gern die Schriftgröße der Beitragstitel ändern, s.o.:


    Zitat


    wie kann ich die Schriftgröße und Auszeichnung für den Menütyp "main menu" ändern? und für die Beitragstitel?

    danke

  • Hallo Ilse,

    ... hab jetzt einen User "*****" eingerichtet soll ich ihm mehr Rechte geben als "registered"?

    Nein bitte nicht - im Gegenteil, auch das "Registered" ist zu viel. Frontend Editierung wäre jetzt sogar möglich.

    thinking

    System > Konfiguration > Berechtigungen > Public > Seitenanmeldung > sonst nichts.

    Offline Zugang bin ich mir jetzt nicht sicher. Hab's nicht so mit ACL :-)

    der Thread hat mir geholfen, aber nicht ganz, ein Teil der Navigation reagiert nicht auf die Schriftgrößenänderung, ...

    der Code vom TE bzw. Deiner in der user.css funktioniert(e) nicht, da es ein anderes Modul ist.


    Probiers mit:

    Code
    .nav > li > a {
    font-size:15px;
    font-weight:700;
    margin:auto;
    }

    Ev. Nebenwirkungen noch überprüfen.

    ... und ich möchte auch gern die Schriftgröße der Beitragstitel ändern, s.o.:

    Meinst Du die Überschriften? Das wären die h2.


    Indigo66 > Hallo Tom, vielleicht kannst Du bitte den Thread abkapseln. Danke schön.


    Liebe Grüße

    Christine