Editing CSS Style file to change the appearance of Aventail Workplace

03/26/2020 4 13019

DESCRIPTION:
Editing CSS Style file to change the appearance of Aventail Workplace

RESOLUTION:

Feature/Application:

The Aventail Workplace can be customized on firmware 10.5.2 and higher by using the Style sheets (.css). Editing the style sheet allows a greater degree of customization than the Aventail Workplace > Appearance page in AMC.

This document shows the file edits to the CSS Style file to make the desired color change. It also shows what graphic file to edit to make changes on the Aventail Workplace page beyond the CSS file edits.

 For step by step directions on downloading, editing and reapplying the style sheet, see KB 9075, 9081, 9113, 9115 or 9168 as references.
 

 

Procedure:

1. To change the header background color – edit the “head_back.png” file in the style files. See KB 9113 as a reference

1. To change the Company logo, edit the “av-default-logo.gif” in the style files. See KB 9113 as a reference

1. To change the main workplace header Text color – edit CSS file “head { “ section - color.  (It is line 23 in the screenshot below) See KB 9169

1. To change the Text color at the top of the central body area – edit CCS file “.ewcontent, .wpcontent, .necontent {“ section – color.  (It is line 30 in the screenshot below) See KB 9169

             To change the border color around the workplace links – edit CCS file “.ewcontent, .wpcontent, .necontent {“ section – Border.   (It is line 34 in the screenshot)

 

1. To change the RDP icon on workplace link – edit the ico_GUIterminal.gif in the /usr/local/av-shared/assets/Aventail directory (see KB 9109 as reference)

1. To change the Workplace link color – edit CSS file “general link settings” section -color. (line 101 in the screenshot below) See KB 9075

1. To change the Folder icon on workplace link – edit the ico_folder.gif file in the /usr/local/av-shared/assets/Aventail directory (see KB 9109)

1. To change the Text color of the small descriptive text on the workplace links  – edit CCS file “.grpDescription, .description { “ section – color.   (It is line 188 in the screenshot)

1. To change the URL globe icon on workplace link– edit ico_URL.gif file in the /usr/local/av-shared/assets/Aventail directory (see KB 9109)

1. To change the color of the link fields – edit “div.standAlone_bookmark, div.bookmark {“ section – background:  (line 177 in the screenshot)

1. To change the central background color (around the workplace links) – edit CCS file “.ewcontent, .wpcontent, .necontent {“ section – background.   (It is line 29 in the screenshot) See KB 9169

1. To change the border color around the Internet Address box – edit the “intranetAddressBar” section – border: 1px solid line (in screenshot it is line 476)

1. To change the text color of Internet Address text label – edit CCS file line 521 as shown in the screenshot below.

1. To change the color of the central body footer – edit CCS file “content_bottom {“ section – background.   (It is line 58 in the screenshot)

1. To change the Workplace background color – edit CSS file section “/*<bodyBackground>*/ background: #000000 url(./head_back.png)” (It is line 5 in the screenshot). See KB 9081. 

1. To changed the color of the text for the logout, help and details button -  edit CSS file section “a.button, a.button:visited {“ section - color  (It is line 431 in the screenshot). See KB 9115

1. To change the Logout, Help and Details buttons on upper right of workplace page – edit the nav_left_off.png & nav_right_off.png files. See KB 9113

1. To change the Text color of the “Access- User -  Session Start” Labels  – edit CCS file “ table.user_data tr td b { “ section – color.   (It is line 488 in the screenshot) See KB 9131

1. To change the Text color of the user data for the “Access - User - Session Start” fields  – edit CCS file “table.user_data tr td { “ section – color.   (It is line 478 in the screenshot) See KB 9131

1. To change the central body header background color – edit the tab_content_back.png file in the style files. See KB 9113 as a reference

1. To change the Text color of personal bookmark header  – edit CCS file “.bookmarks_header { “ section – color.   (It is line 198 in the screenshot)

1. To changed the color of the “Go” button at end of URL Box – edit CSS file “.gobuttonclass {“  section – background-color:    (It is line 503 in the screenshot)  See KB 9168

             To changed the Text color of the “Go” button at end of URL Box – edit CSS file “.gobuttonclass {“  section –color:    (It is line 504 in the screenshot)   See KB 9168

 
 

1. To change the “SonicWall 2010” text color below central body area  – edit CCS file “foot {“ section – color.   (It is line 73 in the screenshot)

See Also:

The color in the CSS file are displayed as hex numbers, but below are two sites you can use to see hex color numbers and the color they display.
 
http://html-color-codes.com/
http://www.color-hex.com/color/339900

If you like additional information on editing CSS files then go to the site below.

http://www.yourhtmlsource.com/stylesheets/introduction.html

For information on changing the link color, see KB 9075
For information on changing the Workplace background color, see KB 9081.
For information on changing the Workplace link icons, see KB 9109.
For information on changing the color of the logout, help and details buttons, see KB 9113
For information on changing the Text color of the logout, help and details buttons, see KB 9115
For information on changing the Text color & button color for the GO button, see KB 9168