[FAQ]Theme Customization (forum specific Skin, CSS & Images)

Author
APGvNext Sam
vNext Dev
  • Total Posts : 13198
  • Joined: 2001/05/23 00:00:00
  • Status: offline
2013/02/22 18:39:27 (permalink) Customization
0

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 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
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 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
post edited by APGvNext Sam - 2014/06/09 15:21:50

Attached Image(s)

#1
Jump to:
© 2017 APG vNext Commercial Version 5.5