Peter Raganitsch has done some awesome things for the APEX community, and one of them was to provide a script that can spruce up this page.
Trouble is, the APEX development team keep changing the look and feel of the environment, stuffing up training manuals world-wide ;-)
Edit - Peter informs me he has updated his version, I can't remember why I couldn't see it at the time.
By default, the APEX 4.1 login looked like this
 |
| APEX 4.1 Workspace Login |
 |
| APEX 4.2 Workspace Login |
Or just allowing me to put SAGE green in this example, complete with stretched logo. Lucky I thought too late to put a green pig instead.
 |
| Customised for SAGE |
<script src="/i/themes/theme_sage/custom/ApexLib_Loginpage.js" type="text/javascript"></script> <script type="text/javascript"> apexlib.loginpage.customizeLoginPage ( "SAGE Computing Services" , "1.5em" , "darkgreen" , "Isn't this brilliant?" , "/i/sage.gif" , "http://sagecomputing.com.au" , false , false , false , false , false , false); </script>And here is the ApexLib_Loginpage.js script with my modifications
//==============================================================================
// PROJECT: ApexLib - The APEX Library (http://apexlib.soureforge.net/ )
//
// DESCRIPTION:
//
// This JavaScript library contains helpful functions used to
// customize the APEX Workspace Login Page.
//
// SUPPORTED APEX VERSIONS:
//
// 4.2
//
// REFERENCED OTHER LIBRARIES:
//
// AUTHOR(S):
//
// Original: Peter Raganitsch (http://www.oracle-and-apex.com/ )
//
// Update for APEX 4.2: Scott Wesley (http://grassroots-oracle.com/ )
//
// SVN HEADER:
//
// $Id: $
//
//==============================================================================
//==============================================================================
// Initialize the namespace for ApexLib.
//==============================================================================
if (!window.apexlib) window.apexlib = {};
if (!apexlib.loginpage) apexlib.loginpage = {};
//==============================================================================
// Global variables used by most of the functions.
//==============================================================================
apexlib.loginpage.sVersion = "1.0";
//==============================================================================
// used in the "Login Message" to customize the APEX Workspace Login Page
//==============================================================================
apexlib.loginpage._customizeLoginPage = function
( pLoginRegionTitle
, pLoginRegionTitleFontSize
,pLoginFontColor
, pLoginRegionText
, pLoginRegionLogoImage
, pLinkLogoToHref
, pShowLoginMessageRegion
, pShowWorkspaceRegion
, pShowGettingStartedRegion
, pShowCommunityRegion
, pSocialNetworkingRegion
, pShowOracleBanner
)
{
// if user passed a region title we remove the Oracle-Application-Express image
// and display the given string instead (in the given font size which is 2.2em by default)
if (pLoginRegionTitle)
{
//var vLoginTitle$ = jQuery("img[src$='apex-logo-white.gif']").parent();
var vLoginTitle$ = jQuery("div.aLoginHeader h1");
vLoginTitle$.text(pLoginRegionTitle);
if (pLoginRegionTitleFontSize)
vLoginTitle$.css("font-size",pLoginRegionTitleFontSize);
else
vLoginTitle$.css("font-size","2.2em");
if (pLoginFontColor)
vLoginTitle$.css("color",pLoginFontColor);
else
vLoginTitle$.css("color","black");
}
// identify the big APEX Logo image, this is used to navigate inside the login region
var vLoginRegionLogoImage$ = jQuery("img[src$='apex-db-apps.png']");
// shall we replace the default explanation text below the login-button?
if (pLoginRegionText)
{
//vLoginRegionLogoImage$.parents(".rc-content-login").children("div").eq("3").children("div").html(pLoginRegionText);
var loginText$ = jQuery("div.aLoginIcon p");
loginText$.html(pLoginRegionText);
}
// does user want to display his company logo instead the APEX Logo?
if (pLoginRegionLogoImage)
{
vLoginRegionLogoImage$.attr("src",pLoginRegionLogoImage).removeAttr("width").removeAttr("height");
// should the logo be a link to a specified address?
if (pLinkLogoToHref)
{
vLoginRegionLogoImage$.wrap("<a href='"+pLinkLogoToHref+"' target='_blank'></a>");
}
}
// if user doesn't want to show the Login-Message-Region we hide it (display:none)
if (pShowLoginMessageRegion === false)
{
//jQuery(".htmldbBodyMargin").children("div").eq(1).children("div").eq(1).css("display","none"); // APEX 4.1
// APEX 4.2 remove yellow notice
jQuery(".notice").css("display","none");
}
// if user doesn't want to show the Workspace Region we hide it (display:none)
if (pShowWorkspaceRegion === false)
{
//jQuery("a[href^='f?p=4550:7:']").parents(".rounded-corner-region").css("display","none"); // APEX 4.1
jQuery("a[href^='f?p=4550:7:']").parents(".borderlessRegion").css("display","none"); // APEX 4.2
}
// if user doesn't want to show the Getting Started Region we hide it (display:none)
if (pShowGettingStartedRegion === false)
{
//jQuery("a[href^='f?p=4600:6:']").parents(".rounded-corner-region").css("display","none");
jQuery("a[href^='f?p=4600:6:']").parents(".borderlessRegion").css("display","none");
}
// if user doesn't want to show the Community Region we hide it (display:none)
if (pShowCommunityRegion === false)
{
//jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".rounded-corner-region").css("display","none");
jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".borderlessRegion").css("display","none");
}
// if user doesn't want to show the Social Networking Region we hide it (display:none)
if (pSocialNetworkingRegion === false)
{
//jQuery("a[href='http://forums.oracle.com/forums/forum.jspa?forumID=137']").parents(".rounded-corner-region").css("display","none");
jQuery("a[href='http://twitter.com/oracleapexnews']").parents(".socialNetworking").css("display","none");
//$('.aLoginSubBody socialNetworking').css("display","none");
}
// if user doesn't want to show the black Oracle image banner we hide it (display:none)
if (pShowOracleBanner === false)
{
// remove Oracle APEX black banner
jQuery(".aHeader").css("display","none");
}
} // apexlib.tool._customizeLoginPage
//==============================================================================
// used in the "Login Message" to customize the APEX Workspace Login Page
//==============================================================================
apexlib.loginpage.customizeLoginPage = function
( pLoginRegionTitle // string to be displayed in the region header
, pLoginRegionTitleFontSize // font-size for the region title, should include em or px
,pLoginFontColor // Color of region title, eg: green for dev, darkorange for test
, pLoginRegionText // replaces the explanation text inside the login-region, can include HTML
, pLoginRegionLogoImage // URL pointing to an image with max size 240x200px
, pLinkLogoToHref // when user clicks the new Logo, this URL will be opened
, pShowLoginMessageRegion // true/false: show the Login Message Region (the yellow one)
, pShowWorkspaceRegion // true/false: show the Workspace Region
, pShowGettingStartedRegion // true/false: show the Getting Started Region
, pShowCommunityRegion // true/false: show the Community Region
, pSocialNetworkingRegion // true/false: show the Social Networking region
, pShowOracleBanner // true/false: show the black Oracle image top banner
)
{
// make sure, that the whole document (page) is loaded before changing it
jQuery(document).ready(function(){apexlib.loginpage._customizeLoginPage(pLoginRegionTitle,pLoginRegionTitleFontSize,pLoginFontColor,pLoginRegionText,pLoginRegionLogoImage,pLinkLogoToHref,pShowLoginMessageRegion,pShowWorkspaceRegion,pShowGettingStartedRegion,pShowCommunityRegion,pSocialNetworkingRegion,pShowOracleBanner);});
}
Hopefully blogger doesn't butcher the syntax to make it difficult to copy. Let me know if you have problems, or download the file here.And thanks again to Peter for the awesome groundwork for this option to add style to your APEX environment.
Scott
No comments:
Post a Comment