- Add-ons
- Architecture
- BLOB storage and providers
- Caching
- Client resources
- Configuration
- Configuring episerver
- Configuring episerver.dataStore
- Configuring episerver.framework
- Configuring episerver.packaging
- Configuring episerver.search
- Configuring episerver.shell
- Configuring module.config
- Configuring staticFile
- Configuring episerver.basicAuthentication
- Configuring .NET SignalR
- Configuring Image Service
- Configuring link validation
- Reading application settings programmatically
- Content
- Page types and templates
- Block types and templates
- IContentRepository and DataFactory
- Persisting IContent instances
- Synchronization
- Validation
- ContentType attribute
- Grouping content types and properties
- EditHint in MVC
- Creating a page programmatically
- Selecting content
- Converting page types for pages
- Refactoring content type classes
- Multilingual content
- Properties
- Links
- Assets and media
- Providers
- Deployment
- Dynamic content
- Dynamic data store
- Editing
- Event management
- Forms
- Globalization
- Initialization
- Logging
- Personalization
- Projects
- Rendering
- Reports
- Routing
- Scheduled jobs
- Search
- Search integration
- Searching and filtering
- Installing and deploying Search Service
- About Episerver full-text search client
- About Episerver full-text search service
- Configuring Episerver full-text search client
- Configuring Episerver full-text search service
- Searching for pages based on page type
- Adding search providers
- Security
- Authentication and authorization
- Virtual roles
- Configuring Active Directory membership provider
- Recommendations for ASP.NET security settings
- Securing edit and admin user interfaces
- Federated security
- Forms authentication
- OWIN authentication
- Configuring mixed-mode OWIN authentication
- Permissions to functions
- Protecting users from session hijacking
- Managing cookies on the website
- EPiServer AspNetIdentity
- Integrate Azure AD using OpenID Connect
- User interface
- Context-sensitive components
- Service locator
- Describing content in the UI
- Dialogs
- Shell profile
- Store architecture
- Drag-and-drop
- Message service pool
- Publish and subscribe messaging system
- Introduction to Dojo
- Using jQuery
- Plugging in a gadget
- Creating a component
- Extending the navigation
- WebSocket support
- Dashboard gadgets
- Command Pattern
- Object editing
- Views
- User notifications
- Virtual path providers
This content is archived. See latest version here
Last updated: Nov 25 2015
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.
Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/