CodeCharge Studio

Using Artisteer Designs

Designs are master pages created with the Artisteer web designer that you can apply to web pages in your project. CodeCharge Studio is installed with a number of built-in designs you can use, but you can also create and add new designs with Artisteer. See for more details about creating designs you can add to your projects. For more details about master pages, please refer to Using Master Pages.

Adding Designs to your Project

Before you can use a design, you must add the design to your project. There are several ways you can add designs.

Note, when you add a design, you may need to refresh the folder tree in the Project Explorer before your changes are visible. To refresh the folder tree, right click on the project name in the folder tree and select the Refresh option.

If there are other designs you want to add to your project, or remove from your project, select the Designs button again on the ribbor bar and then the 'Settings...' option. This will open the design options in your project settings. From your project settings, you can add or remove designs to your project, and set the default design. The default design is what gets applied to your web pages when you select the 'Apply design to this page' option from the context menu in Design mode.

Applying a Design to a Web Page

Once you have some designs in your project, you can apply, or change a design to your web page in several ways.

Changing the Design Applied to a Web Page

If you select Preview mode for your page, CodeCharge Studio will show you how the design will affect your page. You can view the effect other designs will have by selecting the Designs button on the ribbon bar and hovering the cursor over different designs. Once you have found a design you want to use, simply click on the design to make it the default and CodeCharge Studio will apply the design to the page. Note, this will not work unless you have a design applied to the page and you are using the {CCS_PathToMasterPage} variable to specify the location of the master page for the design (Using Master Pages, Using the CCS_PathToMasterPage Variable )

Remove a Design Applied to a Web Page

You can remove a design from a web page in two ways:

You can remove designs from your project in your project settings, but you cannot remove the default design since some of your pages may be using this design.

Changing the Designs folder

Typically the files for your designs are placed in a folder called 'Designs', however you can select a different folder in your project settings. Select Home | Settings on the ribbon bar, then the Designs tab.

Applying designs dynamically at run-time

The designs in your project can be selected dynamically when users request your web pages. Like CodeCharge Studio styles, you have several options you can configure that determine how a specific design is requested. These options are configured in your project settings. Note, for dynamic selection to work correctly, the designs in your project,specifically the 'designs' folder, must be published entirely with your project.

Option Description
Designs folder This is the name of the folder in your project where the designs can be found. Note, this folder must be published with your project otherwise the design selection will fail.
Query String parameter Select this option if you would like the design to be selected via an URL (Query String) parameter. The name of the design is the same as the folder name where the design exists (e.g. ?design=blueskies)
Parameter name The name of the URL parameter to be used for selecting a design. The default is "design".
Session variable Select this option if you would like the design to be selected via a session variable. If the "Query String parameter" option is also checked then the session variable will be automatically set when a design parameter is supplied in the URL. Otherwise, you will need to custom modify the code generated by CodeCharge Studio to set the session variable.
Session variable name The name of the session variable to be used for selecting a design. The default is "design".
Cookie Select this option if you would like the design to be selected via a cookie. If the "Query String parameter" or "Session variable" options are also checked then the cookie will be created and set automatically when a design is selected via an URL parameter or session variable. Otherwise, you will need to custom modify the code generated by CodeCharge Studio to set the cookie.
Cookie name The name of the cookie to be used for selecting a design. The default is "design".
Expiring in The time duration that the cookie should live.

Sample steps to test the dynamic design assignment:

  1. Go to Project Settings -> Designs, and click Add... to add and copy several different designs into your project.
  2. Set one of the designs to be the default using the Default button.
  3. Press F9 to generate the application and publish the files, including the new designs.
  4. View your live page and append design=DesignName to the URL.

    For example:


Once a design is specified by a user via an URL parameter, it will be saved automatically in a session variable or cookie, if you enable them. This allows Web visitors to come back to your site and see the last applied design (i.e. without resubmitting the design parameter in the URL), as long as the session or cookie has not expired.

Dynamic design selection only works so far as the designs are the same and consistent with your application. If you change any panels, or you change how the content on your web pages map to the placeholders in the master page, or templates, this may not work correctly.

Using the CCS_PathToMasterPage Variable

You may notice that when you apply a design, CodeCharge Studio updates the Master Page property for the selected page. The path to the master page is based on the internal CCS variable called CCS_PathToMasterPage. This variable reflects the currently selected default design. When you publish your website, this is the design that will be selected by default. Using this variable instead of a relative folder location serves several purposes.

Using Stylesheets

When you run the Application Builder, you may notice that you can apply a design to a page, or a style, but not both. This is because the CSS coding in the design, or in the style may conflict with each other. To prevent problems, CodeCharge Studio only allows you to apply one or the other type of styling. However, this doesn't mean that you cannot later apply both a style and a design to your web page, however it is recommended that if you use styles, apply them to components only, not the whole page, and avoid setting a default style (except Basic) since all new pages will be created with this style. Refer to Working with Styles for more information about working with Styles and designs.

On-line, printable versions and updates