[FAQ]Template Customization (Master Pages, header & footer, logo)

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

Template Customization (Master Pages, header & footer, logo)

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

 
As mentioned in part 1 of the article, to customize the template, you can open the software as a Web Site using Visual Studio 2010 / 2012.
 
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.

Content in ~/App_Templates

Files or folders marked with are particularly important. You may want to customize these files.

 
Under ~/App_Templates you should see 4 template folders:
  • AdminCP: holds the master pages for the AdminCP. A system template you don't need to modify.
  • BaseTemplate: holds the default templates (master pages and user controls). You can override these defaults in your own forum theme, but don't modify the files in it directly.
  • 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.
  • Mobile: holds the template content for the mobile web app. Since the mobile web app is based on jQuery Mobile, the templates are created to work with jQuery Mobile's HTML framework.
  • MasterPage.master & MasterPage.master.vb: The base master page that includes the essential HTML elements makes up a page, i.e. HTML, HEAD, BODY and FORM. A few server controls that are needed on all pages are included in this page too. You don't need to modify these files.
Back to top

Template Content

BaseTemplate (system template)

Open ~/App_Templates/BaseTemplate, and you'll see the following files and folders:
  • UC: contains all user controls + item templates for Repeater. Important templates are:
    • Authentication: templates for social media integration and the login form
    • Home: templates for featured articles and slider
    • MasterPage: templates for the HTML footer
    • MessageDisplay: templates for posts in forum
    • TopNav: templates for the top navigation bar (drop down menu), including the top right login / logout link + the main search box
  • popup.master: the master page for popup dialog used in the software
  • Regular.master: the master page for all front end pages that include the header and footer
  • userCP.master: the master page for user control panel. Uses Regular.master as parent master page.
BaseTemplate is not a theme you can select on the theme selection drop down. It's a container for default user controls and master pages.

 
Back to top

Elegant (bundled template)

Open ~/App_Templates/Elegant, and you'll see the following files and folders:
  • UC: contains user controls that override the defaults in BaseTemplate (you won't find many files because we just use the defaults)
  • TemplateInfo.xml: the file you use to record all template overrides (master page + user control) in the theme. Absolutely necessary if you plan to pre-compile the software for deployment.
  • ThemeSpecific.js: sets the defaults for some jQuery plugins and includes a few theme specific plugins.
When you want to override the defaults in your own theme, add corresponding files (same folder & file name) inside ~/App_Templates/Elegant/UC/.
 
An example: the default ForumDisplay/ItemTemplate.ascx file is overridden in the Elegant theme.
 
It's the same process for overriding master pages.
 
If you plan to compile the software before deployment, make sure you record your own overrides in ~/App_Templates/BaseTemplate (or your template name)/TemplateInfo.xml
 
This file is important because once the software is compiled, all ascx files are erased and the software can't know whether you've overridden any defaults. You can see an example of the file in the Elegant theme.

 
If you don't plan to compile the software for deployment, you can safely delete ~/App_Templates/BaseTemplate (or your template name)/TemplateInfo.xml as the software can find your overrides by scanning the file system.

 
 
Back to top

Change your logo in the header

You'll find the header showing our ASPPlayground.NET logo in ~/App_Templates/BaseTemplate/UC/TopNav/TopNavigation.ascx. It is a short HTML based file that contains the Top Navigation Menu and Breadcrumb.
 

 
The code you want to look for is:
        <div class="ForumHeaderRow hidden">
            <a class="head" href="<%= Applications("Sitehome")%>">ASPPlayground.NET</a>
        </div>

 
You can change it so that it shows your logo image instead, like this:
        <div class="ForumHeaderRow">
            <a href="<%= Applications("Sitehome")%>"> <!--notice that the "head" class is gone-->
                <img src="<%= ResolveUrl("~/image/logo.png") %>">
            </a>
        </div>

 
You can also override this file by duplicating it in ~/App_Templates/BaseTemplate (or your template name)/UC/TopNav/TopNavigation.ascx instead of modifying it directly.

How do I change the height of the top navi background to match my logo?

For the theme Progressive, the top background height can be changed easily with CSS:
~/App_Themes/Progressive/lesscss/15.Module.less and 10.Layout.less
  • for class.topnavTabs, change the top value to match your logo
  • for #topbannerbackground, change the height to match your logo
 
For the theme Elegant, we use a different method to set the background (img). The top background image is defined in the CSS for the "topbannerbackground" element in ~/App_Themes/Elegant/lesscss/10.Layout.less (more info on .less in part 1 of the article).
 
The location of the background image is ~/App_Themes/Elegant/image/bg.png
 
If you don't want to change the background image, your height limit for the logo is 80px.
 
If your logo doesn't align well with the background image (overlapping), you can simply use CSS to change your logo image alignment, for example:
 
        <div class="ForumHeaderRow">
            <a href="<%= Applications("Sitehome")%>"><img src="..." style="top:-10px" /></a>
        </div>

 
For version before 4.2, click here...
When you override this file, make sure you also copy
~/App_Templates/BaseTemplate (or your template name)/UC/TopNav/TopRightLoginbox.ascx and its vb file
and
~/App_Templates/BaseTemplate (or your template name)/UC/Authentication/FbTwitter.ascx and its vb file
to your template too.
close

 
Back to top

Customizing the CSS and Skin files

Please see part 1 of this 2-part article on customizing CSS.
 
Back to top
post edited by APGvNext Sam - 2014/08/30 00:07:56

Attached Image(s)

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