How to customize the forum´s design without code (Tutorial)

tutorial
william04gamera

#1

Disclaimer: Using this trick, my intention is not to modify the forum in any bad way. I have just simply changed the colors of stuff. These changes are local to the browser that they are installed in and they can be removed easily. As with everything on the internet, make sure to download this plugin from the official Google Chrome Extension library.

Hello!

It was a while since I made a tutorial on here. Today, I am going to show you a cool trick that I have learned. Using it, you can modify the forum in several ways, I have created a nice “dark mode” for the forum using this trick - and the best part was that you don´t need to code anything to get this to work.

What do I need for this?

This tutorial uses a Google Chrome extension. If you didn´t know it already, Google Chrome is a web browser. It is available on smartphones and tablets, but this tutorial is written for laptops and/or desktop computers (or similar computer devices). But it doesn’t matter if you are using a “PC on a stick” plugged into your TV or a laptop for this as long as you can have Google Chrome on it.

Tutorial:

Okay, so let’s start the tutorial :slight_smile:

Step 1: Download the plugin needed:

For this tutorial, we need a plugin called “Stylebot”, which you can find here:

You might have to close the browser or restart your computer (I didn´t have to do that though). If you need to restart anything, make sure to save your work.

Step 2: Make sure that the plugin is installed:

Now, take a look at the top of Google Chrome, where you enter a website adres(s). You should find all your installed plugins to the right of this bar, like this:


To launch the plugin, simply tap the icon that appeared on the right of the web adres(s) bar or right click on something on the page and select Stylebot > Style element. If you choose to click on the plugin icon beside the web adres(s) bar, tap “Open Stylebot”. If a menu that looks like this appears, we can start “styling” the website:

Step 3: Start “styling”:

A little note: Styled websites are permanent as long as the plugin is installed. If you want to remove the styling of a website, click here, find “Stylebot” and then click “Alternatives”. Here, you can disable styles by clicking on “Styles” and then un-selecting the checkmark before the website that you styled. When I applied a custom style to the Hopscotch forum. the forum´s width decreased and you might see “white bars” appear on the right and the left side of the page itself. This is only local on your computer, so just disable the style and refresh the site to go back to the full-width layout.

Okay. You can choose between lots of different options now. But let´s start by changing the background of the forum.

Open Stylebot and click on the button that looks like a cursor touching a rectangle. Now, you can hover the cursor over the page and select which element you wnat to style. We want to change the background, which means that we would have to change an element called “div.wrap”. To do that, put your cursor a little bit to the right of the “Ask a question” button and then click.

Now, it is as simple as changing the “background color” option to whatever you want. Note: this will make the forum appear smaller as you can´t style the page in full width. Keep that in mind.

Step 4: Style even more:

You did it :fist_right::fist_left:
Now, let´s style a text instead. Tap the “choose element” button again and select a text on the page, like the title of a category by tapping on it. Using the “color” option, you can change the color of the text:


Keep in mind that this often works, like with category names, but sometimes, it changes a lot of texts, maybe more than you wanted to change. You can always revert this. If you change the color of your post texts to pink for example, people will still see it as black unless they also use Stylebot or other web styling software.

Step 5: Enjoy button styling:

This is so simple when you get it, right? Let´s style a button. Use the “select element button” (Screenshot_359) to do this. Tap on a button. To change it, use the “background color” and “color” options.

Step 6: Add borders and change fonts:

You can do so much with this plugin! For example, you could add a border to your profile picture by selecting it as an element and changing the settings found in “Borders”. The thickness options should be the same number in all boxes except the middle one (leave it empty). Here is an example of border styling:
Screenshot_360

You can also change fonts under the “Text” menu and edit many more options. Experiment and test!

I hope that you like this tutorial!

If you have any questions, feel free to ask! Remeber that you only can have one style active per website, so do not disable the style and then start styling the site again unless you want to redo everything. Activate the style again and reload the page to keep your progress. You could learn more about how to enable / disable a style in “Step 3” above.

@OMTL I hope that this is interesting for at least some of you.
@JonnyGamer We talked about this before, so enjoy :slight_smile:


Changing code - CTRL+SHIFT+C
#2

cool!


#3

Oo usefull

Gona download that soon


#4

Thank you! That´s what I hoped - that some people could try this out :slight_smile:


#5

Cool! I hope I’m not bothering you, but can you post what the fisnishes product looks like?


#6

Other good chrome extension: https://chrome.google.com/webstore/detail/owo/jolaggjkdhhgcdhcjjhfkkbllefoggob?hl=en


#7

Very

interesting


XD XD XD

#8

You´re not bothering me, don´t worry. I just showed you how to change the color of elements in this tutorial, so the idea is that you use those knowledges and apply them to different things on the forum. I made a forum dark mode using this extension in about 5 minutes though: it looks like this:


#9

Cool! I wish I could do that, but I feel I’ll wreck my entire computer


#10

That's cool. It looks like invert colors


#11

You most likely won´t do that. The extension simply changes the color of stuff like you would if you right click and then click on “Inspect Element” on Google Chrome


#12

Oh ok…
I’m not the best with technology but I will still try it out!


#13

I’m gonna go back to class


#14

Cool! I can help you, just ask :slight_smile:
Also, you can disable the styling at any time if you want.


#15

Thanks! I definitely ask you for help,


#16

Interesting plugin…I am not on a computer though


#17

Oh my gosh I love that dark mode. I need that


#18

I feel like after seeing this topic William04GamerA will hate anyone who uses inverted colors lol. Also test modification in settings lol


#19

nice!
yeah I just used developer tools to change the forum lol


#20

can you use a background image?
since i’ve seen a discourse forum use one before…