Differentiate Search Button from Header and Global

OK couple of things:

I'm using CSS buttons.

I'm have successfully modified the search button, but my intent was to only modify it for the header and not the rest of the site.

So I would like the header button to be different than the one used globally (left sidebar, advanced search page, etc.)

SEE MY DILEMMA
http://beautyglowshop.com/index.php?main_page=advanced_search

notice how
the top search header button,
the left sidebar search button,
and the bottom search button,
all take on the same CSS properties.

basically what I'm asking is

how do I go about giving a unique identity to the top search button, so I can treat it as a separate entity in order to associate it with it's own CSS properties.

The CSS classes are nested within DIV id's, so if you create your css declarations to rely on the class being parented by the ID, you can write additional / different declarations for the location of each component.

I'm reminded of 'Nam. What the captain said was....:P

You have this for both buttons> <input class="cssButton button_search" type="submit" value=">" onmouseout="this.className='cssButton button_search'" onmouseover="this.className='cssButtonHover button_search button_searchHover'">Create a new image called searchbutton1.png.
Make one of the buttons> <input class="cssButton button_search1" type="submit" value=">" onmouseout="this.className='cssButton button_search'" onmouseover="this.className='cssButtonHover button_search button_searchHover'">and copy the .button_search css call at line 41 to .button_search1.
Then, change the image in .button_search1 to searchbutton1.png

Thank you for the fast replies.

schoolboy,
your suggestion worked like a charm as far as differentiating. However some unexpected consequences followed which maybe you could help me with:

(1) there now appears to be a 45 degree triangle in upper left hand corner of the button.

(2) the hover properties are dominating, in that the button is acting as if it is being hovered all the time.

this is my CSS code, I know, it's probably terrible

