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, 04:53 PM
mgclark
 
2 posts · Feb 2009
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, 05: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 07:02 PM. Reason: Changed "bfa_header_image.php" to "bfa_header_config.php"
  #3  
Old Feb 4, 2009, 08: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, 08: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, 09: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, 07: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, 02: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 02:54 AM.
  #8  
Old Mar 6, 2009, 03: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 04:22 PM.
  #9  
Old Mar 6, 2009, 07: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.
  #10  
Old Mar 8, 2009, 04:21 PM
wing23
 
6 posts · Mar 2009
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
  #11  
Old Jul 29, 2009, 03:47 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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
  #12  
Old Jul 29, 2009, 06:36 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

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 02:06 PM
How to Switch the Logo Area and Header Image tim5046 Header configuration & styling 1 Jun 2, 2009 01:43 PM
adding more than one pic/logo to the header area PJK Header configuration & styling 1 May 31, 2009 07:50 PM
Set left sidebar widgets same distance from center area as right sidebar widgets daisy24 Sidebars & Widgets 2 Feb 19, 2009 06:11 AM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 05:08 PM


All times are GMT -6. The time now is 08:46 PM.


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