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

h. User Profile with Dropdown

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

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

.header-container {
    padding-top: 18px;
    padding-right: 48px;
    padding-left: 48px;
    background: #f1f2f3;
    z-index: 900;
}

==========================
    
=========================


.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: #1b55e2;
}
.navbar .navbar-nav .nav-item.cs-toggle .nav-link span {
    color: #888ea8;
}

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

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

.sidebar-wrapper {
    width: 255px;
    position: fixed;
    z-index: 999;
    border-radius: 6px 6px;
    transition: .600s;
}

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


#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active a:before {
    background-color: #1b55e2;
}
.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. Footer : This is the Footer section css code:

/*
    ====================
        Footer
    ====================
*/

.footer-wrapper {
    padding: 10px 20px 10px 18px;
    display: inline-block;
    background: transparent;
    font-weight: 600;
    font-size: 12px;
    width: 100%;
    border-top-left-radius: 6px;
    display: flex;
    justify-content: space-between;

    .footer-section {
        p {
            margin-bottom: 0;
            color: #515365;
            font-size: 13px;
            letter-spacing: 1px;

            a {
                color: #515365;
            }
        }

        svg {
            color: #e7515a;
            fill: rgba(231, 81, 90, 0.4196078431);
            width: 15px;
            height: 15px;
            vertical-align: text-top;
        }
    }
}
Main CSS file

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

html {
    min-height: 100%
}
body {
    color: #888ea8;
    height: 100%;
    font-size: 0.875rem;
    background: #f1f2f3;
    overflow-x: hidden;
    overflow-y: auto;
    letter-spacing: 0.0312rem;
    font-family: 'Nunito', sans-serif;
}


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

.position-absolute { position:absolute; }
.position-static { position:static; }
.position-fixed { position:fixed; }
.position-inherit { position:inherit; }
.position-initial { position:initial; }
.position-relative { position:relative; }
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.