« previous next »
Pages: [1]

Author Topic: Custom Chat Colors  (Read 4077 times)

0 Members and 1 Guest are viewing this topic.

Mitch

  • Master
  • ****
  • Posts: 401
  • Karma: +24/-1
  • Took me 20 minutes to change this...
    • View Profile
  • Twitch Name: Mitch619911
Custom Chat Colors
« on: November 30, 2015, 02:39:21 AM »
All chat CLR uses this link:
http://deepbot.tv/notifications/OBSChatv8.htm



1) Black username orange message
 


 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #c13f01 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #000000 !important;
  font-size: 25px !important;
}
2) Light blue username pink text:
 
 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #E21790 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #0A5CC0 !important;
  font-size: 25px !important;
}
3) Dark'ish red light blue'ish:
 
 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #20978F !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #821100 !important;
  font-size: 25px !important;
}
4) Light gray dark'ish gray:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #555555 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #A6A6A6 !important;
  font-size: 25px !important;
}

5) Light green and yeah:

   

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #37414A !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #60BB22 !important;
  font-size: 25px !important;
}
6) Blue and gray:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #F2BABB !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #194E84 !important;
  font-size: 25px !important;
}
7)  Yellow'ish and some red:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #FA0026 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #FFB310 !important;
  font-size: 25px !important;
}
8)  light blue yellow'ish:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #F1A94E !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #44B3C2 !important;
  font-size: 25px !important;
}
9)  dark/dark/light blue and dark purple:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #814374 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #06425C !important;
  font-size: 25px !important;
}
10) dark white and gray'ish:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #7B8D8E !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #F2EDD8 !important;
  font-size: 25px !important;
}
11)  Yellow'ish and dark dark red:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #48110C !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #AD9D2C !important;
  font-size: 25px !important;
}
12)  Pink and light pink:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #FCB3D0 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #D01A55 !important;
  font-size: 25px !important;
}
13) Blue and purple:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #692DAC !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #34ACAF !important;
  font-size: 25px !important;
}
14)  Creamy white and dark green:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #425227 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #D5D0B0 !important;
  font-size: 25px !important;
}
15)  Some yellow and silver:

 

 
Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  color: #c0c0c0 !important;
  font-size: 25px !important;
}
.chat_line .nick {
  color: #949411 !important;
  font-size: 25px !important;
}
Logged
:)

Mitch

  • Master
  • ****
  • Posts: 401
  • Karma: +24/-1
  • Took me 20 minutes to change this...
    • View Profile
  • Twitch Name: Mitch619911
Re: Custom Chat Colors
« Reply #1 on: November 30, 2015, 02:43:08 AM »
We/You can also remove the black box, change the font, the size, make it bold you can do a lot.
I can make custom color chat css if you want.
Logged
:)

TheRealAlixe

  • Knight
  • ***
  • Posts: 106
  • Karma: +5/-2
    • View Profile
    • Ninetales.us
  • Twitch Name: TheRealAlixe
Re: Custom Chat Colors
« Reply #2 on: December 21, 2015, 11:34:48 PM »


Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
    float: right;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
    float: right;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
    float: right;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
    float: right;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
    float: right;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
    float: right;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
    float: right;
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
    float: right;
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
    float: right;
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
    float: right;
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
    float: right;
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
.chat_line .message {
  display: block;
  color: #FFFFFF !important;
  font-size: 20px !important;
}
.chat_line .nick {
  color: #359BFF !important;
  font-size: 20px !important;
}
Logged
Twitter: @TheRealAlixe | Web: Ninetales.us | Twitch: @TheRealAlixe | Discord: join

TheRealAlixe

  • Knight
  • ***
  • Posts: 106
  • Karma: +5/-2
    • View Profile
    • Ninetales.us
  • Twitch Name: TheRealAlixe
Re: Custom Chat Colors
« Reply #3 on: January 07, 2016, 11:43:03 PM »


Just thought i would release my new look of the chat that i use :P

Code: [Select]
    ::-webkit-scrollbar {
        visibility: hidden;
    }
   
    html {
        height: 95%;
        width: 95%;
    }
   
    a {
        color: #FFFFFF;
    }
   
    BODY {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        color: #FFF;
        height: 95%;
        width: 95%;
        overflow: hidden;
    }
   
    .nick {
        font-weight: bold;
        text-transform: capitalize;
        text-shadow: 1px 1px 0 #000;
    }
   
    .emote {
        margin: -4px 0px;
    }
   
    .tag {
        display: inline-block;
        text-indent: 21px;
        background-position: 0 center;
        background-repeat: no-repeat;
        display: inline-block;
        vertical-align: bottom;
        height: 18px;
        width: 18px;
        padding: 0;
        margin-right: 3px;
        margin-bottom: -1px;
        text-indent: -9999px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        overflow: hidden;
    }
   
    .turbo {
        background-color: #6441a5;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
        background-size: 100%;
        float: right;
    }
   
    .moderator {
        background-color: #34ae0a;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
        background-size: 100%;
        float: right;
    }
   
    .broadcaster {
        background-color: #e71818;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
        background-size: 100%;
        float: right;
    }
   
    .staff {
        background-color: #200f33;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
        background-size: 100%;
        float: right;
    }
   
    .admin {
        background-color: #faaf19;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
        background-size: 100%;
        float: right;
    }
   
    .global_mod {
        background-color: #0C6F20;
        background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
        background-size: 100%;
        float: right;
    }
   
    .creator {
        background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
        float: right;
    }
   
    .support {
        background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
        float: right;
    }
   
    .vipbronze {
        background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
        float: right;
    }
   
    .vipsilver {
        background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
        float: right;
    }
   
    .vipgold {
        background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
        float: right;
    }
   
    .chat_line {
        margin: 5px;
        padding: 5px;
        line-height: 20px;
        word-wrap: break-word;
        color: #FFF;
        background: #232323 url(img/chatBG.png);
        background-size: 100% auto;
        border-right: solid #359BFF 5px;
    }
   
    #chat_container {
        border-radius: 10px;
        height: 99%;
        width: 99%;
    }
   
    .chat_line .message {
        display: block;
        color: #FFFFFF !important;
        font-size: 14px !important;
    }
   
    .chat_line .nick {
        color: #359BFF !important;
        font-size: 14px !important;
    }
Logged
Twitter: @TheRealAlixe | Web: Ninetales.us | Twitch: @TheRealAlixe | Discord: join
Pages: [1]
« previous next »