Change homepage slightly

The solution is simple, just delete where it says transparent and hey presto :).

Unless of course the background image used is a transparent.png anyway in which case you’ll have to replace/change the background graphic, this is what seems to be the case, the transparent styling is just there as a safety and for other browser support, it seems to me that the image itself is a png anyway.

crgsun:

The search box is quite hard to see. Unfortunately, the designer made it look like this as part of the design. The box and search button are images. This means you would have to create your own image or use standard HTML input elements to modify the way it looks.

Both the file name and the css include “transparent.” Transparent in the file name doesn’t have any effect on how it’s displayed. Transparent in the background CSS sets the background color to transparent (or none). Again this doesn’t have any effect on the image being displayed for the search box.

great thanks for the responses. Kurt would the html input elements be hard to do? I know very basic html but can research it. I just don’t want to put in the effort if it doesn’t change much. thanks again both of you!

I looked at your site again and discovered that an easy fix may exist. It looks like there’s more than one color scheme to the theme. The author is using a background image for the current color choice. If we undo the background images, the search box and button are a medium blue color. Give the following a try and see if you like it.

Your theme may have an area for custom CSS. If it does, add the following CSS to the custom CSS area. If it doesn’t, add this to the bottom of your style.css file:

input.search_input_header, input.search_button_header {
background: none;
}

input.search_input_header:hover, input.search_button_header:focus, input.search_button_header:hover {
background: none;
}

Note: If you add it to the bottom of style.css and nothing chagnes, try changing background: none; to background: none !important; for each of the CSS rules.

thanks! I tried editing it in the style.css file but it doesn’t seem to work. There is no custom css section so I’m guessing it has to be installed. They are running an slightly older version of wordpress. Right now in the style.css file this is the header. Not sure if there is anything else I can do to try and fix this problem. Would you recommend I just try and install a custom css plugin ? Thanks so much for your assistance so far.

[to learn how to mark any posted code properly, please read the forum guidelines for posting code]

/** Header Search **/

	.header_search {position:absolute; top:60px; right:0px;}

	input.search_input_header {position:absolute; top:0px; left:-210px; width:194px; letter-spacing:1px; height:20px; padding:5px 0px 5px 10px; color:#c1c7d1; background:url(images/dark_blue_search.png) scroll transparent no-repeat; border:none;}

		input.search_input_header:hover {background:url(images/dark_blue_search.png) scroll transparent no-repeat 0px 0px;  color:#c1c7d1;}

		input.search_input_header:focus {border:none; outline:none; background:url(images/dark_blue_search.png) scroll transparent no-repeat  0px -50px;  color:#c1c7d1;}

	input.search_button_header {margin:0px 0px 0px 4px; width:39px; padding-top:7px;  height:30px; cursor:pointer; background:url(images/dark_blue_search.png) scroll transparent no-repeat -211px 0px; border:none; }	

		input.search_button_header:focus, input.search_button_header:hover {outline:none; background:url(images/dark_blue_search.png) scroll transparent no-repeat -211px -50px;}

i installed a custom css plugin but when i used copied and pasted the css it seemed to make the magnifying glass disappear also.

Did you try using – background: none !important;

The CSS styling the search box is coming from css/skin_Brushed-Metal.css in your theme folder. If the suggestion above doesn’t work you’ll need to edit the skin file or figure out how to load CSS after the skin file is loaded.