Theme settings in Arrigo
NOTE: There is an issue with old theme files (prior to 16 March, 2022), read more here.
All theme settings resides in the theme file, in frontend folder. Prepare with the following steps:
-
In Arrigo Local the theme folder should be overridden in
Program Files\Arrigo\Arrigo Local\Frontend\theme
. Create that folder. -
Copy the theme files here and put them in the newly created folder above.
You can now override the theme settings.
Remember to back up your theme settings, including the images in the image folder. Easiest way is to create a backupfolder with two folders inside, one for images, and one for theme folder.
Arrigo BMS legacy theme from EXOscada.
We now support legacy theming in views!
By inserting //LegacyTheme as the first row in the OnOpen-attribute of the View in ViewDesigner, Arrigo theming will be ignored when opening the view, letting font families and sizes be determined from the Shared/theme/Standard.cwvt.json-file instead.
Change pictures on login page
Imagine you want to change the images on the login page. You can add or modify the left large image, the top centered images and an image at the bottom right.
Make sure your images are located in the “images” folder (Program Files\Arrigo\Arrigo Local\Frontend\images
). Normal graphics formats are supported such as jpg, png, svg.
Change theme.json
in theme
folder as follows:
"login": {
"layout": {
"name": "splash",
"left_splash_image": "/arrigo/images/my_new_left_splash_image.png",
"top_center_image": "/arrigo/images/a_logo_or_something_else.png",
"bottom_right_image": "/arrigo/images/yet_another_logo_or_image.png"
Make sure the name field is set to “splash” and that the path to the images are included.
Save the file. Reload Arrigo with Ctrl+F5
to fetch the new theme settings.
Change logo in header
Put your new myLogo.png
in images
folder.
If you need to adjust the height of the header, simply increase the numbers in the height
section of the theme.json
. small
is mobile settings, and normal
is desktop.
Change theme.json
in theme
folder to set the new logo:
"header": {
"images": {
"logo": "myLogo.png"
},
"height": {
"normal": "70px",
"small": "55px"
}
},
Change theme colors
Edit the colors.light.json
and colors.dark.json
to match your logo and visual style of your project.
Additonal properties theme.json
A couple of additional custom styling implementations has been made into Arrigo.
Property | Value | Description |
---|---|---|
forcePanelMode |
Yes |
This will prevent the user from using the original navigation in Arrigo, enforcing the use of the Panel mode navigation at the top of the page. |
hidePanelModeDivider |
Yes |
This will hide the divider line between the top header and the navigation part of the panel mode in Arrigo. |
minimizeContainerPaddingForViewsOnMobile |
Yes |
This will allow the Animation views from ExoScada to be rendered without any side padding at all in Arrigo, freeing up a couple of pixels of width. |
includeAnimationViewsInTheme |
Yes |
This will change the theme used in Animation views to be fetched from S00004001 instead of S00004000 |
maintenanceText |
Empty string |
This setting overrides current, translated, maintenance text when Arrigo is not available due to restart or shutdown. |
forceFirstFolder |
Empty string |
Redirects the user upon login to the first folder in the navigation tree if value is set to Yes |
autoRedirectToLastFolderVisitedTimeout |
01:30:00 |
The time when a user will be redirected to the last folder vistited upon login |
showHelp |
Yes |
Setting this to No will hide the help icon (question mark) in the header |