reducing size of header

  • Stacy Huber

    #3802

    Hello,

    This was discussed but did not help me.

    I tried to make my header smaller by putting this code into the Graphene Child, Options panel, Display, Custom CSS Styles.

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

    Then I uploaded my resized header and got a slider bar on the header and a section that reads “cut and publish”. I do not want to cut the header I want the entire thing to show. As it is on my site now, but the height much shorter. More like 75 pixels.

    Where exactly do I put the code so I do not get the header upload “cut and publish”? Does it have to go in the parent theme Graphene?

    My site is http://www.kwikwerk.com

    I hope I made my problem clear. Thanks so much for your help.

    Mod

    Kenneth John Odle

    #26061

    You are using a child theme. You should put that in your child theme’s stylesheet.

    I do not want to cut the header I want the entire thing to show. As it is on my site now, but the height much shorter. More like 75 pixels.

    If the image you are using is taller than you specify, then yes, it is going to be cropped in order to fit into the space allotted. Your only option here is to use GIMP or Photoshop to crop the image yourself to what you actually want displayed. You can then get the height from that program (it’s usually in the title bar of the image window) and enter that value into your css.

    Have you added anything to your child theme’s functions file?

    Stacy Huber

    #26062

    Wow! Thanks for answering so fast.

    I have my image created the size I want. Put the size into the code. But, when I upload into the header section, I get a built in slider that will only allow me to “crop and publish”. It wants to crop length wise not height. Meaning it wants the image that was 920L X 65H to be cropped to 150L X 65H. And, of course when I do the heard is reallly warped.

    I did put the code into the child theme functions file. Same thing.

    Oh one more thing. I now get this message

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

    Thanks.

    Mod

    Kenneth John Odle

    #26063

    I did put the code into the child theme functions file. Same thing.

    The code above is CSS. So it should not go into the functions file.

    This is what your child theme’s functions file should look like:

    <?php

    function graphene_custom_header_width(){
    return 920;
    }
    function graphene_custom_header_height(){
    return 65;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    ?>

    Plus whatever other custom functions you’ve added.

    saibhreas

    #26064

    I want to do the same thing. I created a funchtions.php and make corrections to my child css to resize the header image. all looks good. Now how (what container needs to be changed)do I do to move the menu bar up to the bottom of the header image. The nav bar still starts at aproximately 200px down form the top…. how do i move the whole page up to meet the header image?

    child style.css

    @charset "utf-8";
    /* CSS Document */

    /*
    Theme Name: BRC Basic
    Description: Child Theme for Graphene 1.6
    Author: Saibhreas LLC
    Author URI: http://siobhanr.com/
    Template:graphene
    Version: 1.6.1
    */

    @import url("../graphene/style.css");
    /*should override post title color*/
    .post-title {color:#1d3e2c}
    .post-title a,
    .post-title a:visited {
    font: 22px arial;
    color: #1d3e2c;
    margin-top: -3px;
    }
    #header_img_link {
    display: block;
    position: absolute;
    text-decoration: none;
    width: 100%;
    height: 110px;
    }
    .header_title {
    font: bold 28px "Trebuchet MS";
    position: relative;
    top: 40px;
    }
    .header_desc {
    font-size: 18px;
    position: relative;
    top: 50px;
    width: 852px;
    }

    child functions.php
    <?php
    function graphene_custom_header_width(){
    return 960;
    }
    function graphene_custom_header_height(){
    return 110;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');
    ?>

    Prasanna SP

    #26065

    Please don’t dump the code here. Or, at least put your code between backticks.

    Stacy Huber

    #26066

    Hi Parsanna,

    I have not idea what you mean by this “Please don’t dump the code here. Or, at least put your code between backticks.” What are backticks?????

    thanks

    Stacy Huber

    #26067

    Hello and thanks to you all for trying to help me. I think I’ll try one more time and then give up 🙁 Although, I know it can be done because my friend was able to do it. Here is her site. http://millsministries.deborahjerome.com/

    This is what I’ve done:

    I put this code into the Child Graphene Theme Options> Display > Custom CSS styles.

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

    Then I put this in the Graphene Child > functions.php.

    <?php

    function graphene_custom_header_width(){
    return 960;
    }
    function graphene_custom_header_height(){
    return 75;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    ?>

    This is what my site looks like http://www.kwikwerk.com. It is wonky in left alignment. And the image will not upload in its entirety. I have to crop and publish a small segment of my entire image before it will upload install. You can see the result.

    Sorry if this is not what you meant by backtick.

    Again, thanks so much for all your help.

    Mod

    Kenneth John Odle

    #26068

    Once again, the image you have uploaded (cropped-narrow-header4.jpg) is 940 x 198 pixels. You really need to use Photoshop or GIMP to change the size of the image to 960 x 75 before you upload it. I don’t see an image that size in your uploads folder for February or March.

    Backticks: located above the “tab” key on a standard keyboard. I’ve fixed that for you here.

    Left-alignment: take out margin-left:16px; and it should look better. It works in Firebug, at least.

    Why don’t you post a link to the image you are trying to use for a header here, so we get an idea of what you want your header image to look like.

    Stacy Huber

    #26069

    Hi Kenneth,

    Thanks so much for your help. I did a reply to the email I received. If it does not show up here later, I will put my message directly in here. In the meantime, here is the link to my image I created in Macromedia Fireworks 8.

    http://www.kwikwerk.com/wp-content/uploads/2012/03/narrow-header3.png

    Thanks so much.

Viewing 10 posts - 1 through 10 (of 14 total)

You must be logged in to reply to this topic.