How to override the CSS

When you need only a small customization of the already installed UI package, you will not want to change its contents and maintaining you own UI package. The best approach to do that is to maintain own external css files that override the package ones.

To override a CSS file, you need to define the same CSS elements and load them after the original. In our case this is done by following these steps:

  1. Log in to the WordFrame Integra Core Administration
  2. Click on the "Builder" tab in the upper left corner
  3. Click on the "Content components" menu in the main navigation bar
  4. Click on the “Global meta tags” link in the “Content extensions” section on the left of the screen.
  5. Click on the corresponding edit link of the "Meta HEAD bottom"
  6. To define custom CSS overrides you have two alternatives:
    • include external CSS files by pasting in the textarea declaration similar to
       <link rel="stylesheet" type="text/css" href="http://domain.com/my.css" media="screen, projection" /> 
    • embedding styles by pasting them in the textarea declaration similar to
       <style> div {background:none;} </style> 
  7. check the checkbox for enabling the element
  8. Press the Save button.
  9. After the background job is finished you should see a green icon "ON" in front of the "Meta HEAD bottom" section