This is a custom .css that changes your chat window. 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 it on ".ChatWindow { background:url('') no-repeat fixed center;", between the apostrophe enclosed with the parentheses.
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.
.css
/* Modular Chat Skin */
#WikiaPage {
background-color:rgba(0, 0, 0, 0.15);
}
.ChatWindow {
background:url('http://i.imgur.com/v5IvGto.jpg') no-repeat fixed center;
}
.ChatHeader {
background-color:rgba(0, 0, 0, 0.75);
}
.Chat li.you {
background:transparent;
}
.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;
}
.ChatWindow .UserStatsMenu .actions ul li:hover {
background:transparent;
}
/* WARNING: Do not remove the link below. It's for the menu icons. */
.UserStatsMenu .actions ul li .icon {
background-position:0; background-image:url('http://i.imgur.com/T1scNH0.png');
opacity:100;
}
.UserStatsMenu .actions ul li:hover .icon {
opacity:100;
}
.ChatWindow .Write .message {
background:transparent;
}
.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 */
/* Modular Chat Skin (Universal) */
#WikiaPage {
background-color:rgba(0, 0, 0, 0.15);
}
.ChatWindow {
background: url('http://i.imgur.com/6a9G8ip.jpg') no-repeat fixed center;
}
.ChatHeader .User {
border-right:1px solid #3d454d;
border-left:1px solid #3d454d;
}
.Chat {
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:white;
}
.ChatWindow .ChatHeader {
background-color:rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color:white;
}
.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:white;
}
.ChatWindow .UserStatsMenu .actions ul li:hover {
background:transparent;
}
.User img {
border:1px solid #3d454d;
}
/* WARNING: Do not remove the link below. It's for the menu icons. */
.UserStatsMenu .actions ul li .icon {
background-position:0; background-image:url('http://i.imgur.com/T1scNH0.png');
opacity:100;
}
.UserStatsMenu .actions ul li:hover .icon {
opacity:100;
}
.Write [name="message"] {
color:white;
}
.Write img {
border:1px solid #3d454d;
}
.Write .message {
border:1px solid #3d454d;
background:transparent;
}
.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 */
Upcoming updates
- Compatibility with chat hacks
- Universalisation of the .css.