Adding a colour background to the second text block on every blog post

Site URL: https://www.acrisl.org

Hello!

Apologies in advanced if I’m not using the right wording here. 

I built a website for a client, who wanted her blog pages to have a kind of ‘sidebar’, basically just a second column on every post with a coloured background to separate it from the rest of the text. So not quite the same as a blog sidebar which would have the same information across every post.

I achieved this using CSS. You can see an example of it in action here:

https://www.acrisl.org/casenotes/mudzuru-ampamp-another-v-ministry-of-justice-legal-ampamp-parliamentary-affairs-no-ampampothers-const-application-no-7914-cc-12-15-2015-zwcc-12-20-january2016ccz-122015

However, I have to target each block on every blog page in custom css. Now, she wants to upload blog items by herself, and the process is too complex for her to manage.

Here is an example of one without the background:

https://www.acrisl.org/casenotes/mudzuru-ampamp-another-v-ministry-of-justice-legal-ampamp-parliamentary-affairs-no-ampampothers-const-application-no-7914-cc-12-15-2015-zwcc-12-20-january2016ccz-122015-ghfkj

So I was thinking, I could target the 2nd text block using the following code, which doesn’t work:

.sqs-block-content:nth-of-type(2) {

background: #558462;

}

My other idea is to make a rule that every second column is a colour, but I have no idea how I would go about that.

Any help would be appreciated and happy to answer any questions to clarify what I mean.

Thank you!

Ooh I think I worked it out:

// green blog columns //

.sqs-col-5 {
background: #558462 !important;
}

.sqs-col-5 p, {
color: white !important;
}

.sqs-col-5 p a, {
color: #323349 !important;
}

It would be nice to add padding to that text block, so if anyone has a better way of doing it, please do hit be up!

20 hours ago, sarahhalliday said:

Ooh I think I worked it out:

 

// green blog columns //

.sqs-col-5 {
background: #558462 !important;
}

.sqs-col-5 p, {
color: white !important;
}

.sqs-col-5 p a, {
color: #323349 !important;
}

 

It would be nice to add padding to that text block, so if anyone has a better way of doing it, please do hit be up!

 

Do you still need help?

On 7/30/2021 at 10:18 AM, tuanphan said:

Do you still need help?

If I could also have padding around the text on those columns, that would be great! Is there a way of doing this? 

Thank you!

17 hours ago, sarahhalliday said:

If I could also have padding around the text on those columns, that would be great! Is there a way of doing this? 

Thank you!

Use this CSS

div#block-yui_3_17_2_1_1614871109870_6008 {
    padding: 30px;
}

https://www.acrisl.org/casenotes/mudzuru-ampamp-another-v-ministry-of-justice-legal-ampamp-parliamentary-affairs-no-ampampothers-const-application-no-7914-cc-12-15-2015-zwcc-12-20-january2016ccz-122015