User:Dragonfree97/Rounded Chat

Features:


 * Rounded edges for all interface items
 * Circular avatars
 * User list is on the left
 * Flashing PM indicator

How to install Rounded Chat:


 * 1) Navigate to your CSS page.
 * 2) Create/edit the page.
 * 3) Copy all of the code in the code box below onto that page, below any existing content, and save the page.
 * 4) Clear your browser cache.
 * 5) Refresh chat via the 'refresh' button in the header (to the right of the wiki logo).
 * 6) If you don't want the user list on the left hand side, find the section labeled 'LEFT HAND CHAT' (quite near the bottom).
 * 7) Delete EVERYTHING after this.
 * 8) Clear your browser cache.
 * 9) Refresh chat via the 'refresh' button in the header (to the right of the wiki logo).
 * 10) Report any issues to me.
 * 11) If you want to remove rounded chat, delete everything on your CSS page.

Please note that left-hand chat will not work without the rest of the CSS on this page.

Code
img.avatar { border-radius:55555px; border:none; }

span.username::after { display:none !important; } .Rail .User img { left: 10px; border: 1px solid #bbbbbb !important; border-radius: 55555px; } .Rail .User { padding-left: 40px; text-align: center; } .Rail .User.away { padding-left: 40px; text-align: center; } .User .username { margin-top: 4px; margin-right: 4px; } .User.away .username { margin-top: 4px; opacity: 0.15; margin-right: 4px; } .User.away > img { opacity: 0.15; } .User.away .status { display: none !important; }   margin-top: 2px; border-radius: 55555px; }   border-radius:55555px; }   border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; border-radius:16px }   border-bottom-right-radius: 16px; border-top-right-radius: 16px; border-left: 1px solid #c7bc9c; }   border: none; border-radius: 55555px; }   border-bottom-left-radius: 16px; border-right: 1px solid #c7bc9c; }   border-radius: 55555px; padding-left: 10px; padding-right: 10px; margin-right: 3px; background-color: #fff8e3; }   background-color: #fff8e3; }   border-top-left-radius: 16px; }   text-align: center; }   margin-bottom: 0px; } .unread > span.username { z-index: 2; color: black; position: relative; } .unread > img { z-index: 1; } .PrivateChatList .unread .splotch { width: 100%; border-radius: 0px; height: 100%; border: none; display: inline; position: absolute; top: 0px; right: 0px; font-size: 0px; z-index: 0; background-image: none; opacity: 0.6; background: red; -webkit-animation: mymove 0.4s infinite; /* Chrome, Safari, Opera */ animation: mymove 0.4s infinite; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-timing-function: linear; animation-timing-function: linear; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {background-color: rgba(0, 0, 0, 0);} to {background-color: red;} } /* Standard syntax */ @keyframes mymove { from {background-color: rgba(0, 0, 0, 0);} to {background-color: red;} } .ChatWelcomeTable { background-image: url('http://img4.wikia.nocookie.net/__cb20140904212907/animalcrossing/images/6/6a/64px-isabelle.png') !important; background-size: 64px !important; background-repeat: no-repeat !important; background-position: 98% -10% !important; padding-right: 100px !important; }   border-radius: 55555px; width: 60%; } span#MsgCount_214.splotch { top: 55px; }   border-radius: inherit; background: #EFE3BC !important; }   border-radius: 16px; border-color: #c7bc9c; -webkit-box-shadow: 0 0 12px 0px #c7bc9c; box-shadow: 0 0 12px 0px #c7bc9c; } .UserStatsMenu .info img { border-radius: 55555px; }   background: #EFE3BC; border-radius: 55555px; padding-left: 16px; padding-right: 16px; border: 1px solid #c7bc9c; padding-top: 3px; padding-bottom: 3px; position: relative; bottom: 4px; left: -4px; }   border-radius: 32px; }   border-radius: 8px; }   border-radius: 5px; }   text-align: center; }   position: absolute; left: 90%; }   margin-left: auto; margin-right: auto; width: 100%; border-radius: 55555px; }   width: 100%; margin-top: 3px; border-radius: 55555px; }   height: 66px }   margin-left: 8px; position: absolute; bottom: -3px; } div.Chat { border-top-left-radius: 16px; } /* Sidebar tweaks */ margin-bottom: 0px; } /* Mod highlighter */ .User.chat-mod > span { color: green; } /* Invisible mod */ color: #3a3a3a; } /* Logged-in user avatar changer div.User > img:nth-child(1) { border-radius: 55555px; } /* Spoiler button rounder */ input.spoilerbutton { border-radius: 55555px; } /* Firefox bugfixes */ @-moz-document url-prefix { .Chat { border-top-right-radius: 2px; }   #WikiaPage { border-top-right-radius: 2px; } } /* "Pill" input field */ border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; border-top-left-radius: 32px; border-bottom-left-radius: 32px; border: 1px solid #c7bc9c; }   border-top-left-radius: 2px; border-bottom-left-radius: 2px; border-top-right-radius: 32px; border-bottom-right-radius: 32px; left: -6px; padding-left: 5px; } /* LEFT HAND CHAT - REMOVE EVERYTHING AFTER THIS LINE TO USE RIGHT HAND CHAT */ left: 0; z-index: 2; border-bottom-left-radius: 16px; border-top-left-radius: 16px; border-left: none; border-right: 1px solid #c7bc9c; border-bottom-right-radius: 0px; border-top-right-radius: 0px; }   right: 0; margin-left: 150px; border-right: 0px; border-bottom-right-radius: 16px; } .Chat { border-top-right-radius: 16px; right: 0; margin-left: 150px; border-top-left-radius: 0px !important; }   left: 151px; width: 220px !important; }   border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: none; }   position: absolute; right: 149px !important; border: none; top: -4px; width: 34px; }   float: left; padding: 2px; left: 0; border: 1px solid #c7bc9c; background: #efe3bc; border-top-left-radius: 16px; border-bottom-left-radius: 16px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: none; }   float: left; left: 5px; border-left: none; border-right: 1px solid #c7bc9c; padding-right: 0px; }   display: block; left: 150px; }   left: 8px; width: 8px; }   margin-right: 0px !important; }   float: right; z-index: 2; right: -3px; }   text-align: left; left: 160px; width: 600px; line-height: 2.0em; top: -4px; }
 * 1) ChatHeader > div > img {
 * 1) ChatHeader {
 * 1) WikiaPage {
 * 1) Rail {
 * 1) Write > img {
 * 1) Write {
 * 1) Write > div.message {
 * 1) Write > div.message > textarea {
 * 1) Chat_214 {
 * 1) ChatHeader > div > span {
 * 1) Rail > h1.private {
 * 1) Rail > div > a {
 * 1) UserStatsMenu > div.info {
 * 1) UserStatsMenu {
 * 1) ChatHeader > h1.public.wordmark > a:nth-child(2) > img {
 * 1) ChatBanModal {
 * 1) ChatBanModal > section > form > fieldset > div:nth-child(2) > input[type="text"] {
 * 1) ChatBanModal > section > form > fieldset > div:nth-child(1) > select {
 * 1) ChatBanModal > header > h3 {
 * 1) ChatBanModal > header > a {
 * 1) ChatBanModal > footer > div > button.button.normal.primary {
 * 1) ChatBanModal > footer > div > button.button.normal.secondary {
 * 1) ChatBanModal > footer {
 * 1) ChatHeader > h1.private {
 * 1) Rail > h1.public.wordmark.selected, #Rail > h1.public.wordmark {
 * 1) ChatHeader > div > span, #user-Dragonfree97 > span, #user-Renacer > span, #user-Fang³ > span {
 * 1) Write > img {
 * 1) Write > div.message {
 * 1) Rail {
 * 1) Write {
 * 1) UserStatsMenu {
 * 1) ChatHeader > h1.public.wordmark > a:nth-child(2) > img {
 * 1) chatPluginsButton {
 * 1) chatPluginsButton > img {
 * 1) ChatHeader > div {
 * 1) ChatHeader > h1.private {
 * 1) MsgCount_214 {
 * 1) ChatHeader > h1.public.wordmark {
 * 1) ChatHeader > h1.public.wordmark > a:nth-child(2) {
 * 1) ChatHeader > h1.public.wordmark > div {