Wordpress Themes - WP Forum at BFA

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)

mgclark Feb 4, 2009 03:53 PM

[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

Flynn Feb 4, 2009 04:19 PM

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.

mgclark Feb 4, 2009 07:14 PM

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

Flynn Feb 4, 2009 07:59 PM

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;">'

to
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.

Flynn Feb 4, 2009 08:01 PM

Quote:

Originally Posted by mgclark (Post 839)
I donated to offset the aggravation of my questions. :o

Thank you, Greg.

diehtu Mar 5, 2009 06:06 AM

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

wing23 Mar 6, 2009 01:31 AM

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

wing23 Mar 6, 2009 02:17 PM

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

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

Flynn Mar 6, 2009 06:04 PM

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

wing23 Mar 8, 2009 03:21 PM

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

Wimbledon Jul 29, 2009 02:47 AM

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

juggledad Jul 29, 2009 05:36 AM

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.


All times are GMT -6. The time now is 05:37 PM.

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