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.

Note: The CSS Codes mentioned in this article are exclusively for version Edwiser RemUI 3.3.x and above.

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 top right corner 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;
}