Styles

Overview

CodeCharge Studio styles are made from cascading style sheet (CSS) definition files (.css) and accompanying graphics.  Styles define fonts, colors, buttons, graphics, spacing and other layout formatting attributes.  CodeCharge Studio eliminates most of the detailed work and complexity involved in defining stylesheets.  In CodeCharge Studio, styles are a particular set of stylesheet rules that you can refer to by name and apply in one step to either a page or component.  CodeCharge Studio includes several predefined styles, plus a powerful Style Builder that allows developers to visually create new styles or modify existing ones.  Internally each Style is implemented as a standard cascading stylesheet file with the extension .css, plus accompanying images.

CodeCharge Studio also utilizes themes, which are similar to styles but in a more specialized format. They are no longer supported by CodeCharge Studio 5 but included for compatibility with previous product versions.

A style can be applied to a whole page or to individual components such as a grid, record, calendar, etc.  However, it is recommended that you use only one style per page to simplify the HTML and assure cross-browser compatibility. A style can also be applied to a  whole project, in which case, styles assigned to all pages within the project will be replaced with the newly selected style. A default style for the project can also be specified in your project settings, in which case the style will be applied automatically to newly created pages.

Styles are stored in the "Styles" sub-folder of your web project and are published to the web server in the same way. The "Styles" folder is further divided into folders named the same way as each style, for example "Styles\SandBeach", which include the corresponding .css (cascading stylesheet files) and additional sub-folders with images. Graphical images are stored in the "Images" sub-folder, for example "Styles\SandBeach\Images", while images representing text (e.g. button text) are stored in a subfolder named the same as the language code, for example "Styles\SandBeach\Images\en" for English.

CodeCharge Studio also supports dynamic styles denoted as "(Dynamic)" in the style selection dialogs . By assigning this style to a page or component you will be able to dynamically assign a specific style at run-time. When assigning dynamic styles to a component or page, CodeCharge Studio replaces the style name within the HTML with the text {CCS_Style}.  This is used as a tag that is replaced with the actual stylesheet when your web page is requested:

<link href="Themes/{CCS_Style}/Style.css" type="text/css" rel="stylesheet"> 
<img src="Styles/{CCS_Style}/Images/Spacer.gif">

User Interface

Style Selection

Many CodeCharge Studio builders include a style selection step. To apply a style, simply select it from the list of available styles. At the same time you may use the "Apply to" option if you want to apply the style to the whole page, or only the component that you're creating (e.g. record or grid form). Alternatively, click the "Style Builder..." button to open the Style Builder and modify the selected style.

The selected  style will also be set as the default project style if no default style has been selected.

Note that the list of available styles contains three special styles named "(No Style)", "(Dynamic)", and "Basic". Their purpose is as follows:

 

As you can see in the dialog, you can select either a 'page', or 'component' type of styling to apply to the forms generated by the builder.  This refers to the HTML generated for the forms.  As mentioned above, if you select 'Page', the builder will generate a type of HTML that uses one stylesheet for the whole page.  When you select 'Page', you are also selecting, or changing the page stylesheet for the whole page, therefore, this could change how other forms appear on the page, if they also were created with the 'Page' type of styling.  If you select 'Component', the builder will generate a type of HTML that uses a stylesheet just for that particular form.  This only affects the code generated by the builder for this form, not any other code that exists for other forms on the page. 

After you run the builder, and the code has been generated on your page, you change the style selection by right clicking on the component or page in design mode, and selecting the "Change style..." option in the context menu.   You can specify a different style for the page or component depending on which object you select.  That is, if you select the page, you can change only the page style.  If you select a form (e.g. record form), you can change only the component style.  If the form was originally generated using the 'page' style', changing the style to 'component' will also generate new HTML for the form.    That is, you can change the HTML for a form from 'page' to 'component', but not 'component' to 'page'.  In design mode, you may not be able to visually see the difference in styling.  If you are not certain about the styling generated for the component (e.g. Grid), look at the HTML, and refer to this section, How Styles Apply to Your HTML Code.

As mentioned before, the 'Change style..." option is not available, if you specifically assigned '(No Style)' to the page or component (e.g. Grid).

How to use Designs and Styles in Your Projects

When you have a Design applied to your page, and you run the builder, you cannot apply a 'Page' style.  Your options in the builder are to either use the CSS (i.e. style) in your design to apply to all components, or use the Design for the page styling and then individually select a different 'Component' style for the form generated from the builder.  If you do not choose a specific 'Component' style, then the forms all use the styling defined in the Design.

