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

Headers

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:
image

Here is a list of colors you can use.

Fonts

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

image
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">

Rescaling:

<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>
Audio

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

Links

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.
http://flagcounter.com/

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
image

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

15 Likes

@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.

2 Likes

Nice.
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.

1 Like

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>
3 Likes