Menü-CSS-Formatierung ohne Einzug für nur eine Box

Gelöst travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Hallo alle,

ich setze die neuste WordPress-Version ein und kenne mich mittlerweile gut mit WordPress aus – so gut, dass ich zwar für die meisten von euch vermutlich noch Anfänger bin, aber jetzt erstmal etwas tiefer einsteigen möchte / muss und mit einem css nicht weiterkomme.

Ich weiß grundsätzlich so etwa, wie css funktioniert. Ich habe aber das Problem mit einem Container, der ein Widget enthält. Und zwar soll dieser Container ein Menü-Widget aufnehmen. Das funktioniert auch alles wunderbar, allerdings möchte ich jetzt gerne mehrere Container mit mehren Menüs auf meiner Seite haben und nur in einem Container sollen die Menüpunkte nicht eingerückt werden. Der Container vor meiner Bearbeitung:

Der Container:
<div class=“werbung panel-widget-style panel-widget-style-for-797-0-1-4″><div class=“menu-werbung1-container“><ul id=“menu-werbung1″ class=“menu“><li id=“menu-item-1253″ class=“werbung menu-item menu-item-type-post_type menu-item-object-page menu-item-1253″>Amazon
</div></div>

Alles wird um 30Px eingerückt. Wenn ich mir das alles im Inspektor ansehe und das Box-Modell anzeigen lasse, dann ist padding-left mit 30 definiert,

.entry-content ul {
padding-left: 30px;}

Leider bekomme ich nicht heraus, wie ich die einzelne Klasse anspreche. Mit einem generellen CSS-Eintrag im WordPress-Theme gelingt es mir nur für alle Boxen:

.entry-content ul {
padding-left: 0;}

CDSS-Einträge nur im Widget selbst führen nicht zum Erfolg, dann geschieht gar nichts.

Könnt ihr mir weiterhelfen? Wie kann ich generell schnell die CSS-Klasse herausfinden und wie muss ich diese angeben?

Danke,

Jan

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat

Der Inspektor deiner Webentwickler-Tools im Browser ist schon das richtige Instrument, um Änderungen zu testen. Die kannst du dann kopieren und im Customizer unter Zusätzliches CSS einfügen.

