Hi all,
I was looking a long time for a theme for my backend and just found one in the marketplace.
since it was a little expensive and i also had another problem with it which i'm not going to tell here, i decided to find another way for my need.
So, i created a 'less' file for my backend and its not bad now, but it needs improvements.
you can download the file and take a look. as i said it needs improvements both in css codes and color scheme.
It is my great pleasure to welcome all of you who wants to participate on making it a success work.
For anyone who doesn't know how to use my_changes add-on, please take a look on this topic:
http://forum.cs-cart.com/topic/37510-how-to-add-custom-css-with-my-changes-addon/
All the best,
diako
/* **********************************************************************************Backend colour skin
********************************************************************************** */
@A0001: #4276a4; /* main color /
@A0002: #ff8000; / links /
@A0003: #cbe8fd; / secondary color /
@A0004: @A0003; / title color /
@A0005: darken(@A0003, 5%); / menu seperators lines /
@A0006: #4276a4; / color1 /
@A0007: #e9fbf9; / color2 /
@A0008: #e4f3ff; / Action bar bk color /
@A0009: @A0001; / Action bar color */.actions{
background-color: @A0008;
color: @A0009;
}
.actions .title{
background-image: none !important;
border-left: 1px solid darken(@A0008, 5%);
}.dropdown-top-menu-item.open > a{
background-image: none !important;
background-color: @A0003 !important;
}div.modal.signin-modal{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: @A0001;
box-shadow: -20px 16px 20px 6px @A0001;
-webkit-box-shadow: -20px 16px 20px 6px @A0001;
-moz-box-shadow: -20px 16px 20px 6px @A0001;
}div.modal.signin-modal .modal-header{
background-color: @A0001;
}div.signin-modal .modal-header h4{
color: @A0003;
}.block-control-menu{
background-color: @A0001;
}[class^=“icon-”].icon-white, [class*=" icon-“].icon-white, [class^=“exicon-”].icon-white, [class*=” exicon-"].icon-white{
color: darken(@A0007, 30%);
}.navbar .nav .active > a, .navbar .nav .active > a:hover{
background-color: @A0003;
}.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus{
color: @A0006;
}div.actions.cm-sticky-scroll select#period_selects{
border-color: @A0001;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
}.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled]{
background-color: @A0003;
color: @A0006;
}.navbar-admin-top .navbar .navbar-inner .nav > li > a{
color: @A0007 !important;
}.subnav .nav .dropdown-menu li:hover .hint, .subnav .nav .dropdown-menu .active .hint{
color: lighten(@A0001, 25%);
}.navbar-admin-top .navbar .navbar-inner .nav > li > a .caret{
border-top-color: @A0007;
border-bottom-color: @A0007;
}.dashboard-card{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid @A0001;
}.dashboard-card-title{
background-image: none;
background-color: @A0001;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: @A0007;
}.dashboard-card-content{
background-image: none;
background-color: #fff;
}.navbar-admin-top .navbar .navbar-inner{
background-image: none;
background-color: @A0001;
border-color: @A0001;
}.navbar-admin-top .navbar .navbar-inner .divider-vertical{
border-left-color: @A0001;
border-right-color: @A0001;
}div.navbar-admin-top div.subnav{
background-image: none;
background-color: @A0003;
}.subnav .nav > li > a{
border-left: none; /* 1px solid @A0005; */
border-right: 1px solid @A0005;
color: @A0006;
}.subnav .search input[type=“text”]{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}.quick-menu a.quick-menu-link{
color: @A0006;
}.nav .dropdown-toggle .caret{
border-top-color: @A0006;
}.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a{
background-image: none;
background-color: @A0001;
color: @A0007;
}.hover-show.nav-pills li.dropdown:hover .dropdown-toggle{
background-color: @A0001;
border-color: @A0001;
}.hover-show.navbar-right li.dropdown:hover .dropdown-toggle{
background-image: none;
background-color: @A0003;
color: @A0006 !important;
}
.ajax-popup-tools ul li a:hover,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{
background-image: none;
background-color: @A0001;
color: @A0007;
}.navbar-admin-top .navbar .navbar-inner .nav li.dropdown.open > .dropdown-toggle,
.navbar-admin-top .navbar .navbar-inner .nav li.dropdown.active > .dropdown-toggle{
background-image: none;
background-color: @A0003;
color: @A0006 !important;
}.hover-show.navbar-right li.dropdown:hover .dropdown-toggle .caret{
border-top-color: @A0001;
border-bottom-color: @A0001;
}.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret{
border-top-color: @A0001;
border-bottom-color: @A0001;
}textarea:focus, input[type=“text”]:focus, input[type=“password”]:focus, input[type=“datetime”]:focus, input[type=“datetime-local”]:focus, input[type=“date”]:focus, input[type=“month”]:focus, input[type=“time”]:focus, input[type=“week”]:focus, input[type=“number”]:focus, input[type=“email”]:focus, input[type=“url”]:focus, input[type=“search”]:focus, input[type=“tel”]:focus, input[type=“color”]:focus, .uneditable-input:focus{
border-color: @A0001;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
}#quick_menu_content .menu-container li a:hover{
background-color: @A0001;
}.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus{
background-color: @A0001;
color: @A0007;
}.tabs .nav-pills > li > a, .tabs .nav-tabs > li > a{
color: @A0001;
}.btn-primary{
background-image: none;
background-color: @A0001;
color: @A0007;
}.tabs .nav-pills > .active > a, .tabs .nav-pills > .active > a:hover, .tabs .nav-pills > .active > a:focus, .tabs .nav-tabs > .active > a, .tabs .nav-tabs > .active > a:hover, .tabs .nav-tabs > .active > a:focus{
background-color: @A0001;
}a{
color: @A0002;
}.subnav .nav > .active > a, .subnav .nav > .active > a:hover{
background-color: @A0001;
color: @A0007;
}button.jApplyBtn.btn.btn-sm.btn-success{
background-image: none;
background-color: @A0001;
color: @A0007;
}.subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret{
border-top-color: @A0007;
}