Resize header image, add image to 'pages' menu, change footer to image.

  • lauchlen

    #2315

    Hello everyone,

    I’m hoping someone can give me some advice. I need to resize my header image. I’ve followed the coding advice I found here. My child theme is made, activated and has two files.

    style.css which contains the following code:

    /*

    Theme Name: Graphene Child

    Theme URI: http://example.com/

    Description: Child theme for the Graphene theme

    Author: Your name here

    Author URI: http://example.com/about/

    Template: graphene

    Version: 1.0

    */

    @import url("../graphene/style.css");

    /* Your modification goes here */

    #header{

    background-color:#000;

    background-repeat:no-repeat;

    height:313px;

    margin-left:16px;

    width:980px;

    And functions.php which has the following code:

    <?php

    function graphene_custom_header_width(){

    return 980;

    }

    function graphene_custom_header_height(){

    return 313;

    }

    add_filter('graphene_header_image_width', 'graphene_custom_header_width');

    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    ?>

    The problem is, even with the proper code, my header image won’t resize. Well, the css changes the size in the theme, but the php isn’t working, so I still only get the option of 960px by 198px. The image I want to use is 980px by 313px.

    I couldn’t find any posts that directly answered my next questions.

    I want to replace the menu directly above the posts/below the header with a single, centred image. One that will be a continuation of the header. I’m not sure what its height will be, but it will, obviously, be the same width as the header.

    I’d also like to replace the footer area, where the copyright and powered by text is, with an image as well.

    I hope this is clear. Any help is greatly appreciated because I’m totally lost.

    Thanks in advance.

    Mod

    Kenneth John Odle

    #19746

    I’m wondering…

    if you replace the navigation menu, how are readers going to navigate your blog? Ditto for the footer.

    You might want to consider adding an image before the content or after the content using a Graphene action hook widget area in order to retain your navigation.

    I don’t understand why your header isn’t resizing, since your code is correct. The problem here, of course, is that the main container of Graphene is only 960px wide, and since the header is part of the container, your header will still only be 960px wide. You might try adding something like this to your child theme CSS:

    #container {width: 980px;}

    Your functions file is in the same child theme folder as your styles.css file, right?

    lauchlen

    #19747

    Yep, both files are in the GrapheneChild folder.

    I’ve tweaked the parent theme’s CSS but nothing to do with the header except the bit that removes the bloginfo which shouldn’t interfere with the header image as far as I know.

    I don’t want to replace the menu and footer with an image (I definitely need them both!), just place an image behind them, instead of the solid colour. I’m fairly certain the menu that’s in place below the header takes its cue from sprite_master.png, then repeats across, I just can’t figure out how to replace that repeating image with a single one the same width as the header/container.

    Josh

    #19748

    Try inserting the px into your functions.php.

    Instead of this…

    <?php
    function graphene_custom_header_width(){
    return 980;
    }
    function graphene_custom_header_height(){
    return 313;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');
    ?>

    Make it this:

    <?php
    function graphene_custom_header_width(){
    return 980px;
    }
    function graphene_custom_header_height(){
    return 313px;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');
    ?>

    Notice the px.

    lauchlen

    #19749

    No go. I’m so stumped by this, been scratching my head for the last couple days.

    Josh

    #19750

    How about a closing bracket on your #header from the part above… in your child style.css file.

    From this:

    #header{
    background-color:#000;
    background-repeat:no-repeat;
    height:313px;
    margin-left:16px;
    width:980px;

    To this:

    #header{
    background-color:#000;
    background-repeat:no-repeat;
    height:313px;
    margin-left:16px;
    width:980px;
    }

    lauchlen

    #19751

    No go there as well. I’ve cleared firefox’s cache just to be sure it wasn’t something lingering and still no go.

    My site is: http://www.apolarview.com if that helps at all.

    slb421

    #19752

    I have been able to resize my header (the height…I am working within the standard 960 width) using the coding provided here by lauchlen (thanks!) but need to “lower” everything else on the page to accomodate the added height. As it is, the navigation menu and body cover the bottom portion of my new header image. Any idea what I need to add to my style.css file in the graphene-child to do so?

    I am new to WordPress and coding, so please accept my apologies for the newbie question. Any assistance is appreciated!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.