User's Guide Visual Profile Appendix L Version 7.5.2

Transcription

1 User's Guide Visual Profile Appendix L Version MobilityGuard AB Appendix L Visual Profile v 7.4

2 Table of Contents 1 Introduction Configuration Select a theme to use The theme organizer Create and modify Themes File structure Create / modify themes...17 Step Step Step Step Step Theme Profiles Examples...18 MobilityGuard AB Appendix L Visual Profile v (19)

3 1 Introduction This appendix covers the section Visual Profile. Visual Profile makes it easy to change the look and feel of all web pages located on the MobilityGuard Server. It is fast and easy to change colors, logos and the general look in a matter of seconds. There are a few themes shipped with MobilityGuard, ready to use, but you can also create your own themes and upload them to the MobilityGuard Server. If there are any custom or modified pages these files will override the selected theme. Please note that it is not possible to modify the Control Center pages. A Theme describes how the elements on the web page are grouped. For example: a logo to the left, a menu in the middle etc. Theme settings describes the colors, fonts etc of the Theme. 2 Configuration It is possible to configure different installed themes in the Theme Settings. To install new themes, or store configured theme settings the Theme Organizer is used, 2.1 Select a theme to use By default themes are disabled in MobilityGuard. To enable a theme on a Virtual Host go to Control Center Server Settings Theme Settings. Choose the theme to use from the drop-down menu named Select Theme to Use. MobilityGuard AB Appendix L Visual Profile v (19)

4 After a Theme has been selected, MobilityGuard will ask if you wish to activate the new theme directly. Please note that there are two steps to activate the theme. First the settings will be reloaded. And secondly the files on the MobilityGuard Server will be re-indexed. See the next two figures. Click OK to re-index the files. When the files has been re-indexed, you will be able to configure different settings for the selected theme as shown in the next figure. The settings can vary between different themes. The settings shown in the previous figure is for the theme Tab Dialog. If you change any setting in the theme and then try to load another theme, your settings will be lost. It is however possible to store your settings for a theme in the Theme Organizer. This is explained in the next chapter. Most themes are delivered with two or more pre-defined settings to select from. These settings are loaded from the drop-down box named Preload Settings for the Theme. MobilityGuard AB Appendix L Visual Profile v (19)

5 If you wish to upload custom background images just click on the link Click here to upload images... and upload the image as if you where uploading any other file using the MobilityGuard Browse File System feature. The images are stored in /server/custom_data-public/mg-gfx. 2.2 The theme organizer The Theme Organizer is used to store your settings for a theme or import settings from another MobilityGuard as well as importing or exporting complete themes. Click the button Store Current Theme Settings.. to save the current settings. After you have named the settings and saved them the settings will show up in the list below. In this example the settings has been saved with the name My Settings. From here you can download or delete it from the MobilityGuard server. If you want to install previously created settings click Choose File and locate the file on your computer and then click Upload Settings. Please note: If the settings uploaded already exist, it will be overwritten. MobilityGuard AB Appendix L Visual Profile v (19)

6 At the bottom of the Theme Organizer view theres is a list of the current installed themes. In the example below there are four pre installed themes and one custom theme called My Theme. Please note that you can delete the uploaded themes but not the pre installed. When installing a new theme click Choose File to locate the zip file on your computer and then click Upload Theme to save it to the MobilityGuard Server. Please note: If the theme uploaded already exist, it will be overwritten. How to create and modify themes and settings is covered in the next chapter. MobilityGuard AB Appendix L Visual Profile v (19)

