Css Picker Field

  0 rating
7/26/2017 1:00:46 AM
9/11/2017 3:21:36 PM
Source: Github
Provider: Tomasz Juranek


Allow content editors to pick styles defined directly in css files.

Module adds new field type Css Picker which can be used on any template. 

It also adds _CssPicker template with predefined field, which can optionally be added as a base template for same behavior. 

Users can easily define which Css files are used by the module in config file or field data source. Classes are cached to increase performance.


Field can be further used on component's rendering parameters to improve content editing experience.


  • Documentation > How to use the module
    How to use the module

    After the installation: 

    • Add new field with Css Picker type to your templates, or add base template /sitecore/templates/Foundation/CssPicker/_CssPicker to your existing template.
    • Replace paths to css files in /App_Config/Include/CssPickerField/SmartSitecore.CssPicker.config or use Sitecore patch to add your css files.
    • Alternatively add styles= in field data source with paths to css files, separated with comma: 
    • Paths entered in field's data source replace the one defined in configuration file. 
    • Go to the item based on the template and start writing css class name, Css classses appears in a suggestions list and can be picked.

    Css Picker can be used also on component's rendering parameters to improve content editors experience:

    • Add /sitecore/templates/System/Layout/Rendering Parameters/Standard Rendering Parameters to base templates in _CssPicker template or your custom template with Css Picker field. 
    • Select _CssPicker, or your custom template in Parameters Template field of the rendering definition item.
    • Open properties of your component in content or experience editor and start writing css class name.

    Check blog post for details and use case.

Release notes
Version 1.0 - Support for Css files defined in config file or field datasource.
Read more Back
Code examples
  • Code examples > Access rendering parameters
    Access rendering parameters

    In  standard Sitecore MVC controller:

    var selectedCss = RenderingContext.Current.Rendering.Parameters["Css Class"];

    In Glass Mapper MVC (where MyParameters is a Model class for corresponding template):

    var selectedCss = GetRenderingParameters<MyParameters>().Css_Class;







Solution screenshots(0)


Reviews (0)

Sort by: Date Most votes
  • Profile Avatar

    Level: 0

    x0 x0 x0




    Was this helpful?


Comments (0)

Sort by: Date  Most votes

Leave a Comment

Comment must be field in
Post comment

Write a review

Title can't be empty
Review can't be empty
Post review


Title Description Download Action

Add File