FVS Page Background & Component Background

Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.

1. Version

2. Function introduction

This article will introduce how to set page background and component background when making FVS large screen template.

1) Page background

Select a page and click Page in the configuration bar to set the page background. The page background defaults to color, as shown in the following image:

Set the page background takes effect only on the currently selected page of the template, and does not affect other pages of the template.

2) Component border background

Select a component and click Component in the configuration bar to set the component border background. The component border background defaults to none, as shown in the following figure:

Set the component border background takes effect only on the selected component and does not affect other components.

Page background/component border background supports four configuration methods: None, Color, Built-in Asset, and Custom Upload.

1. None

If the background is set to None, there is no color background when previewing the template/component.

2. Color

If the background is set to color:

• Support direct color selection

• Support manual input of hexadecimal color codes

• Support manual input of RGB color values

3. Built-in asset

1) Configuration method

FVS has built-in some common styles of assets for users, which are divided into two categories: static pictures and dynamic pictures. Users can choose according to their needs.

After selecting the Built-in Asset method, click Choose, select the required asset, and click Finish to call the asset. As shown below:

2) Background attributes

The user can set the processing method and hue of the background image. As shown below:

4. Custom upload

Users can upload their own locally prepared background images to the template.

1) Upload pictures

After selecting the Custom Upload method, click Choose, and then click +Upload Picture to select a local image file and upload it.

The supported image files are jpg, png, gif and webm formats.

Page background Custom Upload images can be called in any page background of this template.

Component background Custom Upload images can be called in any component background of this template.

After selecting the Custom Upload method, click Choose, select the required asset, and then call it. As shown below:

2) Common filling

The image defaults to the common filling method, and three image processing methods can be selected, and the image hue can be set:

3) 9-Patch filling

When uploading a picture/hovering the mouse over the picture, you can set the 9-patch of the picture.

By stretching the four lines, the picture can be divided into four types of areas, as shown in the following figure:

If you have modified the 9-patch setting of the picture, in addition to the common filling, you can also select 9-patch filling.

If you select 9-patch filling:

• The width and height of the red area remain unchanged

• The height of the green area remains unchanged, and the width is stretched, so that the image fills the width of the page

• The width of the yellow area remains unchanged and the height is stretched, so that the image fills the page height

• The blue area stretches in height and width so that the image fills the entire page

If you adjust the multiple option below, the width and height of the red area will be adjusted according to the multiple.

4) Delete picture

Hover the mouse over the image uploaded to the template, click the Delete button in the upper right corner, and click Delete to delete the image. As shown below:

If the asset picture is deleted, the background of the called asset is automatically empty.

The built-in asset in "Template Background", "Component Border", "Picture", and "Local Video" are stored in the project directory webappswebrootWEB-INFassetsvis folder.

FanRuan will add relevant assets from time to time. Users can click Server > Update Built-in Assets to get the latest assets.

Intranet users can directly download and decompress, and replace the project directory webappswebrootWEB-INFassetsvis folder: vis.zip

• The built-in assets and custom assets in "Template Background" can only be used in "Template Background", and all "Template Backgrounds" can be reused. But it cannot be reused except "template background".

• The built-in assets and custom assets in "Component Border" can only be used in "Component Border", and all "Component Borders" can be reused. But it cannot be reused except "component border".

• The built-in assets and custom assets in the "Picture" component can only be used in the "Picture" component, and all "Picture" components can be reused. However, it cannot be reused except for the "picture" component.

• The built-in assets and custom assets in the "local video" component can only be used in the "video component", and all the "local video" components can be reused. However, it cannot be reused except for the "local video" component.