Changing search button icon

[monsterboy]

Hi,

I'm currently changing a normal CSS/HTML template into a WebsiteBaker template. (I'm stil fairly new to this.)
But there is one problem.

I want to change the search button in my template to an jpeg icon, but I don't know how.
I had a look at another template called "zenlike" but it didn't helped me at all.

My current search div in the css is this :
 

Code: [Select]

/* Search */

#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
border-bottom: 4px solid #FFFFFF;
}

#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}

#search input.submit
{
background: #939B00 url('images/zoeken.jpg') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}

#search .highlight {
background-color: #F00;
}


My code in the index.php file is as follows (Just the default one you can find in the help section ''changing html template to website baker template'')

Code: [Select]

<?php if(SHOW_SEARCH) { ?>
                    <div class="search">
                      <form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
                        <input type="text" name="string" class="search_string" />
                        <input type="submit" name="submit" value="<?php echo $TEXT[&#39;SEARCH&#39;]; ?>" />
                      </form>
                    </div>
                    <?php } ?>



Thanks in advance.
Greetz monsterboy

[monsterboy]

Too bad no-one responded on this forum. But I found the solution and I'll post it here for other people in the future with the same problem.

Ok my main bug that I had ''search'' as a class in my index.php file instead of having ''search'' as a div id.
After that being solved, I searched for an icon that I could replace with the search button. I found a neat looking-glass icon.

So this is my new code

my index.php (As you can see the image button is in this code, just look at the line ''inpute type=image''

Code: [Select]

<?php if(SHOW_SEARCH) { ?>
                    <div id="search">
                      <form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
                        <input type="text" name="string" class="search_string" />
                      <input type="image" src="<?php echo TEMPLATE_DIR;?>/images/search-icon.jpg" 
                        value="<?php echo $TEXT[&#39;SEARCH&#39;]; ?> id="zoekknop"" />

                      </form>
                    </div>
                    <?php } ?>
My css fle

Code: [Select]

#search {
float: right;
width: 280px;
height: 50px;
padding: 10px 0px 0px 0px;
background: url(images/search-background.jpg) no-repeat left top;
}


Greetz monsterboy

[Roych]

Hello

I have a problem with my search form. I'm using some template and current form code look like this:

Code: [Select]

<div id="search-bar">


                        <input type="text" name="s" id="s" value="Search ..." />

                        <a href="#" class="search-button">&nbsp;</a>

                    </div>
I've tried almost everything but somehow can't figure it out. It always brokes the current style of a form (no button).

What should I use to make it work. Right now I'm using this but there is no button:

Code: [Select]

<form name="search" action="<?php echo WB_URL.'/search/index'.PAGE_EXTENSION; ?>" method="post">
<div align="left" class="search">
        <input alt="search" class="inputbox" type="text" name="string" size="20" value="<?php echo $TEXT['SEARCH']; ?>..."  onblur="if(this.value=='') this.value='<?php echo $TEXT['SEARCH']; ?>...';" onfocus="if(this.value=='<?php echo $TEXT['SEARCH']; ?>...') this.value='';" /></div>
<input type="text" name="s" id="s"  value="<?php echo $TEXT['SEARCH']; ?>" class="search-button />
</form>
Hope u understand what was my question. I'm posting an image of the original search form and the style I want.

Thank you in advance
R

[nibz]

First thought:
You are missing the closing tag in your button class

class="search-button

try

Code: [Select]

class="search-button"


[Roych]

Sorry I'we posted the wrong code:

Code: [Select]

<form name="search" action="<?php echo WB_URL.'/search/index'.PAGE_EXTENSION; ?>" method="post">
<div align="left" class="search">
        <input alt="search" class="inputbox" type="text" name="string" size="20" class="search-button" value="<?php echo $TEXT['SEARCH']; ?> ..."  onblur="if(this.value=='') this.value='<?php echo $TEXT['SEARCH']; ?>...';" onfocus="if(this.value=='<?php echo $TEXT['SEARCH']; ?>...') this.value='';" /></div>

</form>
this is the right one but just dont know how to combine those two codes to show the button.
thx

[Argos]

The class "search-button" must be declared somewhere, and will probably have a picture as background, and maybe some other styling. This is really not a WB question, it's just basic HTML/CSS stuff.

[nibz]

