How to add a logo to Outreach Theme header left?

Community Forums Forums Design Tips and Tricks How to add a logo to Outreach Theme header left?

This topic is: not resolved

This topic contains 14 replies, has 6 voices, and was last updated by  aself 1 year, 9 months ago.

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

    IanP
    Participant
    Post count: 71

    Hi

    I’m trying to remove the default text header in Outreach Theme and replace it with an image.  I don’t mine if I retain the themes black checker background; I’d like me logo to overlay it or similar, and align left.   How does one do this?

    Thank you.

    #7665

    IanP
    Participant
    Post count: 71

    I’m making some progress.

    I know have an image uploaded via Appearance/Header.  The image dimensions are 1060×120 and the image doesn’t populate the outer edges on both sides.  The header image is centered, 1060 width and then the header background is grey on each side.

    How do I get the colors to continue on each side of the header image?

    Thank you

    #7674

    Susan Nelson
    Participant
    Post count: 207

    Can you please post a link to your site so we can check it out?


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #7828

    IanP
    Participant
    Post count: 71

    Site is not live, but I can get you access somehow if you like.

    Thank you

    #7852

    Susan Nelson
    Participant
    Post count: 207

    Sure, feel free to send me a private reply (checkbox before the submit button) with your login and I’ll be happy to take a look.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #7853

    IanP
    Participant
    Post count: 71

    Okay, I ended up doing the following:

    Made logo/banner/header image to be W=400px X H=120. I uploaded this via FTP or File Manager (in CPanel) to the:/public_html/your site/wp-content/themes/outreach/images

    Edited the style.css in the ‘Header’ area of the sheet.

    #title-area {
    background: url(images/YOUR BANNER/LOGO/HEADER.png) no-repeat;
    background-position: center !important;
    float: left;
    overflow: hidden;
    width: 400px;
    }

    #title {
    font-family: ‘Lato’,sans-serif;
    font-size: 48px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    }

    #title a,
    #title a:hover {
    color: #FFFFFF;
    display: block;
    height: 120px;
    text-decoration: none;
    text-indent: -9999px;
    width: 120px;
    }

    Mobile responsiveness is average and I’m working on that now.

    #7854

    IanP
    Participant
    Post count: 71

    Thanks Susan

    If you can help with the responsiveness; that’d be great.

    Site is live temporarily: helensburgh.com.au

    #8008

    Susan Nelson
    Participant
    Post count: 207

    It looks like you’ll need to upload a smaller version for the smaller devices.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #10557

    Alirat
    Participant
    Post count: 28

    Thanks for this, just what I needed. Also if you are using anything in the header right area you need to tweak the numbers so width of logo in title-area and width of header-widget do not exceed width. (Probably stating the obvious here but it perplexed me for a moment or two.)

    #13217

    eightfivesix
    Participant
    Post count: 2

    Thanks for this walk-through.  I’m trying to do something similar on a site and I’m having difficulty getting the original background to repeat.  Here is the site:

    http://69.195.124.70/~eliteso2/

    Any ideas?

    #14073

    eightfivesix
    Participant
    Post count: 2

    FYI, I was able to fix the repeating background by turning on “Show header text with your image”.  Not sure why that worked, but it did!  You can see my site here:  http://www.elitesoccercommunity.org/

    #16394

    sam33joy
    Participant
    Post count: 25

    Hello How can I make or add my logo on the top the theme outreach? can you help me please?

    #16401

    sam33joy
    Participant
    Post count: 25

    Hello how can I add the logo on the top outreach 2.00

    #24355

    aself
    Participant
    Post count: 25

    I haven’t seen this issue in the forums for the past month but I still have the exact same issue described here.  I’ve added the styling and image which work, but still have the gray background on the right in the header.  It does go away when I turn on “Show header text with your image”, but I don’t want that text to show :).

    The header styling below has a strikethrough and another one is being used that isn’t in the child theme’s style sheet.

    #header {
    background: #090909 url(images/header.png) center repeat-y;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    http://somabible.org/SomaReD/

    Thanks!

     

    #24374

    aself
    Participant
    Post count: 25

    My issue is resolved but I’m not actually sure how.  I added a tagline instead of the default WP one in settings and saved it.  I also turned on “Show header text with your image” which I had done many many times already.

    When I refreshed my browser, the text didn’t show anymore and the gray was gone -???.  The only thing I can think of is that saving the General Settings page triggered something.  Glad it’s fixed!

     

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

You must be logged in to reply to this topic.