How to change the colour of each individual column of a multicolumn section

[Wolfbadge]

Hi everyone ,

 I am trying to change the colour of each individiual box/column in the multicolumn. All other suggestions I have seen soo far seem to change the background of the entire box, but I would like the actual columns to be coloured.

If anyone knows any code or anyway to do this, please let me know. I would prefer them to be coloured a light blue "#ADD8E6". 

A picture of its current state is attached below.

Many Thanks.

[Wolfbadge · Accepted solution]

Hi there , Although it worked , it worked on the wrong page. It worked on our home page when I needed it to work on the services page. If you could please resend the code appropriate to that , it would be greatly appreciated.

[Moeed]

Hey @Wolfbadge 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @Wolfbadge 

Would you mind to share your store URL? Thanks!

[niraj_patel]

Hello @Wolfbadge 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .multicolumn.background-primary .multicolumn-card {
        background: #ADD8E6 !important;
   }

</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Wolfbadge]

Hi there ,

thank you this worked. I have 3 different multicolumns on the same page and I was wondering if there was a way to make the columns of each multicolumn a different colour. Ie , for the first multicolumn , all of them would be red "#FF0000" , for the next multicolumn all the columns should all be blue"#0000FF" and all the columns of the final one should be green "#008000".

Many thanks

[niraj_patel]

@Wolfbadge 
Can you share store URL?

[Wolfbadge]

www.wolfbadge.com. Look on the page titled services

[niraj_patel]

@Wolfbadge 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--21843940278598__multicolumn_3Pep3i .multicolumn.background-primary .multicolumn-card {
background: #FF0000 !important;
}
section#shopify-section-template--21843940278598__multicolumn_ctQHPq .multicolumn.background-primary .multicolumn-card {
background: #0000FF !important;
}
section#shopify-section-template--21843940278598__multicolumn_pU8rDa .multicolumn.background-primary .multicolumn-card{
background: #008000 !important;
}
</style>

Please:
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Wolfbadge · Accepted solution]

Hi there , Although it worked , it worked on the wrong page. It worked on our home page when I needed it to work on the services page. If you could please resend the code appropriate to that , it would be greatly appreciated.

[niraj_patel · Accepted solution]

@Wolfbadge 
Sorry 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--21845704278342__multicolumn_iRiLPY .multicolumn.background-primary .multicolumn-card {
background: #FF0000 !important;
}
section#shopify-section-template--21845704278342__multicolumn_4HYJ7n .multicolumn.background-primary .multicolumn-card {
background: #0000FF !important;
}
section#shopify-section-template--21845704278342__multicolumn_YqAFm6 .multicolumn.background-primary .multicolumn-card{
background: #008000 !important;
}
</style>

Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark my both solution as an Accepted Solution.

[threeoffour]

Hi there! I'm trying to get this to work on my site currently, and I'm not having any luck. Upon my quick inspection, my multicolumn items don't have their own section template? They all have the same one, with a suffix of -1, -2, or -3 afterward. 

Here's the link to the site: https://be72c8-bf.myshopify.com/?_ab=0&_fd=0&_sc=1

Pw is yownga