Change header background color and remove meta data from posts

  • Unknown's avatar
    bonnyreg · Member ·

    Hi again WP People.
    I’m within touching distance from completing the first phase of my blog.
    Could you please tell me how to change the color of my post header – and remove meta data (if possible) from post’s as well.
    I have checked out the forums and google, but no joy I’m afraid.
    I have CSS override and at the moment all pages and post are drafts. The blog I need help with is
    http://humorousscript.wordpress.com

    Regards once again Bonny Reg

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Bonny, the first rule below gets rid of the meta data at the top below the post title. The second rule would get rid of the meta data at be bottom below the post (categories, tags).

    .entry-header .entry-meta {
    display: none;
}
    footer.entry-meta {
    display: none;
}

    The following will allow you to change the post/page title colors. The second rule is in case you wish to change the hover color for the post titles on the main blog page.

    .entry-title, .entry-title a {
    color: #CC0000;
}

.entry-title a:hover {
    color: #449900;
}
  • Unknown's avatar
    bonnyreg · Member ·

    Once again I’d like to thank you for your guidance and sharing your expertise.
    I am learning html and CSS VIA books and video at a steady rate and enjoying every minute of it. But… without the invaluable help from you guys on the WP forums I would probably still be trying to style the first sentence of my first page.
    Keep up the great work!
    Bonny Reg

  • Unknown's avatar
    bonnyreg · Member ·

    Thank you. That worked great! Just a couple of quickies whilst we are on the subject.

    1. I am going to place my own nav-menu on my post, so how can I remove the post-navigation text in header and footer.

    2. I want to change header and footer background color. I tried a couple of things, but no joy. What I haven’t done is try your .entry-title, .entry-title a { } ABOVE – as I thought that it is specific to the title text, and I want to change the background color first.

    Thank once again.
    BR

  • Unknown's avatar
    thesacredpath · Member ·

    1. This will remove the top and bottom navigation on single post pages:

    .single #content #nav-above, .single #content #nav-below {
    display: none;
}

    2. Are you talking about post footer and header areas, or the site footer and header areas?

    If you are talking about the site footer and header, give these a try. I’ve included some padding and you can adjust those as you like, or delete them. #colophon is the site footer and #branding is the site header.

    #colophon {
    background: none repeat scroll 0 0 #CC0000;
    padding: 1em 10px;
}

#branding {
    background: none repeat scroll 0 0 #CC0000;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#site-title, #site-description {
    padding-left: 20px;
}
  • Unknown's avatar
    bonnyreg · Member ·

    Thanks thesacredpath. This is fantastic information and will be very useful.

    I’m sorry I didn’t explain properly; but it’s the post headers and footers that I need to edit at the moment, and It’s the posts header and footer background colour’s I would like to change.

    I tried using page id {background-color: black; } —ect , and used post instead of page but that didn’t work. I was guessing a lot with the formula and might not have been far out and gave up after the attempts got into double figures. Rather hoping you can help again and put me right on it.
    Many Thanks
    Bonny Reg

  • Unknown's avatar
    thesacredpath · Member ·

    If you want to add a the same background color to all post headers and footers, add the following and edit the color as desired. I also included some padding for the title, which you can edit as desired. On the footer, since we have hidden the post footer, I am assuming you mean for the sharing.

    .post .entry-header {
background: #449944;
}

.post .entry-title {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}

.post div.sharedaddy {
background: #449944;
}
.post div.sharedaddy .sd-title {
padding-left: 5px !important;
}
  • Unknown's avatar
    bonnyreg · Member ·

    Excellent.
    Can’t thank you enough!

    Regards BonnyReg

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome BonnyReg.

  • Unknown's avatar
    bonnyreg · Member ·

    To TSP.
    I have tried all your tips (above) and still playing with editing.
    There’s just one thing that I cannot get to apply.

    I want to change the background color of the whole post including the header and footer, and then add and edit the other bits.
    I have achieved this with no problems on my pages Via advise from the forum, but on draft post no dice.
    Very sorry to keep asking questions on this issue, but it’s becoming frustrating.
    Kind Regards
    BonnyReg

  • Unknown's avatar
    thesacredpath · Member ·

    Bonny, this will allow you to change the background for individual posts and pages.

    .hentry {
background: #CC0000;
}

    If you want the background on posts ONLY, and not on pages, add the following after the above.

    .page .hentry {
    background: none;
    }`

  • The topic ‘Change header background color and remove meta data from posts’ is closed to new replies.