Is it possible to replace the header text or remove it altogether just on one specific page?

• 

  kenstamatic · Member · Apr 10, 2015 at 5:59 am

  • Copy link
  • Add topic to favorites

  Hi, I’m having a blog on my site (a blog within a blog, if you will!) and was wondering if it’s possible to replace the sites header text with just a single image on a specific page, while leaving the rest of the sites headers intact?

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

• 

  siobhyb · Member · Apr 10, 2015 at 11:38 am

  • Copy link

  Hi Steven!

  The Hemingway Rewritten theme works so that when a Featured Image is assigned to a page or post, that image will appear in the header. If a Featured Image hasn’t been set on a page, then your Custom Header will be displayed instead. With this in mind, you can replace the Custom Header on individual posts and pages if you’d like.

  It’s also possible to hide the text within the header area for specific pages with some custom CSS. If you’re not familiar with CSS, it’s a coding language that’s used across the web to change the appearance of websites. Here at WordPress.com, it’s possible to add custom CSS to override certain design elements of themes. You can read more about this here:

  https://en.support.wordpress.com/custom-design/#custom-css

  To add custom CSS, you firstly need to go to My Site in WordPress.com then choose the option to Customize In the left sidebar. You’ll reach what’s known as the WordPress.com Customizer:

  https://wordpress.com/customize/themonstersofthemind.com

  From here, click on the CSS tab. As an example, the following CSS snippet will hide text on your ‘Blog’ page:

  .category-273 .site-branding {
    display: none;
  }

  We have a wonderful community of CSS helpers on the following dedicated forums:

  https://en.forums.wordpress.com/forum/css-customization

  Hope this helps! Please do let me know if you have any questions.

• 

  kenstamatic · Member · Apr 12, 2015 at 1:43 pm

  • Copy link

  Thanks for the help, that’s great, I do have a follow up question though, if I wanted to apply the above CSS code to other pages how would I do that? what text would I need to change in the code for it to work on the other pages/posts?

  Thanks in advance!

• 

  siobhyb · Member · Apr 12, 2015 at 7:30 pm

  • Copy link

  Hi Steven.

  Each of your site’s pages has a different, unique class that can be used to target elements within them. In the case of your blog page, its unique class is category-273. You can see that selector is used just before .site-branding in the CSS snippet I previously gave:

  .category-273 .site-branding {
    display: none;
  }

  You can replace .category-273 with another class to target another page on your site. Your browser’s web inspector can be used find the classes that are unique to a page. If you haven’t used your browser’s web inspector before, we have a guide on how to use it to find your theme’s CSS here:

  https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  For example, your homepage has a unique class of page-id-73. This can be seen when viewing the site’s underlying HTML in your web inspector as shown in this screenshot:

  

  With this in mind, the following CSS snippet would hide the header text on your homepage:

  .page-id-73 .site-branding {
    display: none;
  }

  I understand if that’s a lot of information to take in and would be happy to help with extra questions you may have. You can also always ask for extra clarification on CSS from our community here:
  https://en.forums.wordpress.com/forum/css-customization