Skylarks Theme en

Installations 28 Likes 6

If you are tired of overly bright or dark themes you may want to try this one out.

You can choose your own color as you see fit using adding these values into the CSS field:

:root {
--sky-dashboard-picture-height: 250px;
--sky-dashboard-picture-height-mobile: 200px;
--sky-page-radius: 7px;
--sky-background-color: #C7C9B8;
--sky-page-color: #D8D9CD;
--sky-page-color-2nd: #D1D2C6;
--sky-page-color-3rd: #D8D9CD;
--sky-text-color: #333333;
--sky-text-color-link: #751212;
--sky-text-color-active: #AD2020;
--sky-text-color-muted: #888888;
--sky-sidebar-background-color: #172028;
--sky-sidebar-text-color: #DDDDDD;
--sky-topbar-background-color: #484942;
--sky-topbar-text-color: #DDDDDD;
--sky-button-background-color: #484942;
--sky-button-border-color: #484942;
--sky-button-text-color: #DDDDDD;
--sky-icon-background-color: #666;
--sky-icon-color: #d2d6de; */
--sky-line-color: #333333;
--sky-header-color: #333333;
}

Designed to work with:

Tweaked to work with New List
Tweaked to work with Different-Timeline
Tweaked to work with Less Button Clutter
Tweaked to work with Hide/remove first Entity header

Latest version 2.1 View content

Released 3 years ago

Minor bug fixes

Plugin CSS for 2.1


/* Set vars */
:root {
    --sky-dashboard-picture-height: 250px; /* var(--sky-dashboard-picture-height) */
    --sky-dashboard-picture-height-mobile: 200px;
    --sky-page-radius: 7px; /* var(--sky-page-radius) */

    --sky-background-color: #C7C9B8; /* var(--sky-background-color) */

    --sky-page-color: #D8D9CD; /* var(--sky-page-color) */
    --sky-page-color-2nd: #D1D2C6; /* var(--sky-page-color-2nd) */
    --sky-page-color-3rd: #D8D9CD; /* var(--sky-page-color-3rd) */

    --sky-text-color: #333333; /* var(--sky-text-color) */
    --sky-text-color-link: #751212; /* var(--sky-text-color-link) */
    --sky-text-color-active: #AD2020; /* var(--sky-text-color-active) */
    --sky-text-color-muted: #888888; /* var(--sky-text-color-muted) */

    --sky-sidebar-background-color: #172028; /* var(--sky-sidebar-background-color) */
    --sky-sidebar-text-color: #DDDDDD; /* var(--sky-sidebar-text-color) */

    --sky-topbar-background-color: #484942; /* var(--sky-topbar-background-color) */
    --sky-topbar-text-color: #DDDDDD; /* var(--sky-topbar-text-color) */

    --sky-button-background-color: #484942; /* var(--sky-button-background-color) */
    --sky-button-border-color: #484942; /* var(--sky-button-border-color) */
    --sky-button-text-color: #DDDDDD; /* var(--sky-button-text-color) */

    --sky-icon-background-color: #666; /* var(--sky-icon-background-color) */
    --sky-icon-color: #d2d6de; /* var(--sky-icon-color) */

    --sky-line-color: #333333; /* var(--sky-line-color) */

    --sky-header-color: #333333; /* var(--sky-header-color) */
}


/* new hover style */
.table-hover > tbody > tr:hover, .table > tbody > tr.active > td,
.table > tbody > tr.active > th, .table > tbody > tr > td.active,
.table > tbody > tr > th.active, .table > tfoot > tr.active > td,
.table > tfoot > tr.active > th, .table > tfoot > tr > td.active,
.table > tfoot > tr > th.active, .table > thead > tr.active > td,
.table > thead > tr.active > th, .table > thead > tr > td.active,
.table > thead > tr > th.active,
.nav > li > a:active, .nav > li > a:focus, .nav > li > a:hover {
    color: var(--sky-text-color-link);
    background: inherit;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--sky-page-radius);
}

.nav-stacked > li.active > a, .nav-stacked > li.active > a:hover {
    background: transparent;
    color: var(--sky-text-color-link);
}
/* selected tab */
.nav-tabs-custom > .nav-tabs > li.active,
.nav-stacked > li.active > a, .nav-stacked > li.active > a:hover {
    border: none;
 }

/******* MAIN THEME & COLORS *******/

a {
    color: var(--sky-text-color-link);
}
a:active, a:focus, a:hover {
    color: var(--sky-text-color-active);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--sky-header-color);
}
.help-block,
.text-muted {
    color: var(--sky-text-color-muted);
}
body {
    color: var(--sky-text-color);
}

.content-wrapper,
.main-footer,
body {
    background-color: var(--sky-background-color);
}
hr {
    border-top: 1px solid var(--sky-sidebar-background-color);
}



/* lable counters */
.label-default {
    background-color: inherit;
    color: inherit;
}
/* fix background */
.list-group-item {
    background-color: transparent;
    border: none;
}