Artisteer designs for CodeCharge Studio include their own stylesheet and related files (e.g. icons used by CodeCharge Studio components, such as the Grid form).  Because 'Page' style depends on generic HTML, which is the same type of method that Artisteer designs use, there may be conflicts between forms you have created with 'Page' style and any Artisteer design you have also applied to your page.  To prevent such conflicts, a new 'style' has been added to the dialog called 'Use styles from Design'.  This is not really a style, like the other styles you can select from.  When you select this option, the HTML for your forms is generated mostly in the same way as it would for 'Page' style, however the stylesheet used is from the design applied to your page, not any of the CodeCharge Studio styles in your project.

If you want your generated forms to have a particular styling, select 'component' style.  The builder will generate specific HTML code for your selected style, and there should not be any conflict with the style you selected and the design applied to your page.  This way you can have both the content of your web page styled with your applied design, and have your forms styled differently with one of the selected CodeCharge Studio styles.

You may notice that when you run the builder, the preview window shows how the design applied to your page looks for the page and the form.  If you have a default style selected in your project, the preview window will also show your forms in this style, as if you selected 'Component' style.  There is always a 'style' assigned by the builder to your form, so you should check this step, otherwise, the HTML generated by the builder may not be what you want.

If your page already has some generated forms before you apply a design, CodeCharge Studio will replace your stylesheet and HTML code with code that is compatible with the design.  Again, if your forms have 'component' styling, your layout, coloring, fonts, etc. are preserved.  But since you cannot have both a 'page' style, and a 'design' style on the same page, this code may change.  If you remove a design from your page, the styling reverts back to whatever it was before you applied the design.

Note, when you create a new project, the default style is 'basic'.  If you run one of the builders (e.g. grid) and select a new 'page' style, this will also change the default style.  Every time you create a new page afterwards, this will be the default style for the page.  When you create a new page, you may not notice that a stylesheet has been applied to the page because some CodeCharge Studio styles have a background definition and some do not.  Regardless, there may be situations where you do not want a stylesheet added to the page.  For example, CodeCharge Studio does not distinguish between template files and master pages in your design and other CodeCharge Studio pages.  So when you create a new template file or master page, a stylesheet will be added that you may not want, and may conflict with any CSS (e.g. other stylesheets) in your design.   To remove this, find and remove this link:

<link rel="stylesheet" type="text/css" href="Styles/Basic/Style_doctype.css">

Managing Project Styles and Settings

Every time you apply a style to a page or component it is added to the list of project styles. The list of styles and related settings can be managed in the project settings.

The style options can be used to: 

• review all the styles used within the project
• manage styles used within the project
• select or show the default style for the project.  Note, once you have defined a default setting, every page you create will have that style.  A default stylesheet may be assigned, once you have selected a stylesheet in one of the builders.
  
  CodeCharge Studio will add a link to the default stylesheet at the top of every new page.   Once you have defined a default style, you will always have some stylesheet added to your page even if you do not intend to use that stylesheet. If you do not want a stylesheet, comment out, or delete the link at the top of your page, or in your master page.
• change how the 'dynamic style assignment' feature works
  

This is the available features in the project settings:

Style Builder

The Style Builder is a utility included with CodeCharge Studio and used for creating and modifying styles that are used to enhance the visual appearance of your page, such as forms, menus, buttons, etc. .  The style builder is a convenient way to create styles without writing complicated CSS. 

The builder can be accessed from several areas of CodeCharge Studio (e.g. from the style selection steps in the builders, or from project style settings).  The Style Builder window consists of 3 areas: options,  value selection, and preview area. The preview area shows a sample HTML page preview based on the currently selected style option. You click on an option, such as Color Scheme, choose one of the available selections, and the preview pane shows the results.

The following is the list of available options:

Additionally, Style Builder provides "Build Random Style" button, which you can use to create random styles by applying random values to the above settings. This can be useful to generate alternative style patterns that you may not have considered.

Applying styles dynamically at run-time

You may want to provide functionality within your web site to allow your visitors to change the style in which your web site appears. CodeCharge Studio can help you support such functionality by allowing you to assign the dynamic style to your web pages, using either an URL parameter, a session variable, or a cookie to define the style.   To enable this functionality, first set the  "dynamically modify styles" option in your project settings, and use the "Advanced..." button to specify the method to be used to select styles at run-time. The following options are available:

Sample steps to test the dynamic style assignment:

1. Go to Project Settings -> Styles, and click Add... to add and copy several different styles into your project.
2. Set one of the styles to be the default using the Default button.
3. Enable the Use Dynamic Styles option
4. Create a  page that uses Dynamic style.
5. Press F9 to generate the application and publish the files, including the new stylesheet files.
6. View  your live page and append style=StyleName to the URL.

   For example:

   http://localhost/NewProject1/NewPage1.php?style=School
   http://localhost/NewProject1/NewPage1.php?style=Modern
   http://localhost/NewProject1/NewPage1.php?style=Simple
   http://localhost/NewProject1/NewPage1.php?style=Innovation

