Replacing search button & PM inbox icon
Hey guys, this my first post in Developer forum so appreciate anyone can help me on this topic. I was declaring search widget at the page header. Some formatting has gone so i have posted a quest...
Forum Discussion
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.
- Haha sorry that was confusing! Glad it worked though!
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
- Thanks! I "think" that makes sense. What do you do for all the general buttons though? I got the search one to work with this code:
#lia-body .lia-content input.lia-button.lia-button-searchForm-action{
background-color:#ff7738;
}
#lia-searchform.SearchForm input#submitContext.lia-button:hover{
background-color:#fda177;
}
But there are so many other buttons; login, reset, save, register, register now, reply, sign in, new message, cancel, post, etc. buttons. Does each need separate code like the search button, unique to the type of button? If that's the case, how do I decipher the correct names of the buttons for the CSS? Or, is there one general bit of custom CSS you can enter that handles them all?
I wish this was easier! I realize it would be if I understood CSS more completely, so thanks for the links! In the meantime, before I'm a CSS guru, I'm hoping for a code fix to get me by :)
Thanks,
Tawny
