Picture of Anne Vlaanderen
Background color
by Anne Vlaanderen - Saturday, 20 October 2018, 3:44 PM

Hi all, 


I was wondering, I just installed the adapt authoring tool, how can I change my background color's? 




Re: Background color
by Sam Howell - Thursday, 16 May 2019, 3:47 PM

Hi Anna,

A quick and easy way to change the background colours (as well as other styling) is to add additional CSS in the Project settings. Go to Project settings, scroll down to Custom CSS/LESS code, and then add any additional styling for that project, such as:

.flipper-inner .flipper-item .flipper-item-body {
    background-color: #2f80ba;

To establish which elements (e.g. ".flipper-inner" etc.) you need to include in the code, go to your browser's inspection tool (for Firefox: menu button --> Web Developer --> Inspector). You should then be able to explore the areas of your project/page and see which elements are where. You can also alter the CSS in real time in this Inspector mode, to easily and instantly see what your changes would look like).

Hope this helps...

Picture of Ailiniyazi Maimaiti
Re: Background color
by Ailiniyazi Maimaiti - Friday, 20 September 2019, 7:12 AM

Where do you want to make changing on background color?


If whole page, go to Dashboard > Course structure > Project settings > Custom CSS/LESS code  and add this code:
body { background-color: #fff; } 


If you want to change background color of a block, then go to Dashboard > Course structure > Page structure > Block settings and from Settings > Classes add a custom class, for example: cBlock-05. Then go to Dashboard > Course structure > Project settings > Custom CSS/LESS code and add this code:
.cBlock-05 { background-color: #fff; } 


Remember to replace #fff to your custom color.