Forum Discussion

Inactive User's avatar
Inactive User
14 years ago

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 question in another forum.

 

1) Now, i would like to replace the search button for the whole community including the one declared in page header with our own graphic. Is this possible? If yes, how can i do that?

 

2) I would like to replace the PM inbox envelop icon too. How can i do that? I tried finding in image assets but do not seem to find this envelop to swap our own graphic. I was able to swap the knowledgebase icon but this time, i couldn't do it for the PM inbox icon.

 

Any thoughts?

 

Cheers, Cleo

  • AllenS's avatar
    AllenS
    Khoros Alumni (Retired)
    14 years ago

    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

    • MoniqueL's avatar
      MoniqueL
      Lithium Alumni (Retired)
      14 years ago

       

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

      • Inactive User's avatar
        Inactive User
        14 years ago

        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!

    • Inactive User's avatar
      Inactive User
      14 years ago
      Allen,

      Your response is indeed good enough! It's at least a start for me! I shall try it out later and report back. Thanks a million Allen! I know you, you helped a lot for the ticket i raised ;)

      Cheers,
      Cleo