4

I note that the out of the box tabs of the Experience Profile reference a custom style sheet.

<link href="/sitecore/shell/client/Applications/ExperienceProfile/Contact/Details/DetailsTab.css" rel="stylesheet" type="text/css" />
<link href="/sitecore/shell/client/Applications/ExperienceProfile/Contact/Outcomes/Outcomes.css" rel="stylesheet" type="text/css" />
<link href="/sitecore/shell/client/Applications/ExperienceProfile/Contact/Overview/OverviewTab.css" rel="stylesheet" type="text/css" />
<link href="/sitecore/shell/client/Applications/ExperienceProfile/Contact/Channels/ChannelsTab.css" rel="stylesheet" type="text/css" />

etc., etc.

I would like to assign a style sheet to a custom tab I have added to this page. Is this possible -- and if so, how?

I am running Sitecore 8.1 Update 2?

Improve this question
4
  • Can't you add the reference to your custom tab? I expect that it has a view if you use SPEAK, and then you can just put it there.
    – Tamás Tárnok
    Commented Oct 20, 2016 at 21:22
  • Through a SubPageCode rendering?
    – eat-sleep-code
    Commented Oct 20, 2016 at 21:34
  • I mean something like here - visionsincode.wordpress.com/2015/08/06/… here you have the .cshtml where you can put your stylesheet reference.
    – Tamás Tárnok
    Commented Oct 20, 2016 at 21:42
  • 1
    I'm on a train but know the answer. when I get to a spot where I can sit down and bang out an answer I will. we just solved this for ourselves a couple weeks ago.
    – Pete Navarra
    Commented Oct 20, 2016 at 22:24

1 Answer 1

Reset to default
4

Style Sheets are added using SPEAK via Sitecore Rocks in Visual Studio. The point of this answer is not to show you how to install Sitecore Rocks, however, I will should you how to add it.

BEST PRACTICE

In the Below Examples, we are working with SPEAK UI through Sitecore Rocks. This is recommended, as Sitecore's Content Editor does not support some of the rendering properties that SPEAK UI requires. As such, it is default procedure to always use Sitecore Rocks when editing SPEAK applications.

NOTE: that we are editing the CORE database, so publishing is not needed here.

Step 1 - Find the Experience Profile Contact Page Settings

enter image description here

Step 2 - Add a New Item

enter image description here

Step 3 - Search for Page-Stylesheet-File

enter image description here

Set a name for the style sheet here.

Step 4 - Set Path to Style Sheet File and Save your Item

Double click on the new item you created (TestPanelStyle in this example)

enter image description here

Note: That this is the physical path location under your Website Root.

Step 5 - Save your CSS File in that Physical Path

Step 6 - Reload Your Experience Profile Page

You'll Notice that your custom CSS Page now shows up.

enter image description here

Version Differences

Sitecore 8.0 - Sitecore 8.1 Update 2

Notice that the CSS files are explicit and numerous in SPEAK Applications, as exampled here:

enter image description here

Sitecore 8.1 Update 3

Update 3 Introduces CSS Minification. The procedure above to add CSS to your Experience Profile Contact Tab is the same, except the resulting source code is the minified CSS.

enter image description here

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.