User interface manual

5gVision lets you customize its interface to whatever pleases your eyes.

Overview

Every person has a different concept of a nice interface in mind, 5gVision is thus shipped with a number of interface styles for you to choose from. You may also change individual elements of the interface and create and share your own styles.

There are two ways to apply, modify, and save the styles:
  • Simple and straightforward. If you click the Interface link on the very top of your page, you will see a Style menu that will allow you to do basic modifications to your styles and color schemes, please see more in Modifying Default styles.
  • Advanced. Complete overhaul and customizations of a 5gVision interface requires understanding of basic principles and semantics of CSS (Cascading Style Sheets). 5gVision interface configs mostly consist of plain CSS declarations, except when we need to change a logo, an icon, or color intensity based on another color, in which case we use proprietory attributes that are processed in a special way and not addeded to CSS sheets. See Edit User style.

Modifying Default styles

Changing interface style is done with the help of the Interface link at the top of the screen. 5gVision User interface, Config styles modifying default You may choose the style to apply in the Apply a Saved style to your interface combobox.

If you want to quickly change the color scheme, choose the color of specific interface blocks in the same window. This color overwrites the default color of a chosen style and gives you an additional flexibility is setting up a pleasing environment. 5gVision User interface, Config styles modifying default
  • Color of statistics blocks, column N - background color of Blocks with statistical information. As blocks may be distributed among 4 columns, you may choose the background colors per each column.
  • Color of config blocks - background color for configuration blocks (like Config-Users or Config-Alerts blocks).
  • Color of floating blocks - background color of Floating blocks evoked by double-click or cross-links (View in CDRs, etc.).
  • Color of drop-down blocks - background color of drop-down windows evoked by clicking on a table cell that has a drop-down table linked to it.
  • Color of thumbnail blocks - background color of blocks in the Thumbnail mode, with lots of small charts per one screen.
  • Color of help blocks - background color of the User manual blocks.
You may always revert to the default colors of the selected style by clicking the Revert to default block colors link.

You may also adjust the interface color intensity for several main elements. Apart from giving additional flexibility in styling your interface, it may happen that certain elements are not presented correctly on your very monitor, for instance, the odd-even row highlight in tables may seem too strong, or, on the contrary, unnoticeable.

In the Interface window, specify the following parameters (0 - no color, 100 - maximum saturation):
  • Color intensity, block headers (0-100) - intensity of the band on top of each block.
  • Color intensity, table headers (0-100) - intensity of table headers with filter fields and column names.
  • Color intensity, table even rows (0-100) - intensity of highlight of table odd-even rows.
  • Color intensity, options windows (0-100) - intensity of all floating options windows, like this very one.
  • Color intensity, weak backgrounds (0-100) - intensity of options windows transparent frames, and some other elements.
5gVision User interface, Config styles modifying default To restore the default settings, click Revert to default color intensity.

Any changes you make are not saved untill you press the OK button, you may play with your interface, and then simply refresh your page with the F5 button on your keyboard, or via a browser refresh button to get back to your previous interface.

If you want to change different elements of the interface, not just the backgrounds, you may click the Change style of interface elements and choose the very element you need with the help of the red outline appearing around elements with custom styles assigned. See more in Edit User style. 5gVision User interface, Config styles modifying default Once you start creating your own style, the system will suggest you to load any of the default Saved styles as a base for your changes. You may also add a new screen Config-Styles to conveniently get back to the style configuration whenever need.

Edit User style

You would need a screen Config-Styles present in your environment in order to modify style properties.

An Edit User style table allows you to edit your own individual style that is applied to your interface. Please notice that users need to add a Config: Styles screen to the menu tree.

Once you open the Config: Styles screen, the system will suggest you to load any of the default Saved styles as a base for your changes. You may do this via the Load Saved style button or dragging a previously saved style file to the Import style button. 5gVision User interface, Config styles edit user style In the floating window you can choose one of the Saved styles, which will be loaded to the current interface, and the Interface section, that allows you to apply the loaded style to the whole interface or only to a certain part of it. If the Save style to DB and show in table is not set, you have to click the GO button in order to load element settings of the chosen saved style to the table for editing. 5gVision User interface, Config styles edit user style Now you can change certain interface elements as you wish and observe the performed changes right in the current screen. Once the configuration is finished you should save it by means of the Save button or the Save editing icon near the cell. Furthermore, with the button Change element style you can easily choose the element you need to edit with the help of the red outline appearing around elements when you move your mouse.

You may share any style you created by exporting it as a text file (button Export style), and sending to other users that may import it via an Import style button.

Edit Saved style

System admins can also create and save global styles that will be available to all users in the company in addition to the default Saved styles. This is configured in the Edit Saved style table.

The same action buttons as in the Edit User style are available plus the Clone style to Saved that allows to clone a style in the current table to an existing or a new Saved style.

You may add a new style in the Saved style names table.