CSS Hilfe benötigt für Hueman Hintergrund- und Schriftfarbe

tank170
(@tank170)

vor 6 Jahren, 8 Monaten
Hallo, habe mich die letzten beiden Tage vorsichtig nach vorne gerobbt und schon einige Hilfe erfahren über die Themen Hintergrundfarben- und Schriftfarben- Anpassung. Entsprechende Schnipsel habe ich in die style.css meines Childthemes eingefügt. Leider komme ich jetzt nicht mehr weiter.

Meine gesamte Site sollte als Hintergrund dieselbe Farbe haben. Leider verbleibt ein weißer Balken im Bereich des jeweiligen Seitentitels (habe ich mit Hide Title schon mal auf der Starseite zumindest verkleinert) und auch im unteren Footerbereich.

Der unterste Footerbereich mit dem kaum lesbaren Copyright sollte als Schriftfarbe schwarz haben.

Die sekundäre Sidebar sollte keine Bezeichnung haben oder zumindest in „Weiteres“ änderbar sein.

Möchte mir jemand helfen 🙂

Dankeschön.
- Dieses Thema wurde geändert vor 6 Jahren, 8 Monaten von tank170.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

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

Moderator Torsten Landsiedel
(@zodiac1978)

vor 6 Jahren, 8 Monaten
Für die weißen Bereich sollte das hier helfen:
```
.page-title,
#nav-footer.nav-container {
    background-color: #e0cba6;
}
```
Und hiermit machst due den text im Footer lesbar/dunkler:
```
#footer-bottom #copyright, #footer-bottom #credit {
    color: #fff;
    color: #333;
    font-size: .9375em;
    line-height: 1.5em;
}
```
Gruß, Torsten
Thread-Starter tank170
(@tank170)

vor 6 Jahren, 8 Monaten

Dankeschön. Genau das fehlte. 🙂
Moderator Bego Mario Garde
(@pixolin)

vor 6 Jahren, 8 Monaten
Für CSS-Änderungen ist ein Child Theme nicht unbedingt nötig. Eigentlich reicht es völlig, wenn du deine eigenen CSS-Regeln unter Design > Customizer > Zusätzliches CSS einträgst. Die Verwendung eines Child Themes ist aber weder schlecht noch falsch, erfordert aber unter Umständen mehr Wartungsaufwand, wenn im Parent Theme gravierende Änderungen vorgenommen werden.

Cascading Style Sheets vererben Gestaltungsregeln, sofern eine Regel nicht durch eine spezifischere Regel überschrieben wird. Zu theoretisch? Nehmen wir an, du möchtest in deinem Blog alle Zeichen in dunkelgrün (#006400) ausgeben. Dazu verwendest du die CSS-Regel body { color: #006400; }. Die Formatierung wirkt sich auf jedes Zeichen aus, es sei denn, es gibt abweichende Anweisungen für einzelne Abschnitte – z.B. eine Regel, mit der Hyperlinks farblich hervorgehoben werden sollen a { color: #DC143C; }.

Um bestimmte Bereiche deiner Website gezielt ansprechen zu können, gibt es außerdem CSS-Klassen und -IDs, die in CSS-Regeln als Orts-Angaben (so genannte Selektoren) genutzt werden können.
Um eine Überschrift in einem eigenen Abschnitt ausschließlich im Inhaltsbereich (nicht aber in der Seitenleiste oder im Footer) fett und blau auszugeben, könnte die CSS-Regel z.B. .entry-title { color: #1E90FF; font-weight: bold; } lauten. Diese Regel ist dann schon sehr spezifisch – sie bezieht sich ausschließlich auf Abschnitte mit der Klasse entry-title – und überschreibt deshalb alle vorher genannten Regeln.

Um nun Änderungen an deinem Theme vornehmen zu können, musst du herausfinden, welche CSS-Regeln wo verwendet werden. Dazu stellt dir jeder moderne Browser so genannte Entwickler-Werkzeuge (Developer Tools) zur Verfügung, die üblicherweise mit einem Rechtsklick auf die Website und dann im Kontextmenü über (Element) Untersuchen aufgerufen werden. In einem eigenen Abschnitt oder Fenster wird dir dann angezeigt, mit welchem HTML die Seite dargestellt wird und wie die dazugehörigen CSS-Regeln lauten. Ein Rechtsklick in den weißen Bereich deiner Webseite zeigt z.B. das HTML <div class="page-title pad group"> und rechts daneben die CSS-Regeln
```
.page-title {
    background: #fff;
    position: relative;
    padding-top: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5rem;
}
```
Du brauchst in einer eigenen CSS-Regel nur die Eigenschaften aufführen, die du auch ändern möchtest – also z.B.
```
.page-title {
    background: #e0cba6;
    border: none;
}
```
… oder du fügst, falls du den Abschnitt komplett ausblenden möchtest, eine weitere Regel hinzu, um die Anzeige zu unterdrücken
```
.page-title { 
    display: none;
}
```
Mit dieser Methode (Rechtsklick auf Abschnitte in deiner Webseite > Element untersuchen > CSS-Regel raussuchen, eigene CSS mit Änderung hinzufügen) kannst du noch diverse Änderungen vornehmen – z.B. die unschönen Rändern der Navigationsleiste entfernen …

oder den Titel der rechten Seitenleiste ausblenden.

Mit !important kannst du in absoluten Notfällen spezifische CSS-Regeln überschreiben. Das sollte sich aber wirklich auf Notfälle beschränken, weil weitere Änderungen dadurch unnötig erschwert werden.

Nehmen wir dazu an, du hast folgende CSS-Regeln:
```
body { color: green; }
a { color: red; }
.content a { color: blue; }
```
Nun möchtest du den Link in
```
<body>
  <div class="content">
    In diesem Text soll der 
    <a href="#" class="wichtig">Link</a>
   orange dargestellt werden.
  </div>
</body>
```
orange ausgeben.
Das ist mit jeder der folgenden, zusätzlichen CSS-Regeln möglich:
a { color: orange!important; }
.content a { color: orange; }
a.wichtig { color: orange }

Die erste Variante ist aber mit Abstand die schlechteste.

Mit diesen Informationen solltest du nun deine geschilderten Darstellungsprobleme selbst lösen können. – Wir wollen hier ja vor allem Hilfe zur Selbsthilfe leisten. <3 Eine gute Einführung in CSS findest du z.B. beim Mozilla Developer Network.

Noch eine letzte Anmerkung zu deinen Webseiten: Während Blocksatz bei Drucksachen sehr aufgeräumt aussieht, schafft er bei Webseiten (vor allem auf kleinen Displays) unangenehme Zwischenräume, durch die die Lesbarkeit verschlechtert wird. Nicht jeder Browser unterstützt eine eigene Silbentrennung, der Text sieht dann entsprechend unschön aus. Ein linksbündiger Flattersatz ist meistens deutlich besser lesbar.

Jetzt wünsche ich dir viel Erfolg und gute Einnahmen mit der Website.
Thread-Starter tank170
(@tank170)

vor 6 Jahren, 8 Monaten

Dankeschön für diese ausführliche Anleitung, die ich mir sofort sichern werde. Viele Aspekte kann ich als Selbsthilfe 🙂 sehr gut nutzen. Bei Gelegenheit gehe ich jetzt auch den Blocksatz an.

Nochmals Dankeschön 🙂

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

Das Thema „CSS Hilfe benötigt für Hueman Hintergrund- und Schriftfarbe“ ist für neue Antworten geschlossen.

CSS Hilfe benötigt für Hueman Hintergrund- und Schriftfarbe

Themen-Schlagwörter

Ansichten