No internet connection
  1. Home
  2. Support

Changing the colors

By KajMagnus @KajMagnus2019-03-21 12:18:25.331Z

How to edit CSS to change the colors, to match your main website / your top header / your blog.

Later, there'll be a user interface for this, so you won't need to edit any CSS code. Also, currently, the arrow background is white so if you change the background, they'll look weird. I'm changing the background to transparent though.

/* Primary button colors  (green = hue 154, in this example)
------------------------------*/

.btn-primary, .btn-primary:link, .nav-pills > li > a.active, .nav-pills > li > a.active:hover, .nav-pills > li > a.active:focus, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .nav > .active {
    background: hsl(154, 80%, 39%);
}
.DW.DW .dw-ar-t > .dw-p-as > .dw-a-reply,
button.esScrollBtns_menu.btn.btn-default {
    background: hsl(154, 100%, 36%);
}


/* Page background color
------------------------------*/

body,
div[class^='dw-p'],
.dw-cmts-tlbr-head,
.dw-cmts-tlbr-open,
.dw-cmts-tlbr-details,
.dw-arw-vt-curve-to-last-sibling-indented {
    background-color: hsl(0, 46%, 95%) !important;   /* bright red = hue 0, just an example */
}

  • 1 replies
  1. KajMagnus @KajMagnus2019-09-30 05:53:01.335Z

    For dark themes:

    /* Primary button colors  (green = hue 159)
    ------------------------------*/
    
    .btn-primary, .btn-primary:link, .nav-pills > li > a.active, .nav-pills > li > a.active:hover, .nav-pills > li > a.active:focus, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .nav > .active {
        background: hsl(159, 63%, 45%);
        color: hsl(210, 6%, 12%) !important;
    }
    
    
    .DW.DW .dw-ar-t > .dw-p-as > .dw-a-reply, button.esScrollBtns_menu.btn.btn-default {
        background: hsl(159, 100%, 54%);
        color: hsl(210, 6%, 12%) !important;
    }
    
    .DW.DW .dw-p-as .dw-a-reply, .s_OpReB {
        color: hsl(210, 6%, 12%) !important;
    }
    
    
    /* Page background color
    ------------------------------*/
    
    body,
    div[class^='dw-p'],
    .dw-cmts-tlbr-head,
    .dw-cmts-tlbr-open,
    .dw-cmts-tlbr-details,
    .dw-arw-vt-curve-to-last-sibling-indented {
        background-color: hsl(210, 6%, 12%) !important;
    }
    
    
    /* White text and bright arrows, for dark themes
    ------------------------------*/
    
    p,
    li,
    .dw-a,
    .dw-cmts-tlbr-details,
    .dw-cmts-count,
    .dw-u-info,
    .esP_By_F,
    .esP_By_U,
    .dw-p-hd .dw-ago, .dw-p-hd .dw-rrs, .dw-p-hd .esP_viewHist,
    .esMetabar .dw-cmts-tlbr-head .dw-cmts-tlbr-summary>li  {
        color: white !important;
    }
    /* But not inside dialogs */
    .DW.DW .dw-p-as-more>.dw-a, .DW.DW .dw-p-as-votes>.dw-a, .esDropModal .dw-a {
        color: black !important;
    }
    
    #dw-cmts-tlbr {
        border-color: hsl(0, 0%, 57%);
    }
    .dw-cmts-tlbr-open {
        color: gray;
    }
    .dw-arw {
        filter: invert(100%);   /* why won't brightness(9900%) have any effect? I'd like the arrows to be a bit brighter.  */
    }