Viewing 8 replies - 1 through 8 (of 8 total)
  • In the default themes’ style.css, the code for the header is:

    #header {
    	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
    	}

    Did you replace the ‘images/kubrickheader.jpg’ with an equal sized image? Any changes to the “no-repeat bottom center”?

    Thread Starter amycrone

    (@amycrone)

    Ok, I changed it to the same size file, but the old header still appears in front of the image:
    https://www.food-whys.com/

    No changes to the “no-repeat bottom center”

    in the style.css the code currently looks like this:
    #header {
    background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center;
    font-family: ‘Trebuchet MS’, Verdana, Arial, Sans-Serif;
    }

    What effect does the font-family part have?

    The font family is for the type style of your header title in front of the image, which is what you see now.

    The old header would be a blue background image, so I’m guessing you changed the headerimg code to have a burgundy background, and that background color is “covering” your header background. If so, your headerimg bg color should be “none” so that it’s transparent and allows your header to be seen.

    You know, I use the default template all the time as my base for new projects and one of the things that needs to happen is that the header.php template needs a few lines of code removed in order to take out the background of the page (the outer edges with the soft shadow edge).

    It’s on lines 20-31 in the default numbering and it contains this:

    <style type="text/css" media="screen">
    
    <?php
    // Checks to see whether it needs a sidebar or not
    if ( !empty($withcomments) && !is_single() ) {
    ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    
    </style>

    There are two callouts for background images here on the page. Pull this section out and you’ll see that your page background will now look like it lines up with your header graphic. The page is currently using a background image which is as wide as your header, but you wouldn’t be able to tell just by looking at the default layout.

    And then you’ll need to pull the footer image code of of style.css for the “bottom” of the default page background graphics to be removed, too.

    Thread Starter amycrone

    (@amycrone)

    thanks for all your help – so close now…. how do I get rid of the food-whys in the middle?

    https://www.food-whys.com/

    Hey, you’re getting there!

    In the header.php file, these lines of code are the ones for your title and subtitle:

    <div id="headerimg">
    		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><?php bloginfo('description'); ?></div>
    	</div>

    CAREFUL! Don’t remove the lines that say <div id="header"> and </div> which are located before and after the lines shown above. Then you’ll have no header at all!

    Thread Starter amycrone

    (@amycrone)

    great – it worked!! thank you so much for all of your help.

    You’re welcome. Glad to help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘replacing default theme header’ is closed to new replies.