Outreach Theme: Using a custom logo/header

Community Forums Forums General Discussion Outreach Theme: Using a custom logo/header

This topic is: not resolved

This topic contains 33 replies, has 6 voices, and was last updated by  dev 9 months ago.

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #42213

    lgeraty
    Participant
    Post count: 7

    I’m trying to upload a custom logo/header and every time I do, it looks really messed up. Is there a way to upload a logo that would utilize the original background that is something like 350 by 120?

    If so, how would I do that? Every time I upload it in the header section of the dashboard, it tries to resize it.

    Thanks!

    #42219

    dev
    Participant
    Post count: 407

    This has to be the most-asked question on this forum. It would be nice for SP to put up a page showing all the different ways to do a logo/header.

    Here is how I do it.

    1. Upload your logo/header to the Media Lib

    2. Find the size (width x height) in px of your logo/header.

    3. In functions.php of your theme add the following code, using your own sizes:

    add_theme_support( 'genesis-custom-header', array(
    'width' => 385,
    'height' => 100
    ) );
    

    4. In WP Admin go to Appearance, Header and choose the file from the Media Lib.

    5. Uncheck the “Show text…” box on the above page.

    NewMedia Website Design

    #42231

    lgeraty
    Participant
    Post count: 7

    Ah… that makes sense now… when I did the search there were so many different ways that I was completely confused… ha ha.

    #42235

    dev
    Participant
    Post count: 407

    Yes, I know about the confusion. I had it too.

    On some themes you can simply upload your logo/banner to the theme’s /image directory and rename it to logo.png and it will work.

    Most Gen themes now have support for the “WP way” but you still have to code the size or WP wants you to crop it to some default size or something. All I know is that this code has always worked for us… so far.

    NewMedia Website Design

     

    #43661

    mbreslow
    Participant
    Post count: 5

    Ok, I did that, but when it goes mobile, it looks AWFUL.  http://www.mainsite.digitaloatmeal.net

    #46518

    tonyjalicea
    Participant
    Post count: 5

    I followed the instructions from “dev” and I still can’t get this working correctly. I added the code to my functions.php file, uploaded my logo.png file and unchecked the “Show header text with your image” option and this is what I get:

    http://harbourchurch.tonyjalicea.com/

    What am I missing?

    #46521

    dev
    Participant
    Post count: 407

    What were you expecting? Looked good to me.

    For mbreslow: Why not try the Genesis Responsive Header plugin:

    http://designsbynickthegeek.com/plugins/genesis-responsive-header-customizer-update

    #46523

    tonyjalicea
    Participant
    Post count: 5

    I was hoping to have the original textured background behind the logo. Is that possible?

    #46525

    dev
    Participant
    Post count: 407

    I see what you are saying. You want your logo on top of the textured background image that comes with theme? The best and easiest way to do this is to create a “banner” that has your logo as a “layer” on top of a background image, fused into a .jpg or .png file. Either you need some skills with a graphic program (I use Pixelmator on the Mac, but GIMP works well on PCs) or you should have a graphic person do this for you… won’t cost you much.

    Your background is here:

    http://harbourchurch.tonyjalicea.com/wp-content/themes/outreach/images/header.png

    The size is 1200×120 so have your graphics person create a .png file of your logo (maybe with a transparent background) and pop it on top of the header.png and flatten it.

    There is a way you can position your logo on top of the image  with CSS using ‘postion,’ ‘top’, and ‘left’ but it won’t be responsive and is not a good way to do it.

    If you are willing to forego the texture, you can always just use a color via

    #header {
    background: url(<a href="http://harbourchurch.tonyjalicea.com/wp-content/uploads/2013/06/logo1.png" rel="nofollow">http://harbourchurch.tonyjalicea.com/wp-content/uploads/2013/06/logo1.png</a>) no-repeat;
    background-color: #F00;
    }
    

    … but since your logo is not transparent, the white white background will show… but maybe that is a good thing.

    The best way is to create a banner with your logo and background texture all in one .jpg or .png.

    • This reply was modified 10 months ago by  dev.
    • This reply was modified 10 months ago by  dev.
    #46564

    tonyjalicea
    Participant
    Post count: 5

    Thanks for your help! I created a graphic with that header image with my logo over it. I inverted the colors and gave it a transparent background. It looks good but I lose the responsiveness (it gets wonky when I drag my browser window smaller) and my header menu drops to the next line.

    http://harbourchurch.tonyjalicea.com/

    Any thoughts on that? Or do I just lose the responsiveness with what I’m trying to do?

    #46573

    dev
    Participant
    Post count: 407

    For responsiveness, as I said above, try:

    http://designsbynickthegeek.com/plugins/genesis-responsive-header-customizer-update

    Making a textured graphic background banner works but there are always header responsive issues with most graphics. We always suggest people use a small logo graphic and just choose a background color. Make life easy!

    However, your method might work with the plugin above. Try it and let us know.

    #49223

    John
    Participant
    Post count: 153

    Regarding the header – logo issue you might want to give this a try: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #50800

    Kim
    Participant
    Post count: 97

    Oh my goodness! Thank you Dev! I’ve been messing with this for days! Followed your instructions and got my logo which is 430 x 120 to actually show up! Progress. But it’s too far left…I know it’s got to be something easy that I’m missing. Any suggestions. Thanks!

    Kim

    Here’s my site

    • This reply was modified 9 months ago by  Kim.
    • This reply was modified 9 months ago by  Kim.
    #50807

    Kim
    Participant
    Post count: 97

    ….and now my black background is gone! Grrrr!!!!

    #50808

    dev
    Participant
    Post count: 407

    Too far left? It’s way on the right side of the header… because you but it in the Header Right widget area. Is that what you want? Did you follow the instructions in:

    http://www.studiopress.com/forums/topic/outreach-theme-using-a-custom-logoheader/#post-42219

    above? I don’t think so… but I”m not sure.

    If want it on the right and want it more to the right edge you could do (note the minus sign):

    #text-2 {
    margin-right: -4em;
    }
    

    or

    #text-2 {
    margin-right: -70px;
    }
    

    Personally, I think it should go on the left, using the standard WP protocol, but it is up to you.

    Dev
    NewMedia Website Design

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

You must be logged in to reply to this topic.