Theme Customization (forum specific Skin, CSS & Images)

This is part 1 of the 2-part article that deals with Theme and Template customization for APG vNext.

• Part 2: Template Customization (Master Pages, header & footer, logo)

 
First of all, our Forum Theme system extends ASP.NET's Theme & Skin engine, and it's easier to customize if you open the software with Visual Studio 2010 / 2012.
 
To load the software into Visual Studio, choose Open Web Site from the File menu:

 
Once you have successfully loaded the software, you will see two folders that make up the Forum Theme system in APG vNext:

• ~/App_Themes/: This folder holds the CSS in Less / Images / Skins files for a Forum Theme.
• ~/App_Templates/: This folder holds the User Controls and MasterPages for a Forum Theme.

Files and Folders in ~/App_Themes/

 
Under ~/App_Themes you should see a few folders that holds the content for Forum Themes:

• AdminCP: holds the theme content for the AdminCP. A system theme you don't need to modify.
• Elegant: holds the template content for the bundled Forum Theme, Elegant. It's the default theme your members will use if you don't add your own theme.
• Progressive: another bundled Forum Theme, like the Elegant theme above.
• Mobile: holds the theme content for the mobile web app. Since the mobile web app is based on jQuery Mobile, you can customize the theme based on jQuery Mobile's theme standard.
• Setup: holds the theme content for the setup program. A system theme you don't need to modify.
• 00.lessbase.less, 01.Adhoc.less and 02.mime.less: The base (classes, functions) for Less that are inherited by all themes (see below for more info). You don't need to modify these files.

Back to top

CSS in Less

In APG vNext, we're using Less instead of pure CSS (Less files stored in ~/App_Themes/Theme_Name/lesscss). Less in short is a more powerful version of CSS, and it's very much like CSS syntactically but has a bit of programming capabilities to allow us to define classes, functions, and constants for reuse. This makes Less file smaller in size and easier to manage.
 
A simple code reuse example:

@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

Will produce

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

More examples are available on http://lesscss.org/

For syntax highlighting Less files in Visual Studio, you can install Web Workbench. You don't have to purchase the pro version because our software compiles LESS on the fly. Just edit the .less files, save, upload the less files to your server, and reload your browser.
 
All .less files are automatically included in all pages, and combined + minified + gzipped by our software to reduce latency.
 
Back to top

Theme Specific Content

We'll focus on the Elegant theme in this article. This is the theme that your non-mobile users will see by default. You want to either customize this theme or create your own theme based on this.
 
Open ~/App_Themes/Elegant, and you'll see the following files and folders:

• image: holds icons and other graphical files for this theme
• jqUI: holds the CSS files and images for the jQuery plugins we use in the software
•   lesscss: holds the Less files for this theme. Important files you may be interested in are listed in the section below
•   ASPNET.skin: the Skin file for standard ASP.NET controls
•   ASPPG.skin: the Skin file for our Custom controls including wrappers, buttons, split buttons and the WYSIWYG editor
• Prom.skin: the Skin file for Telerik controls

 
Back to top

Table and Div Wrappers

Wrapper HTML structures are defined in ASPPG.skin and CSS defined in 11.TemplateWrapper.less.
 
For ASPPG:ForumHeaderSC

• ForumHeaderSC
  
• H1FullRibbon
  
• H3FullRibbon
  
• H3HalfRibbon
  

For ASPPG:ThemeableLiteral

• Wrapper
  
• SimplerWrapper
  
• SidebarWrapper
  
• BlogWrapper
  

Back to top

Buttons

Button HTML is defined with either <ASP:LinkButton>, <ASP:HyperLink> (in ASPNET.skin) or <ASPPG:ClientButton> (in ASPPG.skin). Both are styled similarly using the same CSS classes.

• "linkbutton"
  
• "altlinkbutton"
  
• "smalllinkbutton"
  
• "smallaltlinkbutton"
  

Gradient classes can be found in ~/App_Themes/Theme_Name/lesscss/04.Gradients.less
linkbutton classes can be found in ~/App_Themes/Theme_Name/lesscss/15.Module.less
 
Back to top

Page Elements CSS Classes

You will find all classes for elements defined in page in ~/App_Themes/Theme_Name/lesscss/15.Module.less.
 
Some classes are reused in different pages. If you'd like to style a class differently on different pages, you can use the page specific class to do so. If you view the HTML code for any page, you will see a div with ID="main" (the page wrapper). This div also has a page specific class defined on it.
 
E.g. on subscription.aspx, the class on div id=main is subscriptionaspx, and on tt.aspx (the thread list page), it is ttaspx.
 
These page specific classes don't have style defined, but can be used as selector when you want to change the style for a class on a particular page. E.g. if you want to define the class linkbutton differently on tt.aspx, you can add a style like the following:

.ttaspx .linkbutton {/* define your page specific style here */}

 
Back to top

CSS Override

If you want to change certain class without modifying the less file we have, you can add your own .less files in ~/App_Themes/Theme_Name/lesscss/.
 
.less files are ordered by their filename when they are combined by the software. So, you can name your less override file by putting a number in front (see our less files for example) to change the order of inclusion.
 
Back to top

Change the Default Theme

If you create your own theme and want all users to see it as the default, you can do so by setting the DefaultTheme key in ~/config/appSettings.config

<add key="DefaultTheme" value="Elegant" /> 

Change the value to your own theme name, and your theme will become the default.
 
Back to top

Customizing the Master Pages and User Controls

Please see part 2 of this 2-part article on customizing HTML templates (master pages, user controls, and Theme Specific JavaScript).
 
Back to top