Navigationsleiste vergrößern / Menüleiste anpassen

BeBlu · 11. Juli 2021

Hallo liebe Community,

vorweg, ich bin ein absoluter Laie was Joomla angeht und versuche mich gerade da rein zu fuchsen, zumindest ausreichend um unsere Schulhomepage zu pflegen.

Ich habe jetzt mehrere neue Menüpunkte angelegt und das läuft alles so. Jetzt habe ich aber das Problem, dass meine Oberpunkte nicht mehr alle in der grünen Zeile angezeigt werden.

Ich würde jetzt gern folgendes tun:

Entweder die grüne Leiste dicker machen, damit auch die Punkte die eine Zeile nach "unten" gerutscht sind (z.B. Ganztag) sichtbar zu machen.

Was mir aber noch lieber wäre, die Menüpunkte alle in die grüne Leiste zu bekommen (sind noch 2), anstatt eine neue Zeile zu beginnen.

Wieso die Punkte nach "Für Schüler" in die nächste Zeile rutschen weiß ich gar nicht

Wer kann mir, möglichst simpel erklärt, helfen?

Stef · 11. Juli 2021

Hallo,

Versuche mal folgender Code in einer custom.css einzufügen:

Code

div.dropdown-horizontal ul.menu {
    padding-left: 0%;
}
body.html-fullpage #nav {
    background: #458646;
    height: 4em;
}

Hier ist ein Beispiel und eine Anleitung um eine custom css anzulegen

https://www.joomlaplates.de/su…tion/custom-css-erstellen

BeBlu · 11. Juli 2021

Hallo Stef ,

danke für die schnelle Antwort.

Ich habe das probiert. Hat sich aber auf der Homepage nichts verändert.

Ist das im Bild so richtig?

Stef · 11. Juli 2021

Ersetze mal mit diesen Code :

CSS

div.dropdown-horizontal ul.menu {
    padding-left: 0px !important;
}

body.html-fullpage #nav {
    height: 4em !important;
}

Dann die Änderung Speichen.

Stef · 11. Juli 2021

Sollte es nicht funktionieren, dann wird mit deinem Template statt eine «custom.css» eine «user.css» benutzt.

Einfach deine custom.css in user.css umbenennen.

BeBlu · 12. Juli 2021

Hey Stef ,

hat leider beides nicht funktioniert.

Woran könnte das liegen?

Kann ich ein Screenshot von etwas machen, damit man vll eine Lösung findet?

Vielen Dank schonmal für die Hilfe

Sieger66 · 12. Juli 2021

Siehe daher z.B. auch:

Thema

Wie kann ich bei meinem Template das CSS oder Javascript anpassen bzw. ergänzen?

Damit wird dir dies auch richtig beantworten können bräuchten wir von dir einen Link zum Template oder noch besser zusätzlich auch den Link zu deiner Website mit dem Template.
Dies benötigen wir weil der Dateiname und der Dateiordner in dem die gewünschten Ergänzungen gemacht werden müßten vom jeweiligen Template abhängig sind!
Und falls außerdem mit dem Template ein Framework zusätzlich installiert wurde, ist es bei manchen Frameworks auch vom Framework abhängig!

Du kannst natürlich auch, je…

Sieger66

22. Januar 2021

Eure Website scheint ein (altes) "JYAML-Template" zu benutzten:

https://kirschbergschule-reisk…/kbs/template_preview.png

Wie man bei einem JYAML-Framework eine CSS-Datei ergänzt ist mir auch nicht bekannt.

Kannst es aber mit dem Plugin von zero24 versuchen:

https://extensions.joomla.org/…ign/templating/customcss/

Aber das Plugin nach der Installation auch aktivieren:

To use the plugin please activate it. Control Pannel --> Extensions --> Plugins --> System - Template custom.css.

Die JYAML-Doku ist ja wohl auch nur noch im Web-Archiv teilweise vorhanden:

http://web.archive.org/web/201…ation/skripte-stylesheets

