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] How To Overlay Header Image With Widget (http://forum.bytesforall.com/showthread.php?t=2839)

dan.s.ward Aug 5, 2009 09:21 PM

[SOLVED] How To Overlay Header Image With Widget
 
How can I overlay a widget area on the header image?

v3.4.1

juggledad Aug 6, 2009 04:18 AM

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

dan.s.ward Aug 8, 2009 11:01 AM

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:

%pages
%bar1
<!-- 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>
    </h2>
    <p class="tagline"><?php echo $bfa_ata['bloginfo_description'] ?></p>
  </div>
  <!-- Style wrapper for widget area -->
  <div id="header-widget-area-container">
    <!-- Add new widget area -->
    <?php bfa_widget_area('name=Header Widget Area'); ?>
  </div>
</div>
%bar2

  • Add HTML/CSS Inserts -> CSS Inserts
Code:

/*
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.
*/
#header-image-container{
position:relative;
margin:0;
padding:0;
height:150px;
background: url('HEADER-IMAGE-URL-GOES-HERE') center center no-repeat;
}

/* Styles to be applied to our new widget area container */
#header-widget-area-container{
width:200px;
float:right;
}

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


All times are GMT -6. The time now is 04:10 AM.

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