Best way to change colors of persona theme?

Technical Support
  • Swedes
    #1

    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 😛

  • Plugin & Theme Dev
    #2

    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
    #3

    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
    #4

    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.

  • #5

    @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
    #6

    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

  • Swedes
    #7

    Problem is that most bootswatch skins looks like crap 😉

  • Swedes
    #8

    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)

  • #9

    up up up

  • Swedes
    #10

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


Suggested Topics


| | | |