The joonext template has lots of module positions. The great thing about them is that you can style them all individually. This post will tell you how to do that.

First off, you need a browser like Google Chrome in which you can view elements on your page with the inspect option. FInd the section you want to modify, and then you can see that each section as a class name equal to the position name in the template file.

For instance, if you place a module in top-a-1 you can style it in the custom css part of the template with the class name .top-a-1. This goes for all template module positions, making the template ultra versatile in creating custom layouts for your pages.

So a footer-1 section an be called in the css with a .footer-1{background: #eaeaea;} overruling the default footer settings you can use in the template. 

Screenshot 2018-11-19 11.31.06.jpg