NewSchool Learning: Standards Based Moodle Designs

On two separate Moodle themes (VikingNet and Serenity), I’ve hacked the CSS of the login block so that it appears in the header instead of in a sideblock column, where it belongs. For some layouts (VikingNet is a good example), this really works. So, I thought it might be helpful to others if explain how I did it.

Disclaimer: This is a hack and you will be pulling the login block out of a table. For this reason, expect to do some troubleshooting in different browsers. Don’t say that you weren’t warned!

Oh, and I would backup just to be safe.

I basically just set the login block to an absolute position like this:

.block_login {
position: absolute; /* most important value */
top: XXpx;
right: XXpx;
width: XXXpx;
height: XXXpx;
}

Of course, the X values above can be set to anything you like. Now, once you have your block up there, what do you do with it? You have backgrounds, font-colors, etc. yet to deal with to deal with.

I would recommend hiding the collapse button:

.block_login img.hide-show-image {
display:none;
}

Then get rid of any background colors you may be using in your sideblocks:

.block_login .header,
.block_login .content {
background:none !important; /* if you want, you can set a color or image here */
font-size:0.9em; /* just because I liked it like that */
}

Assuming the “Login” title color needs to be changed:

.block_login .header h2 {
color: #yourhex;
}

If you would like your login menu to appear inline (as in Serenity), as opposed to the standard username above password layout:

.block_login .loginform .c1 {
text-align:left; /* Standard sheet has it set to center */
margin:0;
float: left; /* this is the important one */
padding:0 5px; /* this separates them; values arbitrary */
font-size: 0.8em; /* I would stick with same value used elsewhere */
color:#yourhex;
}

And, then of course there is the footer (lost password link, new account link) to take care of:

.block_login .footer div {
font-size:0.8em; /* again, your preference */
float: left; /* to get them right next to each other */
padding: XXpx /* can be set to any value to separate divs */
}
.block_login .footer a {
color: #yourhex;
}

And, that should take care of it. Manipulate a few variables here and there until you get the look you desire.