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 » Header configuration & styling »

[SOLVED] How to add Search Box to Atahualpa Bar2?


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 Apr 19, 2011, 04:49 AM
Jam's Avatar
Jam
 
1,046 posts · Mar 2011
Perth, Western Australia
[SOLVED] How to add Search Box to Atahualpa Bar2?

Hi all,
Would I be able to include the Search box in the Bar 2 area (right justified)? If so, what would I add to my Horizontal Bar 2: Styling?
Can I add <form method="get" class="searchform" action="http://www.mywebsite.com/"></form> to my Horizintal Bar 2 Styling? Could it be that simple? I didnt want to try unless it broke the website


I did a search but only found a time consuming option to include the Search box in the navigation. I figure this would be much easier (and just below the navigation on the "page" which is where I would prefer it.)
Ata 3.4.9

Thanks in advance
  #2  
Old Apr 19, 2011, 06:42 PM
Jam's Avatar
Jam
 
1,046 posts · Mar 2011
Perth, Western Australia
Hmm so I managed to add a Search Bar directly under Header image, by editing my header.php and inserting
<?php get_search_form(); ?>
just above <!-- Main Body -->

but it is full page width. Can anyone suggest how I can make it a fixed width?

I tried changing the width in Search Bar options in ATA/Options/Style and edit Header area, but that made no difference to this alternative search bar.
  #3  
Old Apr 19, 2011, 09:22 PM
lmilesw's Avatar
lmilesw
 
9,975 posts · Jul 2009
Central New York State USA
You could just put that code in the Configure Header Area box in the theme options. Then you won't have to "redo" it if you should upgrade the theme.

To set a width just use the searchform class and apply a width in ATO>Add HTML/CSS Inserts>CSS Inserts. For example
HTML Code:
.searchform {
width: 200px;
}
__________________
~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.
  #4  
Old Apr 20, 2011, 06:58 PM
Jam's Avatar
Jam
 
1,046 posts · Mar 2011
Perth, Western Australia
Thanks Larry,
That worked a treat.

Can now position the Search bar virtually anywhere
Donation sent to you, thanks for your help.

I ended up putting it above the header image and navigation in Configure Header Area

Quote:
<?php get_search_form(); ?> %pages %image %bar2
and styled it in the CSS inserts with:

Quote:
.searchform {
position:absolute;
margin-left: 350px;
margin-top: -6px;
width: 200px;
}
but that's probably not correct? I'm trying to position from top of the page (or relative to header/navigation, either way) and to the right edge of page (fixed 940px wide).

The margin-left I think would be incorrect, even though its working fine. Should position left or right be done a better way?

Example currently here, but this is a draft, it will be gone from here within the week.
  #5  
Old Apr 20, 2011, 07:21 PM
lmilesw's Avatar
lmilesw
 
9,975 posts · Jul 2009
Central New York State USA
I like to avoid absolute positioning and negative margins where I can. Also you are just positioning this so you don't even have to use margins for example
HTML Code:
.searchform {
    left: 350px;
    bottom: 3px;
    position: relative;
    width: 200px;
    height: 0;
}
Shoul do what you want. I added a 0 height so the place where is would have been is closed. You could also try absolute positioning and test with several browsers.
__________________
~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.
  #6  
Old Apr 20, 2011, 07:35 PM
Jam's Avatar
Jam
 
1,046 posts · Mar 2011
Perth, Western Australia
Thanks Larry,
Have a great Easter

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Add a language selector (WPML) above Search Box ? how? bender57 Header configuration & styling 2 Jul 6, 2011 07:08 AM
Add WPML language selector above search box pickertgmbh Header configuration & styling 1 Jul 6, 2011 07:07 AM
Add operational magnifier to search box gavinh Header configuration & styling 2 Jun 23, 2010 07:39 PM
Add Search Box to Page Menu vinniev Page & Category Menu Bars 6 May 19, 2010 12:06 AM
Add Google Search to Search box? ldaily Header configuration & styling 0 Jul 21, 2009 09:12 AM


All times are GMT -6. The time now is 11:43 PM.


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