.box-footer,
.table-striped > tbody > tr:nth-of-type(odd),
.panel-default > .panel-heading {
    background-color: var(--sky-page-color);
}
/* remov unwanted borders */

.table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th,
.table > thead > tr > td, .table > thead > tr > th,
.box-footer {
    border: none;
}

.page-header,
.box .nav-stacked > li,
.box-header.with-border {
    border-bottom: none;
}

/*** MAIN NAVIGATION ***/
/* background */
.main-sidebar .sidebar,
.skin-black .left-side,
.skin-black .main-sidebar,
.skin-black .wrapper {
    background-color: var(--sky-sidebar-background-color);
}

section.sidebar-campaign {
    background: linear-gradient(180deg,rgba(51,51,51,0),var(--sky-sidebar-background-color));
}

.main-sidebar .sidebar li .sidebar-text,
.main-sidebar .sidebar li a {
    color: var(--sky-sidebar-text-color);
}

/******* TOPBAR ********/
.skin-black .main-header .navbar {
    background-color: var(--sky-topbar-background-color);
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.skin-black .main-header .navbar .navbar-right > li > a,
.skin-black .main-header .navbar .sidebar-toggle {
    color: var(--sky-topbar-text-color);
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a:hover,
.skin-black .main-header .navbar .navbar-right > li > a:hover,
.skin-black .main-header .navbar .sidebar-toggle:hover {
    color: var(--sky-text-color);
    background-color: var(--sky-topbar-text-color);
    border-radius: 4px;
}

.skin-black .main-header .navbar .nav > li > a {
    color: var(--sky-text-color);
}
.calendar tbody td .colour-pallet {
    color: var(--sky-sidebar-text-color);
}
.calendar tbody td.today {
    background-color: var(--sky-page-color-2nd);
    border-radius: 2px;
}

.navbar-nav > .user-menu .user-image {
    filter: invert(100%);
}
/* clean up the search window */
.form-control {
    border-radius: 5px;
    height: 30px;
}

.form-control:focus {
    border-color: var(--sky-text-color-link);
}

/* buttons */
.btn-default,
.input-group .input-group-addon {
    background-color: var(--sky-button-background-color);
    border-color: var(--sky-button-border-color);
    color: var(--sky-button-text-color);
}

/******* FRAMES *******/
/* picture */
.entity-header .entity-image {
    width: 100%;
    height: auto;
    margin: 5px;
    border: transparent;
    box-sizing: border-box;
    border-radius: 7px;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* content (glass) */
#cy,
.nav-tabs-custom > .tab-content,
.box,
.panel,
.timeline-item,
.timeline > li > .timeline-item {
    border-radius: var(--sky-page-radius);
    border-bottom: 1px solid;
    background-color: var(--sky-page-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* nav tabs (glass)*/
.entity-form ul.nav li {
    background-color: inherit;
    margin-right: 2px;
}

.nav-tabs {
    border-bottom: none;
    margin-left: 40px;
}

.nav-tabs-custom > .nav-tabs > li > a {
    border-radius: var(--sky-page-radius) var(--sky-page-radius) 0px 0px;
    background-color: var(--sky-page-color-2nd);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.nav-tabs-custom > .nav-tabs > li.active:hover > a, 
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--sky-text-color-link);
    background: inherit;
    background-color: var(--sky-page-color);
}
/* popup boxes */
.skin-black .modal-content,
.dropdown-menu,
.skin-black .modal-lg {
    border-radius: var(--sky-page-radius);
    border-bottom: 1px solid;
    background-color: #DEE0D6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid;
    border-bottom-color: #ccc;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}


/******* PAGES ********/
/* change breadcrumb  */
.content-header .breadcrumb > li:last-child {
    display: none;
}

.content-header .breadcrumb {
    float: right;
    position: absolute;
}
/* even header size */
.content-header h1 {
    font-size: 36px;
}
.box-footer {
    border-bottom-left-radius: var(--sky-page-radius);
    border-bottom-right-radius: var(--sky-page-radius);
}

.map-dashboard,
.panel .panel-heading-entity,
.panel .panel-heading-entity h3 {
    border-radius: calc(var(--sky-page-radius) - 1px);
}

.panel,
.panel-default > .panel-heading {
    border-color: var(--sky-page-color);
}

.panel .panel-body .preview:before {
    background: linear-gradient(transparent,var(--sky-page-color));
}

.panel .panel-heading-entity h3 {
    height: var(--sky-dashboard-picture-height);
}
.panel .panel-heading-entity h3 a {
    height: var(--sky-dashboard-picture-height);
}


/*next page colors*/
.pagination > li > a,
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    color: var(--sky-header-color);
    background-color: var(--sky-page-color-2nd);
    border-color: var(--sky-header-color);
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    height: 30px;
    padding: 3px 12px;
}
.tooltip-inner,
.tooltip-ajax {
   background-color: var(--sky-sidebar-background-color);
}
.tooltip-arrow {
   border-top-color:  var(--sky-sidebar-background-color) !important;
}