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

Thank you for your feedback!


Editing CSS by hand within InstantForum

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

By default all CSS used by InstantForum 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 InstantForum 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 InstantForum 2013 or above. Earlier versions of InstantForum use dynamic run-time script bundling and minification. We moved to compile time script minification and bundling for lower run-time overhead in InstantForum 2013 and above.

What is core.css

core.css is the main minified and bundled CSS file loaded into all InstantForum pages. This file contains all the client side styles required by InstantForum. 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-font-awesome.css
3-debug-forum.css
4-debug-tabstrip.css
5-debug-mobile.css

What is theme.css

Similar to core.css, theme.css is also loaded on every InstantForum 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 InstantForum 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.

Our minifier and bundling engine will traverse all "Styles" folders within each of your InstantForum 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 InstantForum installation in a web browser and InstantForum 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 within IIS or make a small change to the web.config file to force the application to recycle which will cause the "Application_OnStart" even to fire.

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

Once you load any InstantForum page after deleting core.css, theme.css and setting InstantASP_DebugMode to true you should see InstantForum will automatically generate the core.css and theme.css files again from your various debug files.

If InstantForum 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 InstantForum "Skins" folder.

Ensuring core.css and theme.css are loaded

Note: To actually use the rebuilt core.css or theme.css within your InstantForum 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 InstantForum 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 InstantForum 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 InstantForum. IF we can assist fuerther with any questions of course please don't hesitate to contact us or open a support ticket.