You are here: Make It Look Good! > Stylesheet Manager

Stylesheet Manager

OVERVIEW

The Stylesheet Manager enables you to customize and modify the CPQ Cloud system's font, colors, and images so that they closely match your company's colors and style. A CSS file is used to generate the uniform look and feel of the web site. A default CSS file is provided with the system.

These changes only affect the user pages, not admin pages.

To make style changes to Partner user pages, see Partner Organization Stylesheets And Branding .

The UI provides an easy way to change the colors and fonts used. For advanced customization, you can download the default CSS file provided, make changes and then upload it as an alternate CSS file.

ClosedTop & Bottom Bars

Top and bottom bars frame page content. Typically, each page has a single top bar and a single bottom bar. On the Branding page, Stylesheet Manager displays in the top bar and Back to Top displays in the bottom bar.


ClosedTrail & Trail-On

Trail provides a path at the top of the page to indicate the current position of the user in the site structure. Trail-On is the portion of the trail where the user is currently at.


ClosedPage Help Text

Using this section you can customize the look and feel of the help text.


ClosedGeneral

Using this section, you can customize the general look and feel of the website.


ClosedHeaders

Commerce pages typically have multiple sections. Headers mark the start of a section. Example: on the Branding page, a few headers are: Top and Bottom Bars, Headers, Table Row Preferences, and Buttons.


ClosedTabs

Tabs are used to provide structure to a web page by logically dividing the material in a page.


ClosedTable Row Preferences

Much of the data that displays on commerce pages is displayed in tables. You can alternate row colors to make tables more reader-friendly. You can also distinguish table text with a custom color.


ClosedError Message


ClosedButtons

Buttons enable users to perform operations. You can customize the background, text color, and sizes of all the buttons on your site.


ClosedCSS Styles for Page Navigation in the Line Item Grid

CSS styles are available to indicate pages with validation errors, within the list of line items. These styles can be modified, but by default they are not defined, to avoid changes to any customized button styles.

To customize the style:

  1. Click Admin to go to the Admin Home Page.
  2. Click Stylesheet in the Style and Templates section.

    The Stylesheet Manager page appears.

  3. Download the Alternate CSS.
  4. Add the following style classes to the CSS file, providing the appropriate style rules, and save it.

    The following sample of CSS rules can be used as a starting point for customizing the Pagination buttons to match your site’s branding:

    /* Style rules specific to pagination buttons. These can be added to your site's CSS properties for your custom buttons if desired */

    button.pagingbtn{ /* Paging button container */ }

    span.pagination-button-left { /* Left side of button */ }

    span.pagination-button-left span.pagination-button-middle { /* Button text properties */ }

    span.pagination-button-left span.pagination-button-right{ /* right side of button */ }

    /* Style rule to ensure pagination buttons are not hidden */

    div.paging-tools span{

    visibility: visible;

    padding: 0px;

    }

    /* Style rule to set height and alignment for the “Go To” menu */

    div.sel-menu select.selpaging{

    height: 22px;

    text-align: left;

    }

    /* Style rule to add black border around the current page button */

    div.page-number ul.paging li button.pagingbtn.current{

    border: 1px solid #333333;

    }

    /* Style rule adds red border for the current page button whose line items contain at least 1 constraint/validation error */

    div.page-number ul.paging li button.pagingbtn.current.invalid-page{

    border: 1px solid #FF0000;

    }

    /* Style rule sets text to red for a non-current page button whose line items contain at least 1 constraint/validation error */

    div.page-number ul.paging li button.pagingbtn.invalid-page{

    color: #FF0000;

    }

    /* Style rule adds red border for the “Go To” menu to indicate that there is a page whose line items contain at least 1 constraint/validation error */

    div.sel-menu select.selpaging.invalid-page{

    border: 1px solid #FF0000;

    }

  5. Upload the new CSS file.


ADMINISTRATION

ClosedCustomizing your Stylesheet

  1. Specify the fonts and color palette of your choice.
  2. Do one of the following:
    1. Branding changes take effect immediately after clicking Accept. If the changes do not appear on a page, it is likely the browser is displaying a cached copy of the page. When this happens, click the browser's Refresh button to update the page.

      When using top navigation for your site, the sidebar background color should be set to white (FFFFFF) and the text should be a dark, high-contrast color.
      Only web safe colors can be selected from the color palette pop-up. RGB color codes display in the text box next to the color preview box. For non-web safe colors, you can enter RGB color codes and the corresponding color will be shown in the color preview box.

ClosedDownloading a CSS File

This file is useful for developing XSL template files as it enables you to view the classes you can use in XSL.

  1. Click the Download Stylesheet link.

  2. Save the downloaded CSS file, modify it, and then update it as an alternate CSS file.

ClosedUploading a CSS File

  1. Click Browse in the Alternate CSS Information.

    The File Upload dialog box appears.

  2. Browse for, select the required file, and click Open. This displays the selected file name for the Alternate CSS Information field.
  3. Click Accept on the Stylesheet Manager page.

ClosedSpecifying Icons for Top & Bottom Bars

  1. Click Browse within the Top Corner Icon bar to search for and select a new logo.

    The File Manager- Browse window appears.

  2. Select the folder from which you desire to import the new logo, using the Folder drop-down.

    Selecting a folder name displays the logo images present in the folder, along with a Preview, Description, and the date and time the logo was imported to the folder.

  3. Click Select the entry for the desired logo.

    This closes the File Manager - Browse window, and displays the name of the selected image in the Home Page Set Up.

  4. Click Clear to remove the selected icon.

    The maximum size allowed for the icon is 20px by 20px.


NOTES

RELATED TOPICS

Related Topics Link IconSee Also