Custom CSS for Changing Moodle Theme Impression’s Colour Scheme

Our best-selling Moodle theme Impression comes with 6 hand-picked colour schemes. It’s really easy to switch between the 6 colour schemes via the theme settings page. For customers who want to have a unique colour scheme to match their existing websites, we’ve complied useful custom CSS code to help you change the theme colour scheme to meet your specific needs.

First of all, you need to pick two colours. The first colour should be your site’s primary colour and the second colour is a darker shade of the primary colour.

For demo purpose, we are using an indigo colour (#6964C1) as the primary colour and a darker shade of primary colour (#5C58AF) as the secondary colour. You can easily substitute the colours in the code with your own primary and secondary colours.

Custom CSS Code

/* Change Impression Colour Scheme */
/* Primary Colour: #6964C1 */
/* Secondary Colour: #5C58AF */
 
/* Links and buttons */
a {
    color: #6964C1;
}
a:hover, a:active, a:focus {
    color: #5C58AF;
}
 
.btn-cta, a.btn-cta {
    background: #6964C1;
}
 
.btn-cta:hover, a.btn-cta:hover, .btn-cta:active, a.btn-cta:active, .btn-cta:focus, a.btn-cta:focus {
    background: #5C58AF;
}
 
.btn-primary, a.btn-primary {
    background: #6964C1;
}
 
.btn-primary:active, .btn-primary:focus, .btn-primary:hover, a.btn-primary:active, a.btn-primary:focus, a.btn-primary:hover {
    background: #5C58AF !important;
}
 
.btn-reversed, a.btn-reversed {
    color: #6964C1 !important;
}
 
.path-admin .buttons input[type=submit], button, input#id_submitbutton, input#id_submitbutton2, input.form-submit, input[type=submit], input[type=button], input[type=reset], td.submit input {
    background: #6964C1;
}
 
.path-admin .buttons input[type=submit]:active, .path-admin .buttons input[type=submit]:focus, .path-admin .buttons input[type=submit]:hover, button:active, button:focus, button:hover, input#id_submitbutton2:active, input#id_submitbutton2:focus, input#id_submitbutton2:hover, input#id_submitbutton:active, input#id_submitbutton:focus, input#id_submitbutton:hover, input.form-submit:active, input.form-submit:focus, input.form-submit:hover, input[type=submit]:active, input[type=submit]:focus, input[type=submit]:hover, input[type=button]:active, input[type=button]:focus, input[type=button]:hover, input[type=reset]:active, input[type=reset]:focus, input[type=reset]:hover, td.submit input:active, td.submit input:focus, td.submit input:hover {
    background: #5C58AF;
}
 
/* Topbar */
.site-header .top-bar {
    background: #6964C1;
}

/* Notifications dropdown */
.site-header .top-bar .popover-region .popover-region-header-text{
  color: #6964C1;
}
/* Messages dropdown */
.site-header .top-bar .popover-region a {
  color: #6964C1;
}

/* Forms */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #6964C1;
}
 
/* Main Menu */
.site-header .main-nav .nav li a:hover {
    color: #6964C1;
}
.site-header .main-nav .nav .dropdown-menu {
    border-top-color: #6964C1;
}
.site-header .main-nav .nav .dropdown-menu:before {
    border-bottom-color: #6964C1;
}
 
.site-header .main-nav .nav .dropdown-menu a:hover {
    color: #6964C1;
}
 
/* Frontpage carousel */
 
.promo-section .carousel-indicators li.active {
    background-color: #6964C1;
}
 
/* Frontpage why section */
.why-section .figure-holder {
    color: #6964C1;
}
 
.why-section .item-title {
    color: #6964C1;
}
 
/* Frontpage testimonials section */
.reviews-section .review-title {
    color: #6964C1;
}
 
/* Frontpage CTA section */
.cta-section-inner {
    background: #6964C1;
}
 
/* Frontpage courses */
#page #region-main #frontpage-course-list h2, #page #region-main #site-news-forum h2 {
    background: #6964C1;
}
 
.course_category_tree .category>.info>.categoryname {
    background-color: #6964C1;
}
 
/* Footer */
.site-footer .footer-content {
    background: #6964C1;
}
 
/* Back to top control */
#topcontrol {
    background: #6964C1;
}
 
#topcontrol:hover {
    background: #5C58AF;
}
 
/* Moodle courses */
#page #region-main .loginbox {
    border-top-color:  #6964C1;
}
 
#page #region-main .region-main-inner {
    border-top-color:  #6964C1;
}
 
#page .block-region .block .header {
    background: #6964C1;
}
 
#page #region-main h3.sectionname {
    color: #6964C1;
}
 
.uneditable-input:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {
    border-color: #6964C1;
}
 
/* Bootstrap Components */
.color-theme {
    color: #6964C1;
}
 
#page #region-main .table.table-boxed>thead>tr>th {
    background: #6964C1;
}
 
.nav-tabs>li.active a, .nav-tabs>li.active a:active, .nav-tabs>li.active a:focus, .nav-tabs>li.active a:hover {
    border-top-color: #6964C1;
}
 
.custom-quote {
    border-color: #6964C1;
}
 
.custom-quote .fa {
    color: #6964C1;
}
 
.custom-quote .people .name {
    color: #6964C1;
}
 
.box.box-border {
    border-color: #6964C1;
}
 
.box.box-theme {
    background: #6964C1;
}
 
.panel-group .panel .panel-heading .panel-title a {
    color: #6964C1;
}
.panel-group .panel .panel-heading .panel-title a:hover {
    color: #5C58AF;
}
 
#page #region-main .table>thead>tr>th {
    border-bottom-color: #6964C1;
}
 
.label.label-theme {
    background: #6964C1;
}
 
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover, a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
    border-color: #6964C1;
    background: #6964C1;
}
 
.panel-theme {
    border-color: #6964C1;
}
 
.panel-theme>.panel-footer, .panel-theme>.panel-heading {
    border-color: #6964C1;
    background: #6964C1;
}
 
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover, a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
    border-color: #6964C1;
    background: #6964C1;
}


Once you’ve substituted the colours with your own, you can copy and paste the code into the “Custom CSS” input field under the theme settings page as shown below.

moodle-theme-impression-custom-css

Save the changes and your Impression theme should have a new colour scheme now:

moodle-theme-impression-change-colour-scheme

Want to master Moodle?

Moodle 3.0 Masterclass: Your Complete Guide to Moodle 3.0

This online course on Moodle 3.0 will teach you how to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

600+ students enrolled

Want to set up Moodle?

Learn to Host Moodle with Linux

Become a Moodle Administrator a much needed skill . More than 70 million users across 230 countries are using Moodle.

1000+ students enrolled
  • Bert van der Hooft

    Do you have a colour scheme for labland and the other themes?

    • eLearning Themes

      No we don’t…If we do in the future we will let you know.