Sieger66 · 12. Juli 2021

Oder du kannst uns alternativ mal den Inhalt der Dateien index.php und component.php von eurem Template hier im Forum als Code posten:

/templates/kbs/index.php

/templates/kbs/component.php

Dann kann man eventuell eine Ergänzung in dieser Datei vorschlagen.

Stef · 12. Juli 2021

Kannte ich nicht, es schien alles wie üblich.

https://www.kirschbergschule-reiskirchen.de/ganztag

JoomlaWunder · 12. Juli 2021

Ansonsten ganz einfach in folgender css-Datei den Code ändern:

templates/kbs/css/navigation.dropdown.css

Zeile 105: padding-left: 0;

Wahrscheinlich wird diese eh nie mehr bei einer Aktualisierung überschrieben werden. Wenn doch, dann die Änderung anschließend erneut durchführen. Also diese Änderungen am besten irgendwo notieren, aufbewaren und im Hinterkopf behalten.

BeBlu · 12. Juli 2021

Hallo,

erstmal vielen Dank für die tolle Hilfe.

JoomlaWunder leider hat die Änderung von 20% auf 0 nichts geändert.

Schade, das wäre sehr einfach gewesen

Sieger66 den Code werde ich nachher mal Posten. Den anderen Vorschlag würde ich danach probieren.

JoomlaWunder · 12. Juli 2021

Zitat von BeBlu

JoomlaWunder leider hat die Änderung von 20% auf 0 nichts geändert.
Schade, das wäre sehr einfach gewesen

Der Wert steht aber immer noch auf 20%. Unbedingt den Joomla-Cache leeren, falls er verwendet wird!

Wenn der Wert dann auf 0 steht, müsste man weiter analysieren....

BeBlu · 12. Juli 2021

Hallo JoomlaWunder

also ich habe die Costum Datei wieder gelöscht, und der Wert war in der css immer noch Null.

Hab den Cache geleert und auch den abgelaufenen Cache.

Die Seite wird aber immer noch so angezeigt.

Sieger66

index.php

PHP

<?php
/**
* JYAML - Template Framework includes YAML for Joomla!
*
* All rights reserved. The JYAML project is a template to manage and
* configure Joomla!-Templates with the YAML XHTML/CSS Framework
* - http://www.yaml.de
*
* -----------------------------------------------------------------------------
*
* @package     JYAML
* @subpackage  Template
*
* @author      Reinhard Hiebl <[email='reinhard@hieblmedia.com'][/email]>
* @copyright   Copyright (C) 2006 - 2014, HieblMedia (Reinhard Hiebl)
* @license     http://www.jyaml.de/en/license Creative Commons Attribution 3.0
* @link        http://www.jyaml.de
*/


/* Note:
* -----------------------------------------------------------------------------
* JYAML use configuration based html files.
* Look in "/html/index/[configured-html_file].php" to modify.
*
*/


defined('_JEXEC') or die;


// Dependency check
if (!class_exists('JYAML'))
{
die('JYAML Framework not available: Please check if the JYAML System Plugin and JYAML Framework Library is installed and enabled!');
}


// Load the html index template
$jyaml = JYAML::getDocument();
$jyaml->dispatchTemplate(
JFile::stripExt(basename(__FILE__))
);

Alles anzeigen

Sieger66

component.php

PHP

<?php
/**
* JYAML - Template Framework includes YAML for Joomla!
*
* All rights reserved. The JYAML project is a template to manage and
* configure Joomla!-Templates with the YAML XHTML/CSS Framework
* - http://www.yaml.de
*
* -----------------------------------------------------------------------------
*
* @package     JYAML
* @subpackage  Template
*
* @author      Reinhard Hiebl <[email='reinhard@hieblmedia.com'][/email]>
* @copyright   Copyright (C) 2006 - 2014, HieblMedia (Reinhard Hiebl)
* @license     http://www.jyaml.de/en/license Creative Commons Attribution 3.0
* @link        http://www.jyaml.de
*/


