Wordpress Themes - WP Forum at BFA - Add a text under the header image

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - Add a text under the header image (http://forum.bytesforall.com/showthread.php?t=3434)

Add a text under the header image

Hello,

is it possible to add a text directly under the large header image (between header image and dotted line)? If it possible how can I do that that?

Thanks
Sven

There is more than one way to do this, but the following method would work pending a more elegant solution. In theme header options, Style and Configure Header Area, Horizontal Bar 2: Styling, add CSS to override font-size of 1px and center content:

font-size: 14px; height: 28px; line-height: 28px; text-align: center; /* line-height is twice font-size */

Then, in the theme functions folder, in the file: bfa_header_config.php, find the line:
$horizontal_bar2 = '<div class="horbar2"> </div>';

Replace   with your line of text, save, and upload to server.

You'd have to manually update the the bfa_header_config.php file when you upgrade the theme if you did this.

BTW, I was able to change the the text inside div.horbar2 with jQuery on a test page, but it didn't work when I added the javascript to the blog <head> tag.

Just wanted to share my experience with this in case anyone is trying to figure out how to do the same thing...
First, some quick background:
I am using the horbar as a "category" header on my site, meaning that the background image in the horbar changes based on the category page a user is viewing. Each banner background image included text with the title and subtitle of the section. The problem is that I'm using a flexible layout, and so as the browser window gets smaller, the background image gets clipped on each side (I have it set to "top center"). With my text included on the background image, it too got clipped. So I went in search of a solution and this is what I came up with:

Following the advice in this thread, I editied bfa_header_config.php to include a secondary div in the $horizontal_bar2 section. So, instead of my code looking like this:

Code:

$horizontal_bar2 = '<div class="horbar2"> </div>';

It looks like this:

Code:

$horizontal_bar2 = '<div class="horbar2"><div class="horbar_text"> </div></div>';

Then I created background images for each of my categories including only the text that I wanted to display (I wanted some styling to it outside of the capabilities of css), and made them transparent PNGs so that they simply overlay the background banner image.
So, I would have cat_linklane_background.png (the background banner image), and cat_linklane_text.png (the transparent png with only the text).

Then, in the Add CSS Ata. panel, I added the following definitions:

To define the width / height of the horbar_text div:

Code:

div.horbar_text {

width: 100%;

height: 100%;

}

And then, to display the text image on top of the background banner I added:

Code:

body.category-linklane div.horbar_text {

background: url('<?php echo get_template_directory_uri(); ?>/images/cat_linklane_text.png') no-repeat top left;

}

And it works like a charm! I was so excited to figure out how to do this! I hope it will be useful for someone else!
You can see it in action at http://www.laurenacooper.com/thoroughfare and then click on the "Link Lane" category.

Just wonderful, as coding first off, well done, and nice design too.

Instead of editing the bfa_header_config.php you can also just add text instead of or along with %bar1. Your Configure Header Area box might look something like the following.

HTML Code:

%logo %pages %image <div style="color: blue">Text you want to add</div> %bar1

This would give you a logo at the top, then the pages menu, then the banner images, then some blue text, and finally the horizontal bar.

Maybe I'm missing something but this seems easier than editing a theme file and you won't have to update a theme file after an upgrade.