Add CSS hover states to global files

Jordan Dayton said:

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.

Jordan Dayton said:

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.

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.