Post Title Hintergrundbild hinzufügen

  • Hay!
    Ich habe das TwentyTen Theme meinen Bedürfnissen angepasst und möchte gerne beim Posttitle ein Hintergrundbild hinzufügen. Leider finde ich nicht die Stelle wo ich das hinzufügen soll.
    Ich habe ein Bild hinzugefügt damit ihr seht wie ich mir das vorstelle.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • versuch das als hintergrund von .post oder .hentry neu in die style.css einzufuegen; zB:

    Code
    .post { background: #fff url(images/post_title_bg.jpg) left top no-repeat; }

    Nee hat nicht funktioniert, da wird gar nix verändert.

  • ein link zu deiner seite koennte weiterhelfen, um zu sehen, was in der style.css steht, und was in der seite angezeigt wird.

    hast du versucht, den browser cache zu leeren, zB mit 'strg f5' , oder die seite neu zu laden?

    ist das hintergrundbild hochgeladen und im images verzeichnis des themes?

  • ein link zu deiner seite koennte weiterhelfen, um zu sehen, was in der style.css steht, und was in der seite angezeigt wird.

    hast du versucht, den browser cache zu leeren, zB mit 'strg f5' , oder die seite neu zu laden?

    ist das hintergrundbild hochgeladen und im images verzeichnis des themes?

    Also ich hab das Theme nur lokal gespeichert aber die style.css ist dieselbe wie die von TwentyTen nur halt dass die Farbcodes anders sind. DIe Bilder lade ich immer auf einen Server wie tinypic.com hoch und gib dann den link ein und das funktioniert auch bei header usw. immer ganz gut. Deshalb kann ich mir einfach nicht vorstellen was nicht stimmt

  • Der gesamte Code ist zu lang, deshalb hab ich nur mal die Stelle reingetan.

    Code
    #content .entry-title {
        color: #ffd7d2;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.3em;
        margin-bottom: 0;
        background: url(http://img832.imageshack.us/img832/3521/posttitleleiste.png) no repeat;
    }

    Ich habe vorher das bild dort drin ghabt wo du gesagt hattest aber da es nicht funktioniert. Jetzt funktioniert es zwar, aber nur wenn ich das "no-repeat" weglasse (was sehr doof ist). Ach ja und bei den meta-daten ist der hg nicht mehr, was ich auch versteh da ich ihn nur bei den titel feld eingefügt habe, aber ich möchte ihn bei den metadaten auch gerne haben

  • Code
    no-repeat

    mit bindestrich

    http://www.w3schools.com/css/css_background.asp

    und natuerlich ist der hintergrund nicht mit in den meta-daten, weil das '.entry-title' element da nicht hinreicht.

    daher meine idee mit .post oder .hentry ...

    oder versuch es noch mal mit:

    Code
    #content .post { background:[COLOR=black] url[/COLOR](http://img832.imageshack.us/img832/3521/posttitleleiste.png) left top no-repeat;
    }
  • Ja das hat funktioniert (sry aber manchmal komm ich einfach nicht mit). Aber jetzt müsste ich das noch ein kleines bisschen weiter runter bringen da so nur die Hälfte der Meta Daten da drinnen sind, also so ca. 7 px. Ach ja und wie kann ich das auch bei Stickys machen, also da möchte ich dasselbe machen aber ich weiss nicht was ich da einfügen muss.

  • Zitat

    Aber jetzt müsste ich das noch ein kleines bisschen weiter runter bringen da so nur die Hälfte der [COLOR=#306582]Meta[/COLOR] Daten da drinnen sind, also so ca. 7 px.



    angenommen, das hintergrundbild selbst ist gross genug, dann gibts fuer den background-style auch die fein-positionierung mit pixel-genauigkeit:

    Code
    #content .post { background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"][COLOR=#000000]url[/COLOR][/URL]([URL]http://img832.imageshack.us/img832/3521/posttitleleiste.png[/URL]) 0px 7px no-repeat;
    }


    die erste zahl ist der pixel-abstand von der linken seite des elements; die zweite zahl ist der abstand von der oberkante (negative zahlenwerte sind zulaessig)

    beim sticky post scheint dieser style bestimmend zu sein:

    Code
    .home .sticky {
     background: #f2f7fc;
     border-top: 4px solid #000;
     margin-left: -20px;
     margin-right: -20px;
     padding: 18px 20px;
    }



    um den titel-hintergrund auch bei einem sticky post zu haben, fuege einen style fuer '.home #content .post.sticky' hinzu:

    Code
    #content .post { background: [COLOR=#000000]url[/COLOR](http://img832.imageshack.us/img832/3521/posttitleleiste.png) 0px 7px no-repeat;
    }
    .home #content .post.sticky { background: #f2f7fc [COLOR=#000000]url[/COLOR](http://img832.imageshack.us/img832/3521/posttitleleiste.png) 0px 7px no-repeat;
    }
  • angenommen, das hintergrundbild selbst ist gross genug, dann gibts fuer den background-style auch die fein-positionierung mit pixel-genauigkeit:

    Code
    #content .post { background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"][COLOR=#000000]url[/COLOR][/URL]([URL]http://img832.imageshack.us/img832/3521/posttitleleiste.png[/URL]) 0px 7px no-repeat;
    }

    die erste zahl ist der pixel-abstand von der linken seite des elements; die zweite zahl ist der abstand von der oberkante (negative zahlenwerte sind zulaessig)

    beim sticky post scheint dieser style bestimmend zu sein:

    Code
    .home .sticky {
     background: #f2f7fc;
     border-top: 4px solid #000;
     margin-left: -20px;
     margin-right: -20px;
     padding: 18px 20px;
    }

    um den titel-hintergrund auch bei einem sticky post zu haben, fuege einen style fuer '.home #content .post.sticky' hinzu:

    Code
    #content .post { background: [COLOR=#000000]url[/COLOR](http://img832.imageshack.us/img832/3521/posttitleleiste.png) 0px 7px no-repeat;
    }
    .home #content .post.sticky { background: #f2f7fc [COLOR=#000000]url[/COLOR](http://img832.imageshack.us/img832/3521/posttitleleiste.png) 0px 7px no-repeat;
    }

    Danke hat funktioniert

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!