Gadget development, step 4: Applying styles and CSS

To get your own style sheets on the dashboard, define them for your gadget as in the following snippet:

[Gadget(ClientScriptInitMethod = "quickchat.init")]
[EPiServer.Shell.Web.CssResource("Content/QuickChat.css")]
public class QuickChatController : Controller

By using the attribute on the gadget controller and creating a CSS file in the Styles folder of your gadget project, you can define styles specific to your gadget. You can use the shared files, described in Gadget styling, to get a consistent look and feel.

Checklist for sharing the dashboard

Making a gadget means sharing a common workspace with others. Review the following list before publishing your gadget to a wider audience:

• “Namespace” your CSS classes.
• Namespace and encapsulate your JavaScript methods to avoid polluting global namespace.
• Do not override other gadgets' styles.
• Do not assume other gadgets will stay the same.
• Do not assume there is only one gadget of your kind (affects element IDs).
• Prefer documented CSS classes for a consistent look and feel over time.
• Avoid long-running operations (such as reports or RSS operations) from your default action.

Related topics

• Download the Quick Chat Gadget code sample in ZIP format.
• Gadget styling describes styling classes. The CSS styles used on the Dashboard reset many of the default styling of elements added by the browser and in some cases add an own default style.

Last updated: Nov 25, 2015