Hi,

If you include CSS in your main.css file that should work, but you might need to hit ctrl+shift+r in your browser to clear your local cache, and/or in mojoPortal go to Administration > Advanced Tools > Design Tools > Cache Tool and click the "Reset Skin Version GUID" button on that page to see the differences.

As far as adding other colors, it's pretty simple. I'd recommend a CSS setup like this:

.colored-section {
    background-color: #a1b8c6; /* Put your default color here */
    color: #fff;
    margin: 20px auto;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}

.blue-section {
	background-color: #478fcc;  /* Put your blue color here */
}

.red-section {
	background-color: #e42026;  /* Put your red color here */
}

.green-section {
	background-color: #4daf4e; /* Put your green color here */
}

.purple-section {
	background-color: #903e97;  /* Put your purple color here */
}

.orange-section {
	background-color: #e16b26;  /* Put your orange color here */
}

Then, to customize your colors simply replace the hex values (the series of 6 characters after the # in the 'background-color' rule) with a proper CSS color value for whatever colors you want to use.

Remember, if you want to continue using the .LESS advantages of a skin, you'll need to include this code in your skin.less file and recompile the main.css file using prepros - adding CSS directly to the main.css means that CSS will be overwritten if anyone ever does recompile the .LESS, so don't do that unless you're sure you don't care about .LESS.

Hope this helps!