Documentation Center

CSS

Properly extending CSS styles allows you to override existing styles or add new styles with the lowest impact to the skin.

About this task

Extending CSS styles rules allows you to change the style and display of XHTML elements and images on the screen. Common modifications are to change font sizes, colors, background images, and to tweak padding or margins.

Procedure

  1. SDL LiveContent Reach provides an empty CSS file specifically for custom modifications. Create or modify LiveContent_home/db/LiveContent/ui/skins/<your skin>/css/extra.css.
    If you have additional CSS files, you can add them to the HTML templates after the extra.css entry.
    For performance purposes, keep all of the CSS references at the top of the HTML page, before any <script> elements.
  2. Modify extra.css or any additional CSS files as needed to add styles or override the styles defined in the base skin.
    1. If necessary, use more specific CSS rules to override those in the base CSS.
    2. If necessary, use !important on a CSS style rule that you have entered into extra.css to cause it to override a base CSS rule.
      
      	.myClass {
      		font-size: 12pt !important;
      	}
      				
    3. Only if absolutely necessary, copy base.css or content.css into your custom skin. Within the custom skin, modifications should be limited to deleting CSS style rules in base.css, for example, and entering the desired replacement CSS style rules into extra.css.
  3. Upload the new skin customization into the database.
    • You can upload the resources using the web UI, as described by Adding a Skin and Resources.
    • You can also update the skins via the command line using the loaddb tool. Copy the updated skin resources from the source code repository to LiveContent_home/db/LiveContent/ui/skins/<your_skin>/.
      • On Windows, to load the most recent changes into the database run this command:

        loaddb.bat UPGRADE

      • On Linux, run this command:

        loaddb.sh UPGRADE