aspx the me builder

1Contents

© 2012 DevExpress Inc. 1

Table of ContentsASPxThemeBuilder (Home Page)

................................................................................................................................................. 3Main Features

................................................................................................................................................. 4Getting Started

........................................................................................................................................................................................... 5Starting Up

........................................................................................................................................................................................... 7Creating a New Theme

........................................................................................................................................................................................... 14Generating a Custom Theme Assembly

........................................................................................................................................................................................... 15Using a Custom Theme Assembly

................................................................................................................................................. 17UI Elements

........................................................................................................................................................................................... 18Start Dialog

........................................................................................................................................................................................... 19Main Window

.................................................................................................................................................................................. 20Main Menu

.................................................................................................................................................................................. 21Control Navigator Pane

.................................................................................................................................................................................. 22Control Preview Pane

........................................................................................................................................................................... 23Mode Selection Button

........................................................................................................................................................................... 24Control Preview

........................................................................................................................................................................... 25Options Panel

.................................................................................................................................................................................. 26Visual Customization Panel

.................................................................................................................................................................................. 27CSS and Skin Settings Pane

........................................................................................................................................................................... 28CSS Tab

.............................................................................................................................................................. 29Selector Navigation Pane

.............................................................................................................................................................. 30CSS Edit Pane

.............................................................................................................................................................. 30CSS Rules Tab

.............................................................................................................................................................. 32Styles.css Tabs

.............................................................................................................................................................. 32Sprite.css Tabs

........................................................................................................................................................................... 34Skin Tab

........................................................................................................................................................................................... 35New Theme Dialog

........................................................................................................................................................................................... 36Save Theme Dialog

........................................................................................................................................................................................... 37Theme Properties Dialog

........................................................................................................................................................................................... 38Open Theme Dialog

........................................................................................................................................................................................... 39Create Theme Assembly Dialog

........................................................................................................................................................................................... 40Assign External Image Editor Dialog

2


ASPxThemeBuilder

ASPxThemeBuilder > ASPxThemeBuilder

ASPxThemeBuilder is a standalone tool designed to help developers create new themes based on shippingDevExpress ASP.NET Themes. The primary objective of the product is to simplify the otherwise cumbersomeaspects associated with Theme customization. ASPxThemeBuilder provides numerous options with which tonavigate through Theme elements - be it locating a visual element with one click, browsing the element trees ofindividual controls and exploring hierarchies of the CSS classes used to render a given control.

Use the following links to find more information on DevExpress Theme Builder for ASP.NET.

Main FeaturesOutlines the essential capabilities provided by ASPxThemeBuilder.

Getting StartedGuides you through a simple scenario of creating, editing, saving and applying a theme in your webapplication.

UI Elements

Note

Make sure that the version of the ASPxThemeBuilder tool conforms with the version of Developer Expresscomponents used within the specified web project. If necessary, you can use the Developer ExpressProjectConverter tool to update the project, so that it uses the most recent version of Developer Expresscomponents.

Main Features 3


Main Features

ASPxThemeBuilder > Main Features

The DevExpress ASPxThemeBuilder allows you to:

Create new or modify previously generated Themes;

Select individual controls and their elements using the Control Navigator (left most pane);

Activate/Disable selection mode above the Preview pane. If active, you can select control elements withinthe preview, much like FireBug;

View the CSS rules used for rendering the selected control element. You can edit them as text or use thecontrols below the Preview pane;

Edit the skin files for the selected control by using the Skin pane;

Modify images (for CSS and skins) using an external editor, which can be specified via the Theme Builder'sOptions page;

Save modified Themes in the selected folder;

Change Theme properties (name, control set) using the Theme Properties form;

Build a custom Theme assembly and use it in your web project.

Getting Started 4


Getting Started

ASPxThemeBuilder > Getting Started

Topics in this section:

Starting Up

Creating a New Theme

Generating a Custom Theme Assembly

Using a Custom Theme Assembly

Getting Started 5


Starting Up

ASPxThemeBuilder > Getting Started > Starting Up

ASPxThemeBuilder can be easily launched in a different ways.

Open from the Start menu

Choose ASPxThemeBuilder from the Start -> All Program s -> Developer Expres s v2012 vol 1 ->Com ponents -> Tools -> ASPxThem eBu ilder.

Open directlyRun the ASPxThemeBuilder.exe file. Typically, this tool is located at the following path after installation:

