Best way to change colors of persona theme?


  • Swedes

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


  • Plugin & Theme Dev

    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


  • Community Rep

    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.


  • Swedes

    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.


  • Translator

    @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.


  • Swedes

    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 :P
    EDIT: never mind, i missed the big button at the bottom (Revert to base colors) LOL


  • Swedes

    Problem is that most bootswatch skins looks like crap ;)


  • Swedes

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

    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)


Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.