This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

planetadeleste
planetadeleste

I like to share my custom backend styles.

screen

screen 2

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

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

Mohsin
Mohsin

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

Backend Screenshot with Custom ></p>
<p>Thanks for sharing. Try to put it up in a gist or something and push updates. Would be helpful!</p>

                            <p><small class= Last updated

planetadeleste
planetadeleste

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

Backend Screenshot with Custom ></p>
<p>Thanks for sharing. Try to put it up in a gist or something and push updates. Would be helpful!</p>
</blockquote>

                            <p><small class= Last updated

Mohsin
Mohsin

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

planetadeleste
planetadeleste

Style updated! Thanks @Mohsin

Mohsin
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!

planetadeleste
planetadeleste

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 ;).

planetadeleste
planetadeleste

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!

audio.hartama
audio.hartama

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

Last updated

flsurplus
flsurplus

Worked great for me - thanks!

dazmiller8556
dazmiller8556

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

RomaldyMinaya
RomaldyMinaya

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 :)

ryanthehouse10135
ryanthehouse10135

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

pastorryanhayden11094
pastorryanhayden11094

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

pastorryanhayden11094
pastorryanhayden11094

Here is another variation of that theme.

I made some colors darker and changed the blues. I really like how it looks.
Screenshot 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

planetadeleste
planetadeleste

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

osarzola
osarzola

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

planetadeleste
planetadeleste

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.

cydrick.nonog
cydrick.nonog

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

1-19 of 19

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.