Style Customization

Admin CSS Code Structure

This section will give you a brief description of our admin structure CSS code.

1. Header Section : This is the default navbar section css code which contains.

a. Navigation Bar

b. Language Dropdown

c. Message Dropdown

d. Notification Dropdown

e. Custom Dropdown

f. Search Bar

g. Apps Dropdown

h. User Profile with Dropdown

i. Control Sidebar Toggle

Note:- These categories are defined by us and you can modify as per your needs.

                                        
/* 
=====================
    Navigation Bar
=====================
*/

.navbar {
    padding: 0;
    background: #FFFFFF;
    border-bottom: 0.01rem solid #f4f4f4;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
    -moz-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
    box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
}

...........
...........

.navbar .navbar-nav .nav-item.dropdown .dropdown-menu {
    top: 95%;
    border-radius: 0;
    border: none;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
    border-radius: 6px;
}

/*Language Dropdown*/

.navbar .navbar-nav .nav-item.dropdown.language-dropdown a.dropdown-toggle:after {
    display: none;
}

...........
...........

.navbar .navbar-nav .nav-item.dropdown.language-dropdown .nav-link img {
    width: 21px;
    border-radius: 4px;
}

/*Message Dropdown*/
.navbar .navbar-nav .nav-item.dropdown.message-dropdown .nav-link {
    font-size: 20px;
}

...........
...........

.navbar .navbar-nav .nav-item.message-dropdown .dropdown-item.footer button:hover {
    background-image: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/*Notification Dropdown*/

.navbar .navbar-nav .nav-item.dropdown.notification-dropdown .nav-link {
    font-size: 21px;
}
...........
...........

.navbar .navbar-nav .nav-item.notification-dropdown .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #dedfdf!important;
    width: 5px;
}

/*  Custom Dropdown */

/* The container <div≷ - needed to position the dropdown content */
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .c-dropdown {
    position: relative;
    margin-top: -15px;
}
/* Dropdown Content (Hidden by Default) */
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .c-dropdown-content {
    position: absolute;
    top: 100%;
    left: auto;
    right: 11px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 6rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
    border-radius: 6px;
}
/* Links inside the dropdown */
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .c-dropdown-content .c-dropdown-item {
    width: 100%;
    padding: 1px 13px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
}
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .c-dropdown-content .c-dropdown-item:hover {
    color: #e7515a;
}

/* Change color of dropdown links on hover */
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .c-dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.navbar .navbar-nav .nav-item.notification-dropdown .dropdown-item .show {display:block;}


/*Search */
.navbar .navbar-nav .nav-item form.form-inline {
    width: 170px;
    padding: 11px 0;
    position: relative;
}

...........
...........

.navbar .navbar-nav .nav-item form.form-inline input.search-form-control::-moz-placeholder {
    color: #6c757d;
    font-size: 13px;
}


/*App Dropdown*/
.navbar .navbar-nav .nav-item.app-dropdown .nav-link {
    font-size: 24px;
}

...........
...........

.navbar .navbar-nav .nav-item.app-dropdown .dropdown-menu .dropdown-item span {
    color: #555;
    cursor: pointer;
    font-size: 0.90rem;
}


/* User Profile Dropdown*/

.navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user {
    padding: 0.29rem 0.6rem;
    margin-right: 4px;
    font-size: 25px;
}

...........
...........

.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover span {
    color: #6156ce;
}
.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-divider {
    border-top: 1px solid #e9ecef;
}


/*  Nav Control Sidebar Toggle     */
.navbar-expand-sm .navbar-nav .cs-toggle .nav-link {
    font-size: 21px;
    margin-right: 3px;
}
.navbar-expand-sm .navbar-nav .cs-toggle .nav-link span.d-lg-inline-block {
    color: #3862f5;
}
.navbar .navbar-nav .nav-item.cs-toggle .nav-link span {
    color: #707792;
}

2. Sidebar : This is the Sidebar section css code: 

                                        
/* 
===============
    Sidebar
===============
*/

.sidebar-wrapper {
    width: 255px;
}


...........
...........


#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active a:before {
    background-color: #fff;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #3b3f5c!important;
    z-index: 998!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

3. Control Sidebar : This is the Control Sidebar section css code:

a. Control Sidebar

b. Tabs Nav Section

c. Tabs Content Section

Note:- These categories are defined by us and you can modify as per your needs.

                                        
/* 
=========================
    Control Sidebar
=========================
*/

.control-sidebar {
    position: fixed;
    top: 58px;
    display: flex;
    height: 100vh;
    height: 97vh;
    right: -375px;
    width: auto;
    z-index: 1000;
    background: #fcfdfe;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
    -webkit-box-shadow: -1px 1px 6px 0px rgba(113, 106, 202, 0.13);
    -moz-box-shadow: -1px 1px 6px 0px rgba(113, 106, 202, 0.13);
    box-shadow: -1px 1px 6px 0px rgba(113, 106, 202, 0.13);
}

