Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] How to add search box to menu bar in Atahualpa 3.7.13


  #1  
Old Jan 13, 2014, 06:39 AM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
Hi all!

I want to put my search box in my menu bar and I was wondering how I can configure the search form to be added to the Configure Header Area like this - if at all possible:

%image %bar1 %pages %searchform %bar2

My main page is an Amazon aStore. I created a template just for the store that does not allow the sidebar; I needed full width to allow the aStore sidebar.

(http://creativepersonalizedkeepsakes.com/)

So what happens is I don't have a search box on the store pages, only on the blog pages.

If anyone can help, it will be greatly appreciated!

Thank you!
  #2  
Old Jan 13, 2014, 07:15 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I would add %logo to the 'Configure Header' option, then blank out the logo image option, shut off the RSS feed icons and then set the searchbox <div> to a height of 0 and use relative positioning to move the search box to the menu where you want it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 13, 2014, 08:55 AM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
Thanks juggledad!

I got the box to show up, but I'm having problems with the settings to get it in the right place.

With these settings, the search box shows up below bar2.

%image %bar1 %pages %logo %bar2

Settings for the search box in Configure Header Area:
HTML Code:
valign:top;
margin-bottom: -250; 
margin-top: 0;
padding: 0;
position: relative;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, 'Lato', serif;
font-size: 10px;
width: 100px;
height: 0;
I also want the font to be smaller, but these settings don't seem to affect the font at all.

What am I missing?

Thanks!

Last edited by juggledad; Jan 13, 2014 at 03:58 PM.
  #4  
Old Jan 13, 2014, 03:58 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
1) have you edited any of the theme files?

2) Please shut off your plugin that is minifing the code

Note: You might want to look at the CSS Inserts, looks like you have some sntax errors.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 13, 2014, 05:28 PM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
Hi juggledad!

I "may" have edited something in the theme files by now, but honestly, I'm not sure.

Anyway, I have the search box looking the way I want it to look - size & font - just not the Position yet.

It's a shame there's no %searchbox option for the menu bar. That would be perfect!

And for now, I deactivated the WP Total Cache, which I'm guessing is what minimized the code?
  #6  
Old Jan 13, 2014, 05:35 PM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
css inserts?

This is what's in the search box style in the configure header:
valign:top;
margin-bottom: -250;
padding: 0px;
position: relative;
font: .80em candara, trebuchet ms, cali;
width: 25%;
height: 0;

What I'm seeing when I look at the source code is that after %bar2, the table ends and a new one starts for the %logo, which is where the search box is, and that seems to put the search box on the next line instead of on the same line as the rest of the links on the menu bar. And I don't know how to change that.

<!-- Header -->
<td id="header" colspan="1">

<div id="imagecontainer" class="header-image-container" style="background: url('http://creativepersonalizedkeepsakes.com/wp-content/themes/atahualpa/images/header/blog-header.png') top center no-repeat;"><div class="codeoverlay"></div><div class="opacityleft">&nbsp;</div><div class="opacityright">&nbsp;</div></div> <div class="horbar1">&nbsp;</div> <div id="menu1" class="menu-store-information-container"><ul id="rmenu2" class="clearfix rMenu-hor rMenu"><li id="menu-item-3527" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3527"><a href="http://creativepersonalizedkeepsakes.com/"><span>&nbsp;Favors Shop Home</span></a></li>
<li id="menu-item-3539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3539"><a href="http://creativepersonalizedkeepsakes.com/blog/"><span>&nbsp;Blog Home</span></a></li>
<li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://creativepersonalizedkeepsakes.com/send-an-email/"><span>&nbsp;Send an Email!</span></a></li>
<li id="menu-item-3550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3550"><a href="http://creativepersonalizedkeepsakes.com/about-me/"><span>&nbsp;About Me</span></a></li>
<li id="menu-item-3658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3658"><a href="http://creativepersonalizedkeepsakes.com/submit-guest-post/"><span>&nbsp;Submit a Guest Post</span></a></li>
<li id="menu-item-3870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3870"><a href="http://creativepersonalizedkeepsakes.com/wedding-planning-party-tips-newsletter/"><span>&nbsp;Subscribe to My Newsletter</span></a></li>
</ul></div> <table id="logoarea" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="logoarea-title" valign="middle"><p class="tagline"></p></td><td class="search-box" align="right" valign="bottom"><div class="searchbox">
<form method="get" class="searchform" action="http://creativepersonalizedkeepsakes.com/">
<div class="searchbox-form"><input class="text inputblur" onfocus="this.value=''" value="Search the blog" onblur="this.value='Search the blog'" name="s" type="text"></div>
</form>
</div>
</td></tr></tbody></table> <div class="horbar2">&nbsp;</div>
</td>
<!-- / Header -->
  #7  
Old Jan 13, 2014, 06:36 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Well it seems you must have edited the css.php and removed some of the code. Why I don't understand but I can't help you now.

It is my expeience with Atahualpa that there are very few and far between reasons that someone might need to edit one of the theme files because the theme options are so flexible.

If you want to re-install the theme, I might be able to help you then
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 13, 2014, 09:22 PM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
I never edit anything without keeping the original in a backup file, so I never have to reinstall a theme.

I just put the original css.php back in, and it skewed the search box on the site.

Without that code in the css.php, at least the search box was visible.

So I guess I'm back to square one now.
  #9  
Old Jan 13, 2014, 09:32 PM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
Well, regardless of why anyone would want to edit any of the theme's code, that's neither here nor there. I never edit any original code without making a backup file so I never have to reinstall a theme.

Put the missing search box code back into the css.php.

Toying around with the search box style inside the Configure Header area, I now have the search box back inside the %bar2, but it's still dropping down to the next line.

I'm trying to figure out how to "join" the tables now or add the searchbox as another menu item so the box will be up and to the right of the last <li> in the menu bar.

At least now it's visible and workable; I just don't like where it's positioned.

Last edited by ksmusselman; Jan 13, 2014 at 09:35 PM. Reason: added info
  #10  
Old Jan 14, 2014, 01:51 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Have you tried using the css rule 'top:.....' To move it?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jan 14, 2014, 04:58 AM
ksmusselman's Avatar
ksmusselman
 
7 posts · Jan 2014
BINGO!!!

position: relative;
top:-25px;

It's PERFECT now! Thank you so much!! I'm not a web designer so I didn't know about that rule.

Bookmarks

Tags
configure header area, menu bar, search box position

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Exclude page from Atahualpa search results tracytrends Atahualpa 3 Wordpress theme 2 Oct 25, 2012 02:44 PM
WP Search Suggest for Atahualpa theme longnha Plugins & Atahualpa 1 Feb 12, 2012 03:20 PM
How to add Search Box to Atahualpa Bar1? bdups Header configuration & styling 6 Dec 9, 2011 03:35 AM
[SOLVED] How to add Search Box to Atahualpa Bar2? Jam Header configuration & styling 6 Apr 20, 2011 07:40 PM
[SOLVED] WordPress with theme Atahualpa: search box in menu bar ratjetoe Page & Category Menu Bars 11 Feb 26, 2011 09:10 AM


All times are GMT -6. The time now is 07:40 AM.


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