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>'; Code:
$horizontal_bar2 = '<div class="horbar2"><div class="horbar_text"> </div></div>'; 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 { Code:
body.category-linklane div.horbar_text { 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 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. |
All times are GMT -6. The time now is 03:09 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.