Kelley
|
I'd like to add a search bar to the header of this site:
http://www.gfs.web-eze.com/
Was going to follow along with these instructions:
http://www.fuzzymargins.com/2010/10/move-the-search-box-to-the-header-wordpress-3-revision/
But they say to open sidebar.php. The recent version has 6 different sidebar-*** type files.
Does this tutorial still apply or can anyone please point me to a new one?
Thanks and TGIF!
|
| |
webguygary
|
if you're using the templateer add-on, I believe it does that, no?
|
| |
Kelley
|
Hi Gary,
Thanks for the reply. The Templateer will add a search bar to the navigation bar; I'm looking to have it float in the header.
|
| |
webguygary
|
have you tried this?
http://www.artisteer.com/?post_id=148404&p=forum_post&forum_id=13
not sure if it applies to art 3, but it might point you in the right direction
|
| |
Bud
|
The Templateer does indeed allow you to put a search box in the header.
Just enable the header mods in Advanced Options and then enter your header width & height.
The Templateer adds a new header widget area that will allow you to use the search widget (or any widget). In the Advanced options you can set the margins to position the right widget area where you want.
Bud
thetemplateer.com
|
| |
Mr Parrot
|
I'll vouch for that Bud, having experimented with it just the other day.
Ian
|
| |
Kelley
|
I don't think I've even tapped the surface of what Templateer can do. I guess the question is what can't it do! 
Let me get studying up on this now...and thanks gents.
-Kel
|
| |
Kelley
|
Hey, that was easy! Thanks again!
|
| |
Kelley
|
Hey, that was easy! Thanks again!
|
| |
webguygary
|
Kelley - just curious, was it easy?
|
| |
Kelley
|
I know! Not sure why it double-posted! But yes, it was pretty darn easy.
One last question, after I added the search bar, I have a horizontal scroll bar at the bottom of the page.
http://www.gfs.web-eze.com/
|
| |
webguygary
|
inspected it w/ firebug, this div
<div class="gfr-logo">
is pushing way out to the right, you need to fix that
|
| |
Kelley
|
Thanks for looking; I see the same issue. However, not sure how to adjust margins in Advanced Options to get the placement I desire.
I'll keep playing with it but maybe Bud will see this and chime in!
|
| |
Steve Young
|
While I am certainly no expert coder but for those who may not have Templateer, I had a similar problem using WP 3+ and solved it by slightly modifying BudsTechshed tutorial as follows:
In the header.php file include the below code under the art-logo close division tag:
<div class="art-search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="art-searchbox" />
<input type="submit" id="searchbutton" value="SEARCH" />
</form></div></div>
Then in the style.css file add the following:
/* begin search */
div.art-search
{
display: block;
position: absolute;
top: 10px;
right: 0;
margin-right: 12px;
width:auto;
}
.art-searchbox {
background:#FFF !important;
color:#000000;
font-weight: normal;
padding:2px 0px 2px 2px;
margin:0 2px 0 10px;
border:1px solid #6B6B6B;
display:inline;
width:140px;
}
#searchbutton {
font-weight:bold;
background: #293232 !important;
color:#70B6C2;
margin:0;
padding:1px 2px 1px 2px;
border:1px solid #000000;
display:inline;
width:auto;
cursor:pointer;
}
/* end Search */
You can style the css anyway you like but it has the colors etc., used in my website now.
I hope this helps.
|
| |
Kelley
|
Failed to enter px when entering values of header size. Now working perfectly.
|
| |
Kelley
|
Thanks Steve. Our posts crossed in the ethernet! I'm sorted with the Templateer but it's good to know another option as well. I've noted your instructions.
|
| |
techtom
|
Anyone have any suggestions as to why adding the code for the search in the header might cause my pages to extend way down below actual content now?
Is is in the header code, even if I strip all css out and save it, the page still extends down.
site is at http://www.justforblogs.com
Thanks
Quote Steve Young:
While I am certainly no expert coder but for those who may not have Templateer, I had a similar problem using WP 3+ and solved it by slightly modifying BudsTechshed tutorial as follows:
In the header.php file include the below code under the art-logo close division tag:
<div class="art-search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="art-searchbox" />
<input type="submit" id="searchbutton" value="SEARCH" />
</form></div></div>
Then in the style.css file add the following:
/* begin search */
div.art-search
{
display: block;
position: absolute;
top: 10px;
right: 0;
margin-right: 12px;
width:auto;
}
.art-searchbox {
background:#FFF !important;
color:#000000;
font-weight: normal;
padding:2px 0px 2px 2px;
margin:0 2px 0 10px;
border:1px solid #6B6B6B;
display:inline;
width:140px;
}
#searchbutton {
font-weight:bold;
background: #293232 !important;
color:#70B6C2;
margin:0;
padding:1px 2px 1px 2px;
border:1px solid #000000;
display:inline;
width:auto;
cursor:pointer;
}
/* end Search */
You can style the css anyway you like but it has the colors etc., used in my website now.
I hope this helps.
|
| |
Steve Young
|
A review of your website reveals you have apparently solved the problem. It looks good to me.
|
| |
techtom
|
Hi Steve,
yeah your code suggestion works good, had an extra </div> at the end.
Any idea how to do the same for the searchbox in the nav menu? It seems no matter what I do art-hmenu seems to overlap my search box.
Thanks for the help,
techtom
|
| |
Steve Young
|
Techtom,
As I previously mentioned, I am NOT a coder; however, the file I used to create the code for the header search box was originally contained in an article on Bud's Tech Shed for placing that code at the end of a navigation menu. Bud's article on that topic is below and I am certain you can adjust it to suit your needs.
http://budstechshed.com/add-a-search-button-to-the-nav-bar-on-your-artisteer-created-theme/
|
| |
techtom
|
Thanks Steve 
|
| |
miles xx
|
There's just one leeetle tiny problem with the code above. It doesn't work in the 3.0 generated code world. In 3.0 there is no art-logo close division tag!
This is the code in 3.0 for that same spot. Placing the code in the art-nav-l, puts the search box on the left side of the nav bar. Putting it in the art-nav-r removes it from the page entirely. Anyone ????
<div class="art-nav">
<div class="art-nav-l"></div>
<div class="art-nav-r"></div>
<div class="art-nav-outer">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'art-hmenu'
)
);
?>
</div>
</div>
|
| |
Muzy
|
I guess the codes above doesn't work for Artisteer 3+ and 4.1. I searched for how to do this but all this didn't seem to work so i figured it out. Just add this in your header.php
<div align="right" style="padding:0 20px 15px 0">
<?php get_search_form(); ?></div>
<div class="art-search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>
Just after this line
<?php if(theme_has_layout_part("header")) : ?>
<header class="art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>">
<div style="float:right;width:200px">
and before the <?php get_sidebar.....
SO it should look like this
<?php if(theme_has_layout_part("header")) : ?>
<header class="art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>">
<div style="float:right;width:200px">
<div align="right" style="padding:0 20px 15px 0">
<?php get_search_form(); ?></div>
<div class="art-search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>
</div>
<?php get_sidebar('header'); ?></header>
<?php endif; ?>
Easiest way, no need for styling
I hope this helps someone
|
| |
Stephen
|
Didn't work for me, but appreciate the effort to help.
My menu is above the header, so that might be the mix up.
|
| |