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;
}