Block padding anomaly theme

Block padding anomaly theme

by Chrissy Trenholme -
Number of replies: 14

Hi, I would like to reduce the bottom padding in the blocks in my theme that is based on anomaly, to match the top.  I have tried reducing the padding in the blocks section of the general.css and even taken it out altogether with no luck.

/** Blocks **/

.block {
    border: 1px solid #C8C9C7;
    background-color: #E3E3E3;
    margin-bottom: 10px;
    overflow: hidden;
}
.block h1,
.block h2{
    color: #006699; font-family: Arial;
}
.block h3,
.block h4 {
    margin: 0;
}

.block .header {
    margin: 5px 3px 3px 3px;
}

.block .content {
    margin: 5px 3px 3px 3px;
}

I have also tried changing the information in the blocks part of the browser.css. 

.block .corner-box {
    border: 1px solid #C8C9C7;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: #E3E3E3;

This does reduce the padding but then puts out the bottom rounded corners, but I don't know what to change to make those work in the following information.  it also doesn't reduce the space at the bottom by much.

What I would like to know is there a simpler way?  I would like the bottom to match the top.  I have attached a screen shot of the blocks.

Thanks, Chrissy

Attachment blocks.JPG
Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You should only be thinking about the padding NOT the margins

But think carefully what you do with the margins. You should only be looking at the bottom margin of .block .content which is only 3px. so change this...

.block .content {
    margin: 10px 6px 3px 6px;
}

to this...

.block .content {
    margin: 10px 6px 0;
}

This means 10px (top) 6px (left & right) 0 (bottom)

You can then safely remove the padding-bottom: 10px; from .block .corner-box but leave the margin intact like so...

.block .corner-box {
    border: 1px solid #C8C9C7;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: #E3E3E3;
}

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

OK I have tried that, but it puts out the rounded corners, as you can see in this screen shot.  Do I need to change the browser.css ?


.block .corner-box .rounded-corner.bottom-left {
    background-position: 0px 11px;
    float: left;
    bottom: 0px;
    left: -1px;
}

.block .corner-box .rounded-corner.bottom-right {
    background-position: 11px 11px;
    float: right;
    bottom: 0px;
    right: -1px;
}

Thanks, Chrissy

Attachment blocks_no padding.JPG
Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

By the way...which version of Moodle are you using, and which browser do you normally use, as this may have something to do with it?

The only two changes are the ones I gave you. If you have been changing values elsewhere or adding that code to another stylesheet then this is where you are doing things wrong.

I have just tested this in my localhost server, and it works fine, there is nothing in the CSS I gave you to affect the rounded corners, unless it is in IE7/IE8 in which case it will be the 3px margin. So you can ADD this CSS to the bottom on style/browser.css using...

.ie7 .block .content,
.ie8 .block .content {
    margin: 10px 6px 3px 6px;
}

HTH

Mary

 

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

Hi Mary,

Sorry I should have said - Moodle 2.2 and IE8.  I have tried adding that bit of code and it doesn't seem to work,  I did enable Theme Designer Mode.

Out of interest why shouldn't I change the Margins?  I have changed them in the base.css for the #page and .generalbox. 

Thanks, Chrissy

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

.block .content {
    margin: 10px 6px 0;
}

.block .corner-box {
    border: 1px solid #C8C9C7;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: #E3E3E3;
}

Well try it this way then...tell me if that fixes this in IE8

Mary

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

Hi Mary,

Taking out the margin bottom has no effect at all, interestingly.  It is definitely the padding that reduces the bottom of the block.  But the rounded corners remain as was, even with the bit of code you suggested. 

Many thanks,  Chrissy

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It could be that you have made a change somewhere and this is casuing it to look wrong, as it looks OK on my 2.2.4 Moodle site.

You could upload the 2 CSS files you have been altering and I could check them for you against my version of Anomaly?

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

Hi Mary,

Here they are along with another that I have altered.  Many thanks for doing this.

Chrissy

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Chrissy Trenholme -

I seem to be only able to add one at a time - sorry

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Chrissy Trenholme -

here is the last

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You still have the margin-bottom: 10px; in the browser.css for ...

.block .corner-box {
    border: 1px solid #C8C9C7;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-color: #E3E3E3;
}

Try removing that line as this worked better on my Moodle site.

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

Sorry Mary, I removed that and when I found it made no difference I put it back!  I have removed it now but don't notice any difference.  Thanks  Chrissy

Average of ratings: -
In reply to Chrissy Trenholme

Re: Block padding anomaly theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Have you Purged all caches?

Average of ratings: -
In reply to Mary Evans

Re: Block padding anomaly theme

by Chrissy Trenholme -

Morning,  yes I have, so it must be something else.  I think that enough time has been put into this so unless you can think of any thing else, I wil live with what I have.  Many thanks for all your help.  Chrissy

Average of ratings: -