Customizing JAN's Chatango Group Chat

For about a month I have been using a plugin called Stylish combined with a custom theme based off the style "Chatango layout thingy". The plugin is available on Firefox (and all variations based on Firefox) and Chrome (and most, if not all, Chromium-based projects). Keep in mind that this customization means that it only works for YOU, everyone else will still see the default that Chatango forces on the group chat page if they don't use Stylish and don't have a custom UserStyle installed for Chatango.

First thing you will want to do is install Stylish of course. Next, you can either go with the "Chatango layout thingy" theme (and tweak the code for your needs,) or you can import my customized UserStyle (and tweak it even more).

If you use the "Chatango layout thingy" theme and do not make any changes to it, the theme can be kept up-to-date by the author of the theme. This is probably the best and easiest way for those not experienced with CSS. If you make changes to the theme, any updates the author makes will overwrite your changes.

However, if you use my customized theme, there will not be any updates on it so all customization to it will be yours to keep. This is for more advanced users who know how to use CSS. This will be the "Import" option. To import a style, you will want to single-click on the Stylish add-on button which should bring up a menu of installed theme (and list any that are active for the current tab's loaded site) and near the bottom of that menu will be a button labeled "Manage Styles". It will open a new tab with all the styles you have installed. On the left of the screen will be a button labeled "Write new style" which you will want to single-click on that button. It will take you to a new page, where on the left side will have "Import" and "Export" buttons. You will want to copy this code:

Spoiler

Code:

@-moz-document domain("chatango.com") {
#OM .msg {
    /*font-size: 13px;*/
    background: #4e5a64 !important;
    padding: 1px 0px 1px 0px !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px;
    vertical-align: text-top;
}
#OM .msg:nth-child(odd) {
    background: #48545e !important;
}
#OM .msg .user-thumb {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    margin-right: 10px !important;
}
#OM .msg-fg {
    color: #FFF;
}
/* Removes annoying font changes
    Just comment this out if you for some reason want them... */
/* ---
#OM .msg p span, #OM .msg p{
  font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif !important;
  color:#BBB !important;
}
/* --- */

#TL_URL_cntnr {
    float: left;
    z-index: 200 !important;
}
/* Remove username formatting. Comment to disable username formmatting. */

#OM .msg span.c_username {
    /*display:block !important;*/
    font-size: 14px;
    margin: 0 4px 4px 0;
    z-index: 1 !important;
    display: inline-block;
    vertical-align: top;
    /*pointer-events: none !important;*/
}
/*.c_username {
  
}*/
#OM .msg {
    position: relative !important;
}
/* Remove user backgrounds */
#OM .msg span.thumb img, #OM div.smiley
{
    vertical-align: text-top;
    clear: left;
}

#OM .msg .msg-bg {
    opacity: 0 !important;
}
#OM .msg .msg-stripes {
    display: none !important;
}
#OM .msg .at-reply {
    color: #ccc !important;
    /* font-size: 12px !important;*/
  
    background: #47627a !important;
    padding: 0px 2px 0px 2px !important;
    border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
}
#OM .msg .msg-date {
    clear: right;
    float: right;
    text-align: right !important;
    color: #bbb !important;
}
#OM .msg .msg_badge {
    display: inline-block;
    margin-right: 4px !important;
}
#OM .msg .msg_badge svg g path[fill]
{
    fill: blue;
}

#OM .msg div p div.smiley
{
    position: relative;
    top: 0px;
}

#OM .msg .at-quote {
    font-size: 12px !important;
    padding: 0px 2px 0px 2px !important;
    background: #5e9368 !important;
    border: 0 !important;
    color: #eee !important;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
}
#OM .msg .at-quote .at-reply {
    background: 0 !important;
    color: #eee !important;
    padding: 0 !important;
}
#OM .msg a {
    color: #ff9e5e !important;
}
/* Blue link #59bbff */

#CGW {
    background: #2c3138 !important;
    padding: 6px 4px !important;
}
#GBG {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#OW {
    border: 0 !important;
}
input.ubdr {
    padding: 0 !important;
    margin: 0 !important;
    padding-left: 8px !important;
    color: #EEE !important;
    background: #151d24 !important;
    border: 0 !important;
    max-height: 26px !important;
}
input.ubdr::-webkit-input-placeholder {
    color: #EEE !important;
}
input.ubdr:-moz-placeholder {
    /* Firefox 18- */
  
    color: #EEE !important;
}
input.ubdr::-moz-placeholder {
    /* Firefox 19+ */
  
    color: #EEE !important;
}
input.ubdr:-ms-input-placeholder {
    color: #EEE !important;
}
#group_table tr:nth-child(1),
#group_table tr:nth-child(2),
#group_table tr:nth-child(3) {
    display: none !important;
}
#GTL {
    display: block !important;
    text-decoration: none;
}
#UTL {
    display: none;
}
#IWW,
#IWER2,
#input-field {
    height: 32px !important;
    max-height: 128px !important;
    padding: 0 !important;
}
#input-field {
    box-sizing: border-box !important;
    padding: 1px 6px 0px 6px !important;
    background: #000 !important;
    color: #EEE !important;
    border-radius: 6px;
}
.msg.ubdr {
    border: 0 !important;
}
.bottombar.has-border {
    display: none !important;
}
.msg-mod-div {
    margin-left: 6px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}

