Support » Themes and Templates » Use CSS to Remove Header from Specific Page & Remove Top Page Selections

  • Resolved metuckness

    (@metuckness)


    Hi Everyone. I have two issues I could really use some help on. I know almost nothing about Web design and CSS so specific text for my sight would be appreciated.

    First part is, how can I use the CSS Style Sheet Editor to remove the page selections from the top of all the pages in the Twenty Twelve Theme? I had had someone remove it before and they added the small selection on the right hand side, but when WordPress did the last Theme update, whatever the web designer did removed that and now the page selections show up on the top which I don’t want (I think it detracts from the website if you have too many pages and it drops to a second row).

    The second question I have is how do I remove the Header image from a specific page? I have a page called Guest Book and I set a specific image to show up, but the header image appears on top of it so it makes it look cluttered. I know the page ID, it is 131. I have the theme set to use a few different images for the header, I don’t know if that matters or not. I have tried a few things I saw in other posts, but I must have the syntax wrong or something.

    The specific page I am talking about is :

    http://www.pureheavencotons.com/guestbook/

    The blog I need help with is pureheavencotons.com.

Viewing 15 replies - 1 through 15 (of 21 total)
  • when WordPress did the last Theme update, whatever the web designer did removed that

    Yes, that will happen again when you update WP because you are using a default theme. To avoid that, you should be using a child theme –

    http://codex.wordpress.org/Child_Themes

    or if you are only making CSS changes, you can use a custom CSS plugin.

    I created the child theme folder and files per the instructions on the link you gave me. How do I confirm they are working? I don’t see any difference.

    I created the styles.css and the functions.php files and I put in the same information as referenced in the documentation other than making changes because I use the twentytwelve theme and not the twentythirteen.

    Also, do you know the css code to remove the header from a specific page? When I enter the code I have found online, it doesn’t see to work. Either on the main style.css file or the child.

    This is the example I found:

    .page-id-48 #branding { display:none; }

    And according to the information I found, my page id is 131. I found that by changing the theme permalinks to defaults and it read http://www.pureheavencotons.com/?page_id=131 for the Guest Book page.

    Thanks you for the help!

    It looks like the problem might lie because this has a custom body?

    <body class="page page-id-131 page-template-default logged-in admin-bar no-customize-support custom-background custom-font-enabled single-author">
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="http://www.pureheavencotons.com/" title="Pure Heaven Cotons" rel="home">Pure Heaven Cotons</a></h1>
    			<h2 class="site-description">Your next best friend!</h2>
    		</hgroup>
    
    		<nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle">Menu</h3>
    			<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
    			<div class="nav-menu"><ul><li ><a href="http://www.pureheavencotons.com/">Home</a></li><li class="page_item page-item-131 current_page_item"><a href="http://www.pureheavencotons.com/guestbook/">Guest Book</a></li><li class="page_item page-item-16"><a href="http://www.pureheavencotons.com/gallery/">Gallery</a></li><li class="page_item page-item-8"><a href="http://www.pureheavencotons.com/coton-de-tulear/">Coton de Tulear</a></li><li class="page_item page-item-9"><a href="http://www.pureheavencotons.com/traits-of-the-coton-de-tulear/">Traits of a Coton de Tulear</a></li><li class="page_item page-item-5"><a href="http://www.pureheavencotons.com/location/">Location</a></li><li class="page_item page-item-4"><a href="http://www.pureheavencotons.com/contact/">Contact Us / Sales Inquiry</a></li><li class="page_item page-item-18"><a href="http://www.pureheavencotons.com/blog/">Blog</a></li></ul></div>
    		</nav><!-- #site-navigation -->
    
    				<a href="http://www.pureheavencotons.com/"><img src="http://www.pureheavencotons.com/wp-content/uploads/2013/10/cropped-Bed-Time.jpg" class="header-image" width="960" height="250" alt="" /></a>
    			</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">
    	<div id="primary" class="site-content">
    		<div id="content" role="main">

    I can’t find a support post that gives the code to remove the header with a body.

    What are you trying to remove from that page?

    I am trying to remove the header (image) for this specific page:

    http://www.pureheavencotons.com/guestbook/

    [Moderator Note: No bumping. If it’s that urgent, consider hiring someone.]

    Sorry Admin, I wasn’t trying to ‘bump’ the post. I was just asking if there was anyone else that might be able to help. I have dug around multiple forum posts and seen suggestions that say they work, but even after modifying them for my page they don’t work.

    I actually did hire someone to do the work and that is my problem, They did it, but they didn’t do it correctly (a child theme) and now I can’t get them to respond to me to apply the fixes or tell me the code so I can apply it in the child theme that I created thanks to information supplied by WPyogi.

    It’s not that I am in a hurry, it just doesn’t seem that there are many people that help out other than a few volunteer moderators and of course you that thought I was ‘bumping’ my post.

    I also separated my questions into two posts and still no replies. Wish I knew more about css and php!

    I’ll check into trying to find someone else to pay that hopefully will do it correctly and not just take my money and run. I don’t know what it is about web designers that seem to be extremely flaky when it comes to doing work they are paid to do.

    So once again, sorry if you thought I was trying to bump my post, that wasn’t the intent.

    This seems to work:

    .page-id-131 img.header-image {
    	display: none;
    	}

    Unfortunately I have tried that and it doesn’t work. I read somewhere that it might be because of Jetpack and the way it formats the code with specific body something.

    I added that code to the styles.css and refreashed the page and the header is still there.

    You don’t seem to have a child theme active on that site?

    I do. I created it per the instructions on the child theme page. I created a twentytwelve-child directory and inside I added a styles.css file and I enabled the child theme as the theme to use. The style.css file looks like this:

    /*
     Theme Name:     Twenty Twelve Child
     Theme URI:      http://wordpress.org/themes/twentytwelve
     Description:    Twenty Twelve Child Theme
     Author:         Mitchell Tuckness
     Author URI:     http://wordpress.org/themes/twentytwelve
     Template:       twentytwelve
     Version:        1.0.0
    */
    
    @import url("../twentytwelve/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    	<style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #ffffff; background-image: url('http://www.pureheavencotons.com/wp-content/uploads/2013/09/pureheaven-background-new.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
    </style>
    
    .page-id-131 img.header-image {
            display: none;
            }

    And I know it is pulling the info from the stle.css file because it loads the background image and also, if I put this code in it, it removes all the headers from all the pages:

    img.header-image {
    display: none;
    }

    You need to ACTIVATE the child theme.

    AND remove this:

    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #ffffff; background-image: url('http://www.pureheavencotons.com/wp-content/uploads/2013/09/pureheaven-background-new.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
    </style>

    I did activate it 🙂

    I have that code in there so it puts the costume background in, if not it is just white.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    There is no active child theme on your site.

    It wasn’t active on your site – but now it appears to be – and that image is gone.

    OK, I reconfirmed it was activated (I must of deactivated it last night doing testing) and I removed all the code in the child style.css file.

    Now you can tell it is working because it is all white without the custom background.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Use CSS to Remove Header from Specific Page & Remove Top Page Selections’ is closed to new replies.