Graphic Properties of a Page


You can define the graphic properties of a page in two different places:

  • In a theme: Properties applicable to all app pages associated with the theme.
  • In an app: Properties applicable only to the selected page in this app.

Notes

  • Access graphic properties:

Menu

Properties of items in the app title bar.

MenuProperties
Property Description Representation
Object to format: Element (1) Application Title: App title EVApps - Graphic Properties - Title Bar Element.png
(2) Menu (Active): Active page
(3) Menu: Inactive pages
PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels
For Menu items (active/inactive pages)

Color of the logout icon Apps - Logout icon.png

Logout Color (Inherit) (1) Inactive icon EVApps - Graphic Properties - Title Bar Logout Off.png
Logout Color (hover) (Inherit) (2) Icon when the cursor moves over it EVApps - Graphic Properties - Title Bar Logout On.png

Color of the tab border

Active Menu Separator (Inherit) (1) Active page border EVApps - Graphic Properties - Title Bar Separator.png
Menu Separator (Inherit) (2) Inactive page border

When you move the cursor over the title of the page:

Background Color On Hover (Inherit) (1) Background color of the tab EVApps - Graphic Properties - Title Bar Background Text Color.png
Text Color On Hover (Inherit) (2) Color of the page title
MenuPropertiesEnd

Page

Page properties of a theme or app

PageProperties
Property Description Representation
Applicable only to the selected page in the app

Background image in the page    (Click Apps - Upload icon.png to download the image you want)

Background Image

On a traditional screen

Background Image (mobile)

On small device screens such as smartphones

Background Image Properties

Image - Repeat Size Position properties - Dropdown list.png: Used to customize the page background display using different properties applicable to the image. Click to show the drop-down list.

Image - Repeat Size Position properties.png
BackgroundImageProperties

Repeat: Used to define the way in which the image is repeated in the background.

no-repeat repeat repeat-x repeat-y

The image is not repeated.

Image - Repeat property - No Repeat.png

The image is repeated horizontally and vertically.

Image - Repeat property - Repeat.png

The image is repeated horizontally.

Image - Repeat property - Repeat x.png

The image is repeated vertically.

Image - Repeat property - Repeat y.png

The image is repeated as many times as required to cover the entire background. The last image is cropped if required.

Size: Used to define the size of the image.

Initial size Scale to fit Scale to cover

The image is displayed in its original size.

Image - Size property - Initial.png

The image is adjusted to fit the height of the background while locking its aspect ratio.

Image - Size property - Scale to fit.png

The image is resized to fit the the height and width of the entire background. This means that part of the image may be cropped.

Image - Size property - Scale to cover.png

Position (H/V): Used to define the position of the image in the background.

  • The first value defines the horizontal position of the image as regards the left, right or center.
  • The second value defines the vertical position of the image as regards the top, bottom or center.
  • If the image is repeated in the background (i.e. Repeat = repeat), then Position will have an impact on the layout of the repeated image.

For all app pages associated with a theme

or Only for the selected page in the app

Max Width (Inherit) Maximum width of the page

Color of the page

Inside Color (Inherit) (1)

For the main section (= Maximum width of the page - Max Width)

EVApps - Graphic Properties - Page Margin.png
Outside Color (Inherit) (2)

For the external section

PagePropertiesEnd

Widgets

Properties of all types of widgets in the page

 Open url.png  See the description of properties.

Fonts

Properties of fonts used in all HTML tags in the different types of widgets in the page

ElementGeneralFormat
Property Description Representation
Object to format: Element Body: Style for the text body
Normal {p}: Normal style
Preformatted {pre}: Style for preformatted text
Title 1 {H1} to Title 6 {H6}: Six header styles
PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels
Tags:
Last modified by Unknown User on 2017/09/15 16:48
Created by Administrator XWiki on 2016/01/20 18:22

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018