|
|
On the Style Editor page
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.
The Style Editor page
consists of 2 sections:
|
·
|
Tables
list on the left. Moving across tables
and their related pages, you can select a page to view/modify. To
filter pages by the page name, use text field above the events
tree. To
display only the pages with the layout/style/color scheme settings
that are different from the project ones and currently selected
page, click the 
button. |
|
·
|
Style
editor on the right where you can view
how the selected page will look like and modify it. |
Layouts
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 C:\Program
Files\PHPRunner6.1\templates\layouts. For more information
on .ly files structure, see Layouts
topic.
You can choose the layout for the whole project, for set of
pages (e.g. for all Edit
pages) or only for currently selected page. To choose the layout,
firstly click the link above the layouts list (the word
Project before layouts) and select the option the
layout should be applied to. Then choose the layout from the
layouts list.
For Add/View/Edit pages you can select layouts with
vertical/horizontal menu or without it.
Styles
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
C:\Program
Files\PHPRunner6.1\styles.
You can choose the style for the whole project, for all pages of
currently selected table or only for currently selected page. To
choose the style, firstly click the link above the styles list (the
word Project before
styles) and select the
option the style should be applied to. Then choose the style from
the styles list.
Color schemes
Color scheme describes the color palette of the layout elements.
Color schemes are stored as the .color files in the folder
C:\Program
Files\PHPRunner6.1\styles\colors.
Customizing
style and color scheme
You can change parameters of the selected style and color scheme
by clicking the Customize
button. Switching between tabs at the top of the page, change style
parameters such as global settings, style of buttons and menu
etc.
You can change the type of individual containers - visual
elements consisting of page elements such as boxes, controls, grids
etc. To do this, click on the Containers tab, select the particular
container on the page (click on it) and then modify the container
parameters. Note that all containers except the active one is
displayed in grey color.
When you have finished with the style customization, click the
Back button to return to
the view mode.
When you start changing the style or color scheme parameters,
copies of the style and/or color scheme files are made in your
project folder and all further changes are stored in these files.
For example, you have chosen the Fusion style and began to change it.
The file Fusion1.style is
created in the styles
subfolder of your project folder. You can rename and delete these
new style/color files. Files with standard styles and color schemes
can not be renamed or deleted.
When modifying tabs (Globals tab):
|
·
|
For the Background parameter Active is the
background color of selected tab, Inactive -
background color of not selected tabs. |
|
·
|
For the Text parameter Active color is
the text color on selected tab, Inactive color - text
color on not selected tabs. |
When modifying layout containers (Containers tab):
|
·
|
For the Background,
Format
and Text parameters Plain are
parameters of the central part of the page, Header - parameters of the top part (header) and bottom part on
the Add, Edit, View, Search and Export pages, Alternative
- parameters of the second column with
controls on the Add, Edit, View, Search pages. |
|
·
|
Buttons
parameter - you can select to display buttons
as buttons or
as links. Depending
on your choice, modify the parameters of the button appearance on
the Buttons or
Links
tab. |
When modifying buttons (Buttons tab) and links (Links tab):
|
·
|
For the Color,
Text Color
and Border Color parameters Button are
parameters of the button in the normal state, Hovered - parameters of the button in the hover state,
Pressed
- parameters of the pressed button,
Disabled
- parameters of the disabled
button. |
|
·
|
Color
parameter - the color of the
button. |
When modifying menu items (Horizontal Menu and Vertical Menu tabs):
|
·
|
For the Background Color and Text Color parameters Plain are
parameters of the menu item in the normal state,
Hover
- parameters of the menu item in the hover
state, Active -
parameters of the selected menu item. |
When modifying grid (Grid tab):
|
·
|
Header
- parameters of the grid header,
Footer
- parameters of the grid footer,
Data
- parameters of the even data records,
Data alt
- parameters of the odd data records,
Hovered
- parameters of the even data records in the
hover state, Hovered alt -
parameters of the odd data records in the hover state. |
Border parameters
|
·
|
Color - color
of the border. |
|
·
|
Width - width
of the border. |
Background parameters
|
·
|
Color - color of the background.
|
|
·
|
Gradient - gradient of the
background.
|
Format parameters
|
·
|
H Padding - The right and left
padding.
|
|
·
|
V Padding - The top and bottom
padding.
|
Text parameters
|
·
|
Color - color of the text.
|
|
·
|
Font - font type of the text. Select one
of the predefined font types (text1,
text2,
caption1
etc.) or custom to define
your font settings. |
Shape parameters
|
·
|
Radius - radius of the corner.
|
|
·
|
Padding - The horizontal
(right and left) and vertical (top and
bottom) padding.
|
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 C:\Program
Files\PHPRunner6.1\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 C:\Program
Files\PHPRunner6.1\StyleEditor\js\Runner\styleeditor\pickers\font_picker.js
the same way as described above.
3. Start PHPRunner. Now Arial
Narrow font is available in the font list.
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 C:\Program
Files\PHPRunner6.1\styles\fonts folder and if necessary you
can edit them.
|
