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 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,
TawnyOn 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.
