Documentation Center

Skinning the Content Manager Explorer

To make a clear, visible distinction between the different environments, you can skin the user interface.

About this task

When implementing SDL Tridion Sites, to manage the development process and clearly separate the project implementation phases it is recommended to use a Development, Test, Acceptance and Production infrastructure (DTAP). DTAP enables different users to manage different types of content on different Content Manager servers: the creation and management of content is distributed over several machines to prevent different types of content from getting in each other's way. You then use Content Porter to port data from one SDL Tridion Sites environment to another.

Procedure

  1. On your specific environment's Content Manager Server machine, access the web\WebUI\Editors\CME\Themes\Carbon2\ subfolder of %TRIDION_HOME%.
  2. In this folder, create a subfolder called Environments\
  3. In this location, create one or more CSS files for this environment. If your CSS file(s) refer to other resources (a logo image, for example), ensure that they are present at the location that the CSS file refers to.
    Here is a sample CSS file for a Development environment:
    /* Views */
    .itemview, tabwrapper,
    .itemview #MasterTabControl_switches
    {
      background-color: #ffd1d1;
    }
    
    /* Dashboard */
    .dashboard #DashboardTitlebar,
    .dashboard #DashboardSplitter
    {
      background-color: #ffd1d1;
    }
    
    /* Overrides */
    .titlebar .extensions .time
    {
      background: none;
      padding: 3px 0 3px 10px;
      margin-left: 0;
    }
    .titlebar .extensions .time label
    {
      padding: 0 5px 0 0;
    }
    #TitlebarContainer
    {
      background-color: #ffd1d1;
    }
    /* Environment names on titlebar */
    .titlebar .extensions .environment-name
    {
      max-width: 250px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 10px;
      color: #000;
      float: left;
      padding: 5px 10px 3px 10px;
    }
  4. Next, navigate to the web\WebUI\Editors\CME\Configuration subfolder of the root location.
  5. In this folder, open CME.config in a plain-text or XML editor and search for the section called groups. In this section, create a group subelement with the following content:
    <group name="SDL.Web.UI.Editors.CME.Theme.Environments.Development">
    	 <fileset>
    		  <file type="style">{ThemePath}/Environments/FILENAME.CSS</file>
     	</fileset>
    </group>

    where FILENAME.CSS is the CSS file you just created.

  6. Edit this element for your environment. Change the name attribute to a name of your choosing, and change the name of the CSS file to the one you created in step 2. If you use multiple CSS elements, create additional file elements for each.
  7. In the same file, find a commented-out element called environment. Uncomment it and set its <name> subelement to a unique name of your choosing, and its <resourcegroup> subelement to the name you gave your group (for example, SDL.Web.UI.Editors.CME.Theme.Environments.Development).
  8. Save and close CME.config.
  9. In the web\WebUI\WebRoot\Configuration\ of the root location, open System.config in a plain-text or XML editor.
  10. In the Configuration/servicemodel/server location, increase the value of the modification attribute.
  11. Save and close System.config.
  12. Next, access your other environment and execute the steps above again.