Add CSS hover states to global files

Hey Telligent community!

http://ianlunn.github.io/Hover/ is a great resource for CSS hover states.

"A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS."

I may want to leverage a few of these in different areas of the community. I know how to reference the different classes in my html, but I was hoping someone could create a simplified walkthrough on how to upload the Hover.CSS files from github, into the right places within a Telligent community. 

Another question I'd like to learn more about is which of the formats should be used, and why? CSS, Sass, or LESS?

 pls let me know if you know of a good person to help answer this question!

Parents
  • how to upload the Hover.CSS files from github, into the right places within a Telligent community.

    CSS/LESS files can be added to a theme. If you want to add the hover.css file to the site theme for use throughout the entire community, navigate to the site homepage, go to the pencil icon > Manage Site Theme > Edit this Theme, find "CSS Files" on the "HTML Headers" tab and click "Upload" to upload the hover.css file. Once uploaded, select the file in the file list and click "Edit" below the list. On the "Options" tab, select to apply the file to modals and non-modals and click "Save", then "Publish" the theme changes.  The hover.css file is now available everywhere for HTML to use.

    which of the formats should be used, and why? CSS, Sass, or LESS?

    Telligent Community supports CSS and LESS. If you were going to integrate hover.css within existing LESS files (instead of editing the HTML), the LESS option may be appealing. Since you are comfortable modifying the HTML instead, CSS is probably more appropriate for your use case.

  • - thank you so much for the thorough response! That worked perfectly. I also appreciate your explanation of why the LESS option is not the best for my use case. What's an example of when/why someone may want to incorporate the hover.css file into an existing LESS file?

Reply Children
No Data