Eleven40 Header

Community Forums Forums Design Tips and Tricks Eleven40 Header

This topic is: not resolved

This topic contains 17 replies, has 2 voices, and was last updated by  sterman7 1 year, 5 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #37031

    sterman7
    Participant
    Post count: 22

    My site is http://marketandeconomy.com

    I have been beating my head against my computer trying to get the Eleven40 header image to change.  I followed the instructions on the following thread:

    http://www.studiopress.com/forums/topic/eleven40-custom-logo-image-wont-change/

    and cannot get my site to respond to the header change the darn blue keeps showing.  Any help in what I am missing would be greatly appreciated;

    I have switched the Header to Image in Genesis settings; uploaded a PNG file named logo.png to the blue theme images as well as the eleven40 images file; deleted and changed everything from the above noted thread and still I have the blue rectangle.  Helppppp

     

     

    http://marketandeconomy.com
    #37038

    braddalton
    Participant
    Post count: 9782

    Its a bit more complicated than other themes so i’ve written a tutorial on how to do this: http://wpsites.net/web-design/changing-header-image-custom-header/


    #37042

    sterman7
    Participant
    Post count: 22

    Brad,

    Thanks for the reply.  I spent all afternoon on the instructions with the link you referenced.  I simply want to have a small logo fill the space that is currently occupied by the blue textured rectangle.  The thread I referenced from anitac seems like it should work for me where your write up seems to be for someone that wants to remove the header.  I am just looking to use the space that the blue textured rectangle is taking up.

    #37049

    braddalton
    Participant
    Post count: 9782

    Understand. You’ll need to remove the default header image first then add your logo which you can layer on a transparent background or edit the PHP and CSS files to change the header image dimensions. No quick and easy solution for this in my opinion.


    #37152

    sterman7
    Participant
    Post count: 22

    I have tried a mix of Brad’s recommendations as well as anitac’s in both of the above linked threads/instructions.  My site is close but I cannot seem to get my logo.png to show in the space where the usual eleven40 image shows.  What am I missing?  http://marketandeconomy.com

    #37158

    braddalton
    Participant
    Post count: 9782

    My tutorial didn’t show you exactly how to do that rather it showed how to remove the default image and add a normal header which is not exactly what you wanted, i know. Just thought it may help you to remove the default image.

    I see you have removed it so you could add your image using different methods:

    CSS in your child themes style.css file
    Custom header like in explained in the tutorial.
    Custom function
    Genesis Simple Hooks plugin
    Header logo plugin

    Cab you please provide a link to your image and i will test it in Firebug first.

    Example:
    [css][/css]
    .header-image #title-area, .header-image #title, .header-image #title a {
    display: block;
    float: left;
    height: 68px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 265px;
    background: url (‘http://path-to-your-image.png’);
    }
    // And change the values


    #37161

    sterman7
    Participant
    Post count: 22

    Indeed it did.  Now, I am stymied as to what is inhibiting my small logo from filling the space that the eleven4o header used to occupy.  When one scrolls over the area that should show the eleven40 text/image there is still a hyperlink there but nothing shows.  By my estimation my transparent background PNG image should be there.

    #37165

    sterman7
    Participant
    Post count: 22

    Brad,

    THe link to the image is:

     

    http://marketandeconomy.com/wp-content/themes/eleven40/images/logo.png

    The letters are white so they show on a black background like the top of my site.

    #37174

    braddalton
    Participant
    Post count: 9782

    I see you have already uploaded that image which is in the correct location in your header.

    The reason its not displaying is because all the old code for the default header is over riding it.

    If you look in the tutorial i linked to which i tested, it says to remove that CSS code.

    Backup first before you do.

    I deleted all that code in Firebug and your header logo displays.


    #37177

    sterman7
    Participant
    Post count: 22

    Brad,

     

    Here is what is in my header currently.  I removed what you said to in your tutorial but some of this other stuff I was not sure of.

     

    /* Header
    ———————————————————— */

    #header .wrap {
    min-height: 68px;
    }

    #title-area {
    float: left;
    width: 45%;
    }

    #title {
    background: url(http://marketandeconomy.com/wp-content/themes/eleven40/images/logo.png) no-repeat;
    border-top: 0;
    display: inline-block;
    font-family: verdana;
    font-size: 30px;
    line-height: 1;
    min-height: 68px;
    margin: 0;
    padding: 18px 25px 17px;
    position: relative;
    text-shadow: 0 1px #96430d;
    }

    #title a,
    #title a:hover {
    color: #fff;
    text-decoration: none;
    }

    #description {
    display: none;
    }

    #header .widget-area {
    float: right;
    width: 48%;
    }

    #37182

    sterman7
    Participant
    Post count: 22

    There is also this bunch of code after the header in the css sheet:  Should this be history too?

     

    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 68px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 265px;
    }

    .header-image #description {
    display: block;
    overflow: hidden;
    }
    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    #37184

    sterman7
    Participant
    Post count: 22

    As my sits now I have removed everything under the old header code in the css sheet and added the following (adding my image url appropriately):

    #header { max-width: 1140px; margin: 0 auto; width: 100%; height: 200px; background: url(“replace-wth-full-image-url”) no-repeat scroll 0 0 transparent; }

    I dropped this code just before the responsive design section starts on the style sheet.  And the site looks as it does.  Still lost.  Sorry for the trouble !

    #37189

    braddalton
    Participant
    Post count: 9782

    The tutorial i linked to works perfectly so you’ll need to follow it exactly as is.

    I tested it and wrote the tutorial when i was doing the job. Any other mods you made may cause issues.


    #37190

    sterman7
    Participant
    Post count: 22

    I am oh soo close.  It appears to be working but on certain pages and not others.  Most importantly it os not owkring on the home page but on others.  Any thoughts??

    #37200

    braddalton
    Participant
    Post count: 9782

    I can see it on your home page. It was probably the caching at browser or server level.


Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.