Product Documentation

Branding stylesheet reference

Jun 05, 2015

This topic describes the visual elements that comprise most pages in the control panel and the stylesheet attributes that control their appearance.

For more information about the default attributes for each style, download the Full Template file from the Brand Management Overview page.

Headings

Headings appear near the top of all control panel pages and are used to title pages. Use the following styles to change the appearance of specific heading levels on a page:
  • .heading1
  • .heading2
  • .heading3
  • .heading3box
  • .pageTitle

Page titles

The .pageSubTitle style controls the appearance of the subheading that appears immediately beneath the main heading on a page.

Side bar boxes

The side bar boxes appear on the left side of each page. Typically, these boxes display management tasks for a specific menu item, search functions, or related pages.
  • .boxAlt-topleft
  • .boxAlt-topright
  • .boxAlt-bottomleft
  • .boxAlt-bottomright
  • .boxAlt-inside

Banner

The .top_banner style references the logo image that appears across the top of each page. When you upload a custom banner image, Services Manager appends the brand code to the default image filename. For example, if you specify a custom image for a brand with the code "Sample01," Services Manager names the file "toplogoSample01." Typically, uploaded images are located at C:Program Files (x86)CitrixCortexCortexWebCortexDotNetpics.

To ensure your uploaded image is used in pages that specify the #banner element, customize your stylesheet as follows:
.top_banner
{
background-image:url('/CortexDotNet/pics/toplogoBrandCode.FileFormat
}
Note: Service Manager accepts banner images in the GIF or JPEG file format.

Menu hover

When you hover over a menu item in the control panel, the item's background and text color change. Use the following styles to change these attributes:
  • A.MainMenuHover
  • A.MainMenuHover:link
  • A.MainMenuHover:active
  • A.MainMenuHover:hover
  • A.MainMenuHover:visited
  • .MainMenuHover

Menu item

When you hover over an item in the control panel menu bar, the background color changes. Use the following style to change this attribute:
  • .MainMenu
  • .MainMenuHover
  • .MainMenuStyle

Page background

The .pageBackground style references the background image and background color of control panel pages. When you upload a custom background image, Services Manager appends the brand code to the default image filename. For example, if you specify a custom image for a brand with the code "Sample01," Services Manager names the file "bg_Sample01." Typically, uploaded images are located at C:Program Files (x86)CitrixCortexCortexWebCortexDotNetpics.

To reference your custom background image, customize your stylesheet as follows:
.top_banner
{
background-image:url('/CortexDotNet/pics/bg_BrandCode.FileFormat
}

Logged on user

The name of the currently logged on user appears on the top banner of all control panel pages. Use the following styles to change how this name appears:
  • A.loginlabel
  • A.loginlabel:link
  • A.loginlabel:active
  • A.loginlabel:hover
  • A.loginlabel.visited
  • .loginlabel

Table rows

Table rows are styled differently depending on whether or not the row is alternating or expanded. Use the following styles to change the appearance of table rows:
Style name Description
td.rowA Allows you to change the appearance of all rows in tables.
td.rowAalt Allows you to change the appearance of alternate rows in tables.
td.rowB, td.rowBE Allows you to change the appearance of table cells that expand when clicked.
td.rowBEAlt Allows you to change the appearance of alternate table cells that expand when clicked.
td.rowHE, td.rowHEAlt, td.rowHC, td.rowHCAlt Allows you to change the appearance of highlighted table cells that have been expanded.
td.frame Allows you to change the appearance of the frame surrounding the functions displayed when the table cell is expanded.
.tableheading2, .tableheading2tl, .tableheading2tr, .tableheading2bl, .tableheading2br, .tableheading2spacer Allows you to change the background and font colors of the table's header and footer.