Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Add a text under the header image

Old Sep 14, 2009, 05:01 PM
18 posts · Feb 2009
Add a text under the header image


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?

Old Sep 14, 2009, 07:18 PM
Aubergine's Avatar
15 posts · Sep 2009
Maryville, TN
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">&nbsp;</div>';

Replace &nbsp; 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.

Last edited by Aubergine; Sep 15, 2009 at 08:11 AM. Reason: improve suggested code
Old Mar 20, 2011, 11:36 AM
81 posts · May 2009
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:
$horizontal_bar2 = '<div class="horbar2">&nbsp;</div>';
It looks like this:
$horizontal_bar2 = '<div class="horbar2"><div class="horbar_text">&nbsp;</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:
div.horbar_text {
width: 100%;
height: 100%;
And then, to display the text image on top of the background banner I added:
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.
Old Apr 3, 2011, 04:05 PM
48 posts · Apr 2011
Just wonderful, as coding first off, well done, and nice design too.
Old Apr 3, 2011, 08:22 PM
lmilesw's Avatar
10,176 posts · Jul 2009
Central New York State USA
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.
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to Add Text to ALL Posts? strangelove Atahualpa 3 Wordpress theme 4 Feb 28, 2010 12:53 PM
Alternate Text in the Header Image ashish Header configuration & styling 8 Aug 1, 2009 12:40 PM
Changing the links default title text to an image jpg of text veenublue Sidebars & Widgets 2 Jun 5, 2009 06:05 AM
How do I add spacing (padding?) between the horizontal bars and header image? ftkeeper Header configuration & styling 0 May 16, 2009 11:41 PM
Remove blog title text add image benw Header configuration & styling 4 Apr 28, 2009 03:50 PM

All times are GMT -6. The time now is 10:11 PM.

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