In the dutch forum i posted a solution wich uses a full background and makes the button transparant

Code:

Code: [Select]

<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form name="search" id="w2b-searchform" action="<?php echo WB_URL; ?>/search/index.php" method="get">
    <input type="text" name="string" id="s" class="search_string" value=""/>
    <input type="image" name="submit" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


I used the code from http://www.way2blogging.org/2011/06/add-fresh-and-beautiful-search-boxes-to.html and converted it to a usable WB string

[Roych]

Hi thx for help

I'we tried but Im out of ideas I know its a html-CSS problem but somehow dont find an anwser anywhere.
I would like this search bar make working already so I can go on. 

Im posting the CSS of the button and HTML of the form.

HTML:

Code: [Select]

<div id="search-bar">

                        <input type="text" name="s" id="s" value="Search ..." />

                        <a href="#" class="search-button">&nbsp;</a>

                    </div>
And CSS:

Code: [Select]

#search-bar {
    display: block;
    float: right;
    width: 250px;
}
#search-bar input {
    border: 1px solid #c3b598;
    width: 206px;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    margin: 0;
    color: #888172;
    float: left;
}
#search-bar a.search-button {
    background: transparent url('../images/search-button.gif') no-repeat center;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
}
#search-bar a.search-button:hover { text-decoration: none; }
I have tried almost anything but Im out of ideas Im not a coder but understand some! But this is out of my league.

Someone please help
Thx!

[Argos]

Your code is wrong, to begin with. Try this:

Code: [Select]

<?php if (SHOW_SEARCH) { ?>
<div id="search-bar">
<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
  <input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : PAGE_ID; ?>" />
  <input type="text" name="string" />
  <input type="submit" name="submit" class="search-button"/>
</form>
</div>
<?php } ?>
And remove the "a" from the styling for the button. So the new button styles will be:

Code: [Select]

#search-bar .search-button {
background: transparent url('../images/search-button.gif') no-repeat center;
width: 30px;
height: 30px;
display: inline-block;
float: right;
}
#search-bar .search-button:hover {
text-decoration: none;
}

[Roych]

Yees great it works
 Thx Argos

I had to change the codes a bit so that the looks is now alright.

Code: [Select]

  <div id="search-bar">


<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
  <input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : PAGE_ID; ?>" />
  <input type="text" name="string" value="<?php echo $TEXT['SEARCH']; ?> ..." />
  <input type="submit" name="submit" class="search-button"/>
</form>



                    </div>
CSS:

Code: [Select]

#search-bar .search-button {
background: transparent url('../images/search-button.gif') no-repeat center;
width: 30px;
height: 30px;
display: inline-block;
float: right;

}
#search-bar a.search-button:hover {
text-decoration: none;
}



#search-bar {
    display: block;
    float: right;
    width: 250px;
}
#search-bar input {
    border: 1px solid #c3b598;
    width: 206px;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    margin: 0;
    color: #888172;
    float: left;
}
Now everithing looks fine only now I see (submit text) on a button and if I change it or delete it in code the style is broken any idea?

[Argos]

Your css has the wrong order, and has an error. Always declare highest levels first. So you start with the container and then the container elements. CSS=Cascading Style Sheets. So the styles shoulds cascade from top level to lower levels, because the lower levels inherit the higher levels. The order is very important. This should be your css:

Code: [Select]

#search-bar {display:block;float:right;width:250px;}
#search-bar input {border:1px solid #c3b598;width:206px;height:28px;line-height:28px;padding:0 6px;margin:0;color:#888172;float:left;}
#search-bar .search-button {background: transparent url('../images/search-button.gif') no-repeat center;width:30px;height:30px;display:inline-block;float:right;}
#search-bar .search-button:hover {text-decoration:none;}And this your code:

Code: [Select]

<?php if (SHOW_SEARCH) { ?>
<div id="search-bar">
<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
  <input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : PAGE_ID; ?>" />
  <input type="text" name="string" />
  <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?> ..." class="search-button"/>
</form>
</div>
<?php } ?>

[Roych]

It is now perfect! 
Only had to empty the (value="<?php echo $TEXT['SEARCH']; ?> ...") so my button is now without a text.

Thank you very much for helping
And thanx for the CSS hint

R

[Argos]

You're welcome, good to hear it's working now