Wordpress Themes - WP Forum at BFA - [SOLVED] An easy way to have a logo over left sidebar area of header?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] An easy way to have a logo over left sidebar area of header? (http://forum.bytesforall.com/showthread.php?t=190)

[SOLVED] An easy way to have a logo over left sidebar area of header?

Hey,

Thank you for the them Flynn! I first saw WordPress two weeks ago and I've been able to build this site with very little trouble.

http://floridawaterskifederation.org/news/

I want to make a few changes to the header area and I'm not sure where to make the changes.

I'd like to have the logo placed over the header image on the left sidebar. As well I'd like to remove the header area and leave the header image with Title link and logo of course.

Thanks again for the theme and your help!

Greg

Use post #4 instead

In bfa_header_config.php, line 169, find

PHP Code:


		
			
$header_image .= '<div class="titleoverlay">' .

and replace with

PHP Code:


		
			
$header_image .= '<div class="titleoverlay">
<a href="http://floridawaterskifederation.org/news/"><img class="logo"
  src="http://floridawaterskifederation.org/news/wp-content/themes/atahualpa/images/fwsf_rgb_small.gif" 
alt="Florida Water Ski Federation" /></a>' .

Don't miss any of the green dots.

At Atahualpa Theme Options -> Header -> Configure Header Area, remove %logo

Later on, at Atahualpa Theme Options -> Header -> Logo Image: Styling you may have to replace the existing CSS ("margin: 0 10px 0 0;") with i.e.

HTML Code:

float: left;

padding: 5px 20px 5px 10px;

(outer space 5 pixels TOP, 20pixels RIGHT, 5pixels bottom, 10 pixels LEFT)

These changes require that you have Atahualpa Theme Options -> Header Image -> Overlay Blog TITLE over Header Image(s)? and/or Overlay Blog TAGLINE over Header Image(s)? set to YES (one of the two at least). You currently have the title set to yes, so that's fine, just letting you know that once you set both these options to "No" the Logo will disappear.

Thanks Flynn!

I didn't mention in the first post that its because of Atahualpa I've been able to build this site! I know very basic HTML and no PHP, etc.

So, I simply followed your steps and achieved this.

http://floridawaterskifederation.org/news/

I tried different values in the logo styling area to little avail.

Without giving me the answer, as I want to learn, where should I look to make logo go to the far left and the title to not wrap. Is it simply a CSS issue at this point?

I apologize for the Web-101 questions. But I appreciate the help!

BTW
I donated to offset the aggravation of my questions. :o

It's basically working o.k. but I should have given you a code to put it into the parent container. Right now it is sitting in the top left corner of the container div.titleoverlay, together with the blog title. You would have to make this change to bfa_header_config.php instead

Change

PHP Code:


		
			
$header_image = '<div class="header-image-container" style="background: url(' . $selected_header_image . ') ' . $bfa_ata_headerimage_alignment . ' no-repeat;">';

PHP Code:


		
			
$header_image = '<div class="header-image-container" style="background: url(' . $selected_header_image . ') ' . $bfa_ata_headerimage_alignment . ' no-repeat;">';
$header_image .= '<a href="http://floridawaterskifederation.org/news/"><img class="logo" src="http://floridawaterskifederation.org/news/wp-content/themes/atahualpa/images/fwsf_rgb_small.gif" alt="Florida Water Ski Federation" /></a>';

Now it's in the parent container and you can move it around.

As for the CSS for Atahualpa Theme Options -> Header -> Logo Image:

Either use float:left and margin/padding (negative values work too, if you cannot push it high enough because you have padding-top on the div.header-image-container to push the blog title down, but I think you haven't)

or

position:absolute (and no float) and top: XXpx and left: xxpx.

In both cases you would have to apply "z-index: 5" or higher. There are various layers stacked up on each other in the header image area. They use z-index 2, 3 and 4, and with z-index: 5 (or higher) you'd bring the logo to the top. Otherwise it will be behind other elements and not clickable, unless you made the whole header image clickable via Atahualpa Theme Options -> Header. But then it would still be behind that opacity area. Or maybe you want just that.

Quote:

Originally Posted by mgclark (Post 839)

I donated to offset the aggravation of my questions. :o

Thank you, Greg.

Great theme and great help found in the forum.

While I found these instructions very helpful I'd also like to contribute the code I used. This avoids ruining the splendid coding by Flynn, making it possible to use exactly the same code for several blogs. This uses the logo specified in the athualpha config instead of hardcoded link and text.

Code:

$header_image .= '<div class="titleoverlay"><a href="/"><img class="logo" src="' . get_bloginfo('template_directory') . '/images/' . $bfa_ata_logo . '" alt="' . get_bloginfo('name') . '" /></a>' .

Relates to the first code example given by Flynn in this thread.

-kjell

Thanks kjell,

Using your code helped me a lot! Just trying to move around now.

Having trouble getting the %image to show. When I use the %image it looks like logo area on top of logo area.

Also the configure header area is out of order, things are switched around.

Maybe I have missed a setting or some code?

Wayne

does anyone read this forum????????????????????????????????

Please...can one of you guys check out my problem?

Upload a fresh bfa_header_config.php and apply the changes as outlined in post #4 of this thread.

The logo is now where I want it...yeppie!

You obviously were the one to get the answer from.

The theme is awesome by the way.

Thanks for your help.

Wayne

I have followed post #4 of this thread and now my rotating header images have disappeared.

Does anyone know why? How can I fix this?

I would also like to move the logo to the center -- what is the best approach?

Thank you.

My website under construction:

Road Review

The code has changed and this fix no longer applies to 3.4.x
Open a new thread and mention your release and what you want to do.