Appleseed Theme - Step By Step
Home / Blogs

 

Appleseed Theme - Step by step to create Appleseed Theme and Apply

 

Contents

Theme Creation

This article is about to creating a new Appleseed Theme. If you wish to learn more about how to integrate and use Theme, This topic differs from Using Themes because it discusses the technical aspects of writing code to build your own Theme rather than how to create Themes or where to obtain new Themes.

Why Appleseed Themes

Appleseed Themes are files that work together to create a layout for Appleseed site. Each Theme may be different, offering many choices for site owners to instantly change their website user interface.

You may wish to develop Appleseed Themes for your own use, for a client project. Why else should you build an Appleseed Theme?

  • To create a unique look for your Appleseed site.
  • To take advantage of Layouts and themes to generate different website results and looks.

An Appleseed Theme has many benefits, too.

  • It separates the presentation styles and Layouts from the system files so the site will upgrade without drastic changes to the visual presentation of the site.
  • It allows for quick changes of the visual design and layout of an Appleseed site.
  • It removes the need for a typical Appleseed site owner to have to learn CSS, HTML in order to have a great-looking website.

Why should you build your own Appleseed Theme? That's the real question.

  • It's an opportunity to learn more about CSS and HTML.
  • It's an opportunity to put your expertise with CSS and HTML to work.
  • It's creative.
  • It's fun (most of the time).
  • If you release it to the public, you can feel good that you shared and gave something back to the Appleseed Community.

Theme Development Standards

Appleseed Themes should be coded using the following standards:

  • Use well-structured, error-free C# and valid HTML. See C# Coding Standards.
  • Use clean, valid CSS. See CSS Coding Standards.

Anatomy of a Theme

Appleseed themes live in sub directories of the Appleseed design directory (Design/DesktopLayouts and Design/Themes). The DesktopLayouts directory holds the layouts of while the Theme's directory holds all of the Theme's stylesheet files, JavaScript files and images.

Appleseed includes a default theme in each integration. Examine the files in the default theme carefully to get a better idea of how to build your own Theme files.

For a visual guide, see this infographic on Appleseed Theme Anatomy.

Appleseed Themes typically consist of three main types of files, in addition to images and JavaScript files.

The SiteMaster.master, Which control the way the site generate the information from your Appleseed database to be displayed on the site. The Theme.xml and default.css, which controls the presentation (visual design and layout) of the website pages. Appleseed template files which control the way the site pages generate the information from your Appleseed database to be displayed on the site.

Directory Structure

Design Directory is the core which contain DesktopLayouts and Themes directories. 

DesktopLayouts folder contains Layouts. 

  

Themes folder contains fonts, icon, images, CSS and JavaScripts. 

Js folder contains the javascripts files. 

 

Core Components

At the very minimum, an Appleseed Theme consists of Below files:

Core Elements
  • SiteMaster.Master
  • DesktopAdmin.ascx
  • DesktopPortalBanner.ascx
Theme Elements
  • Theme.xml
  • default.css
  • as-admin-bar.css
  • jquery-ui-1.9.2.custom.css

In case of responsive theme, below bootstrap CSS is required.

  • bootstrap.css (If theme is based on bootstrap)
  • responsive.css

Page Layout/Structure

Stylesheet Guidelines

  • Follow CSS coding standards when authoring your CSS.
  • Use valid CSS when possible. As an exception, use vendor-specific prefixes to take advantage of CSS3 features.
  • Minimize CSS hacks. The obvious exception is browsers-specific support, usually versions of IE. If possible, separate CSS hacks into separate sections or separate files.
  • All possible HTML elements should be styled by your theme, both in post/page content and in comment content.
  • Tables, captions, images, lists, block quotes.

Components Details

Masterpage.master

This master page contains User controls and Javascripts link.

User Controls

1. DesktopAdmin.ascx

2. DesktopPortalBanner.ascx


 

3. DesktopFooter.ascx


 

JavaScript File References

<% this.Page.ClientScript.RegisterClientScriptInclude(this.Page.GetType(), "adminmenuunwrap", 
Appleseed.Framework.Settings.Path.ApplicationFullPath + "/Design/Themes/BootstrapMin/js/admin-menu-table-unwrap.js"); %> 

<% this.Page.ClientScript.RegisterClientScriptInclude(this.Page.GetType(), "adminbarmargin", 
Appleseed.Framework.Settings.Path.ApplicationFullPath + "/Design/Themes/BootstrapMin/js/admin-bar-margin.js"); %>

