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] How to add Search Box to Atahualpa Bar2? (http://forum.bytesforall.com/showthread.php?t=13840)

Jam Apr 19, 2011 04:49 AM

[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 :confused:


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

Jam Apr 19, 2011 06:42 PM

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.

lmilesw Apr 19, 2011 09:22 PM

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;
}


Jam Apr 20, 2011 06:58 PM

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.

lmilesw Apr 20, 2011 07:21 PM

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.

Jam Apr 20, 2011 07:35 PM

Thanks Larry,
Have a great Easter :)

lmilesw Apr 20, 2011 07:40 PM

I hope you have a great Easter too Jam. Can we mark this as solved?


All times are GMT -6. The time now is 12:37 AM.

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