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

---

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 : )

MoniequeL,

Thanks for your sharing! I have my teammate to try Allen and your suggestion. I should be getting the result later tomorrow.

I think the hardest part for us is about getting the right ID/Class. I'm glad that you guys are very helpful providing me that. :)

Both of your suggestions can be a solution. But i can only vote one.... Maybe we should have an option for activating multple solutions in a thread.

Many thanks!

Hi Monique, I'm a css novice and I'm trying to use the code that Allen provided just to change the color of the button. I've placed it correctly, and the hover portion works, but no luck on the standard state. Here's the code I'm using. Any idea what I'm doing wrong?

#lia-searchform.SearchForm input#submitContext.lia-button{
    background-color:#00dddb;
}


#lia-searchform.SearchForm input#submitContext.lia-button:hover{
    background-color:#07f8f6;
}

Thanks so much,

Tawny

On first glance, I'd make sure to include "#lia-body .lia-content" in your selector since many of Lithium's styles use this and because of the way CSS inheritance works, your selector has to be more specific than Lithium's. Also, I'm pretty sure its not best practice to be using IDs unless you have to, instead use the class names beginning with '.lia' since Lithium won't remove them.

We used this selector for the search button - '#lia-body .lia-content input.lia-button.lia-button-searchForm-action'. I'm sure there are others ways to do it, but this has worked for us.

By the way, if you have Chrome, I'd recommend using its Web Inspector to troubleshoot your issues. (I like Chrome but pretty much any modern browser has these tools.) It'll show what CSS is included, being overwritten and what is actually used.

Hope this helps.

I'm such a novice, I didn't understand half of what you shared :( But , your example did the trick, so thanks so very much for posting it! Much appreciated :) I need a CSS class stat.

Hi Tawny,

Sorry for the late response, but it looks like jlutterloh helped you out! Awesome!

Just to try and help you understand his response better, he was right in prefacing that you should use the lithium div classes (.lia-...) vs div IDs (#lia-search-form..) when you try to override lithium css with your own added css. Lithium div classes are protected under contract while IDs are not and may or may not change from version to version. Also in this instance and with the way css works, I'd recommend using the last css class selector in a stack of selectors because it will typically be the most specific div class, thus the "strongest" choice to use to change the css for one specific, or specific type of element.

e.g. for the quick reply button link, these are the classes being used:

lia-button lia-button-secondary reply-action-link lia-action-quick-reply

 The last class selector, .lia-action-quick-reply is specific to that type of reply button. However, all buttons share the first selector, lia-button, and half the buttons in the app share the second class selector in the stack, .lia-button-secondary. Make sense?

If you'd like to learn more about how css is written and the rules it follows, there are plenty of free online tutorials to help get you started. A couple of my favorites are Don't Fear the Internet and Code Academy

Another troubleshooting option I would have added is that if you did have any custom css add to be applied to all the buttons, you'll need to move your css specific to the one search button below that general button chunk of css. As css rules cascade down and the rules & properties are duplicated for the same sets of classes, the one towards the end of your css file will be the ones that are applied as they override the rules that were written before it