Coursedog

Submit a Ticket My Tickets
Welcome
Login  Sign up

Using HTML Snippets & Additional Custom Code - All Catalogs

Table of Contents

Overview
HTML Snippet Best Practices
Additional Custom Code

Overview

  • Coursedog’s Online Catalog gives institutions the option to customize their public catalog fully, from the color of web elements to including branded assets like logos in the navigation and footer.

  • One of Coursedog’s most asked about features is the ability to embed custom HTML snippets before the page (as a header) or after the page (as a footer). 

  • This ability is found at Catalog > Settings > Website.

HTML Snippet Best Practices

HTML Snippets Should be Fully Standalone

As a best practice, HTML snippets should be delivered fully standalone. That means the HTML renders correctly without depending on any external CSS. This website is a great resource to ensure that this is the case. If the code is pasted into the “HTML” rectangle, and the resulting image looks correct in the “Result” rectangle on the bottom right of the page, the snippet should be good to use.


Ensure Class Names are Unique (If You Want CSS Rules inside the HTML)

  • If CSS rules inside the HTML are also desired (which is possible), users should ensure that all the class names are very unique. As a rule of thumb, prefix all class names with school_code+injected. This should prevent any possible collisions with the website itself.

  • Example – .dbu-injected-navigation-button


Avoid Javascript

  • Javascript code embedded within the header is more difficult for our catalog builder to accommodate. While HTML and CSS is oftentimes straightforward, Javascript adds another layer of complexity that could potentially impact the functionality of the catalog as a whole.

  • It is recommended NOT to use Javascript.

Additional Custom Code

  • The use of institutionally-injected custom code throughout your catalog website – beyond HTML snippets in the headers and footers noted above – can result in overwriting critical Catalog settings.

  • If you elect to use custom HTML or CSS on your website, ensure you have extracted and applied only the relevant areas of code to avoid override errors. 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.