OGS Profile Formatting: Some Useful Tips

There are many players on OGS with cool formatting on their profile pages (me, yebellz, and many more I can’t be bothered to find), but I haven’t seen any guides on how to do it. So, I suppose this is the first one.

Always remember to close your tags!

Part 1: Font

This part will show you how to change the font size, formatting, color, and the font.

Font Size

Font Size

You can change the font size with the following tags:

<p style="font-size:20px;">Your Text Here</p>

16px is about the size of most text. You can change it to whatever pixel size you want. It may take a bit of trial and error. Replace “Your Text Here” with whatever you want to change the font size of. This only works on your profile, however, not on the forums.

Alternatively, you could use big and small tags. These work on the forums as well as your profile. They look like this

<big>Big Text</big>
<small>Small Text</small>

They will look like this:

Big Text
Small Text

If you want to make your text even smaller or bigger, you can nest small or big tags, like this:

<small><small><small>Really Tiny Text</small></small></small>

which will look like this:

Really Tiny Text

Nesting Big tags only works on profile not on the forums. Nesting Small tags works on both.



Headers make your font bigger and bold, like a header. There are 6 sizes of header:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

which get smaller and smaller, like this:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Font Tags (bold, italic, etc)

Font Tags

Here are some font formatting tags you can use:
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<strike>Strikethrough Text</strike>
<mark>Highlighted Text</mark>

Bold Text
Italic Text
Underlined Text
Strikethrough Text
Highlighted Text (doesn’t work on forums)

Font Color

To change the color of a font, use this tag:

<p style="color:green;">This text is green.</p>
<p style="color:skyblue;">This text is sky blue.</p>
<p style="color:crimson;">This text is crimson.</p>
<p style="color:gold;">This text is gold.</p>

This doesn’t work on forums, though, only on profile. Here is a screenshot of what it looks like on my profile:

Here is a list of colors you can use.


You can change the actual font of the text with these tags:

<p style="font-family:'Arial'">Arial: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Comic Sans MS'">Comic Sans MS: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Trebuchet MS'">Trebuchet MS: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Verdana'">Verdana: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Georgia'">Georgia: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Times New Roman'">Times New Roman: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Courier New'">Courier New: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Webdings'">Webdings: The quick brown fox jumps over the lazy dog.</p>
<p style="font-family:'Wingdings'">Wingdings: The quick brown fox jumps over the lazy dog.</p>

Again, this doesn’t work on forums, so here is a screenshot:

Part 2: Embedding

This part will show you how to embed an image, audio, YouTube video, GIF, or other media.

Images and GIFs

Images and GIFs

How to embed images and GIFs: Step 1: Right-click on the image or GIF and click Open image in new tab

Then copy the URL into this tag:

<img src="imageurl">

so if the image is https://example.com/image.png, you would say

<img src="https://example.com/image.png">


<img src="https://example.com/image.png" width=480 height=480>

Rescale the width and height of your image.

Youtube Video

Embedding a YouTube Video

Take the URL of the video you want to embed, and put it into this tag:

<embed src="YouTubeVideoURL"></embed>

You can again change the width and height:

<embed src="YouTubeVideoURL" width=480 height=270></embed>

So if the YouTube video URL was https://www.youtube.com/watch?v=dQw4w9WgXcQ, you would say:

<embed src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" width=480 height=270></embed>

Embedding an Audio File

You need a GMail account to do this. If you don’t have a GMail account, then you can just embed a YouTube video.

Step 1: Download the audio file

Once you’ve done that:
Step 2: go to https://drive.google.com

Step 3: Click New - File Upload
Screen Shot 2020-10-11 at 1.27.47 PM

Upload your audio file

Once it is uploaded, right click on it and click Get link

Change to Anyone with the link, Copy the link, and then press Done.

Screen Shot 2020-10-11 at 1.33.18 PM
Paste the link into this:

<embed src="AudioFileLink" width="320" height="64"></embed>

If my link was https://drive.google.com/file/d/1ysG_DnPLSbKpMIKIfPovwQowVI8fqCO0/view, it would be

<embed src="https://drive.google.com/file/d/1ysG_DnPLSbKpMIKIfPovwQowVI8fqCO0/view" width="320" height="64"></embed>
Other Media

Some other media allow you to embed them. Say you wanted to embed this pandemic simulator I made. You can embed that by saying:

<embed src="YourLinkHere"></embed>

You can also use the same width and height adjustment method as demonstrated in Images and GIFs.

Some things also have an Embed option. HOWEVER, USING IFRAME TAGS DOES NOT WORK. REPLACE WHERE IT SAYS IFRAME WITH EMBED. Otherwise it will not work.

Like this:

<embed src="https://www.desmos.com/calculator/h1raxvhsb9?embed" width="1000px" height="1000px" style="border: 1px solid #ccc" frameborder=0></embed>

Part 3: Miscellaneous Other Tips

This part shows some other things you can do.

Separator lines

These are lines that seperate things.

What you do:

Part 1

Part 2

This makes this:

Part 1

Part 2


How to make links

Use the A tag to make links.

