Differing background colors between components in the same block

Hey everyone :wave:

I’m working on building out a lesson with a block that includes two components, split into two columns. On the left is a text + graphic component and on the right is a text component. The design requirements I’ve been given depict the left column items need to have a different background color from the components on the right side of the block.

Currently, I can’t seem to find a way to accomplish this. The approaches I take either change the background color for both components or seems to have no impact at all. If anyone knows how I could fix this, it would be incredibly helpful.

I accomplished this only by putting the text in the text component in a table and changing the background colour of the table.

It would be great if we could set individual component, block and article background colours please Evolve - it’s really crying out for it!

2 Likes

Yep this would be great to have. The main issue is we run into by having too many styling options is the final CSS file really bloats in file size. If you enable every article style in the theme, this produces a CSS file around 3.3mb which is pretty huge. At the same time having more styling options as mentioned above would allow for a lot more variety in a page so it’s something I’ll bring up with the team when we take a look at theming features for the future.