WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Changing search button icon

(1/3) > >>

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: ---/* 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;
}


--- End code ---

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: --- <?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 } ?>
--- End code ---




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: ---<?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 } ?>
--- End code ---

My css fle

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



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: ---<div id="search-bar">


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

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

                    </div>
--- End code ---

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: ---<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>
--- End code ---

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


--- Quote ---class="search-button

--- End quote ---

try

--- Code: ---class="search-button"

--- End code ---

Roych:
Sorry I'we posted the wrong code:

--- Code: ---<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>
--- End code ---

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

Navigation

[0] Message Index

[#] Next page