<a href="https://online-go.com/player/580662">My OGS Profile</a>

which ends up making a Link, like this:

My OGS Profile

Hiding Details (like this!)

How to Hide Details:

<details><summary>Summary Text</summary>Hidden Text</details>

This comes out like this:

Summary TextHidden Text
A Visitor Counter

Here is a good visitor counter. You can follow the directions yourself.

Those are most of the things you can do within your profile page. You can do some other things, such as cross-referencing CSS to get the style of the whole page, not just your profile field, but I do not know how to do that. You can ask yebellz about that.

Also, younger Starline, this is the guide you spent hours looking for.

If you need any help with anything listed here, or want to embed an audio but don’t have a Gmail account, you can message me. I’m not a moderator so I can’t change your profiles directly, but I can tell you what to put in it.

If you see a cool profile and want to know how it was done, you can find the plain text on the API.

How to do that

Check the Player ID
Check the URL. The number after player/ is the Player ID. For example, my player ID is 580662.
Copy and paste the player ID into this URL: https://online-go.com/api/v1/players/PlayerID (don’t click that link, it’s a 404)
So for 580662, it would be https://online-go.com/api/v1/players/580662.
Go to the “About” section

You can then copy and paste it into your profile, and then alter it to fit your needs. Don’t steal my profile, please.


@Starline, Your profile description is currently false.

Also it might be time to do some of this so thanks for the guide!

Yeah. I’m not updating it. Too much work. I’ll make it so the image doesn’t show up.

Clarification: I am not 652729’s sister. 652729’s sister is my girlfriend.


Just some of info don’t work on a phone (like right-click)

It’s also possible to inject custom CSS to style and format the entire profile page, rather than just the about box. I use this trick on my profile page.

You just have to insert something like this in your about section:

<link rel="stylesheet" type="text/css" href="URL">

where URL should be replaced with a URL to your stylesheet hosted elsewhere.


It appears I made a mistake in my original post. Thank you to BlueEyedCat for noticing. I can’t edit it because it’s been more than 30 days.

To embed a YouTube video, you would copy the video code, so if the video URL was https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video code would be dQw4w9WgXcQ.

Copy and paste the video code here:

<embed src="https://youtube.com/embed/videocode"></embed>

so if the video code was dQw4w9WgXcQ, it would be:

<embed src="https://youtube.com/embed/dQw4w9WgXcQ"></embed>

I don’t know why but that’s not working for me. I’m using this code as a test:

.avatar-container .Player-username {
    font-size: 2em;
    font-family: "Comic Sans MS", cursive, serif;

.container {
  background: yellow;

Here are the raw and Github links.

And here is my code inside my about section:

<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/psygo/9c41cfe52e89e9c92d8802e34daac6a0/raw/5c4f3a1381c9a5db9910e04180bc06e8b04bd64e/ogs_profile_customization.css">

This is what you mean, right?

1 Like

I’ve even tried to copy yebellz’s whole CSS on Github from the API, why doesn’t it work?

Ok, I don’t get it. Using @yebellz’s link did work with my profile. Why doesn’t it work with my Gist link though? It points to the same content. @yebellz, could you try using my link inside your profile to see if it works?

Does gist block the linking? Maybe the media type is not correctly set for gist? Try opening the browser console or a different way of hosting your CSS file.

1 Like

I’ve also tried it with a regular Github raw file content, it didn’t work out either.

Note that I’m hosting it via GitHub pages which presents the file like a typical web hoster would (setting the MIME content type correctly). Maybe the other ways that you are trying are doing things differently, causing your browser to reject it. Have you checked the browser console as I suggested?


@yebellz, you were right, it was indeed a matter of Gists and raw Github content not being available properly, which is kind of surprising to me. I had to do it like you did, by creating a Github pages website for one of my repos. Now it works.

One thing I still can’t seem to figure out is if the @import CSS directive works in this case. I’m trying to import the Garamond font, but it’s not working, and OGS is diverging to a font called Nunito for some reason.


i tried some of the tips here and loved them!
i was curious if we could change other stuff in the page like the color of win/lose?

1 Like

Almost certainly :slight_smile:

If you change the background colours in the classes


and colours of


for the game history table and for the pie chart change the colours of fill


you should be able to customise those.


hello and thank you for your answer !
I am really new to css, should i write in the css files something like :

strong-losses{ fill:rgba(104, 118, 243, 0.685);}

to change the color of the pie for example? (this doesn’t work)

A quick way would be to add a !important because you’re trying to override something that’s already defined.

.strong-losses { 
  fill:rgba(104, 118, 243, 0.685) !important;

You could also give someone a headache and take @yebellz 's animation examples and change colour to fill, and animate the colours of the pie chart :stuck_out_tongue:


We need a gallery for custom profiles


Ugh, partially very hard to read this, is it just my olden eyes?


Yeah, the contrast could be better. I guess I have to play with the colors a bit. However, I tend to not notice that issue with ranks turned off. I guess this gives me an additional layer of hiding my own rank, even if I click on the show ranks button.

Pull requests are welcome! Community-driven profile page formatting!