Best way to change colors of persona theme?

Mikael Jenkler

At the moment I use CSS override in the acp but that is not optimal.
Is there a list off what CSS elements that need to be changed for a stable color change?
It would be nice with a color map of the persona theme.

Is there any easy way to know what CSS to change in the jungle off css tags

exodo

well anything can be changed on the css to you just need to get the route to the element
you will have to browse with browser and less files

yariplus

Almost all of the colors are based from the values in the less/bootstrap/variables.less file. And most of colors in that file are based on the first 11 variables.

Mikael Jenkler

Yeah, I found the variables.less file. But if I want to change the colors in that file I need to modify the theme or make my own. ACP css modifier is better in one way but I guess it will be lots of css code.

jarey

@Jenkler yes, and that makes sense, since the theme is the one in charge of the way the web looks like. Different colors, different themes or a modified theme after all.

If skins are not sufficient, for me it is the only way to go, since as you said, changing all colors, probably implies modifying a lot of css rules.

Mikael Jenkler

I tried to change skin, it seams to work. I thougt that skins only worked with Vanilla theme? Is it possible or better to make a skin instead?

Is it better ?

Maybe a stupid question but, witch is the default skin? How do I unselect all once I have selected one
EDIT: never mind, i missed the big button at the bottom (Revert to base colors) LOL

Mikael Jenkler

Problem is that most bootswatch skins looks like crap

Mikael Jenkler

I will keep to the ACP css for now. Here is what i have done Feel free to comment

My red theme

a { color: #ca2e3d; }
a:focus, a:hover { color: #a51624; text-decoration: none; }
body { color: #4a4a4a; background: #f5f5f5; }
.account-username-box .open #profile
{
    background-color: #3fae28;
    border-color: #288e13;
}
.alert-warning
{
  background-color: #d17330;
  border-color: #aa5417;
  color: #fff;
}
.btn-primary.active{ background-color: #3fae28; border-color: #288e13 }
.btn-info
{
  color: #ffffff;
  background-color: #3fae28;
  border-color: #288e13;
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info
{
    color: #ffffff;
    background-color: #288e13;
    border-color: #288e13;
}
.btn-primary
{
    color: #ffffff;
    background-color: #ca2e3d;
    border-color: #a22531;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary
{
    color: #ffffff;
    background-color: #a22531;
    border-color: #a22531;
}
.btn-primary:disabled, .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.focus, .btn-primary.disabled:active, .btn-primary:active, .btn-primary.disabled.active, .btn-primary.active
{
    background-color: #1e8375 !important;
    border-color: #0e6b5e !important;
}
.btn-warning {
    color: #fff;
    background-color: #d17330;
    border-color: #aa5417;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning
{
    color: #fff;
    background-color: #aa5417;
    border-color: #aa5417;
}
.forum-logo { padding-right: 10px; }
/*input:focus, select:focus, textarea:focus
{
    border-color: #a22531 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(165, 22, 36, 0.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(165, 22, 36, 0.6) !important;
}*/
.mobile-navbar { background: #ca2e3d !important; }
.navbar-default { background-color: #ca2e3d; border-color: #a51624; }
.navbar-default .navbar-nav>li>a, .navbar-nav>li, .navbar-default .navbar-nav>li>a:focus { color: #fff; }
.navbar-default .navbar-nav>li>a:hover
{
    background: #a51624;
    color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus
{
    background: #a51624;
    color: #fff;
}
.navbar-default .btn-link, .navbar-default .btn-link:focus
{
    color: #fff;
}
.navbar-default .btn-link:hover
{
    background: #a51624;
    color: #fff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background: #a51624;
    color: #fff;
}
.navbar-default .navbar-toggle { border-color: #a22531; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #a22531;
    color: #fff;
}
.navbar-default .navbar-toggle .icon-bar { background: #fff; }
.navbar-default .navbar-brand {
    color: #fff;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus
{
    background: #b4103a;
    color: #fff;
}
.panel-info>.panel-heading
{
    color: #ffffff;
    background-color: #ca2e3d;
    border-color: #a51624;
}
.topic .pagination-block { background-color: #a51624; }
.topic .pagination-block .progress-bar { background-color: #ca2e3d; }
.wrapper { color: #fff; }

#menu .notification-list li a, .header .notification-list li a { color: #4a4a4a; }
#menu .notification-list li.unread, .header .notification-list li.unread { background: #eeeeee; }
#nprogress .bar { background: #fff; }
#nprogress .spinner-icon { border-top-color: #fff; border-left-color: #fff; }

This code is for: https://www.jenkler.se (If you want to see it live)

yari

up up up

Mikael Jenkler

Up, up and another up! What the hell that means