.navSearchButtonContainer, button_search {
	background: url(/includes/templates/all_business/mods/searchbutton.png) no-repeat;
	font-size: 0px;
	height: 38px;
	border: medium none;
	width: 32px;
	cursor: pointer;
	
	
}
.navSearchButtonContainer, button_search:hover {
	background-position: 0 -38px;

dbltoe,
I know thats what appears in the browser, but I have searched for that code and it's nowhere to be found.

Many times, the system uses a defined variable to present code that appears when we look at page source.
You may have to be a little "inventive" in your use of the search capabilities in the Admin >> Tools >> Developers Tool Kit.

Start by searching for button_search. If the file says something like> define('SEARCH_BUTTON_CLASS','button_search');You would then search for the file(s) containing SEARCH_BUTTON_CLASS.

HTH

Glenn Herbert is the CSS guru on this forum... with luck he'll pick up on this thread and advise.

I have never used the CSS buttons feature, so I am not familiar with the protocols, or what ID's and CLASSES govern what element(s)

Try removing the commas...

.navSearchButtonContainer, button_search {

to

.navSearchButtonContainer button_search {

schoolboy,

please ignore the last post, that code was not worth going over.
I don't know how to do what you're suggesting.

This is what I have

the div is named navSearchButtonContainer
the class is named button_search

My code is

.button_search {
    background: url("/includes/templates/all_business/mods/searchbutton.png") no-repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    font-size: 0;
    height: 38px;
    width: 32px;
}
.button_search:hover {
    background-position: 0 -38px;
}

if what schoolboy is suggesting IS in fact possible someone please help construct the code.

dbltoe,

orginally I was thinking along the same path, but the search didn't work out. Say I do find it following your instructions, would I have to define a new variable to be used exclusively in the header?

or modify the variable's code and used in place of the variable in the header code?

My thinking is that everywhere you find button_search, it will need to have a button_search1.
I would also make the search box in the left column the button_search1 as the other is already like you like it.

Of course, the coward's way out is to turn off the sidebox search in the admin.:P

Something like:-

#searchContent.cssButtonHover button_search button_searchHover {
YOUR DESIGN DECLARATIONS HERE;
}

#navMainSearch.cssButtonHover button_search button_searchHover {
YOUR DESIGN DECLARATIONS HERE;
}

... is what I'm thinking...

It shows the PARENT ID - #xxxxxx (which is unique) before the CLASS which is common to both elements. No comma separates them (but try a space if having them concatenated doesn't work)

I can't find anything using SEARCH_BUTTON_CLASS,
Maybe it's because I suck, but I can't find it.

I would like to solve the problem rather than cover things up graphically, but with my limited knowledge it could take forever.
Someone please help.

The actual image is controlled by a simple background-image call under the .button_search { on line 41 of the stylesheet_css_buttons.css.
Hence my idea of a creation of a .button_search1 to change the second occurrence.

Is this a store-bought template or one we could look at from the add-ons section?

SEARCH_BUTTON_CLASS was just used as an example of what you might find when searching for button_search.
Try searching for button_search and post the results here.

dbltoe:

Hence my idea of a creation of a .button_search1 to change the second occurrence.

makes very good sense...

Aiight, I'm gonna lay my cards on the table.

dbltoe,

the template is from the addon section, it is called "all business"
but I have modified it a bit,

I created the image and the did the CSS coding myself, so basically it's one image with the hover portion at the bottom, so when you hover over it just scrolls down.

the only other modification worth mentioning is the added DIVs to tpl_search_header.php

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') { 
    $content .= '<div class="navSearchBoxContainer">' . zen_draw_input_field('keyword', '', 'size="6" maxlength="30" class="navSearchBox" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '</div>' . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);

schoolboy,

I think the concept you're suggesting is fantastic but I don't think it exists as I cannot find any related articles. If you find one please share.

OK...

don't touch your site for a bit... I am going to try something...

Right... this is what you need to do...

(SEE NEXT POST in a minute or two...)

You have to SPLIT UP the existing declarations.

Currently you have:

*.button_search {
background: url(/includes/templates/all_business/mods/searchbutton.png) no-repeat;
font-size: 0px;
height: 38px;
border: medium none;
width: 32px;
cursor: pointer;

}
.button_searchHover {
background-position: 0 -38px;
}*

**The above makes the declarations SITE-WIDE.

But if you do this:**

/---FOR THE HEADER---/*

#navMainSearch .button_search {
background: url(/includes/templates/all_business/mods/searchbutton_nav.png) no-repeat;
font-size: 0px;
height: 38px;
border: medium none;
width: 32px;
cursor: pointer;
}
#navMainSearch .button_searchHover {
background-position: 0 -38px;
}*

/---FOR THE SIDEBOX---/

#searchContent .button_search {
background: url(/includes/templates/all_business/mods/searchbutton_sidebox.png) no-repeat;
font-size: 0px;
height: 38px;
border: medium none;
width: 32px;
cursor: pointer;
}

#searchContent .button_searchHover {
background-position: 0 -38px;
}*

/---FOR ADVANCED SEARCH CENTER SECTION--/*

#advSearchDefault .button_search {
background: url(/includes/templates/all_business/mods/searchbutton_advanced.png) no-repeat;
font-size: 0px;
height: 38px;
border: medium none;
width: 32px;
cursor: pointer;
}
#advSearchDefault .button_searchHover {
background-position: 0 -38px;
}*

My bits in BLUE are what you are going to have to examine. Each DIV will need its own image, with the positions determined by the break-point in the composite background image.

makehveli:

the template is from the addon section, it is called "all business"

We use it too... ALSO for a "beauty products" site:
http://www.therapeutix-beauty.co.uk/

(Also with some customisations...)

Okey Dokey,
We took the template and added it to a clean 1.3.9h install.
The template includes a tpl_search_header.php but no tpl_search.php. That was our first look.
Took a copy of tpl_search.php from the template_default/sideboxes and copied it to the all_business/sideboxes directory.
Both files have an if statement that is based on whether or not the css buttons are turned on in the admin.
We started our quest by taking the instances of HEADER_SEARCH_BUTTON in both files.
Theoretically changing one (tpl_search) to HEADER1_SEARCH_BUTTON and the other (tpl_search_header) to HEADER2_SEARCH_BUTTON, wee should have seen the failed constants show up in each button's case. This DOES happen with the cart set to classic template.
No amount of manipulation could make anything other than the search_header change its value.
Assumption (yes, I know) is that something is preventing the tpl_search (remember, it's the one NOT in the all-business template) from firing or having any control over the search box.
More investigation is yet to be done.

dbltoe... my post #17 above works. I tried it on the OP's site using Firebug, with the background image url pointing to a couple of composite buttons I have on another site..

It's a pure css solution...

No need to adjust any php code...