Add CSS hover states to global files

"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?

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

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.

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.

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.

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.

Ben Tiedt - 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?

If you were going to integrate the hover.css behaviors by customizing an existing LESS-based stylesheet (instead of adding CSS class names to HTML elements), then the CSS or LESS version of hover.css would be useful. If you included the hover.less/css file into your existing LESS-based styling, you could reference the hover.css classes within LESS-defined style classes to get the same effect as adding the class to the HTML elements. It's really just a matter of where you plan to integrate -- in CSS/LESS or HTML.