Change default css styling for outer div of template-grid

Hello, I have a Template grid and want to style it a little bit diffrent. I can style the elements in the grid as I want, but the div surrounding the elements cant be styled through the appearance tab of the template grid. I went and looked into the project folder and there I can change the apperance of the template-grid classes in the file: /theme/style/web/css/man.css  But this will change the apperance of all the template grids and not just the one.   so what is the correct way to change it for just one? 
4 answers

Hi Moritz,

You could add a new class to your scss files and use the same class on the template grid that you want to change.

Additionally, I’d recommend to make changes in scss files as they are more maintainable and will be compiled to your css files during runtime and your css will then be overwritten (if you specifically made some changes in css files).

Hope this helps!


Thanks For the Reply!

Yes, i did that. I added a new class here: /theme/style/web/sass/main.scss that looks like that:


    background-color: #44e36e !important;



It should change the bc to a green. 

then I apply the class like that:


and rerun the application. 

When I look at the result, nothing changes, but I see in the crome inspector, that it successfully insertet the class:

so why is the background color not changing?


Ok, I now looked into the css that i get from the browser. it looks like this:

the file is _custom.scss

There the class is missing. If I now look into the file from my editor i see:

So there the class is. 

Why is the class not in the browser?

do i do something wrong?


You see, it is the same issue as this one:

Even if I add a class in already imported files i dont see the chage in the frontend.