Posted tagged ‘Site’

Creating a Custom Skin for the App Portal Website

October 24, 2013

 

The App Portal comes with a predefined set of skins that can be applied to change the look and feel of the App Portal Website.  These skins can be modified in a number of ways to be customized for your environment.  This post will walk you through the steps to create a new custom skin that will later be applied to the App Portal Website.

Creating a Custom Skin

Many of the elements in App Portal are constructed from Telerik RAD Controls for ASP.NET AJAX. These controls can be applied to App Portal like a custom skin. This allows flexibility in branding the App Portal Website. This method of branding for App Portal provides a graphically driven method of modifying the look and feel of the App Portal Website without custom coding. This is accomplished through the Telerik website: http://stylebuilder.telerik.com.

There are two (2) steps in creating a custom skin and applying it to the App Portal Website. The two steps are:

  • Creating a custom skin for the App Portal Website.
  • Applying a custom skin on the App Portal Website.
Step 1: Creating a Custom Skin for the App Portal Website

To create a custom skin to use in App Portal, follow the steps below.

1.      Launch an internet browser and connect to http://stylebuilder.telerik.com.

2.      On the Telerik Visual Style Builder page, click on the New Skin link.

image

 

3.      Enter a name for the skin in the Skin Name field, and then select a Base Skin from the drop-down list.

image

 

4.      Under the Skin Controls section, enable the checkboxes provided below.

a.      Button

b.      Calendar

c.      ComboBox

d.      DropDownList

e.      Editor

f.       FormDecorator

g.      Grid

h.      Input

i.       ListBox

j.       Menu

k.      PanelBar

l.       Rating

m.    Splitter

n.      ToopTip

o.     TreeView

p.      Window

 

image

Important:

Do not enable the Select all controls checkbox.  Microsoft Internet Explorer has a maximum of 31 style sheets that it is able to support.

 

5.      Click the Create button to begin editing the skin.

image

 

6.      Each of the controls that you selected will be listed in the right-hand pane.  Each control can be modified on the Colorize tab.  Most of the controls can be modified on the Fine-tune tab.  Modify each control as desired, ensuring to select Save wherever possible.

image

 

7.      Once you have made all desired changes, click the Download button to retrieve a compressed file containing the controls.

image

 

8.      Save the file to the desired location.

9.     Close the internet browser.

In the next post we will upload the custom skin to App Portal and apply it to the App Portal Website.

Advertisements