Friday, February 3, 2017

Sitecore adding a style sheet to a custom experience profile tab

After creating a custom contact facet (data store) and having this display in the experience profile for each user, you may be left wondering why it doesn't look quite as good as the other default tabs.

A custom tab
The default details tab 
The details tab shown above has both JavaScript and CSS which controls it's behavior, both of these files are located in: Website\sitecore\shell\client\Applications\ExperienceProfile\Contact\Details. You will have already created the JavaScript file to populate the data onto your custom tab, the next step is creating the CSS and registering it onto the page.

To add custom CSS to the experience profile

  1. You will need to download a copy of Sitecore Rocks - I use the standalone version.
  2. Connect Sitecore Rocks to your Sitecore instance.
  3. Find the Page Settings for the Experience Profile: /sitecore/client/Applications/ExperienceProfile/Contact/PageSettings.

  4. Add a new item of Page-Stylesheet-File template.

  5. Set the Stylesheet field on the new item to the physical path of your CSS file.

  6. Reload the Experience Profile and your custom style should be applied.
It's also worth noting that the DetailsTab.css file (located in: Website\sitecore\shell\client\Applications\ExperienceProfile\Contact\Details) provides an example of how to target the elements in the experience profile and provides a good base to work off.

No comments:

Post a Comment