Please keep this file somewhere safe as it will help edit your viewer files either now or in the future.

ReadMe for Colour Themed Discord Viewer

Once you have unzipped your file you should have a folder with the following files and folders:-

Folder icon css Containing the file colour.css
Folder icon data Containing the file admindata.txt this is a list of your admins on Discord
Folder icon images Containing images and icons, there is also an extra folder in there called Folder icon extra-icons
ReadMe.html (This file)

Changing the default colours could well mean that the icons will no longer suit, in that case you'll find others in the extra-icons folder, just rename them to the default names.


No coding knowledge is needed to change the look of your viewer, you can change the colour of the text and the background colours by simply cutting and pasting changes to a few lines of code, if you just change ONLY the highlighted parts and leave the main code alone then you should not encounter any problems but don't forget to be sure to back up the files first, just in case.

For editing these files you'll need a text editor, you could use Notepad but there are good reasons not to. We recommend Sublime Text 2 available to download for free from Using this will highlight some of the text in the file such as colours and make things easier for you to edit, but more importantly it will give you line numbers!

Text editor

HTML uses Hex colour codes, these start with a hash followed by by six alphanumeric characters e.g. #e66f1f it can also use RGB (Red Green Blue e.g. rgb(230, 111, 31) these are often used in gradients. You can find a helpful chart here:

colour.php File

Two lines in which you must replace some of the text for the programme to work correctly for you:

Line 28 replace with the location of your json own file, something like: You'll find this in your server settings under Widget, it's on the right and titled JSON API, just copy and paste that into the colour.php file.*Also while you are in your settings be sure to turn on Enable Server Widget

Line 35 replace with the invite link to your own server.

Embedding the viewer on your website

To embed the viewer into your website you will most likely be using an iframe. You'll need to decide the best dimensions to suit your website, lets say for example that you wanted it to be 240Px wide x 900px high.

The correct way to style your iframe is by using CSS, for example:-

.viewer iframe {

<div class="viewer">
    <iframe src="">
    <p>Your browser does not support iframes.</p></iframe>

You can however style the iframe directly within the page:

INLINE <iframe src="" width="240" height="900" frameborder="0"></iframe>

colour.css File


The colour.css file can be found in the css folder, open this with your text editor and you can replace any of the Hex codes with the colours of your choice. The relevant sections are commented to make them easy to find

Line 8 #512936 /* colour of the main outer border*/
line 38 #512936 /* colour of the main inner border currently set to 0 (off) */
Line 198 #512936 /* colour of the spacer line above More Online */
Line 217 #512936 /* View button background */

Line 15 #ffffff /* colour of the text on the page */

Line 41 #3f1724 /* background colour */

Line 105 #0a2a3f /* Join Server button background */

Line 106 #60b1ce /* Join Server button text */
Line 119 #60b1ce /* Join Server hover text */

Line 118 #6c3446 /* Join Server hover background */
Line 228 #6c3446 /* View button hover background */

Line 187 #e66f1f /* playing game text colour */

Line 215 #808080 /* View button border */
Line 218 #808080 /* View button text */
Line 229 #808080 /* View button hover text */


Not commented in the code:-

Line 8 size of main border, border set to double @ 2px

Please Note, there are other borders listed, currently set to off but they are not used with this theme, we do not recommend that you change them as it may break the layout.

Line 10 border radius (0 is squared)

Line 12 font type set to Arial

Line 14 font size recommend leaving this alone! Currently set to automatically resize

Line 8 2px /* size of the main outer border*/

Adding Admins

The admindata.txt file is located in the data folder, simply replace the five names already there with your own admin names, one name per line.


If you have any questions then please make a post on our forum