Optionally provide private feedback to help us improve this article...

Thank you for your feedback!


Editing CSS by hand within InstantKB

This article describes how to modify the CSS within InstantKB 2013 or above.

By default all CSS used by InstantKB is minified and bundled into two files called "core.css" and "theme.css". These CSS files can be found within the "Styles" directory within each InstantKB skin folder.As these files are minified it can be difficult to modify these files by hand. If you wish to modify our unminified & unbundled CSS files and rebuild the optimized "core.css" and "theme.css" files please follow the steps in this article.

NOTE: This article applies to InstantKB 2014 or above. Earlier versions of InstantKB use dynamic run-time script bundling and minification. We moved to compile time script minification and bundling for lower run-time overhead in InstantKB 2014 and above.

What is core.css

core.css is the main minified and bundled CSS file loaded into all InstantKB pages. This file contains all the client side layout styles required by InstantKB. core.css contains all the layout CSS.

By default the following CSS files will be minified and bundled into core.css...

  • 1-debug-common.css
  • 2-debug-kb.css
  • 3-debug-font-awesome.css
  • 4-debug-mobile.css
  • 5-debug-plugins.css

What is theme.css

Similar to core.css, theme.css is also loaded on every InstantKB page. This CSS file contains only the style information for your skin. For examples colors, fonts, textures etc. This does not contain any layout CSS. By default theme-debug.css is compiled into theme.css.

How minification and bundling works

To create core.css we take all the separate CSS files found within each InstantKB skin "Styles" folder that match the pattern "{number}-debug-{name}.css" and minify and bundle these separate CSS files into a single core.css file.

Within the Application_Start event for your InstantKB installation our minifier and bundling engine will traverse all "Styles" folders within each of your InstantKB skins. If we don't find a "core.css" or "theme.css" file within a skins "Styles" folder we will attempt to create the bundled CSS from the various "-debug" files.

The number that appears at the start of each debug files determines the order in which the scripts are bundled.

How are core.css and theme.css are generated?

The "core.css" and "theme.css" files will only be automatically generated from the various debug CSS files if core.css and theme.css does not already exists within your skins "Styles" folder and the "InstantASP_DebugMode" application setting within the web.config is set to true...

<add key="InstantASP_DebugMode" value="true"/>
To re-create core.css and theme.css you will first need to delete core.css and theme.css from the "Styles" folder within your skin directory. Once you've removed core.css and theme.css you will need to ensure the InstantASP_DebugMode application setting within the web.config is set to "true". Then simply visit your InstantKB installation in a web browser and InstantKB will automatically generate the core.css and theme.css files.

NOTE: The minification & bundling occurs within the Application_OnStart event. If you don't see core.css or theme.css being automatically generated you may need to recycle the web application pool within IIS or make a small change to the web.config file to force the application to recycle which will trigger the "Application_OnStart" event to fire.

The core.css and theme.css files don't appear?

Once you loaded any InstantKB page after deleting core.css, theme.css and setting InstantASP_DebugMode to true you should see InstantKB will automatically generate the core.css and theme.css files again from your various debug files within your skins "Styles" folder. 

If InstantKB can't generate the core.css or theme.css due to insufficient file permissions you will receive an exception at run-time indicating which users does not have access to create files. In this instance simply give this user write and modify access to your InstantKB "Skins" folder.

Ensuring core.css and theme.css are loaded

NOTE: To actually use the rebuilt core.css or theme.css within your InstantKB pages after you've made changes to the debug CSS you will need to set the InstantASP_DebugMode application setting within the web.config to "false". If you leave InstantASP_DebugMode set to "true" only the debug un-minified JavaScript files will be loaded into InstantKB pages.
If you wanted to include your own CSS to be bundled and minified into core.css simply ensure your CSS file follows the same naming convention as the existing CSS files within the InstantKB JS folder.

For example...

6-debug-mycss.css

This will then be added to the very end of core.css when it's generated. Again the number at the start of the CSS file indicates the order in which the scripts are bundled. This is important to ensure your CSS loads after any other dependencies.

For example our forum.css file has dependencies on common.css so common.css must be loaded first.

Where is the CSS included?

core.css and theme.css is added programmatically via the master page code-behind to the master page header element only if "InstantASP_DebugMode" within the web.config is set to false. If InstantASP_DebugMode is set to true the various debug CSS files will be loaded.

That's It!

I hope this article helps you work with the JavaScript files provided within InstantKB. IF we can assist fuerther with any questions of course please don't hesitate to contact us or open a support ticket.