Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to add a logo to Outreach Theme header left?
- This topic has 14 replies, 6 voices, and was last updated 11 years, 1 month ago by aself.
-
AuthorPosts
-
December 26, 2012 at 9:05 pm #7624IanPParticipant
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.
December 27, 2012 at 6:38 am #7665IanPParticipantI'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
December 27, 2012 at 9:09 am #7674Susan NelsonParticipantCan you please post a link to your site so we can check it out?
December 27, 2012 at 9:00 pm #7828IanPParticipantSite is not live, but I can get you access somehow if you like.
Thank you
December 28, 2012 at 4:53 am #7852Susan NelsonParticipantSure, 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.
December 28, 2012 at 4:54 am #7853IanPParticipantOkay, 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.
December 28, 2012 at 4:57 am #7854IanPParticipantThanks Susan
If you can help with the responsiveness; that'd be great.
Site is live temporarily: helensburgh.com.au
December 28, 2012 at 3:23 pm #8008Susan NelsonParticipantIt looks like you'll need to upload a smaller version for the smaller devices.
January 8, 2013 at 8:11 pm #10557AliratMemberThanks 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.)
January 19, 2013 at 10:05 pm #13217eightfivesixMemberThanks 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?
January 23, 2013 at 11:17 am #14073eightfivesixMemberFYI, 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/
January 30, 2013 at 10:03 am #16394sam33joyMemberHello How can I make or add my logo on the top the theme outreach? can you help me please?
January 30, 2013 at 10:38 am #16401sam33joyMemberHello how can I add the logo on the top outreach 2.00
March 5, 2013 at 1:10 pm #24355aselfMemberI 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%;
}Thanks!
March 5, 2013 at 2:06 pm #24374aselfMemberMy 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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.