C:\Program Files \DXperience 12 .1\Tools \W eb Form s \ASPxThem eBu ilder.exe

When launched, the tool displays the following window and a start-up dialog.

Getting Started 6


In the dialog, you opt to create a new theme or open an existing one for further modification.Note

When using ASPxThemeBuilder, ensure that the Microsoft.mshtml.dll primary interop assembly is installed on end-user computers. To deploy this assembly, use the vs_piaredist.exe package installed with Visual Studio. Thepackage can be found in the C:\Program Files \Com m on Files \Merge Modu les folder by default.

Concepts




Getting Started 7



ASPxThemeBuilder > Getting Started > Creating a New Theme

This tutorial will help you learn how to create a new theme based on a DevExpress theme, customize this newtheme and save it for further use in your ASP.NET applications.

The tutorial contains the following steps.

1.Create Theme

2.Modify Theme

3.Save Theme

4.Open Theme

In this lesson, you will create a custom theme based on the DevEx theme. We will customize the style of groupheaders by changing the font style, modifying the color of expand/collapse glyphs, change the spacing betweengroups and increase the side padding setting. We will also alter the background color of the hovering item.

Create Theme

1.Run ASPxThemeBuilder (see the Starting Up topic to learn more).

In the displayed start-up dialog box, click New Theme.

Note that within the opened ASPxThemeBuilder window, you can click the File menu and click New (oruse the CTRL+N keyboard shortcut) for the same purpose.

As a result, the New Theme dialog box will be displayed.

Getting Started 8


2.In the Name box, you can enter a name of the newly created theme. In this lesson, type MyDevExThem e.

3.In the Based on combo box, select a DevExpress theme to be the base for the new theme. In thislesson, leave it set to the DevEx theme.

4.In the Products check box list, select the DevExpress products to which the created theme should beapplied. Click to clear the All check box and select just the ASPxperience check box.

5.Click OK to close the dialog.

The DevEx theme will be cloned for the selected products. The cloned copy will be placed into a temporarydirectory. Later on, you can save the theme files into a custom location by using the Save or Save As... menu itemand by specifying the path you desire.

Modify Theme

6.In the leftmost Control Navigator Pane of the opened application window, select the control whoseappearance should be modified. Click ASPxNavBar. In the Control Preview Pane, you can see a previewfor the control you are customizing.

Getting Started 9


7.To change the font of all group headers to bold, do the following.

Select the Group Header element (by clicking within the Control Navigator Pane or within the ControlPreview Pane).

Click the Bold button in the Text - Decoration section of Visual Customization Panel.

Note that the corresponding code is added to the current rules in CSS Rules Tab. You can modifyCSS rules directly in code, typing a similar code.

8.Change the left and right paddings of a group header using the text editor of the CSS Rules Tab.Note

An element can have several CSS classes. The lower class within the tab, the higher priority it is among otherclasses.

Getting Started 10


Find the attribute padding and add the 10px to the attribute value.

Click Apply.

9.To change the expand/collapse button images, do the following.

Click the collapse button ( ) in Control Preview.

Click the Edit button in the Background - Image section of the Visual Customization Panel.

If you edit an image for the first time, select an external graphics editor that you would like to use forediting images and click OK. Note that you can change the editor later if you click the Tools menu, andthen click Options.

An image sprite will be opened in the editor. Change the color of expand/collapse button images (seethe image below). Save and close the image.

Since the image is modified using an external editor, click the Refresh button ( ) to synchronizeControl Preview with the modified image.

10.Some control properties cannot be specified in a CSS, so you should set them in a skin.

Getting Started 11


To change spacing between groups, click the Skin Tab. The tab lists navigation bar properties related toASPxNavBar control properties. In the GroupSpacing box, type 10.

11.To change a navigation bar item hover color, do the following.

Click the Item element in Control Preview or in the Control Navigator Pane.

Click the dxnbItem Hover_MyDevExThem e CSS class in Selector Navigation Pane to customize just ahover style.

Clear a default image in the Image box of the Visual Customization Panel.

Choose an item color in the Color box.

To see changes in action, click the Selection Mode button ( ) to turn off a Selection Mode. In thiscase, you can interact with the control in a standard way as in a web browser.

You can see a result at the image below.

Getting Started 12


Save Theme

12.To save your theme, click the Save button ( ) in the toolbar or on the File menu, click Save or pressthe CTRL + S keyboard shortcut.

