Edwiser RemUI: Color Customization

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.

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-colors

Edwiser RemUI has 10 color schemes, you can pick from. Just head over to Site administration → Appearance → Themes → Edwiser RemUI → Dashboard Settings

  • 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

.heading{
    color: #00a680;
}

Updating Navigation Bar Color in the Header

/* If you have selected the color “Red” in Dashboard Settings, then use .skin-red class.
If you have selected the color “blue light”, then select the class .skin-blue-light. */ 

.skin-red .main-header .navbar {        
    background-color: #00a69e; /* your color here */
}

edwiser-remui-elements

Updating Background Color for Site Logo

.skin-red .main-header .logo {                
    background-color: #00a69e; /* your color here */
}

.skin-red .main-header .logo: hover {                
    background-color: #0092a6; /* your color here */
}

Customizing the Background Color for the Sidebar Toggle Icon

.skin-red .main-header .navbar .sidebar-toggle:hover {
    background-color: #00a69e; /* your color here */
}

Customizing the Sidebar Appearance

/* If you have selected the color 'Red/Blue/Yellow/Purple' in Dashboard Settings, then use .dark-sidebar class; 
else use .light-sidebar */ 

.dark-sidebar .block .header {                   
    color: #ffffff; /* text color */
    background: #00a69e; /* block header background color */
}
.dark-sidebar .block .content {  
    color: #ffffff; /* text color */
    background: #00a69e; /* block content background color */
}

Changing the Footer Colors

.main-footer {
    background: #00a69e; /* footer background color */
}

.main-footer .social-section {
    background: #0092a6; /* background color of Social section in footer */
}

Updating User Profile Header Color

.skin-red .main-header li.user-header {
    background-color: #00a69e; /* your color here */
}