Note: Key name must be a different. 

If theme is based on bootstrap then add bootstrap.js, bootstrap-content-area-fix.js and bootstrap-menu-fix.js

DesktopAdmin.ascx

This user control contains the two types of menus.

  1. Before Login

  1. After Login

Once user is logged in, there will be two menus for Admin Bar.

  1. Left side menu
  2. Right side menu

Note: In responsive theme, insert the toggle button before the anchor tag of Unordered List to expand / collapse menu in responsive mode. 

DesktopPortalBanner.ascx

Use to display menu below the admin menu.

FooterBanner.ascx Use to display footer menu.

Default.css

It is a base CSS and also import some CSS like as-admin-bar, Slyder_Styles and Menu etc..

as-admin-bar.css

Use for admin menu.

  • .navbar-admin - Contain foreground and background color of admin menu.
  • .navbar-admin .navbar-nav > li:hover > a - Color effect when mouse hover on admin menu.

admin-menu-table-unwrap.js

It is working for right side admin menu. Use to convert table body to Unordered List.

admin-bar-margin.js

Contains the top margin for Admin menu.

bootstrap-menu-fix.js

If theme is based on bootstrap, this javascript replace asp.net classes and add bootstrap based class for DesktopPortalBanner menu.

Steps to create a new Appleseed Theme

Note: You need to ensure that you already have gone through the above information.

Step 1: Identify one of existing site which you would like to create new theme based on it e.g. BootstrapMin if you would like to create new responsive theme, MetroUI if you would like to create new theme based on it.

Step 2 Based on your selected existing theme, you can create new theme copy and change files/folder reference from all components to map with newly created theme folder e.g. JS file references, images reference etc

Step 3: In case you want to create new theme from the beginning, first create a sub-folders as per your theme name in the root/Design/DesktopLayouts and root/Design/Themes

Step 4: Add/override files from your download themes as below

  1. default.css
  2. bootstrap.css (if based on bootstrap)

Note: Remove body class. It will override the bootstrap CSS.

Step 5: Change the color code from the following files so it will appear on related page sections/area.

Admin menu - refer As-admin-bar.css and below classes to be modified as needed

.navbar-admin {  background-color: #dd4814 !important;}

.navbar-admin .navbar-nav>li>a { color: #ffffff; }

.navbar-admin .navbar-nav > li:hover > a {color: #ffffff;  background-color: #97310E !important}

Step 6: Top Menu - Refer DesktopPortalBanner.ascx component

.navbar-default - This class is apply in main div. If you want to change the dropdown menu text color and background color write the below code in default.css


 
 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #ffffff;
        background-color: #97310E !important;
 }

Step 7: Footer

In default.css, add new .footer_box class


 
 .footer_box ul li a {
	color:  #dd4814 !important;
 }

Above class is used to replace the footer color.


 
 .footer_box ul li a:hover {
	color:  #97310E !important;
 }

This class is used to replace the footer color when mouse hover. This class is working for only UL LI of footer.

Verify newly created theme

To verify newly created theme, please executing below cases and any other test cases related to theme specific.

1 Code Review

1.1 Review Layout Files for Hardcoded Directories

1.2 Review Theme Files for Hardcoded Directories

2 Create "One Column" Page

2.1 Add HTML Document Module with Lorem Ipsum Content

2.1.1 Header Pane

2.1.2 Left

2.1.3 Center

2.1.4 Right

2.1.5 Footer Pane

3 Create "Two Columns" Page

3.1 Add HTML Document Module with Lorem Ipsum Content

3.1.1 Header Pane

3.1.2 Left

3.1.3 Center

3.1.4 Right

3.1.5 Footer Pane

4 Create "Three Columns" Page

4.1 Add HTML Document Module with Lorem Ipsum Content

4.1.1 Header Pane

4.1.2 Left

4.1.3 Center

4.1.4 Right

4.1.5 Footer Pane

5 Apply newly created theme/layout on above created pages and review them one by one

6 Apply newly created theme/layout from Site Settings for entire site and review above created test pages

7 In case of responsive, all pages needs to be reviewed in all possible devices e.g. iPhone, Smart Phone, iPad, Laptop, Tab etc and ensure pages are not breaking anything and content is being rendered accurately.