How to Change Company Graphics in the Self-Service Portal

  • Article

Applies To: System Center Service Manager 2010 SP1

Both the end user and analyst pages in the Self-Service Portal contain Microsoft company artwork. This topic describes how you can replace this artwork with your company logo. The easiest method is to replace the Microsoft company artwork itself but leave the file name unchanged. By keeping the file name, you avoid having to make any changes to the Web page code. You have to create the artwork and then copy it into two folders. This process is described in the following procedure.

To create your own artwork by using Paint

  1. On the computer that hosts the Self-Service Portal, click Start, and then click Run.

  2. In the Run dialog box, type mspaint in the Open box, and then click OK.

  3. On the keyboard, press CTRL+E, and then set the image width to 216 and the height to 43.

  4. Using Paint, create the company artwork you need, and then save it as in a PNG format as SCSM_logo.png. Save the file in the following two locations.

    Filename Location

    SCSM_logo.png

    %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\MasterPages\Images

    SCSM_logo.png

    %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\Analyst\Images

Editing Image Source Files

If you want to use your own file name for your corporate artwork, or if you want to change the height and width dimensions of the artwork, you have to update the image source file lines in the Web page code. To do this, you have to update the lines for five separate files. Use the previous procedure to create your artwork, and then save the file that uses the file name that you select. Then use the following procedures to update the Self-Service Portal pages.

To update the image source file lines for the analyst page

  1. Open the following file using Notepad.

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\Analyst\MasterPage.master

  2. Locate the following two image source file lines (the first example is for company logo in the upper left part of the page, the second is for the logo in the lower right corner):

    td valign="middle" style="width: 146px;">
        <a href="#">
        <img src="Images/SCSM_logo.png" border="0" alt="" />
        </a>
     </td>

<td valign="bottom" align="right" width="100%">
         <img src="Images/SCSM_logo.png" />
     </td>

  3. Update the <img src=…/> lines to reflect the name of the artwork file that you are using and the value of the alt tag. If you want to change the width and height of the graphic, you can add width and height parameters. For example, the following line adds a text tag of “Woodgrove Logo” to the graphic and sets the width to 216 and height to 46 pixels.

    <img src="Images/SCSM_logo.png" border="0" alt="Woodgrove Logo" width="216" height="46" />

  4. Save and close the file.

To update the image source files for the end user page

  1. Open each of the following files using Notepad.

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\Home.aspx

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\MasterPages\KnowledgeArticle.master

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\MasterPages\ServiceManagerCommandsMaster.master

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\MasterPages\ServiceManagerPortal.master

  2. Locate the following two image source file lines (the first example is for company logo in the upper left part of the page, the second is for the logo in the lower right corner):

    <img src="MasterPages/images/SCSM_logo.png" border="0" alt="" />

<img src="MasterPages/images/SCSM_logo.png" alt="System Center Service Manager" hspace="10" />

  3. Update the <img src=…/> lines to reflect the name of the artwork file that you are using and the value of the alt tag. If you want to change the width and height of the graphic, you can add width and height parameters. For example, the following line adds a text tag of “Woodgrove Logo” to the graphic and sets the width to 216 and height to 46 pixels.

    <img src="MasterPages/images/Woodgrove Logo.png" border="0" alt="Woodgrove Logo" width="216" height="46" />

  4. Save and close the file.

  5. Copy your company logo graphic to the following folders:

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\EndUser\MasterPages\Images

    • %inetroot%\inetpub\wwwroot\System Center Service Manager Portal\Analyst\Images

Did you find this information helpful? Please send your suggestions and comments about System Center Service Manager documentation to scsmdocs@microsoft.com.