Support » Themes » Twenty Fifteen: Transparenter Text-Hintergrund?

  • Wir haben auf unserer website ein schönes Hintergrund-Foto. Dieses wird in dem o.a. Theme leider von Text-Block der Startseite fast gänzlich überlagert.
    Kann ich den Textblock der Startseite so gestalten, das ausschliesslich die tatsächlichen verwendeten Charakters weiß hinterlegt sind? Also weg von der Vollfläche des Blocks?

    Sorry… bin Laie und hoffentlich trotzdem verständlich

    PS: im Forum für das Theme selbst finde ich keine Gelegenheit, eigene Fragen zu stellen

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

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Eigentlch ist es so, dass du WordPress-Themes kostenlos zur Verfügung gestellt bekommst – so, wie sie sind. Du hast das Recht, sie nach deinen Wünschen anzupassen, aber niemand hat die Pflicht, Anpassungen für dich zu übernehmen. Wenn du also unter Design > Customizer keine entsprechende Einstellungsoption findest, ist der richtige Weg, eine eigene CSS-Regel hinzuzufügen. Der Customizer bietet dir dafür unter Design > Customizer > Zusätzliches CSS sogar ein eigenes Eingabefeld. Das setzt allerdings Grundkenntnisse in CSS voraus – oder du beauftragst einen Dienstleister, der das gegen Honorar übernimmt.

    Da eine Anpassung in diesem Fall aber recht simpel ist und ich die ja jetzt hinreichend belehrt und genervt habe, hier ein paar Zeilen, die du unter Zusätzliches CSS eintragen kannst:

    
    body::before, .site-header {
        background-color: rgba(208, 237, 225, 0.8);
    }
    .hentry {
        background-color: rgba(255, 255, 255, 0.8);
    }

    rgba(1, 2, 3, 4)
    gibt die Farben in den Grundfarben Rot, Grün, Blau in einer Abstufung von 255 Schritten sowie einem Alpha-Kanal (für die Transparenz) in Prozent an.
    1 ist der Wert für Rot. 2 für Grün, 3 für Blau und 4 für den Alpha-Kanal.

    rgba(208, 237, 225, 0.8)
    bedeutet also:
    Rot: 208
    Grün: 237
    Blau: 225
    Alpha: 80%

    je geringer der Alpha-Wert ist, desto transparenter wird die Farbe dargestellt. Allerdings leidet bei einer höheren Transparenz auch die Lesbarkeit, weil Buchstaben und Bildhintergrund ineinander schlagen. Du kannst hier ja mal andere Werte (0.2 oder 0.9, mit einem Punkt als Dezimaltrennzeichen) ausprobieren.

    Ich hoffe, das hilft dir weiter.

    Nachtrag: Ich sehe gerade, dass du gar keinen Hintergrund für Beitragsinhalt und Sidebar haben wolltest. Kann man machen, sieht dann aber … unschön aus:

    
    body::before, .site-header, .hentry  {
        background:transparent;
    }
    .secondary a, .dropdown-toggle::after, .widget-title, .widget blockquote cite, .widget blockquote small, .hentry {
        text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    }

    Da würde ich doch nochmal überlegen, ob ein Theme mit einem schönen großen Header-Bild nicht etwas ansprechender ist.

    • Diese Antwort wurde geändert vor 4 Jahren, 6 Monaten von Bego Mario Garde. Grund: Nachtrag
    Thread-Starter Peter Mueller

    (@peter2811)

    Vielen Dank für die Hilfe. Die erste Lösung ist eindeutig die bessere und bereits eingesetzt.

    Vielleicht magst du noch folgendes hinzufügen, damit der Hintergrund nicht grün leuchtet, bevor das Hintergrundbild geladen wurde:

    body.custom-background {
        background-color: transparent;
    }

    Das Hintergrundbild ist auch mit über 14MB ein wenig zu groß geraten. 😉
    Reduzier mal in einem Bildbearbeitungsprogramm die Größe auf 1920×1536 Pixel, speichere es als JPEG und optimiere es dann mit der Website https://tinypng.com. Ich komme dann auf eine Dateigröße von rd. 486KB, das ist eine Einsparung von rd. 95%.

    Thread-Starter Peter Mueller

    (@peter2811)

    Mega… Dateigröße des Bildes war mir gar nicht aufgefallen. Danke für die Tipps !

    Gruß
    Peter

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Twenty Fifteen: Transparenter Text-Hintergrund?“ ist für neue Antworten geschlossen.