1) Inside the main theme folder, open the config.php file. Scroll down to where you see "login" and you can change that to read your own custom page. In my case, I made this change:
From:
...
),
'login' => array(
'file' => 'general.php',
'regions' => array(),
),
...
To:
...
),
'login' => array(
'file' => 'login.php',
'regions' => array(),
),
....
2) Next, I copied the general.php file, so I can use the same theme settings for my login.php page. However, I took out all the unnecessary sections: langmenu, custom menu, and side blocks. So basically I just show my logo, the main content, and the footer.
3) Lastly, I added some custom CSS to my core.php page to make the login elements look the way I wanted to. I centered all the elements on screen with a nice background like this:
Here is the CSS I used to make this:
/* //////////////////////////////////////////////////// LOGIN PANEL //////////////////////////////////////////// */
.twocolumns div.loginpanel
{
border-right: 1px dashed #dadada !important;
}
.onecolumn div.loginpanel
{
position:relative;
width:35%;
margin: 0 auto;
background:#ececec;
background: -webkit-gradient(linear, 0 100, 0 bottom, from(#ececec), to(#bfbfbf));
background: -moz-linear-gradient(#ececec, #bfbfbf);
background: -ms-linear-gradient(#ececec, #bfbfbf);
background: -o-linear-gradient(#ececec, #bfbfbf);
background: linear-gradient(#ececec, #bfbfbf);
-pie-background: linear-gradient(#ececec, #bfbfbf);
border: 1px solid #a2a2a2;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url(PIE.htc);
}
div.loginpanel h2
{
text-align:center;
text-transform:none;
}
.loginbox .loginform
{
width: 100%;
height:20em;
vertical-align:middle;
}
.loginbox .loginform .form-input
{
vertical-align:middle;
text-align:center;
float:none;
clear:both;
width:100%;
padding-bottom:1em;
}
.loginbox .loginform .form-label
{
padding: 0em 0em 0.3em 2em;
text-align:center;
}
.loginbox .loginform .form-input #username,
.loginbox .loginform .form-input #password
{
position:relative;
min-height:1.7em;
width:60%;
border-size:1px inset #d9d9d9;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url(PIE.htc);
}
.loginbox .loginform .form-input #loginbtn
{
vertical-align:middle;
display:block;
padding:1em;
width:10em;
border:1px solid #bfbfbf;
position:relative;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior: url(PIE.htc);
}
.loginbox .loginform .form-input #loginbtn:hover
{
color:white;
background:#5b2d7e;
}
div.forgetpass,
div.centeredcookies
{
text-align:center;
}
/* //////////////////////////////////////////////////// END OF LOGIN PANEL //////////////////////////////////////////// */
How does your php file like? Cause im trying this too, but my button doesn't come in the center of te screen.
ReplyDeleteThanx
My login.php file does not have any styles included -- it's just directly copied from my "general.php" theme page. I believe I was using one of the latest Aardvark themes as a base.
ReplyDeletepls tell me where to find the core.php file?
ReplyDeleteThanks
Depends on the Theme, is usually in the Theme Style Dir, for Formal White should be
ReplyDelete>yourserver/moodle/theme/formal_white/style
@ ArcInteractive, this CSS is brilliant, thank you, I have a question though:
> How can I add a background Image, I've tried the index.php (no look) should I add it in the Core too? I only want the Login Page to have a Background image, not the whole site.
Thank you :)
For putting an image into the background, you could do two things:
ReplyDelete1) within login.php, add an extra class name to the element that should hold your background image. Then inside your css file, you can simply reference the new class name you created to define the image. That makes sure it only appears in your login page
2) go into login.php and place the image code directly like this:
div id="mypagewrapper" style="background:url(wwwroot.'/theme/mytheme/pix/myimage.png'; ?>) no-repeat"
When you mention "the background" that element could be different for you. I use the google chrome browser and right-click on the screen. I choose the option called "inspect element." Then I can navigate to the specific CSS element or class that I want to test. You can enter new CSS code with the google tools screen and see where to place your image.
Hi how do I insert a logo on my login page
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteFrom where you got
ReplyDeletegeneral.php file code