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, 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 environment to another.

Procedure

  1. On your specific environment's Content Manager Server machine, access the web\WebUI\Editors\CME\Themes\Carbon\Environments\ subfolder of %TRIDION_HOME% (defaults to C:\Program Files (x86)\Tridion\).
  2. In this location, create one or more CSS files for this environment. The folder already contains sample CSS files Development.css, Testing.css and Acceptance.css that you can use as a basis for your custom CSS file(s). 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.

    Specifically, to change the background color of the GUI, change the background-color (in three locations in the CSS), and to set your own logo in the top right corner, add the following class to your CSS file:

    .tridion .abouttridion .button, .tridion .abouttridion .button.mouseover, .tridion .abouttridion .button.mousedown {
    	background-image: url("/WebUI/Editors/CME/Themes/Carbon/Images/Views/mylogo.png");
    	background-position: 0 50%;
    	background-repeat: no-repeat;
    	border-width: 0;
    	cursor: pointer;
    }

    where mylogo.png in the path specified in background-image refers to a 95x24 pixel image.

    Depending on the background color you choose, the text color of the breadcrumb trail (which appears against your background color) may become harder or impossible to make out, and you may want to change it. To change the breadcrumb text color, add the following class:

    /* Breadcrumb text color */
    .addressbar .addressbaritem
    {
    	color: #FFFFFF;
    }

    where #FFFFFF is the new color of the breadcrumb text.

  3. Next, navigate to the web\WebUI\Editors\CME\Configuration subfolder of the root location.
  4. In this folder, open CME.config in a plain-text or XML editor and search for the section called <cfg:groups>. In this section, find a cfg:group subelement with the following content:
    <cfg:group name="Tridion.Web.UI.Editors.CME.Theme.Environments.Development">
    	<cfg:fileset>
    		<cfg:file type="style">{ThemePath}/Environments/Development.css</cfg:file>
    	</cfg:fileset>
    </cfg:group>
  5. 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 cfg:file elements for each.
  6. 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 cfg:group (for example, Tridion.Web.UI.Editors.CME.Theme.Environments.Development).
  7. Save and close CME.config.
  8. In the web\WebUI\WebRoot\Configuration\ of the root location, open System.config in a plain-text or XML editor.
  9. In the Configuration/servicemodel/server location, increase the value of the modification attribute.
  10. Save and close System.config.
  11. Next, access your other environment and execute the steps above again.