11 July 2016, 5:07

I want to change the color of the blocks in mahara. The theme is the "configurable theme" (custom).

Where do I have to add the following css-code?

.panel-heading {

   background-color:#ff0000

}

In moodle each theme has the field "customcss" where it is possible to add css-code. Are there plans to add this feature for mahara-themes?

11 July 2016, 8:08

Hi Andreas,

We don't have any plans right now to add a feature like that, but you are welcome to add it to the feature tracker.

If you just want to make a very simple theme, you can use the "subthemestarter" (take a look at the readme to find out what to change) and add your CSS there.

Cheers

Kristina

11 July 2016, 15:07

Hi Andreas,

The quick and dirty way to do it, would be to use Mahara's "local" directory to provide a theme override.

See htdocs/local/readme.txt for more details.

Basically, create a file under your Mahara code directory at htdocs/local/theme/style/style.css, and put your styles in there. This stylesheet will be loaded with every page, and it'll be loaded last, so it can override any other styles. However, the local directory doesn't let you do per-theme overrides, so these styles will apply to all themes on the site, which might be an issue if you're using more than one theme.

Alternately, as Kristina suggests, you could head down the Mahara theme modding route. For instructions on that, see the "htdocs/theme/Readme.md" file that ships with Mahara: https://git.mahara.org/mahara/mahara/blob/master/htdocs/theme/Readme.md

Cheers,

Aaron

29 August 2016, 5:56

I placed the css-code into this file

 ..... /htdocs/local/theme/style/style.css

and it worked for my problem.

Thanks for the help.

-------------------------

.title.panel-heading.js-heading {
    background-color: #0010df;
    color: #fff;
}


.navbar.header {
    background-color: #ffd600;
    border-bottom: 1px solid #f0f0f0;
}

a {
    color: #fe0000;
}

a:hover {
    color: #aa0000;
}
.btn-primary {
    background-color: #0010df;
    border-color: #ccc;
    color: #fff;
}

.btn-primary:hover {
    background-color: #0010aa;
    border-color: #ccc;
}


.dashboard-widget-container .circle-bg {
    background-color: #0010df;
}