13.In the opened Save Theme dialog box, select or type the path to a folder where you want to saveyour theme and click OK.

Your theme is saved in a folder with the theme's name (in our case the full path is D:\MyThem es \MyDevExThem e). The theme folder contains CSS files, skin files for all controls of thespecified product, and all necessary images. Note that you can change the theme name and the list ofincluded products using the Theme Properties dialog box. To open this dialog box on the File menu,click Theme Properties.

Open Theme

You can open a previously saved theme to modify it.

To open a custom theme, do one of the following.

Run ASPxThemeBuilder and click the Open Theme in the displayed start-up dialog box.

Getting Started 13


On the File menu, click Open...

Press CTRL + O keyboard shortcut.

As a result, the Open Theme dialog will be displayed.

In the Location box, select or type the folder where the theme is placed.

The Theme combo box lists themes contained within the selected location. Select a theme you desire toopen.

Click OK to close the dialog.Note

We recommend that you use ASPxThemeBuilder to open custom themes, but not shipped DevExpress themes. If youwish to slightly modify one of the predefined DevExpress themes, do not open it directly. Instead, create a newcustom theme basing it on the desired DevExpress one, and then make required changes within this custom theme.

Concepts

To learn how to create a theme assembly, follow the Generating a Custom Theme Assembly topic.

To learn how to apply the created theme assembly, follow the Using a Custom Theme Assembly topic.

Getting Started 14



ASPxThemeBuilder > Getting Started > Generating a Custom Theme Assembly

In this tutorial, you will learn how to create a theme assembly from your custom theme. To learn how to create acustom theme, see the Creating a New Theme topic.

To create a theme assembly, follow the steps below.

1.Within ASPxThemeBuilder, click the File menu, and then click Create Assembly... As a result, the CreateTheme Assembly dialog box will be displayed.

2.The Assembly name box allows you to specify the name for the newly created assembly. In this lesson,type MyThem eAssem bly.

3.Leave the Auto-generated check box selected.

4.In the Location combo box, you can type or select a folder where themes for the assembly are placed.Leave the current D:\MyThem es folder.

5.The Themes check box list displays a list of themes located within the specified folder. You can selectthemes to be included to the assembly you create. In this lesson, we have only the MyDevExThem etheme. Select it and click OK to create the assembly.

The assembly will be placed at the selected location.Note

When you update a DevExpress product version, you should re-create an assembly under the new version ofASPxThemeBuilder.

Concepts

To learn how to apply the created theme assembly, see the Using a Custom Theme Assembly topic.

Getting Started 15



ASPxThemeBuilder > Getting Started > Using a Custom Theme Assembly

In this topic, you will learn how a custom theme can be used to customize the appearance of a website. As anexample, we will use a custom MyThem eAssem bly assembly that contains the MyDevExThem e theme described inthe Creating a New Theme and Generating a Custom Theme Assembly topics.

To apply a custom theme assembly in your application it is necessary to add a theme assembly to the project'sreference files. All required source files (images, CSS files, and skins) are automatically obtained from the themeassembly.

Let's start by adding the required file to your application.

1.Right click your site in Solution Explorer and click Add Reference....

2.Click the Browse tab and specify the folder with your theme (D:\MyThem es) in a Look In combo box.Select the MyThemeAssembly.dll and click OK.

It adds the assembly to the project's Bin folder.

Getting Started 16


3.Add the following code to the Global.asax.cs file.

C#Copy Code

void Application_Start(object sender, EventArgs e) { MyThemeAssembly.ThemesProviderEx.Register();}

4.Now you can apply the MyDevExTheme theme to a website. For this purpose, set the theme attributewithin devExpress section of web.config file to MyDevExTheme.

C#Copy Code

<devExpress> <themes enableThemesAssembly="true" styleSheetTheme="" theme="MyDevExTheme" /> ...</devExpress>

5.Run the application and enjoy your site in the MyDevExTheme theme.

Note

You can use the DevExpress ASP.NET Project Wizard to specify a theme for your site. The Wizard automatically addsa reference to an assembly to your project and sets the Theme attribute of web.config.

See AlsoApply a Theme with the DevExpress MechanismApply a Theme with the ASP.NET Mechanism

http://documentation.devexpress.com/#AspNet/CustomDocument11724

http://documentation.devexpress.com/#AspNet/CustomDocument11725

UI Elements 17


UI Elements

ASPxThemeBuilder > UI Elements

Topics in this section include:

Start Dialog

