User:Ahri-chan/Modular Chat Skin

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
Local MCS =

/* MCS */ 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; } .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; } .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)); border-color: #3a3a3a } .Rail .selected { background:transparent; box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000; } /* END OF CODES */
 * 1) WikiaPage {



Universal MCS =

/* MCS (universal) */ 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; } .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; }
 * 1) WikiaPage {

.UserStatsMenu .info img { border: 1px solid #3d454d; /* END OF CODES */



MCS for chat hacks =

/* MCS (universal; chat hacks support) */ border:1px solid #3d454d; background-color:rgba(0, 0, 0, 0); } .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:95%; } .Rail { color: #d5d4d4; }
 * 1) WikiaPage {

.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 */

Upcoming updates

 * Compatibility with chat hacks
 * Universalisation of the .css.