1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Hintergrundfarbe einzelner Seite ändern

Dieses Thema im Forum "Design" wurde erstellt von Pixelschaaf, 2. Januar 2014.

  1. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Hallo,
    nachdem wir bereits mehrfach versucht haben unser Problem selbst zu lösen (aber daran gescheitert sind...) haben wir uns entschlossen uns an euch zu wenden.

    Wir möchten gerne die Hintergrundfarbe einer einzelnen Seite ändern. Bisher haben wir herausgefunden, dass es über die Page-ID funktionieren soll, allerdings wissen wir weder was genau wir einfügen sollen, noch wo.

    Wäre total nett wenn ihr uns da weiterhelfen könntet.
    Verwendete WP Version: 3.7.1
    Theme: Twenty Twelve
    Blog: www.pixelschaaf.de
     
    #1 Pixelschaaf, 2. Januar 2014
  2. Ralf70

    Ralf70 Well-Known Member

    Registriert seit:
    22. Mai 2010
    Beiträge:
    112
    Zustimmungen:
    0
    Hallo Pixelschaaf,


    meine CSS Kenntnisse sind bestenfalls auf Anfängerniveau, daher ist das bestimmt nicht die eleganteste Lösung. Wenn der Hintergrund nur bei EINER !!!! Seite geändert sein soll könntest Du doch die Vorgaben aus der Style.css umgehen und Du den gesamten Text, den Du auf die Seite packen möchtest in eine Tabelle packen in der Du die Hintergrundfarbe per HTML definierst :

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #2 Ralf70, 2. Januar 2014
  3. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Um welche Seite geht es denn genau?
    Generell kann man über den Quelltext sehen, welche ID ein Artikel hat, wenn ich z.B. mal die Impressumseite nehme steht dort
    <article id="post-90" class="post-90 page type-page status-publish hentry">
    - womit klar ist, dass man diese Seite über die ID post-90 ansprechen könnte.
    Dementsprechend könntest Du in der style.css eine Zeile hinzufügen, die zum Beispiel so aussähe:
    #post-90 {background-color:#ff0000;} - damit wäre die Hintergrundfarbe der Seite rot.

    Sobald Du allerdings ein Update des Themes machst würde diese Änderung wieder überschrieben, Du müsstest also entweder nach jedem Update die Zeile wieder hinzu fügen oder mit einem Childtheme arbeiten.
     
    #3 Nevery, 3. Januar 2014
    Zuletzt bearbeitet: 3. Januar 2014
  4. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Hallo,

    vielen Dank für die Antworten.

    Vorrübergehend haben wir mal deinen Tipp angewendet Ralf und das schaut gar nicht mal schlecht aus :).

    Nevery, es geht um diese Seite: www.pixelschaaf.de/gute-laune-kalender

    Die post ID ist 695. Also hab ich das: #post-695 {background-color:#000000;} einfach mal ganz unten im style.css hinzugefügt, aber da wird dann auch nur ein Teil der Seite schwarz, ähnlich wie bei der Tabelle, die wir jetzt nutzen. Eigentlich hätten wir aber gern den ganzen beige/gelblichen Bereich schwarz. Hast du da vielleicht eine Idee, wie das funktionieren könnte?

    Und danke für den Tipp mit dem Childtheme. Da muss ich mich mal informieren!
     
    #4 Pixelschaaf, 6. Januar 2014
  5. Tutrix

    Tutrix Well-Known Member

    Registriert seit:
    21. Mai 2010
    Beiträge:
    3.734
    Zustimmungen:
    28
    verwende mal dies

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #5 Tutrix, 6. Januar 2014
  6. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Versuchs mal mit .page-id-695 #page {background-color:#000000;} zum ansprechen, das sollte den kompletten hellen Bereich einfärben.

    Oh, Seite zu lange nicht neu geladen - die Variante von ArtofPic funktioniert natürlich genausogut, die spricht den selben Bereich an.
     
    #6 Nevery, 6. Januar 2014
  7. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Beide Lösungen färben den hellen Bereich. Wenn Du das Braun ändern willst, versuch es mit
    body.page-id-695 {background-color: green;}
     
    #7 SirEctor, 7. Januar 2014
  8. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Ich habe alle Lösungen mal durchprobiert und bis auf die letzte (body.page-id-695 {background-color: green;}) funktionieren alle. Bei der letzten passiert gar nichts.

    Am besten gefällt mir aber immer noch die Lösung mit der Tabelle. Wenn ich den gesamten hellen Bereich schwarz mache, sieht man diese hellen Trennlinien so stark, dass sie stören. Gibt es da eine Möglichkeit die anders einzufärben?

    Und nochmal vielen Dank, langsam verstehe ich, wie das funktioniert! :)
     
    #8 Pixelschaaf, 7. Januar 2014
  9. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    .page-id-695 #page {background-color:#000000;}
    .page-id-695 #page .nav-menu {border-bottom: 1px solid rgb(50, 50, 50); border-top: 1px solid rgb(50, 50, 50);}
    .page-id-695 #page .entry-content table {border-bottom: 1px solid rgb(50, 50, 50);}
    .page-id-695 #page .entry-content td {border-top: 1px solid rgb(50, 50, 50);}
    .page-id-695 #page footer[role="contentinfo"] {border-top: 1px solid rgb(50, 50, 50);}

    Hintergrund: schwarz. Linien: dezent grau.
     
    #9 Nevery, 7. Januar 2014
  10. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Perfekt! Vielen Dank Nevery, gefällt mir super so :) .

    Warum werden die Farben einmal so "#000000" und einmal so "rgb(50, 50, 50)" bestimmt?
     
    #10 Pixelschaaf, 7. Januar 2014
  11. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Das sind einfach nur verschiedene Möglichkeiten der Farbangabe, und da ich selber erst schauen musste was wo definiert ist und das dann einfach rauskopiert habe war ich zu faul, das anzupassen ;)

    #000000 entspricht black entspricht rgb(0, 0, 0) entspricht rgba(0, 0, 0, 1) :)
     
    #11 Nevery, 7. Januar 2014
  12. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Ah, okay. Wollte nur wissen, ob ich das dann auch ändern könnte ;) . Müsste dann ja gehen.
     
    #12 Pixelschaaf, 7. Januar 2014
  13. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Klar geht das. Und wenn Du diesen Wert rgba(0, 0, 0, 1) nimmst und die letzte Zahl z.B. auf 0.5 setzt hast Du halbe Transparenz - 1 ist keine Transparenz, 0 komplett durchsichtig. Macht natürlich nur Sinn bei verschiedenen Farben ;)
     
    #13 Nevery, 7. Januar 2014
  14. Pixelschaaf

    Pixelschaaf Member

    Registriert seit:
    2. Januar 2014
    Beiträge:
    13
    Zustimmungen:
    0
    Danke :)! Das werde ich bestimmt noch gut gebrauchen können.
     
    #14 Pixelschaaf, 9. Januar 2014
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden