Replacing search button & PM inbox icon

Hi Cleo,

I'm going to reverse your questions here because one of them is a bit easier to accomplish than the other and I want to highlight it first for that reason.

2) Replacing the PM icon: This is possible in Studio. The assets for PM icon are called icon_notes_mail (no new messages) and icon_notes_mail_blink (new messages). You will need to have the icons you would like to replace these with saved on your computer. To do this:

1) Log in as an administrator on stage

2) Navigate to Studio

3) Click the Community Style tab

4) Click the skin you would like to edit. If there is a desktop version, click through to the desktop version.

5) Click the Images tab

6) Find the asset you would like to edit and click the radio button next to it to select that asset

7) Click the Browse button to find the asset you would like to upload on your computer

8) After selecting the new asset from the files ony our computer, click the Upload button to upload your preferred asset in place of the original one.

Just repeat this process for each icon and that will be that! Once you're done, you will need to go to the Versions tab and queue the changes for production in order to have this deployed.

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.

Unfortunately, I'm no CSS wizard like many of the great people here at Lithium, so others may have better suggestions on this than I do. Hopeully this at least gives you a starting point though :)

Have a great day!

Allen