Once a style is specified by a user via an URL 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 style (i.e. without the style parameter in the URL), as long as the session or cookie has not expired.

To provide users with a visual way to chose a style, implement a set of a links or a listbox that will redirect users back to your site style parameter specified in the URL, as shown in above examples.

How Styles Apply to Your HTML Code

A particular 'style' created by CodeCharge Studio consists of two main parts.  One part is the CSS stylesheet, images, and related files that define the 'style'.  The other part is the generated HTML for the components (e.g. Grid) which the 'style' applies to.   In CodeCharge Studio, a 'page' type style means that the CSS formatting rules apply to all the components (e.g. forms) on the page, while a 'component' style only applies to a particular component.   The best way to understand this is by looking at an example. 

The following are two snippets of code that describe the Grid caption using the 'Cozy' style. 

Page Style:

<table class="Grid" cellspacing="0" cellpadding="0">
        <tr class="Caption">
          <th scope="col">
          <!-- BEGIN Sorter Sorter_country_id --><span class="Sorter"><a href="{Sort_URL}" id="countriesSorter_country_id">Id</a> 
          <!-- BEGIN Asc_On --><img alt="Ascending" src="Styles/Cozy/Images/Asc.gif"><!-- END Asc_On -->
          <!-- BEGIN Desc_On --><img alt="Descending" src="Styles/Cozy/Images/Desc.gif"><!-- END Desc_On -->
                                                 </span><!-- END Sorter Sorter_country_id --></th>
 

Component Style:

      <table class="GridCozy" cellspacing="0" cellpadding="0">
        <tr class="CaptionCozy">
          <th scope="col">
          <!-- BEGIN Sorter Sorter_country_id --><span class="Sorter"><a href="{Sort_URL}" id="countriesSorter_country_id">Id</a> 
          <!-- BEGIN Asc_On --><img alt="Ascending" src="Styles/Cozy/Images/Asc.gif"><!-- END Asc_On -->
          <!-- BEGIN Desc_On --><img alt="Descending" src="Styles/Cozy/Images/Desc.gif"><!-- END Desc_On -->
                                                  </span><!-- END Sorter Sorter_country_id --></th>

Visually, on the rendered web page, the 'page' style and the 'component' style may look the exactly the same.  To tell what type of styling is applied to a form, you will have to look at the code in HTML mode.   In the example above, the 'page' style for the grid form contains specific references to icons in the style (same as 'component'), but the HTML code does not refer to the style by name.  For example, forms (e.g. Grid) are described as HTML tables, so the generic 'page' stylesheet defines rules for all HTML tables, or rules related to named elements (e.g. class="Row", class="Caption" etc.).   With 'component' style, the HTML for the Grid is the same but now special attributes have been added to the HTML so the stylesheet can target this particular form.  The elements of the table describing the form are named by stylesheet (e.g. class="GridCozy").  

Using Styles with Form Templates

Different rules apply to the builders when you are using a form template.  Normally, when you run one of the builders, you can assign a 'Page' or 'Component' style to the page or form.  Which type of Style you choose affects the HTML generated for the form. 

When you select 'Page' style, the HTML generated is the same as any other form created with the 'Page' style.  This way, you can change the style for more than one form at a time on the page since they share the same HTML code.  When you choose a 'Component' style, the HTML generated is specific to that particular style and form.  If you later change the 'Page' style, it does not affect any forms created with the 'Component' style.  You can change the 'Component' style for a form, but the change only affects that form, not any other forms on the page, even if they share the same style.

When you use a form template, the rules change since the HTML code is not generated entirely by the builder.   Refer to Using Form Templates for more information.

If you have a Design applied to the page, you cannot assign a style in the builder, either 'Page' or 'Component' style.   This is because the HTML generated for your form is based on the template you supply, therefore it does not contain the code that maps to the CSS rules in the stylesheet.  Also, to prevent conflicts between the styles defined in your design and the styles defined in one of the CodeCharge Studio styles, you are not allowed to select a different 'Page' style.  Similarly, if you do not have a Design applied to the page, you can change the 'Page' style but not the 'Component' style since the component style depends on generating specific HTML code for the form that makes it unique to that style.   The CSS rules in your stylesheet only work so far as the rules in the stylesheet refer to elements or attributes of the code in the template, which is something you defined when you created the template.   If you want your forms to appear correctly, your template code should be consistent  with however way you intend to style your pages. 

See also

• Working with projects
• Project Settings Overview
• General Project Settings
• Server/Script Settings
• Locales & Encodings
• Configuring Publishing Settings
• Implementing Security
• Caching Settings
• Source Control Settings