Replacing search button & PM inbox icon

---

AllenS wrote:
...

 

1) Replacing the Search button: This is also possible, but requires some additional work beyond just uploading a new asset. The search button is generated through CSS rather than being an image. There are a couple of ways you could go about making changes to this, the best of which would ultimately be up to you and your design team.

 

In playing around with this, I just changed the following and found I got a pretty decent effect out of it:

 

#lia-searchform.SearchForm input#submitContext.lia-button

 

#lia-searchform.SearchForm input#submitContext.lia-button:hover

 

The first line is the standard state for the Search button, while the second one controls what it looks like when someone hovers over it. Using those two classes, you can change just about anything about the button, from the background colour to the colour of the text to the background image to the button shape itself.

 

To apply this to the skin, you just need to edit the CSS for the skin, which is also done in Studio. Using the steps I provided above, instead of clicking the Images tab after selecting your skin, you would click the CSS tab and insert your CSS, then save the changes.

 

---

Allen did a great job covering both these questions, but I thought I'd try and add some more detail to the question about the search button replacement.

To replace the search button with an image, you can try adding some css that looks something like this. Basically you'll be over riding the existing search button css and then use the text indent property to "hide' the search button text so you can replace it with a new background image i.e. the new graphical search button.

#lia-body .lia-content .lia-button-wrapper-searchForm-action #submitContext {
    background: url("/html/assets/image_file_name.png") no-repeat scroll 0 0 transparent;
    border: medium none transparent;
    height: XXpx;
    text-indent: -9999em;
    width: XXpx;
}

If you have any other questions, don't hesitate to ask : )