Alter search button (css) width

[mi16chap]

Afternoon all

http://test.italianhampers.co.uk

I have altered the search toolbar in my site header to use the label "Go!" instead of the word "Search", however, the button is still the same width as previously set.

I set up a style in my stylesheet_css_buttons.css file as per

.button_search{width:33px;}

But if you look at my site, you can see this is being overridden by something else making it 80px (see attached screenshot with chrome "inspect element" enabled)



Can anyone tell me how to avoid this CSS conflict and make the button 33px?

[rbarbour]

.button_search{width:33px!important;}

[mi16chap]

That seems to be forcing it to override and display how I would like.

Thanks for your input/help.

Andy

[dbltoe]

Also, when you see element.style, it tells you that the value is hard-coded in some file.
If you did not have the option of using button.search, you would need to find the file using (using the Developer's Toolkit) and change the value there UNLESS the style is in a single-use class or id.
This particular style is in an input class that is used often throughout ZC. If it were in a class called inputSearch that were only used once, you could also use input.inputSearch {width:33px!important}

[rbarbour]

default file where it would be hard coded is in:

/includes/templates/template_default/sideboxes/tpl_search_header.php

or

/includes/templates/YOUR_TEMPLATE/sideboxes/tpl_search_header.php

[mi16chap]

I was not sure if starting a new topic is necessary here, but I am after one last tweak with the search tool.

When you log into my site, the links across the top of the page display the "My account" and "log Out" urls, which are hidden unless you log in.

As the log in/ log out links change, the search bar moves around slightly

I cant find the correct combo of css to make the search tool align itself to the right of the black strip at top of my page (instead, I think it is floating to left of the last link)

Anyone got a clue how to achieve this?

[rbarbour]

find

.navMainSearch {
margin:0 10px 0 0;
line-height:0;
float:right;
}

change to:
#navMainSearch {
margin:0 10px 0 0;
line-height:0;
float:right;
}

[mi16chap]

Thanks so much, I was messing with this for hours, and such a simple change!

[rbarbour]

glad this worked for you :-)