Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Feb 4, 2009, 03:53 PM
mgclark
 
2 posts · Feb 2009
[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
  #2  
Old Feb 4, 2009, 04:19 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.

Last edited by Flynn; Mar 6, 2009 at 06:02 PM. Reason: Changed "bfa_header_image.php" to "bfa_header_config.php"
  #3  
Old Feb 4, 2009, 07:14 PM
mgclark
 
2 posts · Feb 2009
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.
  #4  
Old Feb 4, 2009, 07:59 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #5  
Old Feb 4, 2009, 08:01 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by mgclark
I donated to offset the aggravation of my questions.
Thank you, Greg.
  #6  
Old Mar 5, 2009, 06:06 AM
diehtu
 
1 posts · Mar 2009
Gaivuotna - Norway
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
  #7  
Old Mar 6, 2009, 01:31 AM
wing23
 
6 posts · Mar 2009
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

Last edited by wing23; Mar 6, 2009 at 01:54 AM.
  #8  
Old Mar 6, 2009, 02:17 PM
wing23
 
6 posts · Mar 2009
does anyone read this forum????????????????????????????????

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

Last edited by wing23; Mar 8, 2009 at 03:22 PM.
  #9  
Old Mar 6, 2009, 06:04 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Upload a fresh bfa_header_config.php and apply the changes as outlined in post #4 of this thread.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Setting Up Adsense in the Header/Logo Area bill_g Atahualpa 3 Wordpress theme 2 Jan 18, 2010 01:06 PM
How to Switch the Logo Area and Header Image tim5046 Header configuration & styling 1 Jun 2, 2009 12:43 PM
adding more than one pic/logo to the header area PJK Header configuration & styling 1 May 31, 2009 06:50 PM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 05:11 AM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 04:08 PM


All times are GMT -6. The time now is 12:38 AM.


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