Custom Header Foundation Theme
Support Area › Forums › Foundation › Custom Header Foundation Theme
- This topic has 9 replies, 4 voices, and was last updated 11 years, 2 months ago by Bill Robbins.
-
AuthorPosts
-
March 22, 2012 at 07:57 #5443Brian DavisParticipant
Hi,
I would like to add a custom header to my website.
I have tried to add under the logo tab and this has not worked,
there is no option on the admin panel for header, or am i missing something.Thanks,
March 22, 2012 at 08:25 #5444Bill RobbinsModeratorBrian,
Great question. You can add an image behind the logo if you’d like to. Here’s how to do that.
- Go to the Media section of your WordPress control panel and select “Add New.”
- Upload the image you’d like to use as your header. The space that is available in the theme by default is 960 pixels wide by 100 pixels tall.
- Once your upload is complete, WordPress will give you a URL to that image. Copy that URL.
- Next go to the theme options page and select the styling tab.
- Scroll down to the very bottom until you see a box for “Custom CSS.”
- Paste this into that box:
#header { background-image: url(https://yoursite.com/image.jpg) }
- In the snippet above, replace the http://yoursite.com/image.jpg with the URL to your image that you copied earlier.
- Save your changes.
That should give your custom header image to go behind your logo. If you need any help, let me know.
Thanks,
Bill RobbinsMarch 22, 2012 at 09:22 #5445Brian DavisParticipantHi Bill,
I have added the header behind logo but header size is off, I had header custom designed and the designer claimed header was right size for website, could you please take a look at site and let me know if I can correct?
http://www.purealternativeministries.orgThank you.
BrianMarch 22, 2012 at 09:58 #5446Bill RobbinsModeratorBrian,
Try adding this to the Custom CSS box and see if it works better for you.
#header { height: 240px; } #logo { display: none; }
That should give you more height and it will also hide the image link for the logo since you won’t be needing it.
Let me know if you have any trouble.
March 22, 2012 at 10:20 #5448Brian DavisParticipantYes, Yes, works great, Thanks so much for your help.
March 22, 2012 at 14:07 #5455Bill RobbinsModeratorGlad that helped. Let me know if you need anything else.
November 24, 2012 at 10:45 #8428Stephanie DoharParticipantHi Bill,
I specified the height and width of #header in my Custom CSS, however….
I’d like for the full image to show, and not be overlaid with the drop-down menu bar. Is there a way to do this?Thank you!
November 26, 2012 at 10:54 #8448Bill RobbinsModeratorStephanie,
Great question. The menu bar is 40 pixels tall. If you’ll add that to the height of your image and then use that as the header height you should be able to see the entire image without the navigation bar overlaying it.
If you run into trouble, let me know,
BillJanuary 20, 2013 at 20:33 #9014PL2VETSParticipantBill
Is there any way to add a customized image to the right side of the logo in the header so the logo does not overlap the header image.
Jeff
January 21, 2013 at 08:46 #9021Bill RobbinsModeratorJeff,
You can do that. The easiest option would be to incorporate it into an image logo and then use that option. If you’d like to use a text logo along with the image, you can do that. Here’s what to do:
- Go to Media section of your WordPress control panel and select “Add New.”
- Upload your image and once the upload is completed click edit (if you’re using WordPress 3.5) or just copy the URL to your image. If you click edit, look in the right hand side of the screen for a field labeled “file URL” and copy the URL to your image there.
- Next go to the Theme Options page and select the styling tab. Scroll down to the Custom CSS box and paste this:
#header { background: url(https://yoursite.com/image.png) no-repeat 200px 25px; }
- Replace the
http://yoursite.com/image.png
with the URL to your image. The 200px is the number of pixels from the left your image will be positioned. Change that so it fits where you’d like it to go. The 25px is the number of pixels from the top your image is. You can adjust that to achieve your fit. - Save your changes.
That should add in an image next to the text logo. If you have any questions or trouble, let me know.
Have a great week,
Bill -
AuthorPosts
- The topic ‘Custom Header Foundation Theme’ is closed to new replies.