APEXblog.nl - Tips and Tricks

About This Blog:
I (Richard Weug) started this blog primary for myself to save all kinds of Apex tips and tricks in one place. To use it as a place to write down how I used some coding in my own projects, but also to copy and paste all kinds of articles I find on the Internet. (So I never have to wonder on what website did I read about??? When I see something interesting I collect the content so I have my own archive/knowlegde base.

View my profile on LinkedIn

 

Template / CSS

Print
10
Feb

Create your own wonderful login screen

Written by Richard Weug. Posted in Template / CSS

How to change the default login page:

Now the cheating part about designing login pages is that: if you don’t require anything but a username/password with a couple of additional links, then I’d recommend the following: Create a background image that gives you the cool look that you’re striving for and simply center your form on the background image. Here’s an example for the login page, Note: the positioning of the background and form always stay in place on page resizing.

Here’s the CSS to position your login form and background image (I normally set “No Template” on my page 101 login form).

html, body {
	font:normal 12px verdana;
	padding:0;
	border:0 none;
	overflow:hidden;
	height:100%;
}
body {
	padding: 0px;
	background-image:url(&LOGIN_BACKGROUND_IMAGE.);
	background-repeat:repeat;
	background-position:center;
	background-attachment: fixed;
	text-align:center;
	margin:0 auto;
	vertical-align:middle;
}
#Messages {
        width:345px;
        margin-left:-180px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-35px;
}
#BoxBody {
        width:345px;
        margin-left:-170px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:30px;
}

And here’s the page template

 

 

<div id="Messages">#GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE#</div> <div id="BoxBody"> <div align="center">#REGION_POSITION_01##BOX_BODY##REGION_POSITION_02##REGION_POSITION_04#</div> </div><br /><br /></pre> <p>You can download the .psd file <a href="http://application-express-blog.e-dba.com/wp-content/blog/login-screen-background-download.zip">here. For non-photoshop people you can download the .png <a href="http://application-express-blog.e-dba.com/wp-content/blog/login-screen-background-download.png">here.</p> <p> </p> <p>Original article link: <a href="http://application-express-blog.e-dba.com/?p=1681" target="_blank">http://application-express-blog.e-dba.com/?p=1681 written by M. Nolan