Replacing search button & PM inbox icon

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