How to Custom Your OGS Profile Page: A Step-by-Step Guide
Many people ask me how I custom my profile page. Rikikilord
I usually redirect them to this forum but the instructions aren’t well centralized. So, here is a complete, step-by-step tutorial on how I achieved my custom look.
1. Create a CSS File and Host it on GitHub Pages
The first step is to create a GitHub repository to host your custom CSS file (Cascading Style Sheet), that file will tell how each element of your page should look like.
- Go to github.com, sign in, or create a new account.
- Create a new repository.
- Name the repository using the format:
your_github_username.github.io.
- Note: Your GitHub username should be in all lowercase.**(Image showing the creation of the repository)
- Inside this repository, create a new file and name it
style.css. I’ll give you some tips on what CSS code to include in this file later on.
2. Link Your OGS Profile to the Stylesheet
Now, you need to tell your Online-Go.com (OGS) profile where to find your custom styles.
- Go to your OGS profile page.
- Paste the following line of code into the “About” Section of your profile:
<link rel="stylesheet" type="text/css" href="https://username.github.io/style.css">
- Important: Be patient. It can take some time (10 to 30 minutes) for GitHub Pages to fully deploy and for the styles to appear on your OGS profile.
Customization Tips and Tricks
There is a lot you can do with CSS, but here are a few cool and basic ideas to get you started:
Adding an background image
To make your background span the entire page and use an image from an URL
(To add an custom image, you need to host the image on a website):
.container {
max-width: none !important;
background-image: url(the_link_to_your_image);
background-position: center 0;
}
Styling Titles and Subtitles
You can customize the font, size, and color of the main titles on your page (h1, h2, h3):
h1, h2, h3 {
font-family: 'Arial', sans-serif;
color: #00aaff;
}
Flag Counter
Go here https://flagcounter.com/, it’s explicit
How to Check Other Players’ Customizations
If you want to see how an other player custom his profile, you can get his style.css by inspect the page by pressing F12 on his page
View the Player’s “About” Section Content
- Copy the player’s ID. This is the number at the end of their profile URL (e.g., 416791 in https://online-go.com/player/416791/).
- Paste the player ID into this URL: https://online-go.com/api/v1/players/PLAYER_ID_HERE.
- The resulting page is a raw data file (JSON). Look for the section called
aboutto view the content they pasted into their profile.
If you have any questions, feel free to ask me in OGS chat.
I’d like to thank yebellz, Starline, cixidetroy and keil for the creation of that tutorial
guess you weren’t around for the whole Planet Go thing
