Erledigt - Wie kann ich die Elemente ansprechen?

[lyzarr]

Hallo Allerseits!

Ich sitze gerade an einem template für Joomla 3 und schaffe es nicht zwei kleine Änderungen umzusetzen, da ich nicht weiß wie ich die Elemente der Navigation in der css-Datei ansprechen kann.

1. Ich habe den aktiven links in der navi u.A. einen kleinen Schatten nach innen verpaßt.
   Sobald nun ein Unterpunkt (im Dropdown menu) aktiv ist (bei mir "Info" unter "About"), erbt der nun diese Eigenschaft und hat ebenfalls den Schatten nach innen.
   Dies möchte ich unterbinden. Dieser style soll nur für die Hauptpunkte gelten.
   
   
2. In der minimal-Variante des Menüs, sobald man den Hamburger button klickt und das Listen-Menü aufklappt, möchte ich einen Abstand zwischen dem Logo und dem Menü (dem ersten Eintrag) haben. Da ich für das Logo einfach etwas mehr Platz in der Höhe benötige.

Ich hoffe auf Eure Hilfe.

Vielen Dank schonmal vorab,
lyzarr

 

[Squeendot]

Zu Problem 1:

Spoiler: Problem 1

#itemid-103 > div.navbar.navbar-inverse.navbar-fixed-top > div > div > div > div:nth-child(3) > div > ul > li.item-102.active.dropdown.deeper.parent > ul > li > a {
    box-shadow: none;
}

Was meinst du bei 2.?
Ich kann leider keinen Hamburger Button finden

 

[Squeendot]

Ah, jetzt hab ichs verstanden...

Dann hier:

Spoiler: CSS

#itemid-101 > div.navbar.navbar-inverse.navbar-fixed-top > div > div > div > div.span9.hidden-desktop {
    margin-bottom: 20px;
}

Spoiler: CSS im Media-Query

@media (max-width: 980px) {
    #itemid-101 > div.navbar.navbar-inverse.navbar-fixed-top > div > div > div > div.span9.hidden-desktop {
        margin-bottom: 20px;
    }
}

Ich hoffe, ich konnte helfen


Lieber Gruß,

Julian


EDIT: Du musst den Code hier natürlich in einen Media-Query packen, sonst hast du die Änderung ja auch im Vollbild...

EDIT 2: Ich habe den zweiten Code inklusive Media-Query oben in einen zweiten Spoiler geschrieben. Viel Erfolg!

 

[lyzarr]

Vielen Dank Julian,

für Deine Lösungsvorschläge!
Aber mit den itemid's zu arbeiten funktioniert ja nicht wenn es mehrere Unterpunkte gibt (habe zur Anschauung welche angelegt).

[edit:]
Ah, okay, habe die beiden itemid's einfach entfernt, dann geht's.
Was bedeutet die "3" in "nth-child(3)"?
[edit]

Bei dem 2. Punkt hätte ich gerne, daß die eingeklappte nav-Leiste sich nicht in der Höhe verändert, und der notwendige Abstand sich demnach am oberen Ende des Ausklappmenüs befindet (also mit einem margin-top), und nicht bei der eigentlichen Menü-Leiste (mit margin-bottom).

Viele Grüße,
Dan

 

[Squeendot]

Also die (3) bedeutet, dass es das 3. "Kind" dieser Liste ist. D.h. es ist das dritte generierte Objekt. Durch diese Schreibweise kann man Objekte sehr präzise ansprechen.

Zu 2.:
Das margin bottom machst du dann einfach wieder raus gibst deiner <ul> das margin top.
Also so:

@media (max-width: 980px) {
    #itemid-101 > div.navbar.navbar-inverse.navbar-fixed-top > div > div > div > div:nth-child(3) > div > ul {
        margin-top: 20px;
    }
}

Lieber Gruß,

Julian

 

[lyzarr]

Nochmals vielen, vielen Dank - jetzt ist es perfekt!

Darf ich Dich noch mal ganz doof fragen, wieso Du die #itemid's immer da drin läßt?
Ich habe die jetzt immer entfernt - habe ich da irgendetwas übersehen, weshalb die Sinn machen?

 

[Squeendot]

Nene, entferne sie ruhig. Falls du aber wirklich nur ein Element ansprechen willst, sind die halt praktisch.
Ich habe mit Google Chrome die Elemente untersucht und einfach den CSS-Pfad kopiert, da nimmt Chrome die ID's immer mit. Und ich war dann einfach zu faul

Gut, dass ich helfen konnte

Julian

 

[lyzarr]

Alles klar!
Also nochmals vielen Dank!

Dan

 

[lyzarr]

Hi!

Ich bin nochmals über drei Probleme bei meinem Joomla 3 / Bootstrap template gestolpert, und würde mich sehr über Hilfe dazu freuen wie ich diese per css anpassen kann.
Da es um dies selbe Seite geht, habe ich den Beitrag wieder auf "nicht gelöst" gesetzt, da ich dies als sinnvoller erachtet habe, als einen weiteren neuen Beitrag zu erstellen.
http://www.lyzarr.com/testsite/

1.) habe ich die Anzeige sämtlicher Autoren-Details deaktiviert, wobei nun aber ein Abstand jeweils ober- und unterhalb des eigentlichen Beitrags dringend notwendig wird. Wenn ich mir die Seite mit den Webmaster tools anschaue, befindet sich der Beitragstext im <div itemprop="articleBody">…</div>, aber wie muß ich ihn in der css-Datei ansprechen, um ihm ein margin oben und unten zuzuweisen?

2.) Ich habe der Navigationsleiste eine Leder-Textur, einen hellbraunen Rand unten und einen Schlagschatten unten zugewiesen. Sobald die navi nun gemäß viewport collapsed und das Hamburger Menü angezeigt wird, verschwindet der Schlagschatten (alle anderen styles bleiben). Wie bekomme ich auch in dieser Ansicht den Schlagschatten angezeigt?

3.) Dem footer habe ich ebenfalls diesen Hintergrund zugewiesen und er nimmt die volle Breite ein. Sobald der viewport aber unter 780px liegt, nimmt der footer nicht mehr die gesamte Breite ein (dies soll er aber weiterhin).

Ich hoffe auf Eure Hilfe und bedanke mich bereits im Voraus für Eure Mühe!
Gruß,
Dan

 

[lyzarr]

Ich habe die Lösung für Punkt 1:
.item-page {} für den Abstand unterhalb des Beitrags, und
.page-header {] für den Abstand zwischen Trennlinie unterhalb der h2 und dem Artikeltext.

Ich hoffe ich erhalte doch noch Hilfe für die anderen beiden Probleme...

 

[Squeendot]

Zu Punkt 2: Bei mir ist der Schlagschatten auch bei collapsed da. Vielleicht liegts am Browser? Ich benutze Google Chrome. Aber dann dürfte der Schatten eigentlich gar nicht auftauchen. Also denke ich mal, das hast du gelöst...

Zu Punkt 3: Dann musst du die Breitenangabe in deinen Media-Query setzen, der für < 780px


Lieber Gruß,

Julian