Solved: Custom Webview Login Page on Appliance

KiwiDave · ‎12-04-2012

Hi all,

How do I customize the login page for webviews on the vCO appliance?

I have a custom webview and would like to extend the colour scheme to the login window..

Thanks in advance,

Dave

Burke- · ‎12-04-2012

Hello Dave,

The best way to do this is to add the following files to your webview:

\login.html

\login.page

\css\login.css

Adding the files above to your webview will allow you to override the existing login file in the vCO system - and these overrides will ONLY apply to your custom webview

If all you need to do is Color/style changes, then it is likely that some overriding styles in the login.css file will accomodate your needs. I personally use the FireBug extension in Firefox for such things - load up the login page in Firefox, highlight the section/item I need the style tag or info for, then right click and select inspect in firebug.

The default content of the login.page file is:

<?xml version="1.0"?>
<!DOCTYPE page-specification PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN" "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
<page-specification class="ch.dunes.web.webview.pages.Login"> 
    
</page-specification>

The default content of the login.html file is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title><span jwcid="@Insert" value="ognl:webview.name"></span></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="shortcut icon" href="images/favicon.png" type="image/png" />
        <style jwcid="@vco:IncludeDefaultHeader"></style>
        <link rel="Stylesheet" jwcid="@vco:IncludeStylesheet" href="css/login.css" />
    </head>

    <body class="loginPage">
        <div id="container">
            <div layoutPosition="header" id="header">
                <div id="globalHeader">
                    <div id="siteTitle"><!--<a jwcid="@PageLink" page="ognl:webview.urlFolder + '/default'"><span jwcid="@Insert" value="ognl:webview.name"></span></a>--></div>
                </div>
                <div id="sectionHeader">
                    <div id="sectionTitle"><a href="#"><span key="sectionTitle"/></a></div>
                </div>
            </div>
            <div layoutPosition="content" id="main">
                <div id="content">
                    <div class="content_header">
                        <h1><span jwcid="@Insert" value="ognl:webview.name">Webview name here</span></h1>
                    </div>
                    <div class="content">
                        <h2><span key="pleaseLogin"/></h2>
                        <div class="form" jwcid="@vco:Login">
                            <form>
                                <div class="webformFieldBox">
                                    <div class="webformFieldHeader">
                                        <div class="webformFieldName"><label for="login">Username</label></div>
                                    </div>
                                    <div class="webformField"><input type="text" id="login" size="20"/></div>
                                </div>
                                <div class="webformFieldBox">
                                    <div class="webformFieldHeader">
                                        <div class="webformFieldName"><label for="password">Password</label></div>
                                    </div>
                                    <div class="webformField"><input type="password" id="password" size="20"/></div>
                                </div>
                                <div class="webformFieldBox">
                                    <div class="webformField submitField"><input type="submit" value="Log In" /></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer">
                <div id="byLine"><span key="byLine"/></div>
            </div>
            <div id="footerLogo"><a href="http://www.vmware.com"><img border="0" src="images/logo_vmware.gif" alt="VMware, Inc." align="right" /></a></div>
        </div>
        <div id="copyrightNotice">Copyright &copy; 1998-2012 VMware, Inc. All rights reserved. This product is protected by U.S. and international copyright and intellectual property laws.<br/>This product is covered by one or more patents listed at <a target="_blank" href="http://www.vmware.com/go/patents">http://www.vmware.com/go/patents</a>.</div>
    </body>
</html>

If my answer resolved or helped you, please mark it as Correct or Helpful to award points. Thank you!

Visit http://www.vcoteam.info & http://blogs.vmware.com/orchestrator
for vRealize Orchestrator tips and tutorials - @TechnicalValues on Twitter

View solution in original post

Burke- · ‎12-04-2012