How to add a logo to Outreach Theme header left?

[IanP]

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.

[IanP]

I'm making some progress.

I know have an image uploaded via Appearance/Header.  The image dimensions are 1060x120 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

[Susan Nelson]

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

[IanP]

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

Thank you

[Susan Nelson]

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.

[IanP]

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.

[IanP]

Thanks Susan

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

Site is live temporarily: helensburgh.com.au

[Susan Nelson]

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

[Alirat]

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.)

[eightfivesix]

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?

[eightfivesix]

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/

[sam33joy]

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

[sam33joy]

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

[aself]

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!

 

[aself]

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!

 

[Author]

Posts