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 »

Add a text under the header image


  #1  
Old Sep 14, 2009, 05:01 PM
bg74blogger
 
18 posts · Feb 2009
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
  #2  
Old Sep 14, 2009, 07:18 PM
Aubergine's Avatar
Aubergine
 
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
  #3  
Old Mar 20, 2011, 11:36 AM
crashley1784
 
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:
Code:
$horizontal_bar2 = '<div class="horbar2">&nbsp;</div>';
It looks like this:
Code:
$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:
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.
  #4  
Old Apr 3, 2011, 04:05 PM
webster
 
48 posts · Apr 2011
Just wonderful, as coding first off, well done, and nice design too.
  #5  
Old Apr 3, 2011, 08:22 PM
lmilesw's Avatar
lmilesw
 
10,174 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.

Bookmarks

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 05:06 PM.


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