Edwiser RemUI
 has pre-defined color schemes. But when it comes to tuning the colors to your branding needs, you might want a custom color scheme.

Note: The CSS Codes mentioned in this article are exclusively for version Edwiser RemUI 3.3.x and above until Edwiser RemUI 3.5.11, Edwiser RemUI 3.6.7 and Edwiser RemUI 3.7.4
For Newer version i.e Edwiser RemUI 3.7.5 and above the CSS are added at the end of this page.

For Moodle 3.9 and 3.10, we have Live customizer where you basically do not have to write custom CSS. Instead, you can directly customize it using the available customization settings.

Color Customization

Choosing the right color is essential when designing your website. Along with the page layout, the color creates a connect with the visitor.

Edwiser RemUI has 10 color schemes, you can pick from. Just click on the arrow ( < ) icon on the right of the page and it will open the customizations tab.

  • Pick a Color Scheme: You can pick from Blue, Blue-Light, Green, Green-Light, Red, Red-Light, Yellow, Yellow-Light, Purple and Purple-Light.

Color Selection Guide

If you’re starting out, and have no idea of the color scheme to pick, here are a few pointers to help you out:

  • Elementary school students prefer brighter colors – red, yellow; high school and university students prefer calmer colors to help them concentrate such as blue, green or purple
  • Blue is a calmer color that helps students concentrate and should be associated with science or math courses
  • Green blends the calm of blue and the creativity of yellow and works well with social science subjects and history
  • Yellow works great with creative studies such as language learning or arts

Reference: Psychology of Color in the Educational Environment

Make sure you pick colors that complement your logo to highlight it, not hide it.

DEVELOPER TIPS

Here are some styling customizations you can add to your theme! The below code has to be added in the ‘Custom CSS‘ settings in the theme’s ‘General Settings‘.

Changing Link Colors

a {
    color: #00a680;
}
a:hover, a:active, a:focus {
    color: #00a69e;
}

Updating Page Heading Colors

.page-title {
    color: green;
}

Updating Navigation Bar Color in the Header

.site-navbar.navbar.navbar-default.navbar-fixed-top {
    background-color: blue!important;
}

Updating Background Color for Site Logo

.navbar-brand-logo {
    background-color: white;
}

Updating Background Color for Site Logo on hover

span.navbar-brand-logo:hover {
    background-color: red;
}

Customizing the Background Color for the Sidebar Toggle Icon

#toggleMenubar {
    background-color: yellow;
}

Customizing the Icon Color for the Sidebar Toggle Icon

#toggleMenubar .nav-link {
    color: black;
}

Customizing the Left navigation background color

.site-menubar{ background-color: green!important; }

Customizing the Left navigation Link Text color

.site-menubar-light .site-menu>.site-menu-item>a {
     color: white!important;
}

Customizing the Left navigation Active Link background color and Text color

.site-menubar-light .site-menu>.site-menu-item.active>a {
    color: white!important;
    background-color: green!important;
}

Changing the Footer Colors

footer.site-footer {
    background-color: blue!important;
}

Changing the Footer Social icons background color and Icon color

a[class*="social-"] {
    background-color: yellow !important;
    color: black !important;
}

Updating User Profile Header Color and Text color

.usermenu.login-menu {
    background-color: red;
}
.usermenu.login-menu span {    
    color: black !important;
}

Below Mentioned CSS are for Edwiser RemUI 3.7.5 and above version of the theme.

Customizing  Navigation Bar Color in the Header

nav.navbar {
    background-color: coral !important;
}

Customizing the Background Color for the Sidebar Toggle Icon

nav.navbar div[data-region="drawer-toggle"] {
    background-color: yellow;
}

Customizing the Icon Color for the Sidebar Toggle Icon

nav.navbar div[data-region="drawer-toggle"] .nav-link .fa {
    color: red !important;
}

Customizing the Left navigation background color

#nav-drawer {
    background-color : green;
}
#nav-drawer a.list-group-item {
    background-color : green;
}

Customizing the Left navigation text color

#nav-drawer a.list-group-item {
    color: brown;
}

Customizing the Left navigation Active Link background color and Text color

#nav-drawer a.list-group-item.active {
   background-color: blue;
   color: coral;
}

Changing the Footer Color

#page-footer {
    background: red !important;
}

Changing the Footer Social icons background color and Icon color

#page-footer a[class*="social-"] {
    background-color: yellow !important;
    color: black !important;
}

Change background color for quick links in the Right bottom region

.site-menubar-footer a {
    background-color: green !important;
}

Change icon color for quick links in the right bottom region

.site-menubar-footer a .fa {
    color: white !important;
}

Updating User Profile Header Color and Text color

.usermenu.login-menu {
    background-color: red;
}
.usermenu.login-menu span {
    color: black !important;
}

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in $ US Dollars ($) USD.
  • USDUS Dollars ($)
  • INRIndian Rupee (₹)

Spin & Win Giveaway!

Spin-the-wheel Giveaway details:

  1. Sign up & spin the wheel to get discounts up to 70%
  2. Lucky winners also get a chance to win 100% OFF
  3. Please provide a valid email id since the coupon will be shared with you only via email
  4. Coupon code can be used at checkout and is valid only for 24Hrs

Sign up to Spin the Wheel

Spin the Wheel
By joining this giveaway, you would give us your consent to occasionally send you emails about products and strategies that would benefit your Moodle LMS.