WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Use CSS to Remove Header from Specific Page & Remove Top Page Selections (22 posts)

  1. metuckness
    Member
    Posted 4 months ago #

    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.

  2. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    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.

  3. metuckness
    Member
    Posted 4 months ago #

    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!

  4. metuckness
    Member
    Posted 4 months ago #

    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.

  5. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    What are you trying to remove from that page?

  6. metuckness
    Member
    Posted 4 months ago #

    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.]

  7. metuckness
    Member
    Posted 4 months ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    This seems to work:

    .page-id-131 img.header-image {
    	display: none;
    	}
  9. metuckness
    Member
    Posted 4 months ago #

    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.

  10. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

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

  11. metuckness
    Member
    Posted 4 months ago #

    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;
    }
  12. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    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>
  13. metuckness
    Member
    Posted 4 months ago #

    I did activate it :)

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

  14. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 4 months ago #

    There is no active child theme on your site.

  15. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

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

  16. metuckness
    Member
    Posted 4 months ago #

    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.

  17. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    BTW, this is invalid code for an external stylesheet:

    <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>

    And custom backgrounds are generally set in theme options.

  18. metuckness
    Member
    Posted 4 months ago #

    OK, I added the code you gave me and it looks like it worked!

    Thank you, thank you, thank you!

    Now I have to figure how to remove the top navigation menus because I have the ones on the side and I don't like the ones on the top because they create a giant white area if you don't have additional pages to fit.

  19. metuckness
    Member
    Posted 4 months ago #

    Set in theme options, OK let me see if I can figure that out. i just saw the code and copied it over to the style sheet because I lost it when I activated the child theme.

  20. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    Now I have to figure how to remove the top navigation menus because I have the ones on the side

    You can hide that also using CSS, but frankly, I think you'd be doing your users a big dis-service. The pages list isn't a true menu - and isn't at all useful for people who are using assistive devices to navigate a website. And having no navigation is likely to have bad SEO effects as well.

    If you don't like the blank space, you could add more menu items or put something else there.

  21. metuckness
    Member
    Posted 4 months ago #

    Oh OK. You're right, I didn't think of that. I am going to dig around and see if there is some CSS code I can use to reduce the spacing between the navigation words so they all fit across the top, that should resolve the issue for now and help in the future when I add more pages because I could manage that separation and make it look good.

  22. metuckness
    Member
    Posted 4 months ago #

    Thank you again for everyone's help on this!

Reply

You must log in to post.

About this Topic