Forum Discussion

CarolineS's avatar
CarolineS
Boss
5 years ago

Help updating discussion style icons

Hi ya'll,

I posted earlier about updating the Contest icon ( Update discussion style icon? ). I did find the documentation (https://developer.khoros.com/khoroscommunitydevdocs/docs/developer-guide?_ga=2.104465603.216954800.1585547475-1088082075.1564597589#section-font-awesome-icons-custom-image-assets-and-sv-gs) - but wow, it's beyond me.

Unfortunately we don't have a real developer to help with this, so I am trying to cobble it together. Any guidance on exactly what to do to update the contest icon (on the contest home page, on the contest entries page, and in lists.... and anywhere else i'm forgetting) would be much appreciated. We have a nice SVG to work with.

THANK YOU.

  • SuzieH's avatar
    SuzieH
    5 years ago

    Hi CarolineS 

    I wanted to follow up with a solution (hopefully) from AdamA. (Thank you Adam!)

    I was able to get this working on my test community. Please let me know if this works on your stage site.

    Because you are customizing an image use for styling (as opposed as an image associated more with content) you probably want to add a custom style that overrides the contest icon with a "background-image" override.  

    • You will add a new style definition called .lia-fa.lia-img-icon-contest-board:before in _style.scss.
    • You'll also need to convert your SVG icon into a data URL. You'll need to ask your UX team for the SVG markup. This site can help you translate that markup into a data URL.
    • In the definition:
      • set content to empty
      • set background-image to url("<your_encoded_data_URL>")
      • You can use other attributes like width and height if you need to change the size or other styling elements

    Here is an example:

    .lia-fa.lia-img-icon-contest-board:before {
content: ' ';
background-image: url("<your_data_URL>");
height: 25px;
width: 25px;
display: block;
margin: 12px auto;
}

     

     

    The alternative "content" override method I mentioned earlier would look something like the following. Again, you'll add this CSS  to _style.scss.

    .lia-fa.lia-img-icon-contest-board:before {
content: url("<your_data_URL>");
margin: 4px 0 0 4px;
display: block;
}

    With this method, set the content attribute as the encoded SVG data URL. Note that if you want a different size, your UX designer needs to set a width on the SVG element (prior to encoding).  

     

    • SuzieH's avatar
      SuzieH
      Khoros Alumni (Retired)
      5 years ago

      Hi CarolineS 

      I wanted to follow up with a solution (hopefully) from AdamA. (Thank you Adam!)

      I was able to get this working on my test community. Please let me know if this works on your stage site.

      Because you are customizing an image use for styling (as opposed as an image associated more with content) you probably want to add a custom style that overrides the contest icon with a "background-image" override.  

      • You will add a new style definition called .lia-fa.lia-img-icon-contest-board:before in _style.scss.
      • You'll also need to convert your SVG icon into a data URL. You'll need to ask your UX team for the SVG markup. This site can help you translate that markup into a data URL.
      • In the definition:
        • set content to empty
        • set background-image to url("<your_encoded_data_URL>")
        • You can use other attributes like width and height if you need to change the size or other styling elements

      Here is an example:

      .lia-fa.lia-img-icon-contest-board:before {
content: ' ';
background-image: url("<your_data_URL>");
height: 25px;
width: 25px;
display: block;
margin: 12px auto;
}

       

       

      The alternative "content" override method I mentioned earlier would look something like the following. Again, you'll add this CSS  to _style.scss.

      .lia-fa.lia-img-icon-contest-board:before {
content: url("<your_data_URL>");
margin: 4px 0 0 4px;
display: block;
}

      With this method, set the content attribute as the encoded SVG data URL. Note that if you want a different size, your UX designer needs to set a width on the SVG element (prior to encoding).  

       

      • CarolineS's avatar
        CarolineS
        Boss
        5 years ago

        WOOOOOO!!!! I am making progress! It's not quite perfectly positioned & I need to adjust the icon in a few other places, but loookie here!!