Hello Community Members. This is iDaire and I am coming to you with a tutorial on how to change the EtG Chat. Just so you know, we're not majorly changing anything in chat, we're simply changing the outward appearance of chat locally, meaning that these changes will occur on your PC and only yours. For this tutorial to work, you must have at least a basic knowledge of CSS, and if you don't, I'll leave a list of terms and stuff you can use to help change your chat's appearance. Let's get started.
Of course, you could always change the chat through Inspect Element, but these changes would never stay put. You want to get a Chrome Extension/ Firefox Add-On called Stylish. Stylish is an add-on that allows you to change your most popular sites into themes created by other users as well as allow you to
create your own theme for a website. This is the feature we want to use. So, I'm going to put up a screenshot of my chat so that you can see it.
I'm going to go through and explain what each of the colors that highlight words mean.
Red - The red is any external links in chat that aren't in the private messaging box. The red also consists of the chat function buttons. So basically, the buttons on the top, any link anyone posts in chat, and AveragePotato links. The red is a class called .lu
Green - The green is the time displayed by chat whenever a user drops a message. This is defined by a class called .s (the time displayed by chat whenever a user leaves the chat or joins the chat is defined by .blab_lj .s)
Yellow - Any name in chat that is next to a message (if you understand what I mean) as well as chat messages sent with the default color is defined by the body tag, which appears in HTML.
Blue/Sky Blue/Turquoise - Let me break this down. An inactive member's name is defined by a class called .o2 | An active members named is defined by a class called .o1 | A moderator's name is defined by a class called .o0
Alright. Let me just summarize what I just said and add some more details.
AveragePotato Links | Button functions in chat | External links in chat message box - Class (.lu)
Time displayed by chat when a user sends a message - Class (.s)
Time displayed by chat when a user leaves or joins the chat - Class (.blab_lj .s)
Names displayed by chat when a user sends a message - Element (body)
Names displayed by chat when a user leaves the chat - Class (.blab_left)
Names displayed by chat when a user joins the chat - Class (.blab_joined)
An "away" member's name - Class (.o2)
An "active" member's name - Class (.o1)
A "moderator" member's name - Class (.o0)
Every single word in chat - Element (td, p, div)
The chat box - Id (#blab_chat) [Only mess with the background-color, and if you do, change the background color of the body tag as well]
The list of names - Id (#blab_onll) [Only mess with the border, background-color, and width, possibly padding if you know what you're doing]
Box above the list of names that reads "ONLINE" - Id (#blab_onlt) [Only mess with the border, background-color, and width, possibly padding if you know what you're
doing]
"ONLINE" - Element (body)
Box where you input your chat messages - (input, select, textarea)
Alright. Now that I've explained each of the things in the chat and each of the customizable parts, I'm going to go into the "Stylish" extension and explain what to do from there.
Alright, so basically, this is what we're supposed to have, minus the style that I already installed. So, what you want to do from here, is go on and click "New Style". You'll be greeted with this screen:
Alright. Copy and paste this into the code section.
Spoiler for Template Script:
/* Welcome to the EtG Chat Editor. This is the CSS for chat that you will be editing. Let's get started. If you have any knowledge of CSS whatsoever, you should know how to do this. If not, then I will explain what to do back in the post. For now, these are the elements you will be editing. */
/* What you are changing here is the appearance of these Elements. You are not actually changing the content. */
/*A moderator's name.*/
.o0 {
font-size: 8pt;
font-weight: bold;
line-height: 13px;
white-space: nowrap;
color: #FEC400;
background-color: transparent;
background-image: url(images/status_m.png);
background-repeat: no-repeat;
cursor: pointer;
padding-left: 12px;
margin-left: 8px;
}
/*An active member's name.*/
.o1 {
font-size: 8pt;
font-weight: bold;
line-height: 13px;
white-space: nowrap;
color: #FEC400;
background-color: transparent;
background-image: url(images/status_o.png);
background-repeat: no-repeat;
cursor: pointer;
padding-left: 12px;
margin-left: 8px;
}
/*An inactive member's name.*/
.o2 {
font-size: 8pt;
font-weight: bold;
line-height: 13px;
white-space: nowrap;
color: #FEC400;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
padding-left: 12px;
margin-left: 8px;
}
/*Any links in chat posted by AveragePotato or other members, as well as the button functions in chat*/
.lu {
color: #FEC400;
background-color: transparent;
text-decoration: underline;
cursor: pointer;
}
/*The time displayed by chat whenver a user displays a message*/
.s {
font-size: 8pt;
color: #999;
font-style: normal;
}
/*The time displayed by chat whenever a user leaves or joins chat*/
.blab_lj .s {
color: #555;
}
/*The word "ONLINE", names displayed by chat whenver a user sends a message, default color of chat messages*/
body {
color: #ddd;
background-color: #111;
padding: 0px;
margin: 0px;
overflow: auto;
}
/*Name displayed by chat whenever a user leaves the chat*/
.blab_left {
color: #844;
}
/*Name displayed by chat whenever a user joins the chat*/
.blab_joined {
color: #558;
}
/*Chat Box*/
#blab_chat {
position: fixed;
left: 13px;
top: 95px;
bottom: 55px;
width: 98%;
background-color: #111;
overflow: hidden;
}
/*Name Box*/
#blab_onll {
padding-top: 8px;
position: fixed;
right: 1%;
top: 116px;
bottom: 55px;
width: 18%;
overflow: hidden;
background-color: #444;
border: 1px solid #333;
display: none;
}
/*Box with the word ONLINE*/
#blab_onlt {
position: fixed;
right: 1%;
top: 68px;
height: 45px;
width: 18%;
background-color: #333;
border: 1px solid #222;
display: none;
}
/*Every word in chat*/
td, p, div {
font-family: verdana,helvetica,sans-serif;
font-size: 9pt;
text-align: left;
}
Alright, so basically the things in between the bracket are the characteristics of EtG chat. If you have a basic knowledge of CSS, than you should know what to do from here and all you need help with doing is applying it to EtG chat. If you don't do that, whatever you've edited here will affect every site that you go on. Skip down to the next horizontal break if you know what to do with CSS. Else, read these next parts.
Alright. Let me get an example up here for us to edit:
.o2 {
font-size: 8pt;
font-weight: bold;
line-height: 13px;
white-space: nowrap;
color: #FEC400;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
padding-left: 12px;
margin-left: 8px;
}
So, I bet you're wondering: what is all of this? Well wonder no longer, as I shall explain it to you. Basically, don't edit anything outside of the brackets, as they are vital parts. See these things that end with a colon, such as color: and cursor:? Unless you know what you're doing here, which I assume you don't, don't do anything to these. All you need to edit is the parts that end with semicolons.
For example, let's say you wanted to edit the color. You change the part that says #FEC400 to whatever you wanted. Colors can be selected and edited
here.
If you wanted to change the size of the font, you'd edit the part that says 8pt next to font-size and change the number to whatever you wanted.
If you wanted to change whether or not the font is bold, you would change the part that says bold next to font-weight.
A little tidbit. For the names of the people in chat, you want to remove background-image. Otherwise, the icons that indicate whether or not a person is AFK, Active, or a Mod will not show up.
In another case, if you wanted to change the font of the actual words, you would insert a part in between the brackets. The characteristic to change the font is called "font-family". You would format it like this (font-family: verdana;). You change verdana to whichever font you want. Any font you select has to go between singular quotations like this ('Segoe Print') or ('Evanescent'). Make sure you have the font installed on your system and that you spell the name properly.
You can search up what everything else does, but no matter what you do,
don't change anything that you don't recognize. Even so, I stay away from margin, padding, whitespace, top, bottom, right, left, position, background-repeat, line-height, overflow, or display. Everything else you can touch.
You can make your edits and quickly view what it does by pressing save, but it'll affect
everything. I'll be explaining how to stop that from happening right now.
Currently the code you have applies to everything. You want to limit it to the EtG chat. So, you want to specify what it applies to, select URL, then copy and paste the EtG Chat's URL into the box provided. After that, you want to save your progress on the left, and then name it whatever you want. I named it Elements Tutorial. You want to enable it. After that, you can go back to manage. You don't need to refresh your page as whatever you've done will apply to the site. If something is wrong, then nothing will show up. If you've done it properly, then everything should change on the site.
Reply to the topic if you still have any further questions. I'm not great at explaining so I know that there will be some questions left unanswered.
--iDaire, a member of the community.
