horizon daas tenant branding - vmware horizon daas · client logo 21 portal text 22 portal tab 23...

Horizon DaaS Tenant Branding

VMware Horizon DaaS

You can find the most up-to-date technical documentation on the VMware website at:

https://docs.vmware.com/

If you have comments about this documentation, submit your feedback to

[email protected]

VMware, Inc.3401 Hillview Ave.Palo Alto, CA 94304www.vmware.com

Copyright © 2020 VMware, Inc. All rights reserved. Copyright and trademark information.


VMware, Inc. 2

https://docs.vmware.com/

mailto:[email protected]

http://pubs.vmware.com/copyright-trademark.html

Contents

1 About This Document 4

2 Administration Console 5Login Page 5

Side Navigation Panel 8

Page Background 9

Dashboard Background 10

Top Navigation Bar 11

Tab Active Color 11

Top of Page Buttons 12

Activity and Notification Pages 12

3 Blast Portal 16Create a Folder For Blast Portal Branding Images 16

Blast Portal Login Page 17

Client Logo 21

Portal Text 22

Portal Tab 23

VMware, Inc. 3

About This Document 1This document shows how a Service Provider administrator can change the default appearance of the Administration Console and Blast Portal interfaces. Although customization is usually requested by customers on the tenant appliance level, the process requires appliance filesystem level access.

VMware, Inc. 4

Administration Console 2This section shows how a Service Provider administrator can change the default appearance of the Administration Console interface.

All of the customizations for the Administration Console are performed by modifying the stylesForCustomBranding.css file in both tenant appliances in the organization:

$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/

static/css/production/ stylesForCustomBranding.css

This chapter includes the following topics:

n Login Page

n Side Navigation Panel

n Page Background

n Dashboard Background

n Top Navigation Bar

n Tab Active Color

n Top of Page Buttons

n Activity and Notification Pages

Login PageThis topic describes how to modify elements on the Administration Console login page.

Login Page LogoTo modify the logo, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example.

n Delete the comment /*! Remove this when the logo is required. */.

VMware, Inc. 5

n Uncomment the other commented lines.

n Change the URL for the image file.

/*! App Logo with text */

.login-wrapper .login .brand-logo {

display: none;

/*! Remove this when the logo is required. */

background: url('../../static/images//EUC_HorizonLogin_bg.png') no-repeat;

width: 100px;

height: 100px;

margin: 0 auto 1rem auto; }

The following images show an example of the appearance of the page when the code has been edited as shown above.

BEFORE AFTER


VMware, Inc. 6

Login Page BackgroundTo modify the background, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the commented text and changing the URL for the image file.

/*! Login Page Background changes */

.login-wrapper {

background: url('../../images/FBG.jpg') no-repeat; };

}


BEFORE AFTER

Login ButtonTo modify the button, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the two lines of commented code and changing the colors for border-color and background-color.

/*! login button */

