Remove header image from every page i create

If I understand your question correctly, you want the header image to display on the home page but not other pages? Does that mean that you don’t want the site title and description to show up as well?

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

Thanks for the quick response.

Thanks for asking this, you have made me realise I couldn’t get rid of the header without also loosing the site title!

Could I use another image, or better yet have a smaller (not so deep version) of the homepage header if that makes sense?

Yes, you can use another header image, you can decrease the height of the header image, or you can even get rid of the header image altogether and leave behind the site title & description, you have a lot of options. First of all, can you post a link to your site? Second, do you want to leave the header image alone on the home page and just change it for all other pages?

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

That’s awesome!

Header image on the homepage can stay the same. The site isn’t live yet as still very early production at the moment.. I have taken off maintenance mode on it, so you can see: https://thebarkinbarber.com.au/

The theme has a Custom CSS option where you can add some CSS by going to Appearance → Customize → Design & Layout → Custom CSS.

So let’s say you wanted to hide the image on all pages other than the home page, and then reduce the height of the header area so there’s not a lot of empty space. You can start by copying in these rules:

#masthead.site-header {
   background-image: none;
   min-height: 0;
}
#masthead .layer {
   background: #003;
   min-height: 0;
}
.site-branding {
    padding: 20px 0;
}
.home #masthead {
   background-image: url(https://thebarkinbarber.com.au/wp-content/uploads/2016/10/cropped-dog-1310545_1920.jpg);;
}
.home #masthead .layer {
   background: transparent;
}
.home .site-branding {
    padding: 125px 0;
}

The first three rules hides the header image, reduces the size of the header, and sets the background to a dark blue color because the site title is white (and if the background color were also white, the site title wouldn’t show up). You can change the background color to white and just add a color property that sets the site title & description to a color other than white, if you wish.

The last three rules just restores the header on the home page to the way it originally was, although even this can be tweaked a little. For example, it would be nice if more of the image could be displayed so the dog can be seen. You can do that by changing the value of the padding property from 125px to something like 325px.

Oh my goodness, you are actually a genius, thank you so much!

Can I ask another question?

Yes, but I’m going off to bed so you may not get a response for a while.

I have been trying to change the colours of the menu font (unclicked, clicked and hover states) and I can do it by going to ‘inspect element’ and changing the css in browser. but when I try to pring the code into the custom css box, it does nothing.

this, is what I am using for example (this is the clicked state code):

#site-navigation ul .current_page_item > a,
#site-navigation ul .current-menu-item > a,
#site-navigation ul .current_page_ancestor > a {
color: white;
}

What am I doing wrong?

I have tried putting .page in front but it does nothing, what am I missing?

So the problem is actually with the CSS editor that this theme has decided to use, and I’ve seen this problem with other themes as well. This particular editor converts certain characters into the equivalent escape code, so the CSS that’s used isn’t valid. For example, try adding the CSS to the Custom CSS option, save it, then do a view source on the site. Search for your new CSS, and you’ll see that the greater than signs have been converted to >, which, of course, is not valid CSS. Weird, huh?

So, there are a couple of things you can do:

1. I see that you’ve already created a child theme, so you can add your CSS there. However, because the rule that you are trying to override is in the main.css file, and that main.css file comes after your child theme’s style.css file, you’ll have to make the selector slightly more specific.

   If you want, you can change the your call to wp_enqueue_style so that your child theme’s style.css file comes after the main.css file. That might be a better move. That is, change this:

   
   wp_enqueue_style( 'klopp-style',
       get_stylesheet_directory_uri() . '/style.css',
       array( 'chld_thm_cfg_parent' ),
       wp_get_theme()->get('Version')
   );

   to this:

   
   wp_enqueue_style( 'klopp-style',
       get_stylesheet_directory_uri() . '/style.css',
       array( 'klopp-main-theme-style' ),
       wp_get_theme()->get('Version')
   );
   

   That is, change the third parameter so your child theme’s style.css file will get enqueued after the main.css file.

   One other note about your child theme’s style.css file. The very last line is an opening comment tag (/*), and you need to change it to a closing comment tag (*/) so the CSS rules that you add will be recognized.

2. Add a Custom CSS plugin like Jetpack or Custom CSS Manager. Most CSS plugins won’t do that weird character encoding, and the CSS usually comes after all of the theme’s stylesheets, so it’s easier to override any existing rules. Especially Jetpack, it places it’s CSS just before the opening <body> tag.

• This reply was modified 8 years, 1 month ago by CrouchingBruin.
• This reply was modified 8 years, 1 month ago by CrouchingBruin. Reason: Corrected name of wp_enqueue_style
• This reply was modified 8 years, 1 month ago by CrouchingBruin.

OK good to know about the template. I’m not 100% sure where I should be updating this code? I have found enqueue scripts in the functions.php file of the Klopp theme, is this where I do it?

When I change the one bit of code that matches what you said to change, it says not allowed?

yes – will be adding jetpack!

You don’t change anything in the parent functions.php file, you would change it in your child theme’s copy of functions.php. However, if you are going to use a CSS plugin like Jetpack, then you don’t need to worry about re-arranging your stylesheets, just copy your CSS rules over from the theme’s Custom CSS option over to the plugin’s input field.

Thanks so much for all your help with my questions CrouchingBruin, I really appreciate you taking the time to explain what you have to me.

You’re very welcome, and good luck with your site.

I would like to do the same thing. Can you please take a look at my temporary domain 650.42d.myftpupload.com
I would like to keep the header on the homepage, but remove the header image on all subsequent pages and reduce the dead area. Could you please provide me with the Custom CSS for my site?
Thank you so much

• This reply was modified 7 years, 7 months ago by beckyhoefs.