Main Window

New Theme Dialog

Open Theme Dialog

Theme Properties Dialog

Save Theme Dialog

Create Theme Assembly Dialog

Assign External Image Editor Dialog

UI Elements 18


Start Dialog

ASPxThemeBuilder > UI Elements > Start Dialog

The Start Dialog opens when you launch ASPxThemeBuilder. It allows you to create a new theme or open apreviously created theme. When the button is pressed, the New Theme Dialog or Open Theme Dialog is invoked.

UI Elements 19


Main Window

ASPxThemeBuilder > UI Elements > Main Window

The ASPxThemeBuilder Main Window contains the following main elements.

Main Menu

Control Navigator Pane

Control Preview Pane

Visual Customization Panel

CSS and Skin Settings Pane

UI Elements 20


Main Menu

ASPxThemeBuilder > UI Elements > Main Window > Main Menu

The Main Menu contains various commands grouped in sub-menus. Some commands have keyboard shortcutswritten next to them, and duplicated with commands available in a toolbar.

To switch focus on the Main Menu, press ALT.

UI Elements 21


Control Navigator Pane

ASPxThemeBuilder > UI Elements > Main Window > Control Navigator Pane

The Control Navigator pane is placed at the leftmost part of ASPxThemeBuilder and allows you to select a controlor control elements for customization. The selected element is shown in Control Preview.

UI Elements 22


Control Preview Pane

ASPxThemeBuilder > UI Elements > Main Window > Control Preview Pane

The Control Preview pane is the central pane of the ASPxThemeBuilder Main Window.

It contains the following elements.

Mode Selection Button

Control Preview

Options Panel

UI Elements 23


Mode Selection Button

ASPxThemeBuilder > UI Elements > Main Window > Control Preview Pane > Mode Selection Button

The Mode Selection button is placed at the top of Control Preview Pane and allows you to turn on/off theselection mode.

UI Elements 24


Control Preview

ASPxThemeBuilder > UI Elements > Main Window > Control Preview Pane > Control Preview

The Control Preview is placed in the central part of the Main Window and shows a control you are customizing.The control layout within the preview can be modified using Options Panel options. The Control Preview allowsyou to select a control or control elements for customization. This element synchronizes with the selected elementwithin the Control Navigator Pane.

UI Elements 25


Options Panel

ASPxThemeBuilder > UI Elements > Main Window > Control Preview Pane > Options Panel

The Options panel is placed at the top right corner of Control Preview Pane and contains the current controlproperties that allow you to modify its layout within Control Preview.

UI Elements 26


Visual Customization Panel

ASPxThemeBuilder > UI Elements > Main Window > Visual Customization Panel

The Visual Customization Panel is placed under the Control Preview Pane and contains controls that can be usedfor editing CSS rules.

UI Elements 27


CSS and Skin Settings Pane

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane

The CSS and Skin Settings pane is ASPxThemeBuilder Main Window's rightmost pane.

It contains two tabs: CSS Tab and Skin Tab.

UI Elements 28


CSS Tab

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab

The CSS tab is placed on the CSS and Skin Settings Pane and contains two panes.

Selector Navigation Pane displays a list of CSS classes that are used for rendering a selected control'selement.

CSS Edit Pane contains a number of tabs with text presentation of CSS files that are used for rendering aselected control.

UI Elements 29


Selector Navigation Pane

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab > Selector NavigationPane

The Selector Navigation pane is placed at the top of the CSS Tab and displays a list of CSS classes, which areused for rendering a selected control's element.

UI Elements 30


CSS Edit Pane

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab > CSS Edit Pane

The CSS Edit pane is placed at the bottom of the CSS Tab and contains a number of tabs with text presentationof CSS files, which are used for rendering a selected control.

The CSS Edit pane can contain:

One CSS Rules Tab;

One or several Sprite.css Tabs;

One or several Styles.css Tabs.

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab > CSS Edit Pane > CSSRules Tab

The CSS Rules tab is placed within the CSS Edit Pane and contains CSS rules related to a CSS class selected inthe Selector Navigation Pane. If no CSS class is selected, the pane is not shown.

UI Elements 31


Note

An element can have several CSS classes. The lower the class within the CSS Rules tab, the higher priority it isamong other classes. So class rules with lower priority can be overlaid.

UI Elements 32


ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab > CSS Edit Pane >Styles.css Tabs

