Designing your Bot Page on top.gg

This is a simple tutorial on how to customize your bot page on top.gg . Keep in mind that this is an unofficial tutorial done by a member of the top.gg discord server.

Contributors: Miyuka#0425

Disclaimer

This Domain (discord.re and every subdomain) is safe and is NOT used for malicious purposes, it's just for easier looking up and jokes in general. If you do have concerns about anything such as the domain, the concept in general or anything else, feel free to either Email me here or Direct Message me through https://discord.gg/dbl at Aurel#0001

Now back to the actual topic!

How do i get started?

A bit of knowledge about CSS (Cascading Style Sheets) might be useful and makes the whole process easier :).

Inspect-Element is the tool of choice to be able to test it on-page without editing it. I highly recommend it.

For markdown users: I suggest using Stackedit to make a template of your description in markdown.

Use the <style> tag inside your long description in order to add CSS into your page to design it to your desires. This is a quick example on how you should get started on designing your bot page: Best is to put your <style> tag at the top of your bot description.

Also: Please don't reach out to me asking to spoonfeed you with making your whole bot page. This is just a documentation about how to get started.

NOTE: REMEMBER THE DESCRIPTION GUIDELINES: YOUR BOT CANNOT ONLY CONTAIN CSS, IT HAS TO ALSO CONTAIN INFORMATION ABOUT YOUR BOT! WRITE YOUR RAW DESCRIPTION FIRST AND MAKE SURE IT IS ABOVE THE MINIMUM OF 300 CHARACTERS (WITHOUT SPACES).

alt131 Example CSS (Background-color of description field): alt137

Made by Aurel#0001. If you wish to add things to it, feel free to DM me through Discord Bot List.

Note: For some Designs to work, you might need to force the theme to either light- or dark theme through this setting on your bot page. Best is to force the theme to light in order to easier modify the elements:

alt12

Note: Removing some buttons (such as the Report button) through css may get your bot deleted. Best is to not hide any important elements (refer to Bot Page rules, Rule 6: Block any essential features, this includes buttons and advertisements).

Resources

Other helpful things

Additional things

The goal with the recent CSS-Update on top.gg was to make modifying your css easier (and ofc make the site look better). This is why it was designed to be this layout:

alt33 Related Message on site-news of the top.gg Discord Server. It explains some othe new CSS-Changes in detail and their new additions (.

Due to this change, !important will most likely not be needed anymore.

Examples

Changing your Background-color

Selector:

body

Example:

body {
   background: purple;
}

Result: alt69420

Changing your description-background

Selector:

.entity-content__description

Example:

.entity-content__description {
   background: #7289DA; // blurple because Luca :^)
}

Result:

brr Additionally, changing the Text color Selector(s):

For normal text only (not html formatted or markdown formatted)

.entity-content__description p

Everything Text (including lists, bold, titles etc)

.entity-content__description h1, .entity-content__description h2, 
.entity-content__description h3, .entity-content__description h4, 
.entity-content__description p, 
.entity-content__description li

Example:

.entity-content__description h1, .entity-content__description h2, 
.entity-content__description h3, .entity-content__description h4, 
.entity-content__description p, 
.entity-content__description li {

   color: gold;

}

Result

stinky