Hi All,
I am working on a new theme for my Moodle Playpen site and need a little assistance.
If you visit the site (it is still a work in progress) you will see that on my theme the right side column is extra wide on the homepage. this is for design reasons.
What I would like to do is have the login fields and button all on one line rather than the three we see currently.
Can i do this with CSS?
Julian
Hi Julian,
First I'd like to say I'm very fond of your site's theme design (I am a great fan of two-column layouts with a column of blocks on the right).
At the moment, the labels "username" and "password" are not displayed in the Login block, is this by design? If they were displayed, there would not be enough width to display all 3 elements on one line, only the username and password labels and boxes on one line and the button on the next line.
Anyway, tell me if you want to achieve the effect shown on attached screenshot, and I'll try to come up with a purely CSS solution.
Joseph
Finally figured it out. It's not pretty and Id love thoughts on how to streamline this, but this is what I used to get the following effect.
.block_login {
position: relative;
text-align: center;
padding: 0px;
border-color:#435c68 !important;
border-width: 0px;
border-style: none;
}
.block_login .content {
display: block;
height: 100%;
padding-top: 10px;
border: none !important;
background: none !important;
}
.block_login .footer {
text-align: right;
}
.block_login .loginform .c1 input {
width: 41px;
font-size: 1em;
border: 1px solid #6c6c6c;
}
.block_login .loginform .c1 {
float: left;
color: #6c6c6c;
text-transform: uppercase;
font-size: .9em;
font-weight: bold;
margin:2px 1px;
padding: 1.5px;
}
.block_login .loginform input
{
border: 1px solid;
background: #dbf0fe;
}
input
{
padding: 3px !important;
font-size:1em;
}
.block_login {
position: relative;
text-align: center;
padding: 0px;
border-color:#435c68 !important;
border-width: 0px;
border-style: none;
}
.block_login .content {
display: block;
height: 100%;
padding-top: 10px;
border: none !important;
background: none !important;
}
.block_login .footer {
text-align: right;
}
.block_login .loginform .c1 input {
width: 41px;
font-size: 1em;
border: 1px solid #6c6c6c;
}
.block_login .loginform .c1 {
float: left;
color: #6c6c6c;
text-transform: uppercase;
font-size: .9em;
font-weight: bold;
margin:2px 1px;
padding: 1.5px;
}
.block_login .loginform input
{
border: 1px solid;
background: #dbf0fe;
}
input
{
padding: 3px !important;
font-size:1em;
}
