Advanced Styles

With the advanced style editor the sites look and feel can be modified dramatically. The advanced style editor can be access in one of three ways.
It's beyond the scope of this document to explain the details of editing stylesheets. A good resource can be found at  https://developer.mozilla.org/en-US/docs/CSS.

There are several ways to access the Advanced Styles, and each one is a little different. Here you will find information about each one.

Full Advanced Styles
This method will open the advanced style editor, and it will contain all of the styles for your site.

  • Click Site, then select Advanced Styles
  • The advanced style editor will open, containing all the styles for your site.
  • Expand the media query you wish to edit styles for (default is All)
[IMAGE]
Application Advanced Styles
The second method will access an application's advanced styles, and limit the results to ones relevant to the application.
  • Click on the application. In the menu bar, click on the Application (for example, "Form") button, and select Advanced Styles.
  • The advanced style editor will open, containing results relevant to the application.

OR

  • Right click on your application. Hover over the application button (for example, "Form"), and select Advanced Styles.
 [IMAGE]
The third method is the CSS toolbar button [IMAGE]

  • To activate selection, click the button in the toolbar.
  • When you hover your mouse over your page, you will see the elements gain a red border (different style border for each item)
  • Click on the item you wish to see advanced styles for.
  • The advanced style editor will open, containing results for every element under your cursor.
[IMAGE]
Editing Advanced Styles
  •  Select the Add Rule button to add a new rule to the stylesheet.

  • Right click on an existing rule and select Add Property to add a new property.

  • Right click on and existing property and select Delete Property to delete an existing property from it's parent rule.

  • Right click on an existing rule and select Reset To Template Defaults to set the rule to the way it is in the current template.

  • Click on a property, the dialog will change providing a place to update the selected property. For instance a width will be like the example to the right. The color property will show a color picker in the dialog box.

  • Click the question mark[IMAGE] to bring up the Mozilla web page describing the currently selected property.

  • Across the top are icons for the major web browsers. An X through icon indicates this property isn't available in the browser. An X over the [IMAGE] icon simply means it's not an editor specific style.

  • A key at the top of the dialog describes the various objects depicted in the tree control.

  • The [IMAGE] icon in the toolbar will allow you to download the stylesheet as a text file. This is useful for designing new templates or additional stylesheets for existing templates.

  • The [IMAGE] icon in the toolbar will allow you to download the stylesheet as a XML stylemap. This is used for designing new applications for the editor.

  • The [IMAGE] icon in the toolbar will allow you to download a stylesheet as a PHP file that can be used in a PHP based application.

[IMAGE]