WelcomeUser Guide
ToSPrivacyCanary
DonateBugsLicense

©2024 Poal.co

1.0K

I use FireFox personally to do this, but other web browsers may work. If you don't like FireFox personally you could just use it short term to help you edit CSS then delete it in the control panel until you need it again at a later date.

Note: You can right click on any part of the website and play around with any elements of the website in CSS for the most part.

CSS Tip #1 - Editing CSS more easily if not faster

  1. "Right click" on the top bar with the Poal logo on it.

  2. Go down to "Inspect Element (Q)" and "left click" on this.

At the bottom it should bring up a dashboard.

If you did it right the text below should be highlighted on the left (left window).

<div id="menu" class="th-navbar pure-g">

In the middle window (second window) you should see this.

.th-navbar { background-color: #4163ac; }

  1. You can click on "#4163ac;" and change the color in real time for the top bar of poal.co

Here's a way to pick colors to as well as other "hex color generators" / "hex color tools" online to as well.

https://www.w3schools.com/colors/colors_picker.asp

I'll do something easy for now and change it to "#0000ff;" or "#ff0000;" in real time.

Click on "4163ac" it then add in "0000ff" or "ff0000" making sure not to remove the "#" or ";" parts. You will have to click again to be able to highlight it all then delete what you need such as "4163ac".

It should be "#" / "000000" / ";" or this "#000000;" - You change the "000000" or in this case you change "4163ac".

If you did it right with "0000ff" it should change to blue. If you did it right with "ff0000" it should change to red.

----- If you edit a CSS file for a sub ----- You can just copy and paste what you want to change. This helps you to more easily find what element you need to edit in the CSS file.

  1. Copy and paste this into your subs stylesheet.

.th-navbar { background-color: #4163ac; }

  1. To change it to blue you'd do this.

.th-navbar { background-color: #0000ff; }

Let me know if this helps or if it just confused you.

I use FireFox personally to do this, but other web browsers may work. If you don't like FireFox personally you could just use it short term to help you edit CSS then delete it in the control panel until you need it again at a later date. Note: You can right click on any part of the website and play around with any elements of the website in CSS for the most part. CSS Tip #1 - Editing CSS more easily if not faster 1. "Right click" on the top bar with the Poal logo on it. 2. Go down to "Inspect Element (Q)" and "left click" on this. At the bottom it should bring up a dashboard. If you did it right the text below should be highlighted on the left (left window). `<div id="menu" class="th-navbar pure-g"> ` In the middle window (second window) you should see this. ` .th-navbar { background-color: #4163ac; }` 3. You can click on "#4163ac;" and change the color in real time for the top bar of poal.co Here's a way to pick colors to as well as other "hex color generators" / "hex color tools" online to as well. https://www.w3schools.com/colors/colors_picker.asp I'll do something easy for now and change it to "#0000ff;" or "#ff0000;" in real time. Click on "4163ac" it then add in "0000ff" or "ff0000" making sure not to remove the "#" or ";" parts. You will have to click again to be able to highlight it all then delete what you need such as "4163ac". It should be "#" / "000000" / ";" or this "#000000;" - You change the "000000" or in this case you change "4163ac". If you did it right with "0000ff" it should change to blue. If you did it right with "ff0000" it should change to red. ----- If you edit a CSS file for a sub ----- You can just copy and paste what you want to change. This helps you to more easily find what element you need to edit in the CSS file. 1. Copy and paste this into your subs stylesheet. `.th-navbar { background-color: #4163ac; }` 2. To change it to blue you'd do this. `.th-navbar { background-color: #0000ff; }` Let me know if this helps or if it just confused you.

(post is archived)

[–] 2 pts

Awesome guide!

Thank you, will be posting from time to time.

[–] 0 pt

Who knows maybe I'll learn something.

It's fairly easy to do once you get the hang of it. Just takes some time to learn though.

As a web developer, I use the developer console quite often. One change I prefer to make is... click the 3 dots in the developer window and in the top right of the dropdown you can change the location/orientation of the developer window. I keep it on the bottom since its easier to scroll up and down (vs left/right scrolling) if something is hidden.