Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Header configuration styling (http://forum.bytesforall.com/showthread.php?t=6281)

marced Mar 15, 2010 02:06 AM

[SOLVED] Header configuration styling
 
Hi Flynn and all other forum members, first of all thanks for the great theme and all the work you've put in it. It's great, I am setting up my first site with it, www.marced.com .

What I want to do is add custom links to the top right of the header (above the search box). Now there is room to add html to the header in ATA theme options, but I can't style it the right way. I created a div, but whatever I do to the style, nothing happens.

What I need is that the text is not totally on the right of the screen, but on the ultimate right of the header, above te search box. I tried it like this but doesn´t work:

<div style="width:800px;align:right;">
test
</div>
What am I missing?

I can't use one of the horizontal bars for it can I, cause that is just styling? That would be the greatest cause then then the background of the header wouldn't shift, but I'll work that out. Just need some links on the top right, shouldn't be that hard I suppose?

Thanks a lot in advance for your help!

Cheers
Marc

juggledad Mar 15, 2010 05:48 AM

why not let the code do the work. Add a two cell widget area to the header and give the second cell the width you want the links to be. This will give you two new widget areas in the widget options

add a text area to the second cell with your links.

1) add the following to very begining of ATO->Style & edit HEADER AREA->Configure Header Area - make sure to adjust 'width_2=' to what you want
HTML Code:

<?php bfa_widget_area('name=My_header_area&cells=2&width_2=200&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>
2) go visit the home page
3) go to dashboard->apearances->widgets and you will see two new widget areas. add the TEXT widget to 'My_header_area 2 ' and add the html for your links there.

all done

marced Mar 15, 2010 11:22 AM

Wow Juggledad, this was totally it! Thanks a heap!! Couldn't have made up the code myself :)

Works like a charm... though it looks a bit slower now, but maybe that's just a coincidence.

I just have one final question for this part left. I want a register link (no problem), but also a link that says login when not logged in, or the name of the logged in user when logged in . I have created this already in the footer, but want to use it in this widget area too. In ATO option for the footer I could just use %register% and %loginout%, but can't use that here. At least it doesn't show anything. Should I include something in the header php file then?

Thanks again!!

juggledad Mar 15, 2010 12:28 PM

the %register% and %loginout% are just checked for in the footer code.
you could edit the header code and try coping the code from the footer in or you might look for a plugin that will do what you want and add that to the header.

marced Mar 16, 2010 01:50 PM

I installed the PHP text widget plugin so I can execute code in a widget too, and inserted the following code <?php wp_loginout(); ?> . This does the trick.

Thnx Juggledad, will make a donation, just not the stuff here to do it.

I have one other thing again, maybe I should make a new post but we're talking about the header styling anyway. I have a Google Search Box, which I want to align to the bottom, and it is not at the moment. The code of search part is:

<td valign="bottom" class="search-box" align="right"><div class="searchbox">






<form action="http://www.marced.com/search-2/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-2516364913757172:220cnn-j0v5" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Zoeken" />
</div>
</form>

Works of course. Now I want to do the aligning in CSS, but can't get it to work. Tried these things:

#search-box {
align: bottom;
}

div#search-box input.box {
vertical-align: bottom;
}

form#cse-search-box input {
vertical-align: bottom;
}

No result. How do I refer to the text box in CSS?! Thnx again!

juggledad Mar 17, 2010 04:54 AM

you will need to play with 'positioning' do a google search 'css positioning w3schools' to see how it is done

marced Mar 21, 2010 03:58 PM

thnx Juggledad, just donated to you personally.


All times are GMT -6. The time now is 12:28 PM.

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