Custom Light Theme with Side Navigation

Showcase Themes
1

Hi all :wave:

Today I’m sharing a theme featuring bright colors, rounded corners, card style backgrounds, big bold fonts, and side navigation.

2021-12-29 13.04.10 timyoung.tadabase.io 260f8ceea190
2021-12-29 13.04.10 timyoung.tadabase.io 260f8ceea1902525×1286 109 KB

Check it out here!

To install this theme on your app, copy the following code and paste in the Custom Header section of your app settings.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">

<style>
    /* App Background */
    body {
        background-color: #fafafa;
    }

    /* App Fonts */
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    div,
    a {
        font-family: 'Poppins', sans-serif;
    }

    h3 {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 0;
    }

    label {
        font-size: 14px;
        color: #8b8b8b;
        font-weight: 600;
    }

    /* Buttons */

    .btn-primary,
    .btn.btn-primary {
        color: #fff;
        background: #0061FF;
        border: 2px solid #0061FF;
        padding: 9px 10px;
        border-radius: 1rem;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        outline: none;
    }

    .btn-primary:hover,
    .btn.btn-primary:hover {
        background-color: #fff;
        border-color: #0061FF;
        color: #0061FF;
    }

    .btn-primary:focus,
    .btn.btn-primary:focus,
    .btn-primary:active,
    .btn.btn-primary:active {
        background-color: #0061FF;
        border-color: #0061FF;
        color: #fff;
    }

    .btn-success,
    .btn.btn-success {
        color: #fff;
        background: #009B65;
        border: 2px solid #009B65;
        padding: 9px 10px;
        border-radius: 1rem;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        outline: none;
    }

    .btn-success:hover,
    .btn.btn-success:hover {
        background-color: #fff;
        border-color: #009B65;
        color: #009B65;
    }

    .btn-success:focus,
    .btn.btn-success:focus,
    .btn-success:active,
    .btn.btn-success:active {
        background-color: #009B65;
        border-color: #009B65;
        color: #fff;
    }

    .btn-danger,
    .btn.btn-danger {
        color: #fff;
        background: #EB0035;
        border: 2px solid #EB0035;
        padding: 9px 10px;
        border-radius: 1rem;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        outline: none;
    }

    .btn-danger:hover,
    .btn.btn-danger:hover {
        background-color: #fff;
        border-color: #EB0035;
        color: #EB0035;
    }

    .btn-danger:focus,
    .btn.btn-danger:focus,
    .btn-danger:active,
    .btn.btn-danger:active {
        background-color: #EB0035;
        border-color: #EB0035;
        color: #fff;
    }

    .btn-warning,
    .btn.btn-warning {
        color: #fff;
        background: #ff9d00;
        border: 2px solid #ff9d00;
        padding: 9px 10px;
        border-radius: 1rem;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        outline: none;
    }

    .btn-warning:hover,
    .btn.btn-warning:hover {
        background-color: #fff;
        border-color: #ff9d00;
        color: #ff9d00;
    }

    .btn-warning:focus,
    .btn.btn-warning:focus,
    .btn-warning:active,
    .btn.btn-warning:active {
        background-color: #ff9d00;
        border-color: #EC8ff9d00A21;
        color: #fff;
    }

    .btn-info,
    .btn.btn-info {
        color: #fff;
        background: #9d00ff;
        border: 2px solid #9d00ff;
        padding: 9px 10px;
        border-radius: 1rem;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        outline: none;
    }

    .btn-info:hover,
    .btn.btn-info:hover {
        background-color: #fff;
        border-color: #9d00ff;
        color: #9d00ff;
    }

    .btn-info:focus,
    .btn.btn-info:focus,
    .btn-info:active,
    .btn.btn-info:active {
        background-color: #9d00ff;
        border-color: #9d00ff;
        color: #fff;
    }

    /* Alerts */

    .alert-danger {
        background-color: #ff7474;
        border-radius: 10px;
        color: #ffffff;
        margin-top: 25px;
    }

    .alert-success {
        background-color: #41d170;
        border-radius: 10px;
        color: #ffffff;
        margin-top: 25px;
    }

    /* MENU */

    .app {
        padding: 4rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        background: #fcfcfc;
        height: 92vh;
        border-radius: 2rem;
        box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
        overflow: auto;
    }

    @media (min-width: 768px) {

        .navbar {
            bottom: 0;
            top: 0;
            left: 0;
            height: 92vh;
            overflow: inherit;
            position: fixed;
            width: 300px;
            z-index: 1049;
            border-radius: 2rem;
            margin-left: 15px;
            margin-top: 2rem;
            margin-bottom: 2rem;
            padding-top: 2rem;
            box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
        }

        .navbar-collapse {
            padding-right: 0;
            padding-left: 0;
        }

        .app {
            margin-left: 325px;
        }
    }

    .navbar-default {
        background-color: #0061FF;
        border-radius: 2rem;
        padding: 10px;
        border: none;
    }

    .navbar ul>li {
        font-size: 16px;
        font-weight: 700;
        margin: 5px 0 5px 10px;
        width: 93%;
    }

    .navbar-default .navbar-nav>li>a:hover,
    .navbar-default .navbar-nav>li>a:focus {
        text-decoration: none;
        color: #0061FF !important;
        background-color: #fff !important;
        border-radius: 15px;
    }

    .navbar-default .dropdown-menu>li>a:hover,
    .navbar-default .dropdown-menu>li>a:focus {
        text-decoration: none;
        color: #0061FF !important;
        background-color: #fff !important;
        border-radius: 15px;
    }

    .dropdown-submenu>a>span {
        font-size: 16px;
        font-weight: 700;
    }

    /* List Component */

    .list-body {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Form Component */

    .t-form {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Detail Component */

    .t-detail {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Search Component */

    .t-search {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Map Component */

    .t-map {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Accordion Component */

    .t-accordion {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Login Component */

    .t-logincomponent {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Signup Component */

    .t-signupcomponent {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Profile Component */

    .t-profilecomponent {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    /* Table Component - Filter Tabs & Table Actions */

    .t-datatable .filter-tabs {
        margin: 10px 0 10px 0;
        border-radius: 1rem;
        background: #eee;
    }

    .nav-tabs {
        border: none;
    }

    .t-datatable .table-actions:nth-of-type(2) {
        margin: 10px 0 10px 0;
        padding: 10px;
        border-radius: 1rem;
        border: none;
    }

    /* Table Component */

    .t-datatable {
        border-radius: 10px;
        padding: 20px;
        margin: 10px 0 10px 0;
        background: #fff;
        box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    }

    .table-wrap>.table tr {
        background-color: #fff !important;
    }

    table,
    table>thead>tr>th,
    table>tbody>tr>th,
    table>tfoot>tr>th,
    table>thead>tr>td,
    table>tbody>tr>td,
    table>tfoot>tr>td {
        border: none !important;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    table>tbody>tr {
        border-top: 1px solid #EBEDF3;
    }

    /* Table Search */
    .input-group input.form-control.input-sm.padder {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        border-right: none;
        height: 50px;
    }

    .input-group-btn {
        border: 1px solid #cccccc;
        background: none;
        border-left: none;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .input-group-btn .btn {
        background: none;
        color: #cccccc;
        padding: 0px 10px;
    }

    .input-group-btn .btn:focus {
        outline: none;
    }

    .input-group-btn .btn:active {
        box-shadow: none;
    }
</style>
3 Likes
2

Looks great - one question: our app currently has a top Nav (not a side nav). If we implement this theme, will it force a Side Nav? We have some fairly detailed tables (lots of fields) and don’t want to lose any horizontal real estate to the Side Nav.

Thanks for the thoughts.

-Dan

3

Yup, this one will force a side nav.

The same theme is available without the side nav here.