Welcome to our coding workshop. Here you can find information about different codes that you can use in your own code when making club page or a profile layout. All codes have been tested and work on goSupermodel.

You can also use the codes on other platforms but our goal is to show you fun ways to spice up your coding on here. Starting with the basics we will show you how to make a layout using code, and then move on to some more advanced coding. The codes displayed are a few examples of the many options and possibilites that are available using code. We have gathered the most common and asked for ones here for you to learn. If there is anything missing or something else you would like to learn, let us know. All codes are available to see in our showroom HERE. They will also be shown in a code so you can see where to place it.

The buttons below acts as a menu, if you are searching for anything in particular - press the button and you will fast forward to that section. If you want to read everything or are just curious, hover your cursor on the part of the club page and scroll to see all the sections.

We hope you enjoy our workshop and if you have any questions; feel free to reach out to either of us.

We also want to extend a special thank you to all those who has supported us through our journey, on here and in private. Without you none of this would ever be possible.

With love, peron. and Pitzi

Link Directory

Here a small collection with useful resources to ease your coding experience on gSm!

⇮ Tutorial: Basic layout coding 
┕ Author: Moon

⇮ Script: Magazine to layout converter
┕ Author: Pitzi

⇮ Tutorial: Interactive layouts coding
┕ Author: peron.

⇮ Utility: Box position value
┕ Website: pixspy

⇮ Utility: Explore, write and view code
┕ Website: codepen.io

⇮ Utility: Coding resources
┕ Website: w3schools

⇮ Utility: Coding resources
┕ Website: mdn web docs

⇮ Utility: Coding resources
┕ Website: geeksforgeeks

⇮ Utility: Coding resources
┕ Website: html

HTML Tags

The layout codes that we use have a variety of tags in them. For demonstation purposes we will use [ ] instead of < > because otherwise it will mess with this layout here!

All tags require an opening tag [tag], but not all require a closing tag [/tag]!

We use div for our containers and content areas. They require a start and ending tag.

a tags are used for links! So if you want to link your bestie, shop or image, you would use the a tag. This one also requires a closing tag! 

Do not forget to add href="link" in the opening tag! href stands for hyperlink reference and is needed so the browser knows the destiny of the link.

[a href="link"]...[/a]

To add text inside your div, its best to use the p tag. This one also requires a closing tag. I would look like this: 
[div][p]...text...[/p][/div]

Alternatively you can also use the span tag. 

To add images, the tag to go is img. This one does not require a closing tag. What they do need is a link to the image. The img element needs a source: src="link" , so it knows what to display. The source is added in the tag like this:

[img src="link"]

Important! 

On goSupermodel it is important to have the links that have "displaypicture" in the link. You can either add them manually in the profile layout editor itself or by right clicking the image in the preview pop up and copy the link there!
[img src="/displaypicture?imageid=324081&large=1"]

Styling elements

To style your element, you will have to add inline CSS. You do this by adding style="..." in your opening tag. Inside of it, you can set an attribute and its value 

Example:

Lets add

height: 250px and width: 200px

[div style="height:250px;width:200px;"][/div]

Scrollbar

To set a box to scroll instead of just going over your designated box, you first have to add this to the element that contains the text:

overflow-y: scroll

You can make the scrollbar invisible or thin with:
scrollbar-width: none || scrollbar-width: thin

You can also edit the color of the scrollbar. 
scrollbar-color: frontcolor backcolor;

For example:
scrollbar-color: royalblue darkseagreen;

Cursor

To add a custom cursor to a specific area, you add the following attribute inside its style.

cursor: url("gsmimagelink"), auto

You can add different cursors to different areas!