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] How To Overlay Header Image With Widget

Old Aug 5, 2009, 09:21 PM
4 posts · Aug 2009
How can I overlay a widget area on the header image?

Old Aug 6, 2009, 04:18 AM
juggledad's Avatar
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You can create a widget area in the header, but there is no builtin feature to 'overlay' a widget on the header image. To do something like this would involve modifications to the code
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Aug 8, 2009, 11:01 AM
4 posts · Aug 2009
I figured out a way to do it without editing code and thought I'd share my solution.
  • Style and Edit Header Area -> Configure Header Area
HTML Code:
<!-- Replace %image header item with the following html/php code -->
<div id="header-image-container" class="header-image-container">
  <div class="opacityleft">&nbsp;</div>
  <div class="opacityright">&nbsp;</div>
  <div class="titleoverlay">
    <h2 class="blogtitle">
      <a href="http://www.example.com/"><?php echo $bfa_ata['bloginfo_name'] ?></a>
    <p class="tagline"><?php echo $bfa_ata['bloginfo_description'] ?></p>
  <!-- Style wrapper for widget area -->
  <div id="header-widget-area-container">
    <!-- Add new widget area -->
    <?php bfa_widget_area('name=Header Widget Area'); ?>
  • Add HTML/CSS Inserts -> CSS Inserts
Since we removed the %image header item, the CSS
for the header-image-container class won't be generated
so we have to add it ourselves.
I'm using the tag id instead to prevent conflicts just in case.
background: url('HEADER-IMAGE-URL-GOES-HERE') center center no-repeat;

/* Styles to be applied to our new widget area container */
  • Add widgets to the new widget area

The opacity and blog title overlay elements can still be configured in the 'Header Image' settings. However, I don't think the rotating images will work. They never worked for me anyway, so I can't test it. It shouldn't be too hard to add the necessary javascript though.

Last edited by dan.s.ward; Aug 9, 2009 at 01:27 PM. Reason: Improve the example code to include dynamic blog title and tagline


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to make logo area on beside or overlay header image? phuongnv Header configuration & styling 16 Mar 17, 2011 06:09 PM
[SOLVED] For the life of me, I can't overlay the blog title in the header image? weightlosscoach Header configuration & styling 2 Mar 20, 2009 08:24 AM
Can't get logo and header image overlay to be centered on all screen resolutions jockoe Header configuration & styling 1 Feb 27, 2009 02:44 PM
Header image and widget image mamngirl Header configuration & styling 1 Feb 4, 2009 12:36 PM

All times are GMT -6. The time now is 07:00 AM.

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