Show TOC

Example documentationExamples: Changing Cascading Style Sheets

 

The following text contains examples of how you can change the generic CSS file, to adjust the layout of the CRM WebClient UI to meet your own business needs.

Example 1: First Level Entries in the Navigation Bar

  • Section /*Menu Styling*/ in file thtmlb_stand.css

  • Font color:

    .th-menu-rootlink:hover{text-decoration:none;padding:0px;margin:0px;color:#000000;font-weight:bold;line-height:25px;width:100%;}

  • Background color:

    • .th-menu-rootlink:hover{text-decoration:none;padding:0px;margin:0px;color:#000000;font-weight:bold;line-height:25px;width:100%;}

    • .th-menu-rootItemOff .th-menu-rootlink{background:#ececec url('styling/menu/rootlinkbg.gif') repeat-x;}

Example 2: Second Level Entries in the Navigation Bar

  • Section /*Menu Styling*/ in file thtmlb_stand.css

  • Font color:

    .th-menu-link:hover{text-decoration:none;color:#000000;line-height:20px;width:100%;}

  • Background color:

    .th-menu-sublist{list-style:none;width:174px;padding:2px;border: 1px solid #959595;background-color:#ffffff;position:absolute;display:none;z-index:10000}

  • Mouseover effect:

    • .th-menu-itemOn{height:20px;margin:0px;background-color:#D5E5FB}

    • .th-menu-itemOff{height:20px;margin:0px;background-color:#FFC156}

Example 3: Quick Links in the Navigation Bar

  • Section /*L-Shape Styling*/ in file thtmlb_stand.css

  • Font color:

    a.th-l-shortcut, a.th-l-shortcut:visited{padding:2px 2px 2px 24px;text-decoration:none;color:#3665D0;background:transparent none no-repeat 6px center;}

  • Background color:

    .th-l-shortcutli{background-color:#ffffff;margin:0px; border:0px; list-style:none; padding:0px;}

Example 4: Header Container in the Header Area

  • Section /*L-Shape Styling*/ in file thtmlb_stand.css

  • Background color:

    .th-l-headercontainer{background-color:#ffffff;width:100%;height:100%}

Example 5: Background of the Work Center Page

  • Section /*L-Shape Styling*/ in file thtmlb_stand.css

  • .th-l-wccontainer{background-color:#ffffff;}

Example 6: Line with Print Button

  • Section /*L-Shape Styling*/ in file thtmlb_stand.css

  • .th-l-toolbar{height: 25px; background-color: #d8e6fa;padding:4px 4px 2px 0px}

Example 7: Tables

  • Section /* styling for tableView; =th-tv =tables =table-view*/ in file thtmlb_stand.css

  • Color of selected row:

    tr.th-tv-row-sel{background-color: #eaf5ff;height: 25px;}

  • Color of row for mouseover effect:

    tr.th-tv-row-mo{background-color: #ffffdc;height: 25px;}

Example 8: Formatting of Links

  • Section /* Styling for the link. =th-lk =link */ in file thtmlb_stand.css

  • Font color:

    .th-lk{color: #3665D0; text-decoration: none; font-family: Arial; font-size: x-small; }

  • On-hover color of a link:

    a.th-lk:hover{color: #5280E9; text-decoration: underline; }

Example 9: Formatting of Fields

  • .th-tx-label{width:100%;color:#5B5B5B;text-align:right;vertical-align:top; padding:0px 3px 0px 3px;}

  • .th-tx-value{width:100%;color:#000000;vertical-align:top;padding:0px 3px 0px 3px;}

Example 10: Trays

  • Section /* Styling for "tray". */ in file thtmlb_stand.css

  • Color of title in tray:

    .th-ty-in .th-ty-hd {font-size: small; font-weight: bold; color: #767676; white-space: nowrap; line-height: 48px; height: 48px;}