Different background for even/odd blocks in same region?

Different background for even/odd blocks in same region?

by Amir Elion -
Number of replies: 5

Would it be possible to have different background colors for even/odd blocks in same region using css?

So say, 1st, 3rd, 5th...block would have grey BG, while 2nd, 4th, 6th...would have blue?

Thanks

Amir

Average of ratings: -
In reply to Amir Elion

Re: Different background for even/odd blocks in same region?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Yes: http://www.w3.org/Style/Examples/007/evenodd.en.html

Average of ratings: -
In reply to Gareth J Barnard

Re: Different background for even/odd blocks in same region?

by Amir Elion -

Thanks Gareth,

But what css should be used for blocks in a specific region to behave like that?

Thanks

Average of ratings: -
In reply to Amir Elion

Re: Different background for even/odd blocks in same region?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Amir,

You can use browser development tools and the example to work out the CSS within the 'aside' tag for the correct selector to use.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Different background for even/odd blocks in same region?

by Amir Elion -

The thing with blocks is that they are not always in the same list, e.g. there are things like "skip-block" between them etc. so it's not part of the same list of items in the div.

Average of ratings: -
In reply to Amir Elion

Re: Different background for even/odd blocks in same region?

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

Something like this should work...I think?

#block-region-side-pre .block:nth-child(even) {
    background: red;
}

#block-region-side-pre .block:nth-child(odd) {
    background: blue;
}

#block-region-side-post .block:nth-child(even) {
    background: green;
}

#block-region-side-post .block:nth-child(odd) {
    background: yellow;
}

Edit:

Average of ratings: Useful (1)