Where am I? Skinning the SDL Tridion Content Manager Explorer.

To provide context between similarly-looking SDL Tridion environments, consider Skinning the Content Manager Explorer as described on SDL Live Content.

Simplified, slightly modified, and with some pics. This is a fairly quick and easy way to make your CMS environments stand out from each other. For the full power of CME Themes, head on over to YATB.

  1. Make a Copy. Go to %TRIDION_HOME%\web\WebUI\Editors\CME\Themes\Carbon\Environments\. Copy one of the .css files, I used Development.css and renamed it CreateAndBreak.css.
  2. Change colors. Update the background-color hex values. Inspired by this Mihai’s “Getting Dark” series, I tried #444 to make the background bar and splitters dark gray.
    * Views */
    .itemview .tabwrapper,
    .itemview #MasterTabControl_switches
    	background-color: #444; /* updated */
    /* Dashboard */
    .dashboard #DashboardTitlebar,
    .dashboard #DashboardSplitter
    	background-color: #444; /* updated */
    /* Overrides */
    .titlebar .extensions .time
    	background: none;
    	padding: 3px 0 3px 10px;
    	margin-left: 0;
    .titlebar .extensions .time label
    	padding: 0 5px 0 0;
    	background-color: #444; /* updated */
    /* Environment name on titlebar */
    .titlebar .extensions .environment-name
    	max-width: 250px;
    	overflow: hidden;
    	white-space: nowrap;
    	font-size: 10px;
    	color: #fff;
    	float: left;
    	padding: 5px 10px 3px 10px;
  3. Add a Logo. Optionally updoad an image (95w x 24h pixels) and change the background-image url.
    .tridion .abouttridion .button, .tridion .abouttridion .button.mouseover, .tridion .abouttridion .button.mousedown {
      background-image: url("/WebUI/Editors/CME/Themes/CreateAndBreak/cb-95-24.png"); /* updated */
      background-position: 0 50%;
      background-repeat: no-repeat;
      border-width: 0;
      cursor: pointer;
  4. Make a “style” Group. Update %TRIDION_HOME%\web\WebUI\Editors\CME\Configuration\CME.config. Add a new group:
          <!-- original -->
          <cfg:group name="Tridion.Web.UI.Editors.CME.Theme.Environments.Development">
              <cfg:file type="style">{ThemePath}/Environments/Development.css</cfg:file>
    	<!-- added 1/23/2013 -->
          <cfg:group name="Tridion.Web.UI.Editors.CME.Theme.Environments.CreateAndBreak">
              <cfg:file type="style">{ThemePath}/Environments/CreateAndBreak.css</cfg:file>
  5. Update the environment node. Then find the commented out node and uncomment or make a copy.
            <resourcegroup>Tridion.Web.UI.Editors.CME.Theme.Environments.CreateAndBreak</resourcegroup><!-- matches group above -->

  6. Increment the modification attribute’s value in %TRIDION_HOME%\web\WebUI\WebRoot\Configuration\System.config
    <server version="" modification="4">

Not quite a full re-skin, but enough to make me wonder who messed with my VM. Note the server name shows and the tiny logo. In older versions of Tridion you could do the same by updating \Tridion\web\images\other\topBG.gif for the gradient and Tridion\web\library\css\colourstyle.css for the bar in item pop-ups.

Thanks to the SDL Live Content contributors and technical writers for including the example I’m working from. If you have feedback on the examples, have a question, or find the rare typo, do leave a comment on SDL Live Content. The team appreciates it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>