I like to share my custom backend styles.

First, go to SETTINGS > SYSTEM > Customize back-end. Click "Colors" tab and select this set of colors.

Them choose Styles tab and paste this:

.layout #layout-mainmenu.navbar {
    background-color: #FFF;
    border-bottom: 1px solid #DDD;
}
.layout #layout-mainmenu.navbar ul li {
    text-align: center;
    padding: 0 15px;
    margin-right: 3px;
}
.layout #layout-mainmenu.navbar ul li a {
    font-weight: 400;
    text-transform: uppercase;
}
.layout #layout-mainmenu.navbar ul li a i {
    color: #007AFF;
    font-size: 2rem;
    display: block;
    margin: 0;
    padding-bottom: 20px;
}
.layout #layout-mainmenu.navbar ul li.preview a i {
    padding-bottom: 0;
}
.layout #layout-mainmenu.navbar ul li.account a {
    padding: 20px;
}
.layout #layout-mainmenu.navbar ul li.active,
.layout #layout-mainmenu.navbar ul li.highlight,
.layout #layout-mainmenu.navbar ul li:hover{
    background-color: #EDEDED;
    color: inherit !important;
}
.layout #layout-mainmenu.navbar ul li.active a,
.layout #layout-mainmenu.navbar ul li.highlight a{
    color: inherit !important;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu{
    background-color: #FFF;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu:after{
    border-bottom-color: #FFF;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li {
    border-bottom: 1px solid transparent;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li:hover {
    background-color: #EDEDED !important;
    border-bottom-color: #CCC;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li.divider{
    background-color: #CCC;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li.divider+li{
    background-color: #555555;
    color: #FFF;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li.divider+li:hover {
    background-color: #666 !important;
    border-bottom-color: transparent;
}
.layout #layout-mainmenu.navbar ul li .mainmenu-accountmenu li.divider+li:hover a {
    color: #FFF !important;
}

/* SIDENAV */
.sidenav-tree, #layout-sidenav {
    border-right: 1px solid #DDD;
}
.sidenav-tree ul.top-level > li > div.group h3 {
    background-color: #007AFF;
}
.sidenav-tree ul.top-level > li[data-status="collapsed"] > div.group h3{
    background-color: #F2F2F2;
}
.sidenav-tree ul.top-level > li > div.group h3{
    color: #FFF;
}
.sidenav-tree ul.top-level > li[data-status="collapsed"] > div.group h3,
.sidenav-tree ul.top-level > li[data-status="collapsed"] > ul li a span.header{
    color: #777;
}
.sidenav-tree ul.top-level > li > ul li.active a {
    background-color: transparent;
}
.sidenav-tree ul.top-level > li > ul li.active a span.header,
.sidenav-tree ul.top-level > li > ul li.active a span.description,
.sidenav-tree ul.top-level > li > ul li a,
.sidenav-tree ul.top-level > li > ul li a span.header,
.sidenav-tree ul.top-level > li > ul li a span.description{
    color: #777;
}
.sidenav-tree ul.top-level > li > div.group h3::before {
    color: #FFF;
}
.sidenav-tree ul.top-level > li[data-status="collapsed"] > div.group h3::before {
    color: #007AFF;
}
.sidenav-tree ul.top-level > li > ul li.active {
    background-color: #E0E0E0;
}
.sidenav-tree ul.top-level > li[data-status="expanded"] > div.group h3{
    background-color: #007AFF;
    color: #FFF;
}
.sidenav-tree ul.top-level > li[data-status="expanded"] > div.group h3:before {
    color: #FFF;
}
.sidenav-tree ul.top-level > li > ul li a i {
    color: #007AFF;
}

/* SIDENAV SMALL */
#layout-sidenav ul li a {
    color: #777;
}
#layout-sidenav ul li a i {
    color: #007AFF;
}
#layout-sidenav ul li.active, #layout-sidenav ul li:hover {
    background-color: #007AFF;
}

.control-scrollpanel {
    background-color: #F7F7F7;
}
.responsive-sidebar .form-sidebar, #layout-side-panel {
    border-left: 1px solid #DDD;
}

