This is a custom .css that visually changes your chat window. As of the recent updates, this skin now has support for transparency and background images, as well as color changes for the user menu's icons. -preview-.
As for background images, you may use imgur or Wikia. Make sure to place the link on ".ChatWindow { background:url('') no-repeat fixed center;".
To apply the modular chat skin, visit this page on a wiki, or here; should you wish for the modular chat skin to be applied on all wiki chats.
To suggest features, make sure you message me on my wall.
Codes[]
/* MCS (universal) */
#WikiaPage {
border:1px solid #3d454d;
background-color:rgba(0, 0, 0, 0.75);
}
.ChatWindow {
background: url('') no-repeat fixed center;
}
.ChatHeader .User {
border-left:1px solid #3d454d;
}
.Chat {
color: #d5d4d4;
border-right:1px solid #3d454d;
border-bottom:1px solid #3d454d;
}
.ChatWindow .WikiaPage {
background-color: rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color: #d5d4d4;
}
.ChatWindow .ChatHeader {
background-color:rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color: #d5d4d4;
}
.ChatWindow .Chat li.you {
background:transparent;
}
.Chat .avatar {
border:1px solid #3d454d;
}
.ChatWindow .UserStatsMenu {
background-color:rgba(0, 0, 0, 0.45);
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
border:1px solid #3d454d;
border-radius:3px;
}
.ChatWindow .UserStatsMenu .info {
background:transparent;
color:#d5d4d4;
}
.ChatWindow .UserStatsMenu .actions ul li:hover {
background:transparent;
}
.User img {
border:1px solid #3d454d;
}
.UserStatsMenu .info img {
border: 1px solid #3d454d;
}
.UserStatsMenu .actions ul li .icon {
background-position:0; background-image:url('http://img4.wikia.nocookie.net/__cb20140409013944/central/images/4/49/Mcs-sprites.png');
opacity:100;
}
.UserStatsMenu .actions ul li:hover .icon {
opacity:100;
}
.UserStatsMenu .actions .separator {
border-top: #3d454d 1px solid;
}
.Write [name="message"] {
color: #d5d4d4;
}
.Write img {
border:1px solid #3d454d;
}
.Write .message {
border:1px solid #3d454d;
background:transparent;
}
.Rail {
color: #d5d4d4;
}
.Rail .User:hover {
background:transparent;
}
.Rail .public .chevron {
border-color:white transparent transparent transparent;
}
.Rail .public .chevron.closed {
border-color:transparent transparent transparent white;
}
.Rail .private {
border-top: 1px solid #3d454d;
border-bottom: 1px solid #3d454d;
background-color:transparent;
background-image:-webkit-gradient(linear,0% 0%,0% 0%,color-stop(0,transparent),color-stop(0,transparent));
}
.Rail .selected {
background:transparent;
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
}
/* END OF CODES */
/* MCS (universal; chat hacks support) */
#WikiaPage {
border:1px solid #3d454d;
background-color:rgba(0, 0, 0, 0.75);
}
.ChatWindow {
background: url('') no-repeat fixed center;
}
.ChatHeader .User {
border-left:1px solid #3d454d;
}
.Chat {
color: #d5d4d4;
border-right:1px solid #3d454d;
border-bottom:1px solid #3d454d;
}
.ChatWindow .WikiaPage {
background-color: rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color: #d5d4d4;
}
.ChatWindow .ChatHeader {
background-color:rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color: #d5d4d4;
}
.ChatWindow .Chat li.you {
background:transparent;
}
.Chat .avatar {
border:1px solid #3d454d;
}
.ChatWindow .UserStatsMenu {
background-color:rgba(0, 0, 0, 0.45);
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
border:1px solid #3d454d;
border-radius:3px;
}
.ChatWindow .UserStatsMenu .info {
background:transparent;
color:#d5d4d4;
}
.ChatWindow .UserStatsMenu .actions ul li:hover {
background:transparent;
}
.User img {
border:1px solid #3d454d;
}
.UserStatsMenu .actions ul li .icon {
background-position:0; background-image:url('http://img4.wikia.nocookie.net/__cb20140409013944/central/images/4/49/Mcs-sprites.png');
opacity:100;
}
.UserStatsMenu .actions ul li:hover .icon {
opacity:100;
}
.Write [name="message"] {
color: #d5d4d4;
}
.Write img {
border: 1px solid #3d454d;
}
.Write .message {
border: 1px solid #3d454d;
background: transparent;
width: 91.8%;
}
.Rail {
color: #d5d4d4;
}
.Rail .wordmark .chevron {
top:48px;
}
.Rail .wordmark .chevron.closed {
top:45px;
}
.Rail .User:hover {
background:transparent;
}
.Rail .public .chevron {
border-color:white transparent transparent transparent;
}
.Rail .public .chevron.closed {
border-color:transparent transparent transparent white;
}
.Rail .private {
background-color:transparent;
background-image:-webkit-gradient(linear,0% 0%,0% 0%,color-stop(0,transparent),color-stop(0,transparent));
}
.Rail .selected {
background:transparent;
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
}
/* END OF CODES */