support | elite | Trademark "Krystyna" registered by @carrioner | ResponsiveVoice-NonCommercial licensed under 95x15


Edit Your custom CSS.

Here You can change the look of Your components in DCR Tools. This requires some knowledge of how CSS cascading style sheets work, but it is not difficult. Below You can find an example. Paste it and change some element (eg. color) and see how Your chat or counter will change.

Prewiev   Generate random CSS  

123
  • upvoter-nick (100 %)
  • upvoter-nick2 (100 %)



  • upvote 100% ~ $0.021!
    comment: some text
    comment2: some other text
    comment3: text text text
    comment4: text text text

    chat: chat message
    chat2: chat message 2
    chat3: chat message 3
    chat4: chat message 4

    Custom CSS styles code



    Useful tools

    To generate color for CSS You will need HEX or RGBA (RGB with Alpha transparency). Use color picker.
    /* example of usage: seledyn 5px border and semi transparent background */
    #slider-box { border: 5px solid #06D6A9; background:rgba(6,214,169,0.5); }




    Instructions

    1. Each element has its own .class or #ID. You may put CSS inside its "{ code here }" to change them.

      List of elements that You can use:
      • #odp { } - main ID, most elements belong to it, perfect place to assign a custom font.
      • #skin-chat { } - appearance of the chat/comments window.
      • #skin-chat-autor-active { } - username appearance
      • #skin-chat-text-active { } - chat / comment text appearance.
      • #skin-chat-accent { } - small accents appearance, like $, % ect...
      • .upvoters { } - single element of upvoters bar (one cell).
      • #slider-box { } - appearance of of upvoters, followers and counter windows.
      • .wavetext * { } - appearance of upvote/tip wave text (display fancy username)
      • #upvoter2 #skin-chat-text-active { } - appearance of upvote/tip text.
      • #upvoter2 #skin-chat-accent { } - appearance of upvote/tip accent ($,%).
      • #popertxt { } - appearance of counter text

    2. Put selected code to the textarea, enter CSS code inside curly bracket eg. #popertxt { color:#ffffff; } and click [Save custom CSS]. As the page refreshes, You'll see the effect on the preview.

    3. You may allso copy whole code with default example. You may use all elements or only few of them. In /* comments */ there is information about what the code snippet is for.
      
      @import url('https://fonts.googleapis.com/css?family=Muli');
      #odp {font-family: 'Muli', sans-serif;} /* import & use any font from fonts.google.com */
      
      
      #skin-chat { /* main window of chat and comments */
        background: rgba(0,0,0,0.3);
        border-radius:6px;
        border: 2px solid #444444;
      }
      
      #skin-chat-autor-active { color: #999999 !important; } /* color of nicknames */
      #skin-chat-text-active { color: #ffffff; } /* color of text */
      #skin-chat-accent { color: #AAAAAA; } /* accents color */
      
      .upvoters { /* one element of upvoters rolling bar */
        background: rgba(0,0,0,0); 
        border-right: 1px dashed #999999; 
        border-radius:0px;
      }
      
      #slider-box { /* main window of upvoters, followers and counter */
        background: rgba(0,0,0,0.3); 
        border-radius:6px;
        border: 2px solid #444444;
      }
      
      .wavetext * {color:#999999;} /* color of upvote/tip wave text */
      
      #upvoter2 #skin-chat-text-active {color:#ffffff;}  /* color of upvote/tip text */
      #upvoter2 #skin-chat-accent {color:#cdcdcd;}  /* color of upvote/tip accent ($,%) */
      
      #popertxt {color:#cccccc;} /* color of counter */
      #popertxt::before { content: "Followers: "; color:#ffffff; } /* added text to counter */
      
      
      
      Copy the example to custom css


    4. Delete all code from textarea and live it empty to return to appearance of selected skin.

    5. if something does not work on stream like on a preview, please go to OBS source properties of window and click button:  refresh cache of current page

    Some Tips

    • To eliminate colored nicks in the chat, use !important in the color declaration #skin-chat-author-active
      #skin-chat-autor-active { color: #999999 !important; }
    • To change font in all elements @import it at the top od CSS, and use it to element #odp. You can chose every font from fonts.google.com.
      @import url('https://fonts.googleapis.com/css?family=Modern+Antiqua');
      #odp {font-family: 'Modern Antiqua', cursive;}
    • You may also import many fonts and use them to every other element separately.
      @import url('https://fonts.googleapis.com/css?family=Modern+Antiqua');
      @import url('https://fonts.googleapis.com/css?family=Muli');
      
      #skin-chat-autor-active { color: #999999 !important; font-family: 'Modern Antiqua', cursive;}
      #skin-chat-accent {color: #AAAAAA; font-family: 'Muli', sans-serif;} 
    • You can choose the skin You like and change only some of its elements - it is not necessary to paste the whole code. For example, the code below will only change the background color, rounding of the chat frame, will delete coloring of nickname and set it to #999999
    • #skin-chat { 
        background: rgba(50,0,0,0.3);
        border-radius:0px;
      }
      #skin-chat-autor-active {color:#999999 !important;}