[SOLVED] Using a custom header image?
Hi,
I am trying to setup a blog for my wife's fitness business. I like this design, but I'm used to simply being able to upload a custom header image file. I'm sure there are many great reasons and lots of amazing other things that I have not even begun to scratch the surface on yet, but my wife paid a graphic designer to create her blog header image and we'd like to paste it above the menu bar area. I apologize if this is sticky'd somewhere, but I'm really trying to get this done for her ASAP. How to do? |
And, I've got it :-)
Edited the header.php file as follows: 1. Added the <img src> following the <a href="<?php echo home_url(); ?>"> entry <a href="<?php echo home_url(); ?>"> <img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png"> </a> 2. The image appeared all scrunched up so I had to edit the vertical space for the logo-img by increasing the columns available. Default was col2 - I changed it to col8 <div id="logo-img" class="col8"> 3. Then I had to change the horizontal space by decreasing the columns available for the menu-wrapper. Default was col6, I reduced to col3 <?php wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'menu-wrapper col3', Voila!! |
Maybe not so fast!
I seem to have increased the white space beneath the menu bar pretty significantly. I know this is RESPONSIVE, but I'm not sure where to reduce that space I responsively increased :-) |
Remember all cols for a row have to equal 12
|
try this: If you want the logo image
1) above the blog title/menu replace the 'banner-br' div in the 'header.php' with HTML Code:
<div id="logo-img" class="col12 row"> HTML Code:
<div id="banner-bg" class="cf"> |
Is it possible to get a picture to sit behind the title, menu and tagline? I've tried placing it in so many different places now.
EDIT: Got it. Added my own class to header.php in the banner div, then entered the image and style in content.css |
juggledad, in both of the scenarios that you laid out, what should the two image sizes be (in pixels)?
|
Instead of me telling you, why don't you go try a bunch of differen sizes and report bach which you feel is the best.
|
Hey juggledad...
I followed the advice you gave above - the first option with the header image above the menu. I then removed the text logo bit and expanded the menu to 12 cols. All great, but... The image gets covered by the menu. The only css solution that I can think of would be to set a minimum height of 130px for the img or div or add a large margin on the div holding the menu, but those would hurt the responsiveness of the theme (show the image full 960x130 size). What am I not figuring out?! GAH! You can see what I'm playing with here. Any thoughts, pointers, directions, complete fix? I'll take any of the above. I have decent css skills, or would if it was still 2005 ;) Just completely banging my head on this for some reason. |
You could put this in one of the virtual css files such as various.css
HTML Code:
#logo-img { |
Thanks lmilesw!
It's not quite as elegant as I'd like - leaves a huge gap on mobile devices (or on shrunken browser windows). But it's good enough to let me move on and stop beating my head for now. If/when I figure out a smoother solution, I shall pass it along. If anyone else stumbles on the thread & has one -- feel free to beat me to posting it. |
Quote:
I suggest you experiment with a test template and colored background divs until you get a layout you like. The code to do that is at the bottom of this post. |
go to mto->export import - copy the export settings to a TEXT file and attach them to a response
|
Quote:
#menu1-wrapper to relative instead of absolute in menus_menu1.css. and remove the HTML Code:
#logo-img { |
That did it! Thanks!
(and I'm a bit embarrassed that I totally missed that line when I was poking around the menu... head banging makes it hard to see things, sometimes) |
All times are GMT -6. The time now is 05:11 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.