/* Note:
* -----------------------------------------------------------------------------
* JYAML use configuration based html files.
* Look in "/html/component/[configured-html_file].php" to modify.
*
*/


defined('_JEXEC') or die;


// Dependency check
if (!class_exists('JYAML'))
{
die('JYAML Framework not available: Please check if the JYAML System Plugin and JYAML Framework Library is installed and enabled!');
}


// Load the html component template
$jyaml = JYAML::getDocument();
$jyaml->dispatchTemplate(
JFile::stripExt(basename(__FILE__))
);

Alles anzeigen

JoomlaWunder · 12. Juli 2021

Zitat von BeBlu

Die Seite wird aber immer noch so angezeigt.

Wie meinst du das?

Momentan ist die Änderung doch in der navigation.dropdown.css enthalten. Dementsprechend ist linker Abstand 0 und die Menüpunkte werden in 1 Zeile angezeigt. Das war doch dein Anliegen, oder?

Keine Ahnung, wie das auf kleineren Bildschirmen ausschauen mag.

EDIT: Kann man natürlich in eine custom.css schreiben, die man dann noch aufrufen müsste. Scheint da anscheinend nicht vorgesehen zu sein.

BeBlu · 12. Juli 2021

Also bei mir an meinem Laptop sind die Menüs Start, Wir, Wichtiges, Unsere Schule, Für Schüler in der grünen Leiste,

die Menüpunkte Für Eltern und Ganztag sind jedoch in die nächste Zeile gerutscht und nicht sichtbar für mich.

Weil der Grüne Balken nicht breit/tief genug ist.

Habe jetzt mal den Menüpunkt Für Eltern vor Für Schüler geschoben und die Schüler sind nach unten gerutscht.

Hier mal 2 Bilder dazu.

Für Schüler ist kein Punkt unter Start, falls das so aussieht, sondern ein eigener Menüpunkt.

Der grüne Balken müsste dicker sein, oder das Menü in der ganzen Leiste angezeigt werden

JoomlaWunder · 12. Juli 2021

In der genannten css-Datei gäbe es weitere Manipilationsmöglichkeiten ab Zeile 152:

Code

.dropdown-horizontal li span.item-title {
padding:0.7em 1.8em 0.7em 1.4em;
font-weight:bold;
font-size: 115%;
}

Ändere mal den zweiten und vierten Wert von padding, also rechter und linker Abstand um die Hauptmenüpunkte. Dann werden diese etwas enger gesetzt. Oder ändere einfach mal die Schriftgröße!

Nutzt du einen aktuellen Browser!

Sieger66 · 12. Juli 2021

Oder alternativ mal am ende der CSS-Datei ergänzen:

CSS

body.html-fullpage #nav {
    height: 6em !important;

dann müßte der "grüne Steifen" breit genug sein.

Und deinen Browser-Cache leeren !

Weils bei uns derzeit so aussieht (da hab ich aber schon auf obige 6em geändert) :

Sieger66 · 12. Juli 2021

Nochmal, jetzt aber hoffentlich richtig :

CSS

body.html-fullpage #nav {
    height: 6em !important;
}

Sorry, im post#20 fehlt natürlich die schließende Klammer!

BeBlu · 12. Juli 2021

Hi JoomlaWunder und Sieger66

also ich habe jetzt die Werte von 1.8em auf 0.8em geändert, das hat aber auch nichts gebracht. (Cache hatte ich wieder geleert).

Und die Zeilen

body.html-fullpage #nav {
height: 6em !important;

}

hab ich in der dropdown auch unter 1 und 2 rein kopiert. War das richtig so?

Sieger66 · 12. Juli 2021

Nein,

das ist falsch mein Code gans ans ende der Datei und da fehlt auf jeden fall die schließende Klammer aus meinem post #21 !!

Lösche unbedingt aber den Code der eingefügten Zeilen 1+2