.login-wrapper .login .login-group .btn {

border-color: #00b315;

background-color: #ff5733;



VMware, Inc. 7

BEFORE AFTER

Side Navigation PanelThis topic describes how to modify the side navigation panel of the Administration Console.

To modify the navigation panel, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the commented code and changing the color code for background-color.

.main-container .content-container .clr-vertical-nav {

background-color: #e8f4ff;



VMware, Inc. 8

BEFORE AFTER

Page BackgroundThis topic describes how to modify the background of Administration Console pages, such as Applications, Assignments, and Images.

To modify buttons, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the commented code and changing the color for background-color.

.main-container .navigation-content {

background-color: cyan;}

The following images show an example of the background before and after this type of change.


VMware, Inc. 9

BEFORE AFTER

Dashboard BackgroundThis topic describes how to modify the background of the Dashboard page in the Administration Console.

To modify the background, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the commented code and changing the color value background-color.

.main-container .dashboard-background {

background-color: #cfe7bb; }

The following images show an example of the appearance of the page before and after this type of change.

BEFORE AFTER


VMware, Inc. 10

Top Navigation BarThis topic describes how to modify the appearance of the top navigation bar in the Administration Console.

To modify the navigation bar, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the line containing background and changing the value for the color.

/*! Top header and Navigation background change */

.main-container {

/*! Navigation background color */ }

.main-container .site-header {

background: #0177b3;}


BEFORE AFTER

Tab Active ColorThis topic describes how to modify the color of active tabs in the Administration Console.

To modify the color of active tabs, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the line containing background-color and changing the color value.

.tabstrip .atk-tabs .line-container,

.tabstrip .atk-tabs .atk-tab:not(.active):hover:after {

background-color: red !important; }



VMware, Inc. 11

BEFORE AFTER

Top of Page ButtonsThis topic describes how to modify the appearance of buttons at the top of Administration Console pages, such as Applications, Assignments, and Images.

To modify buttons, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the lines containing border-color, background-color, and color, and changing the color values.

.atk-btn,

.btn {

border-color: #00b816 !important;

background-color: #blue !important;

color: $white !important; }


BEFORE AFTER

Activity and Notification PagesThis topic describes how to modify elements on the Activity and Notification pages.


VMware, Inc. 12

Cancel Task ButtonTo modify button, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the lines containing border-color, background-color, and color, and changing the color values.

#zedd-content .modal-footer .btn {

border-color: blue !important;

background-color: green !important;

color: black !important; }


BEFORE AFTER

Sort IconTo modify the sort icon, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the line containing , color and changing the color value.

#zedd-content .datagrid-column-title .sort-icon {

color: orange !important; }


BEFORE AFTER


VMware, Inc. 13

Active TabTo modify the appearance of the active tab, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:



Edit the appropriate section of code so that it is similar to the following example, uncommenting the lines containing background, box-shadow, and -webkit-box-shadow, and changing the color values.

#zedd-content .nav .nav-link {

background: pink !important;

box-shadow: 0 -3px 0 red inset !important;

-webkit-box-shadow: 0 -3px 0 red inset !important;


BEFORE AFTER

Check BoxesTo modify the check boxes, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:




.clr-checkbox-wrapper input[type=checkbox]:checked + label::before {

background: red !important;


BEFORE AFTER


VMware, Inc. 14

Page BackgroundTo modify the background, edit the stylesForCustomBranding.css file in both tenant appliances in the organization:




#zedd-content {

/*! Activity and Notification (all clarity pages) Background */

.main-container {

background: red !important;

}


BEFORE AFTER


VMware, Inc. 15

Blast Portal 3This section shows how a Service Provider administrator can change the default appearance of the Blast Portal interface.

Before performing logo customizations, you must perform the following steps.

1 Log into the tenant appliance as root user.

2 Go to the folder DEPLOYMENT_PATH/appblast/webclient/icons-15736269/.

3 Create a new folder called custom.

4 Put all images to be used for branding into the custom folder.

5 Edit the CSS file for the branding logo changes:

$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/

webclient/style.app-htmlaccess.f33ab3196e5a180e246e.css

This chapter includes the following topics:

n Create a Folder For Blast Portal Branding Images

n Blast Portal Login Page

n Client Logo

n Portal Text

n Portal Tab

Create a Folder For Blast Portal Branding ImagesIf you are planning to use custom image files for branding the Blast Portal, you must create a folder for them.

Procedure

1 Log in to the tenant appliance as the root user.

2 Got to the folder DEPLOYMENT_PATH/appblast/webclient/icons-15736269/.

3 Create a folder named custom.

VMware, Inc. 16

Blast Portal Login PageThis topic describes how to modify elements on the Administration Console login page.

Note Before you begin, add any custom files you are using for this process to the DEPLOYMENT_PATH/appblast/webclient/icons-15736269/custom. If you have not yet created this folder, see Create a Folder For Blast Portal Branding Images.

Logo ColorTo change the logo color, edit the style.app-htmlaccess.f33ab3196e5a180e246e.css file in both tenant appliances in the organization:

$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/

style.app-htmlaccess.f33ab3196e5a180e246e.css

Edit the section of this file shown below. The text that has been edited is BRANDING_RESOURCE_PATH/horizon.png.

.ui-pattern-logo {

height: 112px;

margin: 0 auto;

width: 180px;

background: url(BRANDING_RESOURCE_PATH/horizon.png) no-repeat;

margin-bottom: 32px;

}

The following images show an example of the appearance of the page before and after these changes.


VMware, Inc. 17

BEFORE AFTER

Logo SizeTo change the logo size, edit the style.app-htmlaccess.f33ab3196e5a180e246e.css file in both tenant appliances in the organization:



Edit the section of this file shown below. The text that has been edited is BRANDING_RESOURCE_PATH/horizon_2x.png.

.ui-pattern-logo {

height: 112px;

margin: 0 auto;

width: 180px;

background: url(BRANDING_RESOURCE_PATH/horizon_2x.png) no-repeat;

margin-bottom: 32px;

}



VMware, Inc. 18

BEFORE AFTER

Login ButtonTo modify the button, edit the style.app-htmlaccess.f33ab3196e5a180e246e.css file in both tenant appliances in the organization:



Edit the section of this file shown below. The text that has been edited is red.

ui-panel-footer .btn-primary[disabled], .ui-panel-footer .btn-primary[disabled]:hover {

background-color: red

;

border-radius: 4px;

width: 295px;

height: 41px;

}



VMware, Inc. 19

BEFORE AFTER

Login Page FooterTo modify the logo, edit the style.app-htmlaccess.f33ab3196e5a180e246e.css file in both tenant appliances in the organization:



Edit section of this file shown below. The text that has been edited is BRANDING_RESOURCE_PATH /vmware_logo_dark.svg.

.bottom-logo {

width: 83px;

height: 13px;

opacity: 100%;

position: absolute;

bottom: 30px;

left: 51%;

margin-left: -52px;

background: url(BRANDING_RESOURCE_PATH /vmware_logo_dark.svg) no-repeat;

background-size: 83px 13px;



VMware, Inc. 20

BEFORE AFTER

Client LogoThis topic describes how to modify the logo in the client user interface.


To change the logo color, edit the style.app-htmlaccess.f33ab3196e5a180e246e.css file in both tenant appliances in the organization:




VMware, Inc. 21

Edit the section of this file as shown below. The text that has been edited is BRANDING_RESOURCE_PATH/logo-horizon.png.

.navbar-brand {

background: url(BRANDING_RESOURCE_PATH/logo-horizon.png) no-repeat;

background-size: 161px 40px;

display: block;

width: 161px;

height: 40px;


BEFORE AFTER

Portal TextThis topic describes how to customize the appearance of the Blast Portal text.

To change the appearance of the text, edit the appropriate JSON file for the language. The JSON files are located here:

$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/locale/

The JSON files for supported languages are shown in the following table.

Language File

English en.json

German de.json

French fr.json

Spanish es.json

Japanese ja.json

Korean ko.json


VMware, Inc. 22

Language File

Chinese Simplified zh_CN.json

Chinese Traditional zh_TW.json

The following table shows an example of customizing the en.json file, adding the text CUSTOM to each of the text strings.

Default Text String Custom Branded Text String

"LOGOFF_DESKTOP_M": "Are you sure you want to log off from {0}?"

"LOGOFF_DESKTOP_M": "Are you sure you want to log off from CUSTOM {0}?"

"dialog_confirm_logout": "Are you sure you want to log out of the Horizon Connection Server?"

"dialog_confirm_logout": "Are you sure you want to log out of the CUSTOM Horizon Connection Server?"

"dialog_confirm_logoff": "Are you sure you want to log off from this Desktop?"

"dialog_confirm_logoff": "Are you sure you want to log off from this CUSTOM Desktop?"

"dialog_confirm_restart": "Are you sure you want to restart this test Desktop?"

"dialog_confirm_restart": "Are you sure you want to restart this CUSTOM test Desktop?"

"dialog_confirm_cancel_startsession": "The connection changes attempt is taking too long. Do you want to continue?"

"dialog_confirm_cancel_startsession": "The connection CUSTOM changes attempt is taking too long. Do you want to continue?"

The image below shows an example of a dialog box with the customized text.

Portal TabThe topic describes how to modify the Blast Portal tab logo.


To change logo on the portal tab, replace the favicon.ico file:

/usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/favicon.ico

Note To see the branding updates, end users must clear their browser cache and reload the portal page.

The following images show an example of the appearance of the page before and after this change.


VMware, Inc. 23

BEFORE AFTER


VMware, Inc. 24

horizon daas tenant branding - vmware horizon daas · client logo 21 portal text 22 portal tab 23...

Documents