...........
...........

.cs-overlay {
    display: none;
    position: fixed;
    /* full screen */
    width: 100vw;
    height: 100vh;
    background: #3b3f5c;
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
/* display .overlay when it has the .active class */
.cs-overlay.show {
    display: block;
    opacity: .7;
}

/*
    Tabs Nav Section
*/
.control-sidebar .nav.nav-tabs {
    background-color: #f2f6f9;
    border-radius: 30px;
    padding: 1px 1px;
    border-bottom: none;
}
.control-sidebar .nav.nav-tabs li .nav-link {
    color: #3b3f5c;
    padding: 12px;
    border: none;
    font-size: 14px;
    height: 45px;
    margin-right: auto;
    margin-left: auto;
}
.control-sidebar .nav.nav-tabs .nav-link.active {
    background-color: #6424c9;
    border-radius: 15px!important;
    color: #fff;
    border-radius: 30px !important;
}

/*
    Tabs Content Section
*/

.control-sidebar .tab-content {
    width: 295px;
    padding: 0;
}
/*
    Task
*/

.control-sidebar .tab-content .tasks {
    padding: 10px;
}

...........
...........


.control-sidebar .tab-content .tasks .recent .media.mail-notify i:not(.remove-noti) {
    background-color: #25d5e4;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.12);
}

/*
    Friends
*/

.control-sidebar .tab-content .friends {
    padding: 10px;
}
.control-sidebar .tab-content .friends .recent .t-s-header h6 span {
    position: relative;
    font-weight: 600;
    font-size: 17px;
    color: #1d1d1d;
}

...........
...........


/*
    Settings
*/

/*Admin*/
.control-sidebar .tab-content .settings {
    padding: 20px;
}
.control-sidebar .tab-content .settings .admin-setting .d-flex {
    font-size: 17px;
    color: #1d1d1d;
}

...........
...........

.control-sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #dedfdf!important;
    width: 5px;
}

4. Footer : This is the Footer section css code: 

                                        
    
/*
    =======================
        Footer Section
    =======================
*/
.footer-section {
    background-color: #3b3f5c;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
}

...........
...........

.footer-closed .boxed-footer-section {
    left: 0px;
    width: 1110px
}
.theme-footer-section {
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 4px; 
    margin: 0 15px; 
    background-color: #fff; 
    -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2)
}
Main CSS file

main.css : This file contains UI, Components and Major CSS code: 

                                        
    
html {
    min-height: 100%
}
body {
    color: #888da8;
    height: 100%;
    font-size: 0.875rem;
    background: #eaeef1;
    overflow-x: hidden;
    overflow-y: auto;
    letter-spacing: 0.0312rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}


...........
...........
...........
...........


.new-control.new-radio.new-radio-line-through.radio-secondary>input:checked~div.new-radio-content,
.new-control.new-radio.new-radio-line-through.radio-classic-secondary>input:checked~div.new-radio-content { color: #805dca; }

.new-control.new-radio.new-radio-line-through.radio-dark>input:checked~div.new-radio-content,
.new-control.new-radio.new-radio-line-through.radio-classic-dark>input:checked~div.new-radio-content { color: #4f5163; }



.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #dedfdf!important;
    width: 5px;
}
SASS Customizations

Now, As we have discussed about our main.css and structure.css. Let us discuss about our SASS files.

Note :- This part is important only for SASS user i.e. the users who love to code with SASS.

Below is the structure of SASS which we will be discussing. It is a piece of file structure that we have discussed before.

  • sass
    • assets
      • all assets scss files with resepect to their folders
      • base
        • base folder includes color, fonticons, urls and utilities variables files
    • plugins
      • all plugins scss files with resepect to their folders.

1. SASS Folder : The SASS folder is located at the same place where assets, plugins, bootstrap folder is located. You will be knowing this if you have seen the file structure.

2. Assets Folder : The Assets Folder is located inside the SASS Folder and usually it contains all the SASS (.scss) files of CSS (.css) files which is located in assets folder. It also contain 3 folders that we are going to discuss.

a. Base Folder :- This base folder contain all the variable files.

b. Main Folder :- This folder contain parts of main.css file so that you can easily modify components.

c. Structure Folder :- This folder contain parts of structure.css file so that you can easily modify each layout.

3. Plugins Folder : The Plugins Folder is located inside the SASS Folder.

Note :- The Plugin folder does not contain its own base folder i.e. it fetch the variables from the same base folder located inside the assets folder.