Protostar anpassen

  • Hallo zusammen.
    Das Hauptmenü unter dem Header habe ich schon mal alleine horizontal hinbekommen.
    Allerdings ist die Formatierung nicht wirklich ansehnlich.
    Der Erste und der Letzte Punkt sind als "Einzelner Beitrag" und die anderen Punkte als "Menü-Überschrift" angelegt.
    Die Formatierung sollte bei allen Punkten gleich aussehen, idealerweise so wie die Menü-Überschriften und auch gleich ausgerichtet sein.
    Ebenso ist es bei den Punkten in den Dropdown Menüs.
    Wie kann ich das am Besten umsetzen?
    Hier geht´s zu unserer Seite: http://test-63883.alfa3044.alf…erver.de/joomla/index.php


    Besten Dank schon mal.


    Gruß
    kafi112

  • Hallo kafi112,


    Du kannst einen einzelnen Beitrag ja auch einem Menüpunkt zuordnen. Also ich würde alle Punkte zu Menüpunkten machen und dann mußt Du noch bei den Menüerweiterungen beim Menüklassensuffix " nav-pills" eintragen. Wichtig ist das Leerzeichen vor nav-pills.


    Viel Erfolg

  • Hallo kafi112,


    Du kannst einen einzelnen Beitrag ja auch einem Menüpunkt zuordnen. Also ich würde alle Punkte zu Menüpunkten machen und dann mußt Du noch bei den Menüerweiterungen beim Menüklassensuffix " nav-pills" eintragen. Wichtig ist das Leerzeichen vor nav-pills.


    Viel Erfolg


    So ganz verstehe ich nicht was du meinst.
    - Ich habe jetzt z.B. den Routenplaner als "Menü-Überschrift" angelegt, ein Untermenü hinzugefügt und diesem den Beitrag "Routenplaner" zugeordnet.
    Jetzt geht allerdings erst das Untermenü auf und die Menüüberschrift ist nicht anklickbar. Lässt sich das ändern?
    Wenn ich den Menüpunkt nicht als "Menü-Überschrift" sondern als "Menü-Alias" anlege, habe ich wieder die Linkformatierung.
    - Bei der Startseite lässt sich das so nicht umsetzen.
    Da bekomme ich immer folgende Fehlermeldung:


    Mit deinem Hinweis auf " nav-pills" kann ich leider nicht viel anfangen. Wo muss ich das eintragen und was bewirkt das?
    Ich habe unter Beiträgen und Menüs alles durchsucht, aber nirgendwo was gefunden um das einzutragen.
    Ich hatte mir vorab ein Modul "Menü" angelegt, dort " nav-pills" eingetragen und der "position-1" zugewiesen, um das Hauptmenü horizontal anzuordnen.




    Deinen Link im Link habe ich mir mal näher angeguckt.
    Dieser ist bestimmt bei vielen Fragen hilfreich, zu meinem aktuellen Anliegen habe ich dort aber nichts gefunden.
    Außerdem ist mein englisch bestenfalls mittelprächtig.

  • Die Anzeige der Startseite habe ich nun auch hinbekommen.
    Nun würde ich noch gerne eine Sache abändern.
    Bei Mouseover im Hauptmenü werden die Links in blau markiert. Dies würde ich gerne in #025b2f ändern.
    Wo finde ich in der template.css diese Einstellung.


    Dann würde ich gerne noch ein Menü rechtsbündig über der Headergrafik einfügen. Darin sollen z.B. das Impressum und Kontakt angezeigt werden.
    In einem anderen Template hatte diese Modulposition die Bezeichnung "Top".
    Im Protostar ist davon nichts zu sehen.
    Ein Modul "Top" habe ich bereits angelegt und dem ja auch eine Position zuordnen.
    Wie aber lege ich fest, wo sich die Position befinden soll?

  • Hallo kafi112,


    na wunderbar :-) Wäre in der Zeile 7277 gewesen, allerdings ist u.a. die hover Farbe in der index.php des Templates. Siehst Du auch im Quelltext. Deswegen der damalige Hinweis.
    Du kannst da auch schauen bei: Erweiterungen > Templates > Stile > Dein Template > Erweitert > Template Colour. Probierst es aus, wie es dann auch wo anders wirkt.


    Stört Dich das nicht, wenn Du bei den Menüs drüberhoverst? Bis man da was erwischt :-)
    Daher: In der template.css, Zeile 7174 da steht u.a:
    margin: 2px 0 0; ändern auf:
    margin: 0;


    Wegen dem Menü neben dem Header: Probiere es auf position: 0
    Edit: Achso oberhalb vom Header. Das mach ich jetzt nicht. Da müsste man in der index.php des templates z..B. eine Navigation einbauen.


    Liebe Grüße, Christine

  • ......Stört Dich das nicht, wenn Du bei den Menüs drüberhoverst? Bis man da was erwischt :-)
    Daher: In der template.css, Zeile 7174 da steht u.a:
    margin: 2px 0 0; ändern auf:
    margin: 0;.....


    Ich weiß jetzt ehrlich gesagt nicht worauf du hinaus willst.
    Ich habe den Wert mal geändert, aber was hat sich dadurch verändert?
    OK, du hast damit irgendeinen Abstand verändert, ich konnte so aber nichts feststellen. search


    Durch ändern der Template Colour konnte ich nun in den Template Einstellungen die Farbe der Links ebenfalls ändern.
    Wenn ich dort aber die Background Colour veränder, sehe ich im Frontend keine Änderung.
    Wo kann ich den die Hintergrundfarbe der kompletten Seite anpassen?


    Ich wollte nun das Menü "Top" erstmal auf position-3 setzen, wo auch Breadcrumbs Modul sitzt.
    Leider setzt sich das Menü unter das andere Menü.
    Kann ich das auch auf eine Höhe mit dem Breadcrumbs Menü setzen und an den rechten Rand ausrichten?


    Vielen Dank schon mal für deine Hilfe und deine Geduld.


    kafi112

  • Puhh .... :-)

    Ich habe den Wert mal geändert, aber was hat sich dadurch verändert?


    Wie ich schon schrieb, beim Drüberhovern flog sozusagen das Menü weg, bis man es traf zum Klicken.


    Zitat

    Durch ändern der Template Colour konnte ich nun in den Template Einstellungen die Farbe der Links ebenfalls ändern.


    gut, hast Du also gefunden.


    Zitat

    Wenn ich dort aber die Background Colour veränder, sehe ich im Frontend keine Änderung.


    Wie im vorigen post erwähnt, sind einige Codes direkt in der index.php verankert. Schau mal hier:



    Das ist das was ich meinte, mit dem extra Code ans Ende der template.css wegen der hover Farbe Menüs. Weil ansonsten, obiges greift. Ausnahmen: siehe weiter unten.


    Zitat

    Wo kann ich den die Hintergrundfarbe der kompletten Seite anpassen?


    siehe oben im Code. Du hast aber: body.site.fluid Probier mal:


    body.site.fluid > Zeile 6988 da steht: #fff; ändern auf Deine Farbe.


    Du schreibst: "komplette Seite". Dies hat dann wiederum Auswirkungen! Schreib jetzt hier nicht alle auf. Und auch nur Teil(e) davon.
    Beispiele:

    Code
    1. .nav-header {color:#999;}


    Oder die Schriftfarbe: Da sind die meisten mit Inline-CSS reingemacht. Heißt: Mit Deinem Editor. Beispiel:


    Code
    1. style="color: #000000; font-weight: normal; font-family: Verdana;">


    & obiges wird genommen. Müsstest Du mit einem !important verstärken:


    Code
    1. body {
    2. color: #fff !important;
    3. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    4. font-size: 13px;
    5. line-height: 18px;}


    Aber das musst Du jetzt wissen, ob Du das so machst, oder alles mit dem Editor.
    Nochmals: Alles was Du mit dem Editor änderst, überschreibt einiges in den CSS Styles.


    Das wegen der Extra Menüs - später. Auch diese wären durch die neue Hintergrundfarbe nicht sichtbar. Müsste man auch ändern.


    Aber eins nach dem anderen, sonst verlier ich den Faden ^^


    Obiges ist ca. der IST-Stand vor einer 1/4 Stunde. Kann sich ja wieder ändern.


    Liebe Grüße, Christine

  • ....Probier mal:


    body.site.fluid > Zeile 6988 da steht: #fff; ändern auf Deine Farbe.....


    Das war es. Danke.
    Zumindest, wenn das Template auf "Fluid" steht. Nach Umschalten auf "Static" war der Hintergrund im Content wieder weiß.
    Habe nun herausgefunden, das in den Template Einstellungen unter "Background Colour" die Hintergrundfarbe außerhalb des Contents festlegt.
    Natürlich nur zu sehen, wenn das Template auf "Static" steht.
    Die Hintergrundfarbe des Contents in "Static" habe ich hier gefunden, ab Zeile 7042:

    Code
    1. .body .container {
    2. background-color: #ECF6CE;


    Wegen der Positionsfestlegung für das Modul werde ich noch mal in Google stöbern.
    Vielleicht finde ich dort ja was.
    Wenn dir dazu noch was einfallen sollte, wäre ich nicht böse. :thumbsup:

  • Ich habe deinen Link noch mal getestet, bin damit aber leider nicht wirklich weiter gekommen.


    Ich hatte aber vorher schon Google bemüht, mir was zusammen gelesen und dementsprechend eingebaut.
    Das neue Menü wird mir angezeigt, ohne das ich weiß, was ich da eigentlich gemacht habe.
    Die Codes sehen folgendermaßen aus:


    templateDetails.xml


    index.php


    template.css


    Das Menü ist schon mal da und müsste "nur noch" angepasst werden.
    - Es sollte sich rechts an der rechten Grenze des Menüs "rechts" orientieren.
    - Der Abstand zum oberen Rand ist meiner Meinung nach in Ordnung.
    - die Größe des Moduls muss angepasst werden (sollte die Höhe des Breadcrumb Menüs haben).
    - Menüeinträge sollten rechts ausgerichtet sein, so das neue Einträge links eingefügt werden und sich die Breite des Menüs am Inhalt ausrichten.
    Oder man läßt den Hintergrund und alles weg, so das die Links direkt auf der Seite stehen (was mir sogar noch lieber wäre).
    - das Ganze sollte responsive sein und mobil, wie das "Menü rechts", unter dem Hauptcontent erscheinen.
    - Im Moment bleibt das Menü statisch an einer Stelle, egal ob ich das Template auf "Static" oder "Fluid" stelle.



    Ich weiß, viele Wünsche die ich da habe.
    Ich versuche wirklich mir mit Google und Youtube selber zu helfen, aber leider komme ich hier bei der Formatierung nun überhaupt nicht voran.

  • Zitat

    Es sollte sich rechts an der rechten Grenze des Menüs "rechts" orientieren.
    - Der Abstand zum oberen Rand ist meiner Meinung nach in Ordnung.
    - die Größe des Moduls muss angepasst werden (sollte die Höhe des Breadcrumb Menüs haben).
    - Menüeinträge sollten rechts ausgerichtet sein, so das neue Einträge links eingefügt werden und sich die Breite des Menüs am Inhalt ausrichten.
    Oder man läßt den Hintergrund und alles weg, so das die Links direkt auf der Seite stehen (was mir sogar noch lieber wäre).
    - das Ganze sollte responsive sein und mobil, wie das "Menü rechts", unter dem Hauptcontent erscheinen.


    Aha. Unter dem Hauptcontent auch noch erscheinen?


    Der Ist-Stand vor ca 3/4 Stunde (hab ja jetzt meine Änderungen drauf) ist:


    sehe das da:


    und zwar: NACH dem:
    </body>
    </html>
    Auf: fb-root container gehe ich nicht ein.


    Zu Deiner CSS:
    was soll bitte z.B: left: 1300px; ?
    Du verschiebst damit alles usw.


    Du hattest ja zu anfangs geschrieben, dass Du diese beiden Menüs oberhalb vom Header haben möchtest.
    ----------------------------------------
    Habe jetzt bei Dir temporär umgebaut. Siehe Codes:
    -----------------------------------------
    Nach dem:


    Code
    1. <!-- Body --> <divclass="body"><div class="container-fluid">


    Die neue obige Modulposition: top:

    Code
    1. <div id="neues_modul"class="pull-right"> <jdoc:include type="modules"name="top" style="xhtml" /> </div>


    Vor dem:

    Code
    1. <!-- Header -->
    2. <header class="header" role="banner">
    3. <div class="header-inner clearfix">
    4. <a class="brand pull-left"
    5. href="/joomla/">


    im Quelltext würde das dann so aussehen:


    CSS: Dort nichts gemacht (Deine temporär gelöscht natürlich). Da kann man immer noch Kosmetik betreiben.


    Außerdem: Erweiterungen > Module > Topmenu> Erweitert > Menüklassensuffix > nav-pills


    Sieht dann so aus wie im screenshot.


    So, Mit Cache löschen ist natürlich wieder alles weg. Nochmals mach ich das nicht :-)


    Liebe Grüße, Christine

  • So, da bin ich wieder.
    Ich habe mein bestes gegeben und es sieht nun (sagen wir mal) anders aus.
    Das Menü sitzt an der gewünschten Position und verschiebt sich auch bei Größenänderungen mit.
    Allerdings stimmt der Abstand zwischen den Menüpunkten nicht und es sind keine funktionierenden Links.
    Außerdem habe ich aktuell den Routenplaner mal versuchsweise dem neuen Menü zugeordnet.
    Dieser wird aber nicht angezeigt.


    Ich habe den Eintrag für das neue Menü in der template.css wieder gelöscht.


    Meine index.php sieht nun so aus:


    Änderungen habe ich erst ab Zeile 139 vorgenommen.
    Wo ist der Fehler?

  • Hallo,


    Das kann so nicht funktionieren. Schau Dir bitte nochmals meine Codes an.


    Du hast von meinem Spoiler-Code abgeschrieben! search Damit wollte ich Dir ja nur zeigen, wie das im Quelltext dann aussieht. Hätt ich nicht tun sollen. :/
    Also der 2. Quellcode.
    Die Menüs machst Du wie gewohnt. Z.B. Neues Menü: Topmenü, oder wie immer Du es nennst. Du hattest ja die Menüs schon mal (vorher).
    Diese 2 weist Du dem Topmenu & Position zu.


    Was für ein Routenplaner? Bitte mach zuerst mal die Menüs fertig.


    Liebe Grüße, Christine