CSS & search button

[sirhanhi]

Ok so i have a search button in my site. Its located in top right corner and only in frontpage. Problem is that i cannot alter its appereance, i have altered .inputbox (and im 99 % sure this is the right one) and my login boxes are right on mark, but search box doesnt change its form. Its still "default" = white background and black text.

I thought that maybe someone has changed its ID name, but i couldnt find the file to be edited anywhere.. And then again, i might be really wrong here but if someone has solution --> GIMME .

[UncutDesign]

What template are you using?
Is it custom coded?

[sirhanhi]

ye custom made

[rcarver]

got a URL so we can take a look? 

[sc00zy]

The default class for a button is.... button

[Casey Lee]

here's a sample class that by default effects all buttons in your site like "Login" "Search" etc..

Code: Select all

.button {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	padding-top: 2px;
	padding-right: 4px;
	color: #CCCCCC;
	background-image: url(../images/butbg.gif);
	background-repeat: repeat-x;
	background-position: left center;
	text-align: center;
	padding-bottom: 2px;
	padding-left: 4px;
	border: 2px solid #999999;
}

The ".inputbox" class will effect the form field itself.

If you're wanting to position the button or module itself more accurately, just assign it a div class in your template file and select it from your css file and position/style it accordingly.

[jondiego]

I think i found a big part of the problem. If you upload the image file through the media manager to the /images/M_images/ folder it will automatically change the file name to all lower case. You have to go into your cpanel or directly to your server and change the image file name to searchButton.gif

I am still working on the enlarged image problem

Jon
www.CareyWebDesigns.com

[jondiego]

I figured out how to solve the search button problem.

Go into your css file. Usually template.css and add this code

.search .button{
position:absolute;
background-image: url('/images/M_images/searchButton.gif');
background-repeat:no-repeat;
width:20px;
height:20px;
}

Go directly to your server or cpanel and upload your image file MAKE SURE TO NAME IT searchButton.gif It's case sensitive. Make sure you upload the image file you want to use to the " /images/M_images/ " folder

Once you have the file uploaded and the css coded, make sure to go into your search module through the admin panel and select "Search Button as image -Yes", "Search Button -Yes"

Hope this helps. It worked for me.

Jon
http://www.CareyWebDesigns.com

[dannygsam]

I have the same problem. But there is no searchButton.gif image present and I rechecked in my custom template it does not have. What should I do? Its fine in IE8 and Mozilla. But in IE 7 it looks horrible with a big box showing that image not present

[Tameran]

I also have this problem. I uploaded a gif to the image manager and put it in the correct folder. I named the file searchButton.gif, but when I try to upload the image it is automatically changed to searchbutton.gif and therefore will not show up. Any ideas why this is happening and is there some manipulation to the CSS that also needs to be done to have a custom button appear? I am new at this!!

[webpetrol]

This is good idea.It works fine.
.search .button{
background-position: left center;
background-image: url('/images/M_images/searchButton.gif');
background-repeat:no-repeat;
width:20px;
height:20px;
}

[whyknott]

Where can I find the CSS for the actual Search Results Page? I'm using the default search module in Joomla 1.7 and want to stylize what the text looks like on my search results page. I'm using firebug to sort thru the search results page but still cannot find the CSS for it.

Thanks!