Custom CSS for Changing Moodle Theme Herald’s Colour Scheme

Our popular responsive Moodle theme Herald is designed for businesses and universities. It has 4 default colour schemes to get you started. However, if you’d like to customise the colour to suit your own needs it’s easy to do so by writing your own CSS rules to override the theme defaults. In this tutorial we will share a custom CSS code example with you to help you with the colour customisations. You can use the code example as a template to speed things up.

Where you should enter the custom CSS

There is a “Custom CSS” input field under the Herald theme settings. You need to enter your custom CSS code there so you don’t lose any CSS changes if you update the theme in the future.

/* Herald Custom CSS */
/* Links */
a {
  color: #FF6066;
}
a:hover,
a:focus {
  color: #DF5760;
  /* Slightly darker than #FF6066 */
}
/* Buttons */
.btn-cta,
a.btn-cta {
  background: #FF6066;
  border-color: #FF6066;
}
.btn-cta:hover,
a.btn-cta:hover {
  background: #DF5760;
  /* Slightly darker than #FF6066 */
  border-color: #DF5760;
}
a.btn-cta-secondary,
.btn-cta-secondary {
  color: #FF6066;
  border: 2px solid #FF6066;
  background: none;
}
a.btn-cta-secondary:hover,
.btn-cta-secondary:hover,
a.btn-cta-secondary:focus,
.btn-cta-secondary:focus,
a.btn-cta-secondary:active,
.btn-cta-secondary:active {
  color: #fff;
  border-color: #FF6066;
  background: #FF6066;
}
button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
input#id_submitbutton,
input#id_submitbutton2,
.path-admin .buttons input[type="submit"],
td.submit input {
  background: #FF6066;
  border-color: #FF6066;
}
button:active,
input.form-submit:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input#id_submitbutton:active,
input#id_submitbutton2:active,
.path-admin .buttons input[type="submit"]:active,
td.submit input:active,
button:hover,
input.form-submit:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input#id_submitbutton:hover,
input#id_submitbutton2:hover,
.path-admin .buttons input[type="submit"]:hover,
td.submit input:hover,
button:focus,
input.form-submit:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input#id_submitbutton:focus,
input#id_submitbutton2:focus,
.path-admin .buttons input[type="submit"]:focus,
td.submit input:focus {
  background: #DF5760;
  /* Slightly darker than #FF6066 */
  border-color: #DF5760;
}
/* Tables */
#page #region-main .table>thead>tr>th {
    border-bottom-color: #FF6066;
}

#page #region-main .table.table-boxed>thead>tr>th {
    background: #FF6066;
}
/* 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: #FF6066;
}
/* Main nav */
.header .main-nav .nav .dropdown-menu a:hover {
  color: #FF6066;
}
.dropdown-submenu > a:hover:after {
  border-left-color: #FF6066 !important;
}
/* Notifications dropdown */
.branding .popover-region .popover-region-header-text {
  color: #FF6066;
}
/* Messages dropdown */
.branding .popover-region a {
  color: #FF6066;
}
/* Home slideshow */
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box {
  background: rgba(255, 96, 102, 0.8);
  /* #FF6066 = rgba(255, 96, 102, 1) */
  /* You can use online tool here http://www.hexcolortool.com/ to convert hext colour to rgba colour */
}
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box .btn-cta-primary {
  background: #B04A51;
  /* Darker than #FF6066 */
  border-color: #B04A51;
}
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box .btn-cta-primary:hover {
  background: #B04A51;
  border-color: #B04A51;
}
.flexslider .flex-control-paging li a.flex-active {
  background: #B04A51;
  /* Darker than #FF6066 */
}
/* Home benefits section */
#page-site-index .benefits .item .icon .fa {
  color: #FF6066;
}
/* Home vide section */
#page-site-index .video {
  background-color: #FF6066;
}
/* courses block */
#page #region-main .coursebox {
  border-color: #FF6066;
}
/* Social media icons */
#page-site-index .social-section .social li a {
  background: #FF6066;
}
/* Bootstrap components */
.panel-group .panel .panel-heading .panel-title a {
  color: #FF6066;
}
.panel-group .panel .panel-heading .panel-title a:hover,
.panel-group .panel .panel-heading .panel-title a:focus {
  color: #FF6066;
}
.custom-quote {
  border-color: #FF6066;
}
.custom-quote .fa {
  color: #FF6066;
}
.custom-quote .people .name {
  color: #FF6066;
}
.box.box-border {
  border-color: #FF6066;
}
.box.box-theme {
  background: #FF6066;
}
.label.label-theme {
  background: #FF6066;
}
.nav-tabs > li.active a,
.nav-tabs > li.active a:hover,
.nav-tabs > li.active a:active,
.nav-tabs > li.active a:focus {
  border-top: 2px solid #FF6066;
}
.panel-theme > .panel-heading,
.panel-theme > .panel-footer {
  border-color: #FF6066;
  background: #FF6066;
}
.panel-theme {
  border-color: #FF6066;
}
.color-theme {
  color: #FF6066;
}

Below is a screenshot of what the Herald theme looks like after applying the example code:

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