Building a nice looking login page with custom CSS ||PHPRUNNER

PHPRunner 7.0 and ASPRunnerPro 8.0 add a new new 'Custom CSS' feature - an easy way to modify the appearance of your pages adding bells and whistles Style Editor doesn't support. Lets see how we can build a custom login page similar to this one:

Lets start with some basic stuff.

Here is how you can set image as a background of the login page:

body.function-login {
height:100%;
background:transparent url("http://mywebsite.com/images/some_image.jpg") no-repeat center center fixed;
background-size:cover;
}

What is body.function-login by the way?

body.function-login means this background will be only applied to the login page. If you want to apply this background to all List pages use the following:

body.function-list {
height:100%;
background:transparent url("http://mywebsite.com/images/some_image.jpg") no-repeat center center fixed;
background-size:cover;
}

To figure out class names of individual pages you will need either Firefox browser with Firebug or Chrome. Here is the screenshot of body tag inspected in Chrome Developer Tools.

What if I want to apply this background image to all page in my application?

It's not difficult at all. Simply use body tag in Custom CSS:

body.function-list {
height:100%;
background:transparent url("http://mywebsite.com/images/some_image.jpg") no-repeat center center fixed;
background-size:cover;
}

Okay, I'm getting it. What if I have a single List page that needs to have her own background?

This can be done as well. Custom CSS belongs to the current selected Style. If you assign a custom Style to one of List pages you can use Custom CSS that will be assigned to that single List page only.

We proceed to the Style Editor, make sure this List page is selected, choose "Apply to the current page" in Styles section and choose a different style for this page. Now we can proceed to Custom CSS and set different image as a background for this page.

body.function-list {
height:100%;
background:transparent url("http://mywebsite.com/images/some_other_image.jpg") no-repeat center center fixed;
background-size:cover;
}

Got it. What about that semi-transparent login form?

Here is the code that does the job.

.function-login .rnr-c > * {
background: rgba(17,17,17,0.85) !important;
}

What about Add page? I need the same look and feel there.

It will be slightly different. The same idea though.

.function-add .rnr-c > * {
background: rgba(17,17,17,0.85) !important;
}

I have applied this code to the login page. This is what I got.

Not bad! This can be enough for most projects however with some extra work we can make it look exactly like a screenshot of the beginning of this article. Lets get started.

1.  Proceed to Security screen, turn on Facebook login and Password reminder.

2. Proceed to Style Editor, select Login page on the left, choose 'Apply to the current page' option from  'Project layouts'. Choose login1 layout.

3. You may notice that login page form is a bit wider than what we are after. Click 'Customize layout' and remove width=500 snippet.

4. Lets spend some time in Visual Editor now. We need to move Facebook button to the top and also move username/password labels so they appear on the top of input boxes.

Before moving form labels I recommend to turn on Show Borders mode.

Drag username input box to the left column and position it under Username label. You will need to use Enter button to insert a line break between the label and the field itself. Do the same with password field. Now delete the right column, we don't need it anymore.

Moving Facebook button should be easy. Just click on it and drag it to the top of the form.

5. Now lets change some labels. Click on 'Submit' button, switch to HTML mode and change 'Submit' to 'LOG IN'.

6. Switch back to Visual Mode. Select 'Remember password' link and switch to HTML mode again. We need to modify this link adding CSS forgot class. This class will be later defined in Custom CSS section. Here is howRemember password link is supposed to look in HTML code.

<A class="forgot" href="remind.php">
Forgot your password?
</A>

7. Since built-in Facebook button doesn't support the style we looking we need to replace it with own own button. For this purpose click on Facebook button, switch to HTML code and replace button's HTML code with the following:

<a href="#" onclick="window.login();return false;">
Log in with Facebook
</a>

It will not look nice until we apply our custom CSS. Do not worry, we'll get to it in a few seconds.

8. Now here is the CSS code and glues it all together. I'm posting it as a single code snippet so you can copy and paste it to your project. Note that this code requires one more image file (facebook.png), that appears on Facebook button. You can download it from the Web, upload somewhere to your website and modify image URL in CSS code accordingly. We use icon size 29x29px in this example.

/* makes login form semi-transparent */
.function-login .rnr-c > *
{
  background: rgba(17,17,17,0.85) !important;
}
 
/* login page background */
body.function-login {
height:100%;
background:transparent url("http://yourwebsite.com/images/homepage.jpg") no-repeat center center fixed;
background-size:cover;
}
 
/* styling of 'remember password' link */
 
a.forgot {
color: #70d4dd;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
 
/* sets height of the login form header */
.rnr-b-loginheader {
height: 100px;
}
 
/* Facebook button styling */
 
.facebook {
-webkit-box-shadow: rgb(152, 202, 245) 0px 2px 0px -1px inset, rgba(64, 64, 64, 0.298039) 0px 2px 2px 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(0, 131, 213);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(80, 164, 216)), to(rgb(0, 131, 213)));
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(8, 135, 213);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(8, 135, 213);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(8, 135, 213);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(8, 135, 213);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgb(152, 202, 245) 0px 2px 0px -1px inset, rgba(64, 64, 64, 0.298039) 0px 2px 2px 0px;
color: rgb(255, 255, 255);
cursor: auto;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 49px;
line-height: 49px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 32px;
padding-right: 2px;
padding-top: 0px;
text-align: left;
text-decoration: none;
text-shadow: rgb(0, 0, 0) 0px -1px 1px;
text-transform: uppercase;
vertical-align: baseline;
width: 252px;
background: -moz-linear-gradient(center top , #50A4D8 5%, #0083D5 100%) repeat scroll 0 0 transparent;
}
 
a.facebook-icon:before {
background: url(http://yourwebsite.com/images/facebook.png) no-repeat;
content: '';
display: inline-block;
width: 29px;
height: 29px;
position: relative;
left: -15px;
top: 9px;
}
 
/* make input boxes on the login page slightly large */
 
.function-login input[type=text], .function-login input[type=password] {
background-color: #ffffff;
border: 1px solid #c3c2c2;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
width: 290px !important;
display: inline-block;
height: 26px;
padding: 0px 6px;
margin: 5px 0 0 0;
font-size: 12px;
line-height: 14px;
color: #555555;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
 
.function-login .rnr-page {
margin: 50px auto 0 auto;
padding: 0 0 20px 0;
display: block;
}
 
/* width of the login form */
 
.function-login .rnr-c-fields {
width: 350px;
}
 

9. One last piece is the "LOG IN" button styling. In this example I have done this using Style Editor. Remember that this is the "Main button" style. Use 'Lato' font, 16px font size, bold if you want to create something similar.

If you done everything right here is how your login page is going to look in Visual Editor.

"Message" area is where "Invalid login" message will appear.

What else would you like to know?

Sumber :http://xlinesoft.com/blog/2013/10/26/building-a-nice-looking-login-page-with-custom-css/