If you want change the backend theme here the “Orchid Theme”
in config folder add bootstrap.php the add the custom.css
add
if (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {
$app->on('admin.init', function(){
$this->helper('admin')->addAssets('path/to/config/custom.css');
});
}
here the custom.css
:root {
--primary: rgb(102, 99, 253);
--primary-bg: rgb(242, 241, 255);
--dark: rgb(9, 14, 36);
--grey: rgb(98, 110, 153);
--light: rgb(250, 250, 252);
--light2: rgb(218, 222, 237);
--white: white;
--b-radius: 5px;
--b-radius-sm: 2px;
--box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px;
--box-shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
body {
color: var(--dark);
font-weight: 400;
background-color: var(--light);
overflow-wrap: break-word;
-moz-osx-font-smoothing: grayscale!important;
}
.uk-tab{
border-bottom: none;
}
.uk-checkbox::before {
content: "";
position: absolute;
left: 0;
top:2px;
z-index: 1;
width: 1em;
height: 1em;
border: 2px solid var(--grey);
border-radius: var(--b-radius);
}
.header-sub-panel {
background: none;
box-shadow: none;
}
.header-sub-panel-tab[divider="true"] {
border-top: none!important;
}
.uk-modal-footer{
box-shadow: none;
background-color: var(--light);
}
.uk-table-tabbed thead tr th {
text-transform: capitalize;
letter-spacing: 0px;
font-size: 13px;
font-weight: 600;
}
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span,
.uk-breadcrumb > li.uk-active > span {
color: var(--dark)!important;
text-transform: capitalize;
font-size: 14px;
}
.uk-dropdown, .uk-modal-dialog{
border-radius: var(--b-radius);
}
.uk-button-group .uk-button{
margin-right: 5px;
color: var(--grey);
background: var(--primary-bg);
}
a, .uk-button-link {
color: var(--primary);
}
.uk-nav-dropdown .uk-nav-header {
color: var(--grey);
}
.uk-nav-item-danger > a:hover, .uk-nav-item-danger > a:active {
color: red !important;
}
.uk-link {
color: var(--primary);
}
.uk-form ::placeholder,
.uk-form-icon > [class*="uk-icon-"]{
color: var(--grey);
}
a:hover{
color: var(--primary);
}
.uk-bg-primary{
background: var(--primary)!important;
}
.uk-link-muted, .uk-link-muted a {
color: var(--dark)!important;
}
.uk-nav-dropdown>li>a:hover, .uk-nav-dropdown>li>a:focus {
background: var(--primary)!important;
color: #fff;
outline: none;
}
::selection {
background: var(--primary)!important;
text-shadow: none;
}
input[type='text'], input[type='email'], input[type='password'], textarea, .uk-panel-framed{
background: var(--white)!important;
border-radius: var(--b-radius);
padding: 20px 10px!important;
border: 1px solid var(--light2)!important;
border-radius: var(--b-radius-sm)!important;
box-shadow: var(--box-shadow)!important;
}
input[type='text']:focus{
border: 1px solid var(--primary)!important;
}
select{
background: white !important;
border-radius: var(--b-radius);
border: 1px solid var(--light2)!important;
border-radius: var(--b-radius-sm)!important;
box-shadow: var(--box-shadow)!important;
}
.uk-form select{
padding: 8px 10px!important;
height: 40px;
}
.app-modulesbar > li > .uk-active::after {
content: "";
position: absolute;
width: 100%;
border-bottom: none!important;
bottom: -22px;
left: 0;
}
.app-modulesbar>li>a {
padding: 8px 10px;
font-weight: 400;
color:var(--grey)
}
.app-modulesbar a.uk-active,
.uk-badge {
color: var(--primary)!important;
background: var(--primary-bg)!important;
border-radius: var(--b-radius);
}
.uk-subnav, .uk-subnav>* {
padding-left: 0!important;
margin-top: 0!important;
}
.uk-table th, .uk-table td {
padding: 12px 12px;
vertical-align: middle;
}
cp-fieldcontainer[active="true"] {
border-color: var(--primary)!important;
}
.uk-panel-box{
border-radius: var(--b-radius);
color: var(--grey)
}
.uk-checkbox{
padding: 0px!important;
border: none !important;
box-shadow: none!important;
}
select.uk-form-large, textarea.uk-form-large, input[type].uk-form-large, input:not([type]).uk-form-large {
height: 40px;
padding: 8px 0;
font-size: 16px;
background-color: white!important;
}
.uk-breadcrumb {
background: white;
border:none;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px!important;
padding: 8px 10px;
border-radius: 5px;
}
.uk-panel-box, .uk-panel-card .uk-panel-card {
box-shadow: var(--box-shadow-md);
}
.uk-button-outline{
background-color: var(--primary-bg);
}
/* Tab Panel */
.header-sub-panel-tab[divider="true"] {
padding: 8px 0;
border-top: 1px rgba(0,0,0,0.1) solid;
}
.uk-tab > li > a {
font-weight: 400!important;
padding: 8px 10px!important;
border-bottom:none !important;
}
.uk-tab>li {
margin-bottom:0!important;
}
.uk-tab > li.uk-active > a {
border-bottom:none !important;
color: var(--primary)!important;
background: var(--primary-bg)!important;
border-radius: var(--b-radius);
font-weight: 400!important;
}
.uk-tab>li.uk-active>a:after {
background: none;
height:0!important
}
.uk-checkbox:checked::before {
background: var(--primary)!important;
border-color: var(--primary)!important;
color: var(--primary-bg)!important;
}
.uk-datepicker-table a.uk-active {
color: var(--primary)!important;
background: var(--primary-bg)!important;
}
cp-field[type="rating"]{
color: #ccc;
}
.uk-text-primary {
color: var(--primary)!important;
}
.uk-button{
text-transform: capitalize;
letter-spacing: 0;
font-size: 13px;
border-radius: var(--b-radius)!important;
}
.uk-button-primary{
background-color: var(--primary)!important;
color: var(--primary-bg)!important;
}
.uk-text-muted {
right: 0px !important;
color: var(--grey)!important;
}
.uk-nav li > a{
color:var(--primary)
}
.uk-nav li > a:hover {
background-color: var(--primary-bg)!important;
color:var(--primary)
}
input:focus {
border-color: var(--primary)!important;
outline: currentcolor none medium!important;
box-shadow: none!important;
}
.field-text-container span{
right: 10px !important;
color: var(--primary)!important;
}
.uk-icon-pencil-square{
display: none;
}
cp-fieldcontainer {
opacity: 1;
}
cp-fieldcontainer .uk-text-bold{
font-weight: 500;
}
For Sidebar layout add css below
and you must delete @if($item[‘active’]) in app.php for menu text visible
@if($item['active'])
<span class="uk-text-small uk-margin-small-left uk-text-bolder">@lang($item['label'])</span>
@endif
preview :
@media (min-width: 640px) {
body{
display: flex;
height: 100vh;
}
.uk-sticky-placeholder{
margin-bottom: 0!important;
flex: 1;
height: 100%!important;
display: flex;
position: fixed;
z-index: 10;
}
.uk-sticky-placeholder .app-header{
height: 100%!important;
max-width: 300px;
min-width: 200px;
width: 200px;
}
.app-main{
width: 100%;
margin-left: 200px;
position: relative;
}
.app-header-topbar .uk-grid.uk-flex-middle{
display: flex!important;
flex-direction: column!important;
margin-left: 0px;
align-items: flex-start;
}
.uk-container-breakout, .header-sub-panel .uk-container{
padding: 0!important;
}
.uk-container-breakout, .header-sub-panel {
position: inherit;
width: 100%!important;
left:0
}
.app-header-topbar .uk-grid > div{
padding-left: 0px;
margin-bottom: 20px;
}
.app-header-topbar .uk-container {
padding: 0 18px;
}
.app-header-topbar .uk-subnav {
display: flex;
flex-direction: column!important;
margin-left:0
}
.app-header-topbar .uk-subnav li{
margin-left:0
}
.app-header-topbar .uk-grid > div:last-child{
position: absolute!important;
right:0px!important;;
top:20px!important;
width: 50px;
}
.app-header-topbar .uk-subnav li a{
width: 100%;
position: relative;
color:var(--dark);
}
.app-header-topbar .uk-subnav li{
overflow: hidden;
border-radius: var(--b-radius);
margin-bottom: 5px
}
.app-modulesbar > li > .uk-active {
position: relative!important;
bottom: 0;
margin-right: 20px;
}
.app-modulesbar > li > .uk-active::after{
display: block!important;
position: relative;
margin-right: 20px;
bottom: 0;
}
.app-header-topbar .uk-subnav li a .uk-text-small{
font-size: 13px!important;
font-weight: 500;
}
}
Thank You