#OM .msg .msg-ip,
#OM .icon-button.delete-button {
    color: #EEE !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
}

@-moz-document domain("infrequent.co") {
.navbar.navbar-default.navbar-fixed-top.navbar-inverse {
    background: #0f1419 !important;
    border: 0 !important;
    padding: 0 8px 0 8px !important;
}
.chat {
    padding-top: 50px !important;
}

.navbar.navbar-default.navbar-fixed-top.navbar-inverse .container {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    padding-left: 20px !important;
}
/* No point in showing these options right now... */

ul.nav.navbar-nav.navbar-right {
    display: none !important;
}
ul.nav.navbar-nav li a {
    font-size: 14px !important;
}
ul.nav.navbar-nav li a:hover,
ul.nav.navbar-nav li a.dropdown-toggle,
ul.nav.navbar-nav ul.dropdown-menu li a:hover {
    color: #ff9e5e !important;
    background: 0 !important;
}
ul.nav.navbar-nav li:first-child a {
    padding-left: 8px !important;
}
ul.nav.navbar-nav {
    padding: 0 !important;
    margin: 0 !important;
}
ul.nav.navbar-nav ul.dropdown-menu {
    background: #000 !important;
    opacity: 0.8 !important;
}
ul.nav.navbar-nav ul.dropdown-menu li a {
    color: #fff !important;
    padding: 8px 12px 8px 12px !important;
}
ul.nav.navbar-nav ul.dropdown-menu li.divider {
    display: none !important;
}
/* Logo thingy */

a.navbar-brand {
    background: url("http://i.imgur.com/JmLAWLs.png)") no-repeat 0px !important;
}
a.navbar-brand img {
    display: none !important;
}
.msg-mod-div {
    margin-left: 6px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
#OM .msg .msg-ip,
#OM .icon-button.delete-button {
    color: #EEE !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
}

Then you will single-click on "Import" and paste the copied code in the pop-up window. Once the code has been entered into the window, you will have two button on the bottom right. Since it is a new theme, you can single-click on "Overwrite style" to apply it to your style. You can save the theme and it will apply the changes to the JAN chat group on your end of the screen. You will need to refresh the chat's page when you make changes for all the changes to show up.

Remember, this style will only apply to YOU. If another user uses a color that blends in with your color scheme, you will have to modify YOUR theme to either disable custom user colors on your end or tweak your color scheme. Chatango users will not be warned or punished for using a color that blends in with YOUR UserStyle color scheme as they have no idea what your color scheme looks like.

You can edit and use this theme as is, without warranty. Official support will not be offered. Just Anime Network and it's affiliates is not responsible for any undesired outcomes of your customized style.

~~~

If you want to go it alone here is what you need:
URLs on the domain: chatango.com <- This is the Chatango domain.
URLs on the domain: infrequent.co <- this is a resource domain that Chatango uses.

 

New version of my modification to the UserStyle theme.

Spoiler

Code:

@-moz-document domain("chatango.com") {
#TL_URL_cntnr {
    float: left;
    text-indent: 40px;
    z-index: 200 !important;
}

#TL_URL_cntnr a {
    color: #ffbe7e;
}

#GTL {
    display: block !important;
    text-decoration: none;
}
#UTL {
    display: none;
}

#CGW {
    background: #030303 !important;
    padding: 6px 4px !important;
}

#GBG {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#OM .msg {
    font-size: 14px;
    padding: 1px 0px 1px 0px !important;
    border: 0 !important;
    border-radius: 6px;
    vertical-align: text-top;
    position: relative !important;
}

#OM .msg-bg, .announcement-msg {
    /*background-color: #050505;*/
    opacity: 1 !important;
}

#OM .msg .user-thumb {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    margin-right: 10px !important;
}
#OM .msg-fg {
    color: #FFF;
}
/* Removes annoying font changes
    Just comment this out if you for some reason want them... */

#OM .msg p span, #OM .msg p{
  font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif !important;
  /*color:#BBB !important;*/
}

/* Remove username formatting. Comment to disable username formmatting. */

