Theme - Adding Custom CSS Files

Learndot Enterprise provides a way to add CSS styles or override default CSS that comes with Learndot Enterprise, via the system setting 'skin.css'. This allows upload of CSS file via the Static File admin interface, which is then referenced by the 'skin.css' system setting.

Process

For Professional Service Developer

  1. Compile custom style file and zip it. (eg. lde-skin-<customer-name>.zip)

  2. Log in Administration UI, open Static Files Manager by navigating to Content Management > Static Files. You should be presented with the Static File Manager.

  3. In the Static File Manager, navigate to /admin/static/skin. This is the directory where CSS files are stored. 

  4. Click the 'Choose File' button, and select the zip file from your local computer that you wish to apply of the site. Once you've picked the file, press 'Upload'.

  5. Unzip the zip file you uploaded.

  6. Navigate to Setup > System Settings.

  7. On the near top right corner of the System Settings page, within the search bar, key in catalog.css.skin and click search. This list out only the system setting catalog.css.skin.

  8. Click on the 'pencil' button located to the right hand side of the catalog.css.skin item, to bring out the Edit page of this system setting.  

  9. Reference the value section to the uploaded css file. So if the above steps are followed the value should be static/skin/lde-skin-<customer-name>/lde-skin.css

  10. Save the system setting.

  11. On the near top right corner of the System Settings page, within the search bar, key in catalog.css.branding and click search. This list out only the system setting catalog.css.branding.

  12. Click on the 'pencil' button located to the right hand side of the catalog.css.branding item, to bring out the Edit page of this system setting.  

  13. Reference the value section to the uploaded css file. So if the above steps are followed the value should be static/skin/lde-skin-<customer-name>/lde-branding.css

  14. Save the system setting.

For Support / Customer

Uploading the CSS file to Learndot Enterprise

  1. Log in Administration UI, open Static Files Manager by navigating to Content Management > Static Files. You should be presented with the Static File Manager.
  2. In the Static File Manager, navigate to /admin/static/skin. This is the directory where CSS files are stored. 
  3. How the files in /static/skin are organized is up to each organisation to determine. It is suggested that you create a folder called 'custom.'
  4. If you used the recommended structure in step 3, you should now be in /static/skin/custom
  5. Click the 'Choose File' button, and select the css file from your local computer that you wish to apply of the site. Once you've picked the file, press 'Upload'.


You can make a folder by typing the folder name in the textbox to the left of the 'Make Directory' button, and then pressing the button.

Reference CSS file in Inline CSS

  1. Navigate to Setup > Look and Feel > Skin.
  2. Update the Inline CSS field with @import 'static/skin/custom/<your-css-file-name>'.

  3. You can add other CSS code in this field and it will apply to the site immediately.

  4. Save.


Note: The content on this wiki page is targeted at advanced users who have a basic understanding of HTML and CSS.

Introduction

What is a skin?

By default, Learndot Enterprise is developed with an orange-toned theme as shown in the screenshot on the right. However, when a new Learndot Enterprise instance is set up for an organisation, it is desirable for the website theme to match the existing company branding and colours. To achieve this, a custom 'look and feel' for the application is developed for most new instances, generally comprised of a combination of new static graphics and Cascading Stylesheets (CSS), collectively referred to as a skin. The following page will explain how to access and modify the skin files that are responsible for controlling the appearance of your Learndot Enterprise instance.

Skin Composition

Skins are comprised of files, including images and CSS; and system settings, which can control some aspects of which files are loaded.

Files

The CSS and image files used for the skin are accessible through the Static File Manager, and are located in the /static/skin directory.

In addition to the skins directory, images that may be used on pages in the site can be stored in the /static/images directory. In general, if an image is used for a specific page, it is stored in /images, but if it is part of the site structure and shown on multiple pages, it is stored in /skin/<skin>/images.

System Settings

The system settings are primarily responsible for controlling the css files that are loaded. The settings associated with configuring skins can be accessed by entering 'skin' in the System Settings search bar within Learndot Enterprise. Alternatively, many of them are listed on the Customizing the Interface page.

You can define your own CSS files, which would get loaded after the CSS files listed above - giving you the ability to not only to define new CSS rules, but also to override existing ones. We strongly recommend using Firebug for Firefox (or an equivalent tool on other browsers like Safari/Chrome) that can make it easier to understand the cascading rules.

Use the following system settings to point to your own static CSS files.

System Setting

Description

skin.proposal.css

Gets loaded on the training proposal page. See below on how to enable/disable the embedded CSS on this page.

catalog.css.skin
Gets loaded on general styling. Applicable for custom header and footer.
catalog.css.branding
Gets loaded on header and footer styling. Applicable for custom header and footer.

If you have any issues with making customizations to your Learndot Enterprise skin, contact us at support@learndot.com