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
No Data
Reply
  • 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.

Children