CSS and HTML

This article will help you edit HTML, CSS, and JavaScript within ArrowChat. You'll be able to change colors, placements of objects, and more.

 

Sections in this article

---

Editing the CSS

The CSS code will allow you to change things like colors and sizes. This guide will detail how to inspect and edit CSS on Google Chrome. However, you can do these same functions in any modern browser and the process is nearly the same.

Where to edit the CSS

There are two places to edit the CSS. You can either go to the ArrowChat admin panel under Appearance > Templates > Stylesheet or open up the /themes/{Theme Name}/css/style.css file on your server.

If you are an inexperienced CSS editor, you can use a web search to search for terms such as CSS font color to get the CSS term that will switch the font color.

CSS Terms

It's important that you understand the difference between a CSS class and ID. CSS classes will begin with a period (.) while CSS IDs will begin with a hashtag (#). Please see the examples below.

#arrowchat_announcement{} // The # signifies an ID

.arrowchat_announcement_content{} // The . signifies a class

Find the ID or Class to Edit

Now that you know where and how to edit the CSS, we need to figure out which CSS ID or class to edit. The names of the IDs and classes in the ArrowChat stylesheet are named appropriately but the sheer number of them can be overwhelming.

In order to find the correct ID or Class, you'll want to Right-click on the element that you want to change and select Inspect. For example, if wanted to change the font color, we would right-click on the text that we want to change.

After inspecting the element, the Developer Tools will popup. On the left pane, you'll see all the HTML code making the website run. On the right pane, you'll see all the CSS that is styling the element that you have selected.

Using the examples above, we can see that <span class="arrowchat_chatroom_msg"> is wrapped around the text we are trying to change. This means we need to edit the arrowchat_chatroom_msg class in order to change the color.

Using everything we've just learned, we would open up the theme's CSS file and add the following code to it:

.arrowchat_chatroom_msg{color: #FF0000;}

This will change our text to red because #FF0000 is the hex code for the color red. In this case, we had to make a new entry for .arrowchat_chatroom_msg because it did not already exist in the stylesheet. Most of the time, the class or ID will already be there and you can press Ctrl+F to find it and make direct edits.

---

Editing the HTML

Most of the HTML can be edited through the templates files. There are two places to edit the templates. You can either go to the ArrowChat admin panel under Appearance > Templates or open up the /themes/{Theme Name}/template/ folder on your server. The files are named appropriately, but you can view the directory structure below for more information.

Template File Explanations

HTML Locations for Mobile, List, and Popout

A small amount of HTML is only editable in the JavaScript file which is detailed in the next section.

---

Editing the JavaScript

There are a few different JavaScript files depending on what part of ArrowChat you want to edit.

Each of the files is compressed using dead.edwards /packer/ with a Base62 encode. You can view a readable version of the file in the same folder with the .dev.js at the end of the filename. We recommend editing the readable version and then compressing it back down in the main file.

---

Next