Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] WordPress with theme Atahualpa: search box in menu bar


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 19, 2011, 08:43 AM
ratjetoe
 
12 posts · Oct 2010
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:



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:



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

Last edited by ratjetoe; Feb 19, 2011 at 10:05 AM.
  #2  
Old Feb 19, 2011, 10:29 AM
lmilesw's Avatar
lmilesw
 
9,973 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #3  
Old Feb 19, 2011, 12:10 PM
ratjetoe
 
12 posts · Oct 2010
That's a good idea of course, but.... how?
  #4  
Old Feb 19, 2011, 12:20 PM
lmilesw's Avatar
lmilesw
 
9,973 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #5  
Old Feb 19, 2011, 12:33 PM
ratjetoe
 
12 posts · Oct 2010
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.
  #6  
Old Feb 19, 2011, 12:37 PM
lmilesw's Avatar
lmilesw
 
9,973 posts · Jul 2009
Central New York State USA
This thread from today was about the same issue and the use of negative margins worked.
__________________
~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.
  #7  
Old Feb 20, 2011, 03:39 AM
ratjetoe
 
12 posts · Oct 2010
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=\'' .
  #8  
Old Feb 20, 2011, 05:45 AM
ratjetoe
 
12 posts · Oct 2010
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/
  #9  
Old Feb 20, 2011, 06:48 AM
lmilesw's Avatar
lmilesw
 
9,973 posts · Jul 2009
Central New York State USA
It looks like you have if figured out.
__________________
~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.
  #10  
Old Feb 23, 2011, 05:28 AM
Handre
 
46 posts · May 2010
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?
  #11  
Old Feb 23, 2011, 06:31 AM
lmilesw's Avatar
lmilesw
 
9,973 posts · Jul 2009
Central New York State USA
To make this work in IE try adding the following to your css
HTML Code:
position: relative;
__________________
~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.
  #12  
Old Feb 26, 2011, 09:10 AM
ratjetoe
 
12 posts · Oct 2010
Quote:
Originally Posted by lmilesw
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!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Putting search box (widget) in category menu? crashley1784 Page & Category Menu Bars 3 Dec 19, 2012 07:42 AM
search box on the menu bar mlluch Header configuration & styling 6 Aug 17, 2011 09:19 PM
Add Search Box to Page Menu vinniev Page & Category Menu Bars 6 May 19, 2010 12:06 AM
Bug? Atahualpa 3.3.3 Theme Options > Category Menu Bar Deahna Page & Category Menu Bars 5 Jun 1, 2009 08:46 PM
Bug: Atahualpa 3.0 Theme Options > Page Menu Bar bseppa Page & Category Menu Bars 5 May 9, 2009 08:59 PM


All times are GMT -6. The time now is 06:44 PM.


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