#OM .msg span.c_username {
    /*display:block !important;*/
    font-size: 14px;
    margin: 0 4px 4px 0;
    z-index: 1 !important;
    display: inline-block;
    vertical-align: top;
    /*pointer-events: none !important;*/
}

/* Remove user backgrounds */
#OM .msg span.thumb img, #OM div.smiley
{
    vertical-align: text-top;
    clear: left;
}

#OM .msg .at-reply {
    color: #ccc !important;
    /* font-size: 12px !important;*/
    background: #47627a !important;
    padding: 0px 2px 0px 2px !important;
    border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
}
#OM .msg .msg-date {
    clear: right;
    float: right;
    text-align: right !important;
    color: #bbb !important;
}
#OM .msg .msg_badge {
    display: inline-block;
    margin-right: 4px !important;
}
#OM .msg .msg_badge svg g path[fill]
{
    fill: skyblue;
}

#OM .msg div.smiley svg
{
    position: relative;
    top: 0px;
}

#OM .msg .at-quote {
    font-size: 12px !important;
    padding: 0px 2px 0px 2px !important;
    background: #47627a !important;
    border: 0 !important;
    color: #ccc !important;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
}
#OM .msg .at-quote .at-reply {
    background: 0 !important;
    color: #ccc !important;
    padding: 0 !important;
}
#OM .msg a {
    color: #ff9e5e !important;
}
/* Blue link #59bbff */

#OW {
    border: 0 !important;
}
input.ubdr {
    padding: 0 !important;
    margin: 0 !important;
    padding-left: 8px !important;
    color: #EEE !important;
    background: #151d24 !important;
    border: 0 !important;
    max-height: 26px !important;
}
input.ubdr::-webkit-input-placeholder {
    color: #EEE !important;
}
input.ubdr:-moz-placeholder {
    /* Firefox 18- */
    color: #EEE !important;
}
input.ubdr::-moz-placeholder {
    /* Firefox 19+ */
    color: #EEE !important;
}
input.ubdr:-ms-input-placeholder {
    color: #EEE !important;
}
#group_table tr:nth-child(1),
#group_table tr:nth-child(2),
#group_table tr:nth-child(3) {
    display: none !important;
}

#IWW,
#IWER2,
#input-field {
    height: 32px !important;
    max-height: 128px !important;
    padding: 0 !important;
}
#input-field {
    box-sizing: border-box !important;
    padding: 1px 6px 0px 6px !important;
    background: #000 !important;
    color: #EEE !important;
    border-radius: 6px;
}
.msg.ubdr {
    border: 0 !important;
}
.bottombar.has-border {
    display: none !important;
}
.msg-mod-div {
    margin-left: 6px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}

#OM .msg .msg-ip,
#OM .icon-button.delete-button {
    color: #EEE !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
}

@-moz-document domain("infrequent.co") {
.navbar.navbar-default.navbar-fixed-top.navbar-inverse {
    background: #000 !important;
    border: 0 !important;
    padding: 0 8px 0 8px !important;
}
.chat {
    padding-top: 50px !important;
}

.navbar.navbar-default.navbar-fixed-top.navbar-inverse .container {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    padding-left: 20px !important;
}
/* No point in showing these options right now... */

ul.nav.navbar-nav.navbar-right {
    display: none !important;
}
ul.nav.navbar-nav li a {
    font-size: 14px !important;
}
ul.nav.navbar-nav li a:hover,
ul.nav.navbar-nav li a.dropdown-toggle,
ul.nav.navbar-nav ul.dropdown-menu li a:hover {
    color: #ff9e5e !important;
    background: 0 !important;
}
ul.nav.navbar-nav li:first-child a {
    padding-left: 8px !important;
}
ul.nav.navbar-nav {
    padding: 0 !important;
    margin: 0 !important;
}
ul.nav.navbar-nav ul.dropdown-menu {
    background: #000 !important;
    opacity: 0.8 !important;
}
ul.nav.navbar-nav ul.dropdown-menu li a {
    color: #fff !important;
    padding: 8px 12px 8px 12px !important;
}
ul.nav.navbar-nav ul.dropdown-menu li.divider {
    display: none !important;
}
/* Logo thingy */

a.navbar-brand {
    background: url("http://i.imgur.com/JmLAWLs.png)") no-repeat 0px !important;
}
a.navbar-brand img {
    display: none !important;
}
.msg-mod-div {
    margin-left: 6px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
#OM .msg .msg-ip,
#OM .icon-button.delete-button {
    color: #EEE !important;
    z-index: 9999 !important;
    opacity: 1 !important;
}
}

In this version, you will be able to allow custom backgrounds and custom background colors, while maintaining a dark default theme for non-custom backgrounds and your user interface for the main chatango site.
See sample below:

Spoiler