A theme can correspond to one or several style CSS files. Every file is shown within a particular Styles.css tab.The tabs are placed within the CSS Edit Pane.

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > CSS Tab > CSS Edit Pane >Sprite.css Tabs

A theme can contain one or several sprites. Every sprite CSS file is shown within a particular Sprite.css tab. Thetabs are placed within the CSS Edit Pane.

UI Elements 33


UI Elements 34


Skin Tab

ASPxThemeBuilder > UI Elements > Main Window > CSS and Skin Settings Pane > Skin Tab

The Skin tab is placed on the CSS and Skin Settings Pane and contains a property grid for the current control. Thetab allows you to change control properties related to its customization that you cannot change through CSS files.

You can create several skins for a control within one theme. To create or delete a skin, use the Add New Skin orDelete Skin buttons respectively.

UI Elements 35


New Theme Dialog

ASPxThemeBuilder > UI Elements > New Theme Dialog

The New Theme dialog allows you to create a new theme.

To invoke this dialog, do one of the following.

Click New Theme in Start Dialog.

Click New... on the File menu.

Click the New Theme button ( ) on the toolbar.

Press CTRL+N keyboard shortcut.

The dialog box contains the following elements:

The Name box contains the name of the newly created theme.

The Based on combo box contains a list of DevExpress themes that you can use as a base for the newtheme.

The Products check box list allows you to select the DevExpress products to which the created themeshould be applied.

Note

The theme name and a list of included products can be changed later via Theme Properties Dialog.

UI Elements 36


Save Theme Dialog

ASPxThemeBuilder > UI Elements > Save Theme Dialog

The Save Theme dialog allows you to save a theme.


Click Save or Save As... on the File menu.

Click the Save Theme button ( ) on the toolbar.

Press CTRL + S keyboard shortcut.

The dialog box contains the Location box that allows you to select or type the path to a folder where you wish tosave your theme. A theme is saved in a specified location within a folder with the theme's name. The theme foldercontains CSS files, images, and skin files for controls of included products. Note that you can change the themename and the list of included products using the Theme Properties Dialog.

UI Elements 37


Theme Properties Dialog

ASPxThemeBuilder > UI Elements > Theme Properties Dialog

The Theme Properties dialog allows you to change the current theme name and a list of included products.

To invoke this dialog, click Theme Properties... on the File menu.

The dialog box contains the following elements.

The Name box contains the name of the newly created theme and allows you to change it.

The Based on combo box displays a theme that is a base for the current one.

The Products check box list displays and allows you to change the DevExpress products to which thecreated theme should be applied.

UI Elements 38


Open Theme Dialog

ASPxThemeBuilder > UI Elements > Open Theme Dialog

The Open Theme dialog allows you to open a custom theme to modify it.


Click Open Theme in Start Dialog.

Click Open... on the File menu.

Click the Open Theme button ( ) on the toolbar.

Press CTRL + O keyboard shortcut.


The Location box allows you to select or type the folder where the theme is placed.

The Theme combo box lists themes contained within the specified location. Select the theme you desire toopen.

Note

We recommend that you use ASPxThemeBuilder to open only custom themes, but not any shipped DevExpressthemes. If you want to slightly modify one of predefined DevExpress themes, do not open it directly. Instead, createa new custom theme basing it on the desired DevExpress one, and then make the required changes within thiscustom theme.

UI Elements 39


Create Theme Assembly Dialog

ASPxThemeBuilder > UI Elements > Create Theme Assembly Dialog

The Create Theme Assembly dialog allows you to create a theme assembly from custom themes.

To invoke this dialog, click Create Assembly... on the File menu.


The Assembly name box allows you to specify the name for the newly created assembly.

The Assembly ID spin editor allows you to specify the assembly unique identifier. By default, this identifieris generated automatically. To specify it manually, clear the Auto-generated check box.

The Location combo box allows you to type or select a folder where themes for the assembly are placed.

The Themes check box list displays a list of themes located within the specified folder. You can selectthemes to be included in the assembly you create.

The created assembly is placed to the location specified in the Location combo box.

UI Elements 40


Assign External Image Editor Dialog

ASPxThemeBuilder > UI Elements > Assign External Image Editor Dialog

The Assign External Image Editor dialog allows you to select an external graphics editor that you would like touse for editing theme images.

This dialog box is shown when you edit an image in ASPxThemeBuilder for the first time. You can change the editorlater if you click the Tools menu, and then click Options.

aspx the me builder

Documents