Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] WordPress with theme Atahualpa: search box in menu bar (http://forum.bytesforall.com/showthread.php?t=12885)

ratjetoe Feb 19, 2011 08:43 AM

[SOLVED] WordPress with theme Atahualpa: search box in menu bar
 
Dear all,
In WordPress, with the theme Atahualpa, in Theme Options - Style & edit Header area - Show Search Box, if you choose Yes, the search box will be placed in the bar where the logo and the Blog Title are.

For a website I'm setting up, I didn't like that, and I wanted the search box in the menu bar. (A horizontal Pages menu bar.)

Before I added the search box to this menu bar, it looked like this:

http://www.ratje-toe.nl/wordpress/wp...eld-300x25.jpg

I figured out how to add the search box to this menu bar, but I've still got a problem that I can't seem to solve.

This is what I did:
I changed the file atahualpa\functions\bfa_header_config.php as follows:

Find “ // Search box”, and delete the part about the Search box.
Now find the line “// Close table if centered”, and right before that, I pasted:

HTML Code:

// Search box
if ( $bfa_ata['show_search_box'] == “Yes” )
{
echo ‘<li style=”float:right; border-top: solid 1px #CCCCCC;”>
<form method=”get” action=”‘ . home_url() . ‘/”>
<div >’ .
// Check for WP 2.2 which doesn’t know get_search_query
( function_exists(‘get_search_query’) ? ‘
<input type=”text” onfocus=”this.value=\” .
( get_search_query() ? get_search_query() : ” ) . ‘\’”
value=”‘ . ( get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) .
‘” onblur=”this.value=\” . ( get_search_query() ? get_search_query() :
$bfa_ata['searchbox_text'] ) . ‘\’” name=”s” />
’ :
<input type=”text” name=”s” />’) .
</div>
</form>
</li>
‘;
}

This works just fine.

Now I only have this problem:
By doing this, the menu bar becomes higher than it's supposed to be. The menu bar and the menu items all have a thin solid grey border, and now you can see that the menu items are have less height than the menu bar they're in.
Also, you can see that the search box is a bit too high, so the border right below it disappears.
(I set these borders in Atahualpa Theme Options – MENU 1 (Page Menu) – Border around all menu items: solid 1px #cccccc.)

Here you can see what I mean:

http://www.ratje-toe.nl/wordpress/wp...eld-300x29.jpg

I don't like this.

I found one possible solution, but this causes other problems:

I added the line “height: 11px;” to Atahualpa Theme Options – Style Forms – Form fields: Style. This helps: the menu bar looks cool again. But now, if I add a form to a page with multi-line input field, the input field is also only 11 px high...
So this 'solution' doesn't work for me.

Can anyone help me, please?

Thanx in advance, Laura

lmilesw Feb 19, 2011 10:29 AM

I wouldn't edit the bfa_header_config.php file as this edit will not survive a theme upgrade and as you found out produces unknown issues. I would use CSS to position the search box where you want.

ratjetoe Feb 19, 2011 12:10 PM

That's a good idea of course, but.... how?

lmilesw Feb 19, 2011 12:20 PM

You determine the CSS selector (I use Firebug with Firefox) and then use the proper CSS to position it. w3schools.com/css has all the info you would need for positioning.

ratjetoe Feb 19, 2011 12:33 PM

As far as I understand it, it's coded hard into the PHP-file, where it says the search box should be in the logo-area. It's a table. So it would be really difficult to reposition it with CSS, or, as far as I can see, impossible even.

lmilesw Feb 19, 2011 12:37 PM

This thread from today was about the same issue and the use of negative margins worked.

ratjetoe Feb 20, 2011 03:39 AM

It looks like I have a solution, but still by adjusting the php-file.
I keep the adjustment I made, and in the line beneath 'function exists' I add this:
style="height: 0.7em;"

So instead of
HTML Code:

<input type=”text” onfocus=”this.value=\” .
it now says
HTML Code:

<input  style="height: 0.7em;" type="text" class="text inputblur" onfocus="this.value=\'' .

ratjetoe Feb 20, 2011 05:45 AM

Okay, Ive put the original php files back, and now I'm trying to reposition the search box by creating a negative margin. Thus far, it doesn't work.
Now, in Atahualpa Theme Options - Style & Edit Header Area - Show search box?, I chose YES.
Search box:
border: 0px dashed #cccccc;
border-bottom: 0;
width: 100px;
margin: 0px 0px -150px 0;

It does go a bit down, but it can't seem to 'leave' bar2.
http://www.bethlehemcoaching.nl/wordpress/

lmilesw Feb 20, 2011 06:48 AM

It looks like you have if figured out.

Handre Feb 23, 2011 05:28 AM

I can play with that too, but when I check in Firefox, it looks oké but in IE it doesn't.

I changed it back, but how could I fix this?

lmilesw Feb 23, 2011 06:31 AM

To make this work in IE try adding the following to your css
HTML Code:

position: relative;

ratjetoe Feb 26, 2011 09:10 AM

Quote:

Originally Posted by lmilesw (Post 58471)
It looks like you have if figured out.

Yes, I did!! I put this in search box styling:

border: 0px dashed #cccccc;
border-bottom: 0;
width: 180px;
margin: 0px 0px -48px 0;
padding: 13px 19px 0px 0px;

And that was it! It's a miracle! Now, I don't need to change the php-files anymore!


All times are GMT -6. The time now is 01:38 PM.

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