Change the background color of an area

Now before you read the title and think this is a dumb question, hear me out. I can't figure out how to change the background color of a certain space. Not a block, but a section. I have a layout with blocks in it, and I want to make the entire layout area have a different background color. I tried adding an html block above it and putting <div id="NAME"> and one below it with a </div>, then set the CSS for that division, but that didn't work. I also tried doing <div style="background-color: #333333; etc."> above and another </div> below, with no success. I also tried adding CSS for ccm-layout-main-11-2 but nothing happened. There's no design option for the layout.
So how can I add a separate background color to a certain part on the page? Or at the very least, a certain layout area. Anyone know?

View Replies: View Best Answer
enlil replied on at Permalink Reply
Is the site live? Can you provide a link?
OptimumFiles replied on at Permalink Reply
Yeah, it's live ( Though nothing is really there since I just started to develop it. Just a few test elements. But the part where the images and search bar is is where I want to change the color at. I want to make a block around them. I'm using the 1140 CSS Grid Concrete5 Starter template because I wanted to use most of my own HTML and CSS codes but it seems to be harder to customize than I originally planned...
JohntheFish replied on at Permalink Reply
A couple of cheats that may (or may not) work

- Use block design to give a background colour to each block in that part of the layout.


- Create a stack with all the blocks in that part of the layout, load the stack into the layout and use block design on that to give it a background colour.
OptimumFiles replied on at Permalink Reply
I tried coloring each block individually but that left blank spaces in between each one.
I haven't tried making a stack for it yet... it sounds like it might work though. I'll try that and get back with the results. Thanks.
enlil replied on at Permalink Reply
to do this properly, I would first copy the theme to root/themes folder, then begin modifications there. What you need to do for instance, is look for the main css files within the theme and inside them look for:


this is where you would modify the background color css for the area (this is the images "area"). if it doesnt exist you could add it to the file. Something like:

.ccm-layout-row.ccm-layout-row-1 {
background: #141414;

Johns stack solution works equally as well, with a lot less stress ;)
ronyDdeveloper replied on at Permalink Reply
OptimumFiles replied on at Permalink Best Answer Reply
Nothing was working how I wanted, but I figured out that all I had to do was add it in the design for the column in which I added the layout, so it changed the the CSS for the entire thing.