Skip to content
Css Picker field for Sitecore CMS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
img
src/Foundation/CssPickerField
.gitignore
License.txt
README.md
Sc.CssPickerField.sln
nuget.config

README.md

Sc.CssPickerField

Sitecore Single-line Text Field with Css classes autocompletion. Based on Sc.AutoCompleteTextField

Setup

  • 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:

Css picker field datasource

  • Paths entered in field's data source replace the one defined in configuration file.
  • Css names are cached in Sitecore Cache, where the keys are file names. To clear it go to /sitecore/cache.aspx page.
  • 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 field

Usage in Rendering Parameters

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:

Css picker field

  • Use rendering parameters in standard Sitecore MVC controller:

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

  • Use rendering parameters in Glass Mapper MVC (where MyParameters is a Model class for corresponding template):

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

    Check out blog entry about the field and it use case.

You can’t perform that action at this time.