[SOLVED] %bar1 styling and links?
 

I have been pouring over the forum for hours and I am more confused now than ever on what to do, any advice would be hugely appreciated!

I would like to place links to external sites in %bar1 and I would like the text for these links to be aligned to the right.

Where do I start with this? From what I can figure out, I would start in the bfa_header_config file:

$horizontal_bar1 = '<div class="horbar1">&nbsp;</div>';

and replace &nbsp; with code for the links? Then to style the text, can I do this under Horizontal Bar 1: Styling in ATO -> Style & Edit Header Area?

http://lipglosstheory.com

I am using wordpress 2.9.2 and atahualpa 3.5.1 with the ata-default2 style.

Thank you in advance for any and all help.

why make changes to the code, why not add a new widget area to the header then add a text widget and put your links in it??

This way the changes will carry over during an upgrade so you won't have to tke good notes so you can make teh changes again...

I never would have thought to solve this with a widget, thank-you!

Any advice on how can I go about setting this up?

Take a look at the option 'New Widget Area' it will show you the basics for adding a widget area, copy the code and put it in the Header Configuration, then visit the page, then go to the widget area and add a text widget into your new widget area

I have now created a new widget area: <?php bfa_widget_area('name=header-widget'); ?> in the Header Configuration and added a text widget with the links I want!

All that is left to do now is style them, do I do this with html in the text widget or do I create a CSS Insert? For styling, the biggest things I want to accomplish is align them on the right and add a background color so it appears as a bar spanning the width of page (like bar above).

use the css inserts. If you look at the source of the page, you should be able to find teh <div... for the widget area and it will give you an ID you can use fr the CSS selector.

UPDATE: Figured it out, I needed to to use before_widget and after_widget. Thanks for all of your help juggledad!


I am so close! Using the css inserts I have added formating. I was able to get the background color, change the link color and link hover color.

However, it will not let me change the size of the text? There is also a white line below the text.

The code that I have added in the css inserts is:

#header-widget {
padding-right: 5px;
background: #666666;
height: 30px;
text-align: right;
text-transform:lowercase;
word-spacing:10px;
font-size: 12px;
}

#header-widget a:link, #header-widget a:visited {
color: #FEFEFE;
}

#header-widget a:hover {
color: #222222;
text-decoration:none;
}