Last updated 9 years ago

Tried it out. Not bad but needs some fixes. For example I can't see the descriptions of the various sub sections

Last updated 9 years ago

Thanks for the tip. I would fix it!

Mohsin said:

Tried it out. Not bad but needs some fixes. For example I can't see the descriptions of the various sub sections

Last updated 9 years ago

It's a good idea to change

.sidenav-tree ul.top-level > li > ul li.active a span.header,
.sidenav-tree ul.top-level > li > ul li a,
.sidenav-tree ul.top-level > li > ul li a span.header{
    color: #777;
}

to

.sidenav-tree ul.top-level > li > ul li.active a span.header,
.sidenav-tree ul.top-level > li > ul li a,
.sidenav-tree ul.top-level > li > ul li a span.header,
.sidenav-tree ul.top-level > li > ul li a span.description{
    color: #777;
}
.sidenav-tree ul.top-level > li > ul li.active > a > span.description{
    color: #000;
}

Last updated 9 years ago

Style updated! Thanks @Mohsin

No problem. In fact I wish there was a repository of such styles with unique names such as light skin and a rating system to keep best ones at the top!

I forget to mention. This style is inspired in Clip-Two Admin Template (http://themeforest.net/item/cliptwo-bootstrap-admin-template-with-angularjs/10290688).

I was looking for something clean, like google interfaces ;).

Great idea! A good project to start. And maybe, in a future, the developers can set a skin switch for backend.

Mohsin said:

No problem. In fact I wish there was a repository of such styles with unique names such as light skin and a rating system to keep best ones at the top!

i got this error when save changes on navbar color setting,how to fix it? http://postimg.org/image/axe63iwe1/

Last updated 9 years ago

Worked great for me - thanks!

Worked good for me as well. I like the white background behind the icons, just seems to make them 'pop' more. A nice, fun little mod. Enjoyed tweaking it. OctoberCMS really is an amazing system. Kudos

Mohsin said:

No problem. In fact I wish there was a repository of such styles with unique names such as light skin and a rating system to keep best ones at the top!

+1 To this :)

Where is the Settings->Customize Back-end->Styles .css file stored?

Love it. Only problem I'm seeing is that the Hamburger menu disapears on smaller screen sizes because it's still white. I've added this at the end of the stylesheet. It fixes that and also makes a few of the things that are too light (IMO) a little more readable.

.control-breadcrumb li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    color: #D5DDE2;
    letter-spacing: 0.05em;
}
.control-tabs > ul.nav-tabs > li a, .control-tabs > div > ul.nav-tabs > li a, .control-tabs > div > div > ul.nav-tabs > li a {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    padding: 0 0 10px 0;
    color: #4da7e8;
    background: #f9f9f9;
    font-weight: 400;
    overflow: hidden;
}
@media (max-width: 769px) {
nav#layout-mainmenu.navbar .menu-toggle {
    display: inline-block;
    color: #4da7e8 !important;
    font-weight: 600;
}
}

Last updated 8 years ago

Here is another variation of that theme.

I made some colors darker and changed the blues. I really like how it looks.
I'm attaching a stylesheet. It's got instructions in the comments on the top for what to set the color values too.

stylesheet with instructions

Last updated 8 years ago

pastorryanhayden11094 said:

Here is another variation of that theme.

I made some colors darker and changed the blues. I really like how it looks.
I'm attaching a stylesheet. It's got instructions in the comments on the top for what to set the color values too.

stylesheet with instructions

Thanks.
I put my styles in LESS on bitbucket
Not all are updated and I'm thinking to port to SCSS. But is a good start.

Last updated 8 years ago

Is there a way to personalice the backend styles without lost my changes in every update?

Atention! My styles are not fully updated with the new October styles.

@oscararzola11852: I have many customized OC and I never lost the styles after updates.

Hi

I just created a new plugin, that you can create your own backend skin, not only by css, you can also change the whole ui even the assets.

https://octobercms.com/plugin/cyd293-backendskin

Thanks