Suppressing header image

  • Unknown's avatar

    We are using the Academica theme with a randomized images header. There are certain pages on our blog on which we would prefer to suppress the header image. Is it possible to do that?

    Thank you.

    The blog I need help with is livermorevalleyedfound.wordpress.com.

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

  • Unknown's avatar

    I don’t see randomised header images on your site, all I see is the big “2014 Walk for Education” image on every page. Is that what you’d like help removing and if so from which pages?

  • Unknown's avatar

    Hi Halluke –

    Thanks for your fast reply.

    My bad – we have temporarily suspended the header randomization for the next few days, through Friday noon.

    Ordinarily, and re-commencing Friday after noon, each page features a randomized header image (using the images shown on the ‘gallery’ on the main page.)

    Sorry for the confusion, and hoping you can advise even though you can’t view the randomized header presently.

    Thank you!

  • Unknown's avatar

    That clears it up. I’ve checked this out on my test blog and the following code should work:

    .page-id-154 #slider-wrap,
    .page-id-168 #slider-wrap,
    .page-id-254 #slider-wrap {
      display:none;
    }

    In this example it will hide the header image on the Meetings, News and Events pages. Each page has a unique ID, you can find these for your pages either by going to edit that page and looking in the URL bar: here’s an example from my test blog, notice where it says 152.

    Alternatively when you’re viewing the live page on your site you can view the underlying code by inspecting elements. You’ll then want to look at the body tag right at the top of the page and see what number shows up in the list of classes as “page-id-123” (where 123 could be any number).

    If you want to add more pages to the rule just copy in one of the repeated lines, but make sure the last line before the curly bracket doesn’t have a comma, only the other ones should.

    Let me know if you get stuck!

  • Unknown's avatar

    Wow – that’s amazing – thank you so much. I will try this and let you know how it goes.

    Thank you so much, am extremely grateful.

  • Unknown's avatar

    I was able to locate the appropriate page ID’s using the inspect element function, as you instructed.

    It’s not clear to me in which page(s) the code should be inserted. Can you clarify?

    Many thanks.

  • Unknown's avatar

    Also, I noted this in the ‘view the underlying code’ help text that you referenced:

    ‘You can add CSS to customize any theme if you have purchased the WordPress.com Premium or WordPress.com Business plans, which include the Custom Design feature. ‘

    We use the free version of WordPress. Will we need to upgrade in order to use the customization feature that you’ve suggested?

    Thanks.

  • Unknown's avatar

    The Custom Design upgrade is part of the Premium and Business plans, but it is not necessary to purchase one of those. The Custom Design upgrade is available separately for $30 per year and includes CSS editing, Custom Fonts and Custom Colors. You can read more about the Custom Design upgrade here: http://en.support.wordpress.com/custom-design/ .

  • Unknown's avatar

    You can try out and preview custom CSS before you buy as explained here.

  • Unknown's avatar

    TSP – Thank you for the information.

    In order to make the change that Hallluke has suggested, will we need to purchase the Custom Design upgrade?

  • Unknown's avatar
  • Unknown's avatar

    OK, thanks. If you can weigh in on my other open question, that will be great.

    Hallluke recommends adding the following code to suppress header images on particular pages:

    .page-id-154 #slider-wrap,
    .page-id-168 #slider-wrap,
    .page-id-254 #slider-wrap {
    display:none;
    }

    My question is – on which page do I put this code?

    Thank you!

  • Unknown's avatar

    Hi, that is CSS, and it would be entered at Appearance > Customize > CSS. You can try out and preview custom CSS before you buy as explained here.

  • Unknown's avatar

    So I previewed CSS as advised and can’t get the outcome I’m looking for.

    Our blog features a randomized header image on each page.

    My goal is to suppress the header image on the ‘News’ page.

    I inserted the following code into the CSS editor (in preview mode):

    .page-id-154 #slider-wrap{display:none}

    The header image persists on the News page.

    Did I do something wrong, or will I not be able to see the result in preview mode?

    Thank you!

  • Unknown's avatar

    How are you previewing the page? The changes will only appear when you go to Appearance > Customize > CSS and view it using the customizer, the changes will not appear on the live page (for you or any of your visitors) unless you purchase the upgrade.

  • Unknown's avatar

    With my 6-year college degree I should have been able to figure that out on my own.

    Right you are, and the change worked perfectly.

    Thank you!

  • Unknown's avatar

    It’s one of those things that is really obvious once you know – I’m glad you got it sorted!

  • Unknown's avatar

    Thank you again for your help – much obliged.

  • Unknown's avatar

    Help!

    Went ahead and purchased the customization option, after it previewed beautifully, and now the live site is very screwed up – lost the tabs across the top of the page, various formatting problems, etc.

    Any ideas?

  • Unknown's avatar

    I cancelled the upgrade and – mercifully – the site is restored to how it was.

    I neglected to take a screen print so you could see the results of the upgrade.

    Is there anything I need to do / tweak prior to installing the upgrade?

  • The topic ‘Suppressing header image’ is closed to new replies.