Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Using a custom header image?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 9, 2012, 03:37 PM
Dynamik1
 
3 posts · Nov 2012
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?

Last edited by Dynamik1; Nov 9, 2012 at 04:18 PM.
  #2  
Old Nov 9, 2012, 04:09 PM
Dynamik1
 
3 posts · Nov 2012
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!!
  #3  
Old Nov 9, 2012, 04:19 PM
Dynamik1
 
3 posts · Nov 2012
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 :-)
  #4  
Old Nov 9, 2012, 04:58 PM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Remember all cols for a row have to equal 12
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Nov 10, 2012, 06:37 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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">
	<a href="<?php echo home_url(); ?>">
           	<img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png">
	</a>
</div>

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-area" class="col5">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array( 
			'container' => 'nav', 
			'container_class' => 'menu-wrapper col7', 
			'container_id' => 'menu1-wrapper', 
			'menu_id' => 'menu1', 
			'menu_class' => 'cf menu', 
			'theme_location' => 'menu1', 
			'fallback_cb' => 'bfa_page_menu' 
		) ); ?>
	</div>
</div>
2) if you want it inline with the title and menu use this (adjusting the columns to your needs)
HTML Code:
<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-img" class="col2">
		  <a href="<?php echo home_url(); ?>">
              <img src="http://www.YourDomainNameHere.com/wp-content/themes/montezuma/images/logo.png">
          </a>
		</div>
		<div id="logo-area" class="col3">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array( 
			'container' => 'nav', 
			'container_class' => 'menu-wrapper col7', 
			'container_id' => 'menu1-wrapper', 
			'menu_id' => 'menu1', 
			'menu_class' => 'cf menu', 
			'theme_location' => 'menu1', 
			'fallback_cb' => 'bfa_page_menu' 
		) ); ?>
	</div>
</div>
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #6  
Old Dec 10, 2012, 08:14 AM
Virtualmotorpix
 
21 posts · Nov 2012
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

Last edited by Virtualmotorpix; Dec 10, 2012 at 09:19 AM.
  #7  
Old Feb 23, 2013, 10:27 AM
Joshua B
 
3 posts · Feb 2013
juggledad, in both of the scenarios that you laid out, what should the two image sizes be (in pixels)?
  #8  
Old Feb 23, 2013, 11:11 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #9  
Old Mar 7, 2013, 12:45 PM
avala
 
3 posts · Mar 2013
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.
  #10  
Old Mar 7, 2013, 01:12 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
You could put this in one of the virtual css files such as various.css
HTML Code:
#logo-img {
    height: 230px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Mar 7, 2013, 05:12 PM
avala
 
3 posts · Mar 2013
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.
  #12  
Old Mar 7, 2013, 05:41 PM
jerryc
 
367 posts · Oct 2012
Florida
Quote:
Originally Posted by avala
... leaves a huge gap ...
Your div height is 230px and your image height is 130px. That may explain the gap, which I expect measures 100px.

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.

Last edited by jerryc; Mar 7, 2013 at 05:49 PM.
  #13  
Old Mar 7, 2013, 05:46 PM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
go to mto->export import - copy the export settings to a TEXT file and attach them to a response
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #14  
Old Mar 7, 2013, 08:20 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by avala
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.
My bad... I was trying the brute force attack which won't play nice for responsiveness. The issue can be fixed by changing

#menu1-wrapper to relative instead of absolute in menus_menu1.css.

and remove the
HTML Code:
#logo-img {
    height: 230px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by juggledad; Mar 8, 2013 at 04:21 AM.
  #15  
Old Mar 8, 2013, 05:29 AM
avala
 
3 posts · Mar 2013
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)

Bookmarks

Tags
header

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
use custom menus as simple overlays of header image? avantlit Header configuration & styling 1 Nov 6, 2012 12:02 PM
[SOLVED] Custom Hyperlink My Header Image... kmages Header configuration & styling 6 May 21, 2011 06:53 PM
[SOLVED] Template with Custom Header -- No Image epsymp Header configuration & styling 9 Mar 2, 2011 05:20 PM
HTML/CSS inserts in Atahualpa 3.4.1 (for custom header image slider) csb Header configuration & styling 3 Nov 16, 2009 07:02 PM
Custom links IN header image mkny13 Header configuration & styling 7 Jul 21, 2009 11:13 AM


All times are GMT -6. The time now is 02:57 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.