Style Editor

Style Editor elements

On the Style Editor you can modify the visual appearance of your pages and instantly preview the results. You can choose layout, style and color scheme. Then you can customize layout elements like buttons and panels shape, backgrounds and border types etc.

Note: Style Editor needs Internet Explorer 7 or higher to be installed on your machine.

Layout is a set of pages templates (templates for Add page, Edit page etc.). Each template defines corresponding page structure and stored in the .ly file in the folder \templates\layouts. For more information on .ly files structure, see Layouts.

Style is a set of parameters such as font, font size, margins, borders, alignment and so on. Styles are stored as the .style files in the folder \styles.

Color scheme describes the color palette of the layout elements. Color schemes are stored as the .color files in the folder \styles\colors.

Adding new fonts to Style Editor

To add new font to the Style Editor, you need to edit the files \StyleEditor\settings.js and \StyleEditor\js\Runner\styleeditor\pickers\font_picker.js which describe the fonts.

Lets add Arial Narrow font to the Style editor font list just after the Arial Black font.

1. Edit file \StyleEditor\settings.js.
Find the line

label: 'Arial Black', value:'Arial Black, sans-serif'

and insert this line just after it:

label: 'Arial Narrow', value:'Arial Narrow, sans-serif'

2. Edit file \StyleEditor\js\Runner\styleeditor\pickers\font_picker.js the same way as described above.
3. Start PHPRunner/ASPRunnerPro. Now Arial Narrow font is available in the font list.


Using font sets

Sometimes it is more convenient to use the predefined fonts (text1, text2, caption1 etc. in the Font Picker) instead of setting font manually for each layout element using the custom option.

Predefined fonts are combined into a font set. There are defined several font sets and you can choose among them when selecting Globals tab -> Font set parameter.

Font sets are described in the .fs files stored at \styles\fonts folder and if necessary you can edit them.