Text-Widgets - Umfangreiche Anpassungen im Theme
Diese Anpassungen gehen über die Möglichkeiten des Customizers hinaus.
Problem
Sie haben im Theme ein Hintergrundbild platziert. Der Body-Bereich davor erscheint in einer Farbe,
ist jedoch nicht transparent.
Ausgangslage
Text-Widget
Im Customizer Bereich Widgets anklicken. Hier gibt es zwei Bereiche, die unterhalb des Inhalts eingefügt werden.
Hier fügen Sie ein Text-Widget ein, in das Sie Text und HTML/CSS-Code eingeben können-
Welche Elemente per CSS ansprechend?
- Textbereich soll transparent werden und eine andere Farbe erhalten
- Die Ansicht des Hintergrundbilder (schmaler Streifen) soll verschwinden,
dieser sichtbare Streifen des Hintergrundbildes wird durch margin gesteuert.
Rose Textbereich mit der rechten Maus anklicken / Untersuchen
Abstand Außen
Der CSS-Code für die Elemente im Text-Widget
- div id=page" class="site"
Klasse site ist für den Hintergrund verantwortlich
Eine RGB-Farbe kann per rgba transparent werden, mit 0.7 = 70% Transparenz
Mit background-size: cover wird ein Hintergrundbild immer an die Monitorgröße angepasst (scaliert).
<style>
.site {
margin:0;
background-color:rgba(0,0,0,0.7);
background-size:cover;
}
</style>
Diese Lösung ist nicht optimal, besser ist eine Integration in die style.css.