Sitefinity: CSS, JavaScript & Embed Code

In Sitefinity, the CSS, JavaScript and Embed Code "static content" widgets can be used to add custom styling and/or scripting functionality to a page or page template that isn't readily available out of the box.

Each of these widget types can be found in the "Scripts and Styles" section of the Content widgets toolbox.

Styles - CSS Widget

Cascading Style Sheets

The CSS widget is used to add Cascading Style Sheets (CSS) to your pages. You can either write CSS in the widget or link to an external stylesheet hosted elsewhere such as a CDN. Click the "Edit" button in the upper-right corner of the widget to modify it. 

*TIP: For best results, we highly recommend that you write and/or modify stylesheets in a formal code editor and then copy/paste your final code into the widget once complete rather than attempting to work solely in the widget's text editor.

Scripts - JavaScript Widget

Client-Side Scripting

The JavaScript widget is used for adding JavaScript (JS) to your pages. You can either write JS in the widget or link to an external script hosted elsewhere such as a CDN. Click the "Edit" button in the upper-right corner of the widget to modify it. 

*NOTE: As a general rule, be sure to select the option to include script "before the closing body tag" else your scripts may not work as expected.
*TIP: For best results, we highly recommend that you write and/or modify scripts in a formal code editor and then copy/paste your final code into the widget once complete rather than attempting to work solely in the widget's text editor.

Misc - Embed Code Widget

Generic / Raw Code Placement

The Embed Code widget is used to add custom CSS, JS, iframes, videos, and/or other types of embedded content to your pages. You must include all necessary script tags with this widget as it will drop raw code directly on the page wherever the widget is placed. Click the "Edit" button in the upper-right corner of the widget to modify it.

*TIP: For best results, we highly recommend that you write and/or modify code using a formal code editor and then copy/paste your final code into the widget once complete rather than attempting to work solely in the widget's text editor.

Design, Tools & Training


Top