Add a background image to post titles

  • Resolved Ethan Newberry

    (@ethan-newberry)


    14 years, 8 months ago

    Hey all,
    First of all, yes, total noob when it comes to CSS and wordpress. I’m reskinning the Pixel theme and want to add a background to all my posts’ titles as well as page and category titles. I don’t want it to adjust it’s length based on the lenth of the post title, but rather be a set image that displays for each post in the same position, etc.

    here’s the site:
    ethannewberry.com/newsite/

    Any pointers would be much appreciated. Do you need to see specific code from my project?

    Also, I eventually would like to add some sort of date tab on the far left side of the main content window for each post. Is that possible with my theme?

    Thanks in advance all you lovely geniuses, you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • esmi

    (@esmi)

    14 years, 8 months ago

    Your post and page titles already have a background image. Do you want to change this image? If, so the CSS you’re looking for is in style.css:

    .topPost h2.topTitle a {
background:transparent url(images/bg-trans2.png) no-repeat 0 0;
color:#FFFFFF;
font-size:15pt;
letter-spacing:-1px;
margin:0 50px 0 -22px;
padding:10px 10px 10px 30px;
text-transform:lowercase;
width:560px;
}

    As for adding a date to the left of the post, you don’t have much room to the left of the post titles but you do have a little space immediately below. Creating a graphical date tab using CSS, however, is quite complex.

    Thread Starter Ethan Newberry

    (@ethan-newberry)

    14 years, 8 months ago

    thanks esmi for replying. Yup, i know that I have that code in there already and it is dropping a background in there. I was more specifically wondering why it isn’t displaying the whole image, but rather ending the image at the end of the post title. Check out the blog section to see how the page title has the pink banner that spans to the right, but the posts do not. I’m trying to fix that issue.

    Also, i was thinking it would be better to put the picture in the background of full post but line it up with the title rather than dropping the image JUST into the title code. Does that make sense? This way I can have little background graphics for the full post (ie – lines to separate the meta from the content, cool custom borders etc).

    I hope I make sense…

    esmi

    (@esmi)

    14 years, 8 months ago

    I was more specifically wondering why it isn’t displaying the whole image

    Try increasing the right padding on .topPost h2.topTitle a. Or you could try adding:

    display:block;
min-width:nnpx;

    where nn = the width of your image.

    Also, i was thinking it would be better to put the picture in the background of full post

    Something like:

    .topPost {
background:url(images/bg-trans2.png) no-repeat 0 10px;
}

    would start you off. The big problem is that you’d then need to give your entire post a left margin of -22px to accommodate the graphic overhang – which you’d then have to correct on .topMeta, .topContent etc.

    I’m not sure what the overall benefit would be. Personally, I think that your current approach of adding the image to the title seems to be the best option and offers the greatest future flexibility.

    Nice design, btw – though you do have a few validation errors that might bite back at some point. Especially the missing <li> on the search and the multiple ids.

    Thread Starter Ethan Newberry

    (@ethan-newberry)

    14 years, 8 months ago

    holy crap you did it! Thank you so much, esmi!!

    I haven’t gone through the validation errors yet, that’s definately going to happen. I’m still learning all this stuff as I go. As for the background images for post content, I’ll hold off on that for now. I’m just stoked I got the post image fixed.

    huzzah! aaaaaand, resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add a background image to post titles’ is closed to new replies.