Use of Colour

Post here if you have questions about creating SuperFlexi Solutions.

The SuperFlexi documentation is very thorough, so you might want to start there.

10/17/2017 2:42:11 PM
Gravatar
Total Posts 17
Microquiz

Use of Colour

Hello,

Is there a method of filling some page sections with colour (just like the Flexi Icon Block)?

I would like to fill the background of some sections (to help with the overall look/theme).  I note that the Mojoportal main Site has a darker blue in some sections.  Many Thanks.

10/18/2017 11:16:34 AM
Gravatar
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Use of Colour

Hey,

Yes, you can use the "Custom CSS Class" input on your module settings to add classes to them, and then define those classes to have background colors in your CSS. The blue sections in the mojoPortal site skin use this method.

Hope this helps!

10/18/2017 5:17:54 PM
Gravatar
Total Posts 17
Microquiz

Re: Use of Colour

Hello,

Many thanks for your answer - please tell me more!

I don't know how to creat a CSS class (that fills a colour into the section).

This would be a great feature.

Many thanks.

10/23/2017 10:17:18 AM
Gravatar
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Use of Colour

Hi,

A CSS Class is a bit of code that goes in your skin and changes the rules that the browsers use to display a webpage. For instance, if you put the following CSS in your skin:

.blue-section {
    background: #478fcc;
    color: #fff;
    margin: 20px auto;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}

And then create a module on your site, click "settings", and type the CSS Class name "blue-section" into the "Custom CSS Class" input and save, you should see a change in the way the module displays (to have a blue background, some padding, and text inside it will be centered and white). Note that you may need to clear your cache and/or reset your Skin GUID to see the changes.

You can define your classes however you like, but ultimately this comes down to skin design.

Hope this helps!

10/29/2017 4:17:32 PM
Gravatar
Total Posts 17
Microquiz

Re: Use of Colour

Many Thanks, I get it, but where do I place it (the code).

I tried putting it into main.css but it does not work!

Just a little more help please.  Thank you.

 

11/3/2017 9:16:01 AM
Gravatar
Total Posts 17
Microquiz

Re: Use of Colour

Hello,

The CSS for colour backgrounds that I have found most useful are:

(use the following CSS Codes for changing the blocks):  section-dark  or  section-grey

This is a great feature - do you have any more like this?  It would be ideal for skin development.

ie "section-gold" or "section-yellow"  would be great - I have tried to code this but it never works!

Many Thanks

Ray

 

 

11/3/2017 1:39:31 PM
Gravatar
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Use of Colour

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!