7 2.3 Create and modify Themes File structure When downloading a theme from the MobilityGuard Server, the theme is compressed into a zip file. E g theme-bottom_bar.zip. Save the file onto your computer and unzip it. In this example the theme Bottom Bar is used. The zip file contains the following files and folders: Bottom_Bar is the root folder containing the files and folders shown in the pictures below. html: The folder containing the web pages you could modify *.settings: files containing the settings for the theme. In this case Sand.settings. Themes.definition: information about the settings for the theme. Example from Sand.Settings: theme Bottom_Bar color 1 C9AF59 color 2 6B5D38 color path 1 %2Fmg-local%2Fmg-gfx%2Ftoplogo-250x50.png path 2 %2Fmg-local%2Fmg-gfx%2Fbackground.jpg path 11 %2Fmg-local%2Fmg-gfx%2Ftoplogo-250x50.png radio data1 data 3 0 data 4 3px data 5 0 data 6 2px There are three different parameters that can be used inside any HTML-file that will be replaced with the value defined in the theme settings. The parameters are: PARM{style-colorn Color definition as defined by color n PARM{style-pathn - Path as defined by path n PARM{style-datan - Data as defined by data n MobilityGuard AB Appendix L Visual Profile v (19)

8 Compare the values in Sand.settings with the values on the different tabs in the picture below. For example: (color1) C9AF59 (path1) toplogo-250x50.png Example from Theme.Definition ( for the tab Top Navigator ): tab Top+Navigator color color80 60px Background+Color color color81 60px Background+Highlight+Color color color82 60px Background+Shadow+Color data data80 40px Total+Navigator+Height data data81 40px Inner+Navigator+Height separator line path path31 200px /mg-gfx /mg-local/mg-gfx/toplogo-138x25.png Top+Banner+Logo separator line color color83 60px Normal+Link+Color color color84 60px Normal+Link+Hover+Color color color85 60px No+Access+Link+Color color color86 60px No+Access+Link+Hover+Color Theme Definition defines which settings you may configure from Control Center for the theme. In the following picture, almost all settings for the Top Navigator has been removed. Only background color ( color80 ) and the logo ( path31 ) can be configured from Control Center. MobilityGuard AB Appendix L Visual Profile v (19)

9 The contents of the html folder: include: folder containing files that will be included in several other files mg-gfx: the folder where to save pictures, logos etc. These files will override the files in custom_data-public common.css The CSS file for the web pages html files Some of the web pages in MobilityGuard. For example _topnavigator.html shown below. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <link rel="icon" type="image/png" media="screen" href="/mg-local/mggfx/mgicon.png"> <title>parm{text-productname Navigator</title> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript" type="text/javascript"> <!-- var main_window; var nav_window; var wins = new Array(); var winwidth = screen.availwidth; var winheight = screen.availheight; if (winwidth > 1024) { MobilityGuard AB Appendix L Visual Profile v (19)

10 winwidth = 1024; if (winheight > 768) { winheight = 768; var height = winheight; var width = winwidth; var winprop = 'height='+height+',width='+width+',top=0,left=0,scrollbars=yes,'; winprop += 'resizable=yes,location=yes,menubar=yes,status=yes,titlebar=yes,toolbar=yes,dir ectories=yes'; function newnavigator() { navwinprop = 'height='+(screen.availheight - 30) +',width='+200+',top=0,left=0,scrollbars=yes,resizable=yes'; navwinprop += 'location=no,menubar=no,status=no,titlebar=no,toolbar=no,directories=no'; nav_window = window.open("/mg-local/navigatorframe.html?topnav=true", "navigatorpopup", navwinprop); nav_window.focus(); function logout() { if (PARM{confirmlogout) { if (!confirm('you are about to logout from PARM{textproductname...')) { return; main_window = window.open('/mg-local/logout', "_top"); main_window = window.open('/mg-local/closewindow.html', "_mg_mglocal"); if (nav_window) { nav_window.close(); var navwins = nav_window.frames[1].wins; var win; for (var i in navwins) { win = navwins[i]; if (win) { win.close(); if (wins) { for (var i in wins) { win = wins[i]; if (win) { win.close(); MobilityGuard AB Appendix L Visual Profile v (19)

11 // --> </script> </head> <body id="topnavbody"> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr><td bgcolor="#parm{style-color81"><img src="/mg-local/mg-gfx/1x1.gif" width=1 height=1></td></tr> </table> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr> <td align=right width=100% class="topnavsepright"> </td> <td nowrap align=center class="topnavsepleft topnavsepright"><a class=topnav href="javascript:logout();">parm{text-logout</a></td> PARM{options <td nowrap class="topnavsepleft topnavsepright"><a class=topnav href="javascript:newnavigator()">parm{text-normalnavigator</a></td> <td class=topnavsepleft align=center><a href=" target="_top"><img src="parm{style-path31" border=0 alt="parm{textcompany"></a></td> </tr> </table> <table width=100% border=0 cellpadding=0 cellspacing=0> <tr><td bgcolor="#"><img src="/mg-local/mg-gfx/1x1.gif" width=1 height=10></td></tr> </table> </body> </html> Please note: The values from the Theme-definition is found i in the file. For example PARM{stylecolor82. If you remove color82 from the Theme.Definition file, you must replace PARM{style-color82 with a value for the color, if you choose to use it. The content of the include folder: The files in this folder are included in several other web pages to create the web page you can see in your browser. For example the index page, login pages and error pages. Changes in these files affects several other files. In the the original index page, which is shown below ( not the entire file ) you can see the pages included to create the final page. MobilityGuard AB Appendix L Visual Profile v (19)

12 For example: PARM{include:/include/requestraheader.html?topheading=textchooseauthmethod?dialogheading=text-authmethod PARM{include:/include/head.html?title=text-logintomg <script type="text/javascript" src="/mg-local/erase-cookies.js"></script> <script type="text/javascript" src="/mg-local/blinkfade.js"></script> <style type="text/css"> li.indexlist { padding: 5px; font-size: 18px; position: relative; left: 40px; </style> </head> <body id="commonbody" style="margin: 0;" onload="blinklink('remotelink');"> PARM{include:/include/requestraheader.html?topheading=text-chooseauthmethod? dialogheading=text-authmethod <br> PARM{text-pleasechooseauthmethod.<br> <table border=0 cellspacing=0 cellpadding=0 width="100%"><tr><td align="left"> <ul style="margin: 10px; list-style-type: square;"> PARM{viewstestlogon <li class=indexlist><a href="/mg-local/login?type=testlogon"> Testlogon</a></li> PARM{viewetestlogon PARM{text- PARM{viewsanonymous <li class=indexlist><a href="/mg-local/login?type=anonymous"> anonymous</a></li> PARM{vieweanonymous PARM{viewsradius19 <li class=indexlist><a href="/mg-local/login?type=radius19"> PARM{nameradius19</a></li> PARM{vieweradius19 </ul> </td></tr> PARM{viewsresetpassword <tr><td><img alt="" src="/mg-local/mg-gfx/1x1.gif" height=8></td></tr> <tr><td align="center"><a href="/mg-local/resetpasswordstep1">parm{text-forgotpassword</a></td></tr> PARM{vieweresetpassword </div> </table> <p> PARM{include:/include/requestrafooter.html?topheading=text-chooseauthmethod? dialogheading=text-authmethod The final index page ( part of ) with the included files: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> MobilityGuard AB Appendix L Visual Profile v (19)

13 <link rel="icon" type="image/png" media="screen" href="/mg-local/mggfx/mgicon.png"> <title>login to MobilityGuard</title> <link href="/mg-local/common.css" rel="stylesheet" type="text/css"> <link href="/mg-local/text.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="/mg-local/common.js"></script> <!--[if IE 6]> <link href="/mg-local/text-ie.css" rel="stylesheet" type="text/css" media="screen"> <![endif]--> <!--[if IE 7]> <link href="/mg-local/text-ie.css" rel="stylesheet" type="text/css" media="screen"> <![endif]--> <script type="text/javascript" src="/mg-local/erase-cookies.js"></script> <script type="text/javascript" src="/mg-local/blinkfade.js"></script> <style type="text/css"> li.indexlist { padding: 5px; font-size: 18px; position: relative; left: 40px; </style> </head> <body id="commonbody" style="margin: 0;" onload="blinklink('remotelink');"> <TABLE WIDTH="100%" CELLSPACING=0 CELLPADDING=0 BORDER=0> <TR><TD BGCOLOR="#000000" colspan=2><img alt="" src="/mg-local/mggfx/1x1.gif" width=1 height=1></td></tr> <TR><TD BGCOLOR="#b8c0b5" colspan=2 style="background-image: url(/mglocal/mg-gfx/topbgsmall-beige.gif)"><img alt="" src="/mg-local/mg-gfx/1x1.gif" width=4 height=4></td></tr> <TR><TD BGCOLOR="#000000" colspan=2><img alt="" src="/mg-local/mggfx/1x1.gif" width=1 height=1></td></tr> <TR> <TD BGCOLOR="#799eb0" height=39 style="background-image: url(/mglocal/mg-gfx/topbg.jpg)"> <div id="topheading"> <span class="shadow"> <b>please choose authentication method</b> </span> <span> <b><font color="#ffffff">please choose authentication method</font></b> </span> </div> <TD align="right" valign="top" width="214" BGCOLOR="#799eb0" nowrap> <div id=remote style="display: none;"> <span class="shadow"> Request Remote Assistance </span> <span> <a id=remotelink class=ralink href="/mglocal/jretestifneeded?path=/mg-local/manualreversedframeset.html" target="mg_manualdynamic">request Remote Assistance</a> MobilityGuard AB Appendix L Visual Profile v (19)

14 </span> </div> <a href=" alt="mobilityguard" border=0 src="/mg-local/mg-gfx/mg-logo.jpg" width=214 height=39></a> </TD> </TR> <TR> <TD BGCOLOR="#000000" colspan=2><img alt="" src="/mg-local/mggfx/1x1.gif" width=1 height=1></td> </TR> <TR><TD BGCOLOR="#b8c0b5" colspan=2 style="background-image: url(/mglocal/mg-gfx/topbgsmall-beige.gif)"><img alt="" src="/mg-local/mg-gfx/1x1.gif" width=4 height=4></td></tr> <TR> <TD BGCOLOR="#000000" colspan=2><img alt="" src="/mg-local/mggfx/1x1.gif" width=1 height=1></td> </TR> </table> <br><br> <br><br> <CENTER> <TABLE width=380 cellspacing=0 cellpadding=0 border=0> <TR> <TD nowrap><img alt="" SRC="/mg-local/mg-gfx/dia_topl.gif" width=6 height=24></td> <TD width="99%" nowrap BGCOLOR="#598296"><div id="heading"><span class="shadow"><b><font size=2> Authentication Method </font></b></span><span><b><font COLOR="#FFFFFF" size=2> Authentication Method </font></b></span></div></td> <TD nowrap BGCOLOR="#598296" width=121 align=right><img alt="" SRC="/mg-local/mg-gfx/dia_logo-shadow.gif" width=121 height=24></td> <TD nowrap><img alt="" SRC="/mg-local/mg-gfx/dia_topr.gif" width=16 height=24></td> </TR> <TR> <TD style="background-image:url(/mg-local/mg-gfx/dia_midl.gif)" width=6 height=5> </TD> <TD BGCOLOR="#FFFFFF" COLSPAN=2 align=center><img alt="" SRC="/mglocal/mg-gfx/1x1.gif" width=5 height=5><br> <table cellspacing=0 cellpadding=0 border=0><tr><td><img alt="" SRC="/mg-local/mg-gfx/1x1.gif" width=5></td><td> <!-- --> <br> Please choose authentication method.<br> <table border=0 cellspacing=0 cellpadding=0 width="100%"><tr><td align="left"> <ul style="margin: 10px; list-style-type: square;"> <!-- <li class=indexlist><a href="/mg-local/login?type=testlogon"> Testlogon</a></li> --> <li class=indexlist><a href="/mg-local/login?type=webtoken"> Web Token</a></li> MobilityGuard AB Appendix L Visual Profile v (19)

15 </ul> </td></tr> <!-- <tr><td><img alt="" src="/mg-local/mg-gfx/1x1.gif" height=8></td></tr> <tr><td align="center"><a href="/mg-local/resetpasswordstep1">forgot your password?<br>click here to reset it...</a></td></tr> --> </div> </table> <p> <!-- --> </td><td><img alt="" SRC="/mg-local/mg-gfx/1x1.gif" width=5></td> </tr> </table> </TD><TD style="background-image:url(/mg-local/mg-gfx/dia_midr.gif)" width=16 height=10> </TD></TR> <TR><TD><img alt="" SRC="/mg-local/mg-gfx/dia_botl.gif" width=6 height=16></td><td WIDTH="100%" COLSPAN=2 style="background-image:url(/mglocal/mg-gfx/dia_botm.gif)"><img alt="" SRC="/mg-local/mg-gfx/dia_botlm.gif" width=9 height=16></td><td><img alt="" SRC="/mg-local/mg-gfx/dia_botr.gif" width=16 height=16></td></tr> </TABLE> </CENTER> </body> </html> The html code for e g the file requestraheader.html is found in the final page with the parameters ( PARM ) translated to their right values. Requestraheader.html: <!-- This is the top banner --> <div id=topdiv class=css3pagetop> <table border=0 cellpadding=0 cellspacing=0 width=100%> <tr> <td nowrap> <!-- Left title in the top banner --> PARM{topheading </td> <td align=right width=100% style="padding: 10px" nowrap> <div id=remote style="display: PARM{display;"> <a id=remotelink class=ralink href="/mg-local/jretestifneeded? path=/mg-local/manualreversedframeset.html" target="mg_manualdynamic">parm{text-requesthelp</a> </div> </td> <td align=right nowrap style="padding: 0px 10px 0px 0px;"> <!-- Logo to the right in the top banner --> <img alt="mobilityguard" src="parm{style-path1"> </td> </tr> </table> </div> MobilityGuard AB Appendix L Visual Profile v (19)

16 <!-- One pixel thin black line below the top banner --> <table style="background-color: #PARM{style-color3;" border=0 cellpadding=0 cellspacing=0 width=100%><tr><td style="height: 1px"></td></tr></table> <!-- Shadow below the top banner --> <div id=shadowdiv class=css3separator> <table border=0 cellpadding=0 cellspacing=0 width=100%> <tr> <td style="height: PARM{style-data13"> </td> </tr> </table> </div> <!-- the main background area --> <div id=maindiv class=commonbodydiv> <!-- This is the beginning of the dialog in the center of the page --> <center> <br><br><br> <table border=0 cellpadding=0 cellspacing=20 width=380> <tr valign="top"> <td align=left nowrap> <!-- This is the header/title of the dialog box --> <div class="css3divtop"> PARM{dialogheading </div> <!-- This is the actual dialog box --> <div class="css3div" align="center"> <div style="margin: 10px"> <!-- CUT HERE --> MobilityGuard AB Appendix L Visual Profile v (19)

17 2.3.2 Create / modify themes The easiest way to start is to download a pre installed theme and from there modify the web pages. Step 1 Download a pre installed theme, e g Classic. Step 2 Unzip the file. If you want to save your modified pages as a new theme you must rename the folder Classic ( in this example ) to someting else. If you just want to modify the Classic theme you don't have to rename the folder. Step 3 Modify the webpages. Step 4 Compress the folder to a zip file and upload it to the MobilityGuard server. The theme will show up in the list of installed themes. Step 5 Configure MobilityGuard to use your new theme. 2.4 Theme Profiles Theme profiles can be used to use special custom layouts in some specific situations. For example, a Profile-ID can be specified on a Known Service Provider on a SAML IdP to give users connecting from a specific SP a customized layout. Each profile must be configured with the virtual hosts that should have the profile available. If a user has a specific visual profile ID set in the session that profile will be used. The theme profiles are configured much in the same way that themes are configured under Theme settings. MobilityGuard AB Appendix L Visual Profile v (19)

18 2.5 Examples Themes disabled: Theme Tab Dialog with Settings Sand: MobilityGuard AB Appendix L Visual Profile v (19)

19 Theme Center Desk with modified Navigator and another logotype. MobilityGuard AB Appendix L Visual Profile v (19)