Achte darauf, dass bei CSS wichtig ist, wie spezifisch deine Regel ist.
eine Regel .irgendwas { color: green; } wird durch `.main .irgendwas { color: blue; } überschrieben. Aber das wird dir dann auch im Inspektor angezeigt und du musst nur suchen, welche Regel deine Änderung überschreibt.

Bei deiner Beschreibung ist mir nicht ganz klar geworden, was du nun eigentlich erreichen möchtest (du schreibst nur, was dir statt dessen gelingt). Vielleicht magst du nochmal kurz beschreiben „beim x. Widget möchte ich einen Einzug um y Pixel haben und einen roten Rand und …“ – dann schaue ich nochmal.

Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Mir gelingt es nicht, „irgendwas“ anzusprechen. Wie bekomme ich die Klasse heraus? Ich kann im Inspektor 30px auf 0px setzen, aber mir gelingt das nicht für nur die eine spezifische Box, sondern nur global für alle Boxen. Auf der verlinkten Seite ist die Box gemeint, die den Text-Link „Amazon“ enthält.
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat
- Rechtsklick auf die Überschrift „Werbung“ (1)
- Nach einer individuellen ID oder Class suchen, hier panel-797-0-1-3 (2)
- CSS-Regel mit + hinzufügen, hier
```
#panel-797-0-1-3 .textwidget {
margin: 0 50px; /* Beispiel! */
}
```
  (3)
Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Das hilft leider noch nicht, weil es die falsche Box ist und ich leider keinen Erfolg habe, wenn ich wie du es beschreibst vorgehst. Wie kann ich hier Fotos posten? Dann würde ich das auch mit Pfeilen darstellen können. 🙂

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat

Steht in unserer FAQ: Wie kann man hier Bilder in einen Forenbeitrag einfügen?

Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Hier der Screenshot mit dem konkreten Element und der momentanen Eintragung von 30px bzw. 3rem.
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 1 Monat
Hallo,
teste das mal bitte:
```
.entry-content ul, .entry-content ol {
    padding-left: 0px!important;
}
```
Die Werte kannst du ja, wenn es das ist, was du suchst, individuell ändern.
Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 4 Jahren, 1 Monat von Hans-Gerd Gerhards.
Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

das funktioniert, ul genügt so gar (und auch ohne important). Das Problem liegt aber tatsächlich dadrin, dass ich nicht an die Unterklasse heran komme. Ich kann das ins globale CSS schreiben, dann wirkt es sich aber überall aus.
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 1 Monat
Hallo,
stimmt, das hatte ich oben in deiner Ausgangsfrage überlesen.
Wenn du das aber so machst, wie @pixolin das bereits vorgeschlagen hast, dann kannst du z. B. folgende CSS-Regel einfügen:
```
ul#menu-werbung1 {
    padding-left: 3rem;
}
```
Viele Grüße
Hans-Gerd
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat
Den Bereich bekomme ich wegen des Lazy Loading gar nicht erst angezeigt.
Aber ansonsten gilt das, was ich bereits beschrieben habe: du suchst in den nächsthöher gelegenen HTML-Tags nach individuellen Klassen oder IDs und verwendest die für deine CSS-Regel, also z.B.
```
.panel-widget-style-for-797-0-1-4 ul {
padding-left: 0;
}
```
Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat
Super, das Problem ist gelöst. Es geht theoretisch mit beidem:
```
.panel-widget-style-for-797-0-1-4 ul {
padding-left: 0;
}
```
Für die eine Box nur auf dieser einen Seite. Wie kamst du jetzt genau auf .panel-widget-style-for-Nr statt werbung panel-widget-style panel-widget-style-for-Nr, was eigentlich in den Anführungshäckchen im Inspektor steht?

Mit diesem Ausdruck bin ich glücklicher:
```
ul#menu-werbung1 {
    padding-left: 0rem;
}
```
Da ich das gleiche Menü mehrfach einsetze, muss ich dann nur einmal das CSS anpassen. Wie setze ich aber # sinnvoll ein? Ich kenne nur das Ansprechen über . , so einfach muss ich das mal ausdrücken, aber # ist mir bisher auch in diversen CSS-Einführungen nicht begegnet.

Moderatorenhinweis: Bitte Quellcode als ‘Code’ auszeichnen. Viele Grüße, Hans-Gerd
- Diese Antwort wurde geändert vor 4 Jahren, 1 Monat von Hans-Gerd Gerhards.
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat

Das kannst du hier nachlesen:

https://developer.mozilla.org/de/docs/Web/CSS/ID-Selektoren

Grundwissen in PHP, HTML, CSS und JavaScript können wir hier nicht vermitteln, das würde den Rahmen des Forums sprengen.

Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Danke! Das Grundwissen, und auch etwas mehr, habe ich, mehr als es jetzt vielleicht erscheinen mag. Tausend Dank aber – manchmal sind es so Kleinigkeiten, an denen man verzweifelt, wie z.B. die Raute. 😉

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 1 Monat

Naja, die „Rauten“ sind aber absoltue Basics.
Vor allem solltest du die dunkle Seite der Macht nicht unterschätzen.

Ich hatte den Thread bereits als „gelöst“ markiert. Viel Erfolg mit der Website.

Thread-Starter travelgusto
(@travelgusto)

vor 4 Jahren, 1 Monat

Sorry, aber weder in den ganzen Einführungswebsites, die ich zum Thema gelesen habe, noch in meiner zweitägigen Schulung (vielleicht schlechter Dozent) noch in meinem WordPress-Buch (mit CSS-Kapitel) war das drin. So Basic ist das nicht – toll, dass es euch dafür gibt. Ich habe tagelang rumgedoktert und mich tot gesucht und alles mögliche versucht zu adressieren, bis ich mich entschieden habe, hier zu posten. Und dann geht’s so schnell. Ein ganz, ganz dickes Lob!

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)

Das Thema „Menü-CSS-Formatierung ohne Einzug für nur eine Box“ ist für neue Antworten geschlossen.

Ansichten