Documentation Center

skin.css

The skin.css cascading style sheet (CSS) file contains customizable styling for the LiveContent S1000D user interface. You can also create custom skin files.

The LiveContent S1000D installer delivers the default version of this file to the skins subdirectory of the LiveContent S1000D program files folder. You can create one or more custom skin style sheets to control the styling and layout of the user interface. For example, you may want to apply one skin to display on a desktop device and another to display on a tablet. Custom skin files must be given a unique file name (with the .css extension) and stored under the skins subdirectory.

skin.css example

The following is a fragment of a skin style sheet file showing the styling to be applied to several graphic toolbar buttons and section headers.
/* graphic toolbar buttons */

.gbar_next { background: url(@APPNAME@?target=resource&action=image&file_name=arrow_right_e.png) no-repeat; }

.gbar_next_off { background: url(@APPNAME@?target=resource&action=image&file_name=arrow_right_d.png) no-repeat; }

.gbar_prev { background: url(@APPNAME@?target=resource&action=image&file_name=arrow_left_e.png) no-repeat; }

.gbar_prev_off { background: url(@APPNAME@?target=resource&action=image&file_name=arrow_left_d.png) no-repeat; }

/* section headers */

h2.ui_section {

                background-color:#DAD8D3;

                padding:5px 10px;

                color:#000;

                font-weight: bold;

                font-size: 1em;

                margin-top: 15px;

                width:90%;

}

 h2.ui_section_as_if_image {

                padding-left:30px;

                height:21px;

}

 .tocPanel {

                overflow: auto;

                text-align: left;

                background-color: #FAFAFA;

                margin-bottom:0px;

                margin-top:0px;

                padding-right:10px;

                padding:0px;

                clear:left;

                padding:0pt 0pt 0pt 0pt;

                float:left;

                width:95%;

}

.tabsPanel {

                overflow:hidden;

                float:left;

                clear:both;

                margin:0pt 0pt 0pt 0pt;

                padding:0pt 0pt 0pt 0pt;

                border:0pt solid black;  

}