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.
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/
Files or folders marked with are particularly important. You may want to customize these files.
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 topCSS 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 topTheme 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
Click here to read more about the Less & Css files in the software
Less files
Once you are in the ~/App_Themes/
Theme_Name/
lesscss directory, you'll find that most less files are numbered. This numbering system indicate the order they are combined into the final CSS. Here are what you'll find in the folder:
- 02.Colors.less:
various color system variables we use throughout the less files. You can set link color, text color, etc. in this file - 03.Fonts.less:
the font-family, font-size and line-height system variables for the UI text and message text are defined here - 04.Gradients.less:
the 2 types of gradients you see on buttons are defined here (resultant CSS classes are .gradient1 and .gradient2) - 05.Base.less:
default styles for html, body and various html elements are defined here (h1-h5, iframe, img, fieldset, etc.) - 06.FormRelated.less:
default styles for form elements are defined here (input, select, textarea) - 10.Layout.less:
the elements that defines the layout of the page are defined here (#wrap, #topbannerbackground, #main, .footer, etc.) - 11.TemplateWrappers.less:
see below about Table and Div wrappers - 15.Module.less:
this is the most important style definition file. It includes almost all classes we use in the software, including how we style the margins, paddings for various elements and images. You'll find most of what you want here. This file makes use of the system variables defined in the above .less files - ... the rest
they aren't as important, because you probably aren't going to customize them.
CSS files:
You'll also find a few CSS files under the folder ~/App_Themes/
Theme_Name/
jqUI. These are the style files for the various jQuery plugins we use in the software. In most cases you won't have the need to edit them. However, the following files may interest you:
- 1.jquery-ui-xxxxxxxx.custom.css
jQuery UI CSS files. The xxxxx is the version number of jQuery UI we use in the software. We may update it from time to time when necessary - jquery.qtipcustom.css
qTip is the jQuery plugin responsible for our menu and various popup notification you see in the software. We define a few key styles for use in our software (the default css for qTip can be found in jquery.qtip.min.css)
close
Back to topTable 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 topButtons
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.lesslinkbutton classes can be found in ~/App_Themes/
Theme_Name/
lesscss/15.Module.less Back to topPage 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 topCSS 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 topChange 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 topCustomizing 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
post edited by APGvNext Sam - 2014/06/09 15:21:50