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

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

We want to give a big shout out to Moon for making this tutorial, press HERE to find it.

To find the placement of the textboxes you can either use https://pixspy.com/ or the program Pitzi developed, you can find this HERE.

CURSOR
To add a custom cursor to the layout, or to a textbox, simply add:
cursor: url('/displaypicture?imageid=ID&large=1'),auto;
to your code. Swap out the 'ID' for the cursor image ID.

SCROLLBARS
To remove all scrollbars add:
scrollbar-width: none;
to your textbox code. If you change 'none' to 'normal' or 'thin' it will alter the width of the scrollbar. You can also alter the color of it by adding:
scrollbar-color: #COLOR #COLOR;
to the textbox code, and entering the color hex you wish to use.

BACKGROUND COLOR
To make it easier to find the textbox when inserting it into the code, you can use:
background-color: red;
to make the whole textbox red. You undo this by changing 'red' to 'none. This code can also be used to make colored textboxes, instead of having 'red' you can use a hex colorcode (#NUMBER).

FILTERS
If you want to add filters to the textbox, or a picture, you can use the following:
BLUR: filter: blur(0px); the higher the px the blurrier it gets.
BRIGHTNESS: filter: brightness(0%); 0-100% = dark, 100-200% = light
CONTRAST: filter: contrast(0%); 0-100% = decrease, 100-200% = increase
OPACITY: filter: opacity(0%); 0% = transparent, 100% = normal
SATURATE: filter: saturate(0%); 0-100% = de-saturate, 100-200% = oversaturate

NO HYPERLINK DECORATION
To remove the underlining of text when adding a hyperlink, add:
text-decoration: none;
to your text box. This has to be entered into a < a style > box. The full code would be < a style = " text-decoration: none; without all the spaces (keep the space between a and style).

BORDERS
If you want a border around your box, add:
border-style: solid;
to the textbox code. There are multiple options for the border style, replace 'solid' with 'dotted' or 'dashed' for other effects. You can also change the color of the border with:
border-color:red;
(or other colors), and the width by adding:
border-width: Xpx;
(x = thickness).
If you want a rounded border, add:
<border-radius: Xpx;
(x = roundness).

Z-INDEX
To stack a picture (or text) on top of an already placed picture, text, element you can add z-index. The higher value of the index, the higher up in the layours the element would be. To use this, add:
z-index: 1;
to the object code for the object that you want on top. If you want it below, change the '1' to '-1'. To stack objects above the z-index: 1; box, add a higher number- for example: 
z-index: 2;

TEXT FILTERS
There are sooo many options for text filters, shadows and shading so this will just be a brief introduction to the code. The base for text shadows is:
text-shadow: Xpx Ypx;
where X defines the horizontal shadow and Y defines the vertical shadow. To make the shadow go the other way, use negative numbers. If you add another Xpx like so:
text-shadow: Xpx Ypx Xpx;
the shadow will be blurred. The higher the number, the more blurry it gets. To change the color of the shadow add the #hex code or write the color like this:
text-shadow: Xpx Ypx black;
or text-shadow: Xpx Ypx red;
If you want more than one color for the shadow, it will look like this:
text-shadow: Xpx Ypx Xpx #FF0000, Xpx Ypx Xpx #0000FF;
You can add more shadow colors by adding the px px px color sequence to the code.

To add a border to your text, add:
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
You can change the color with text or hex code to your liking.

Notice anything different about the club page? It has no background  

This works by using the color hex code for transparency and placing it in the background color feature on the profile editor.

HOW TO USE IT
<Open the profile editor and look at the editing menu, on the second row all the way to the right there is a blue document icon. Click on this to open the background color wheel. Next to the #, add:
ffffff00
The background will now look white but if you press save page and exit the profile editor you will see that the profile has no background.  

The hack can be used by itself and then you can insert pictures or text like you would normally, or if you want to use textbox codes make sure to add a base, like the one you can find in Moon's forum, to have something for the textboxes to be placed on.

In order for a layout to be interactive you have to have at least two layout pages. Basically, it works by having the layout be on a giant horizontal scrollbar. So for each page you are wanting, you need to design a page. These pages need to be the same measurement, this is important. They also need to include a placement for the switch, where you click to change page. You can include this switch in the layout or add it later by code - swipe to learn more about buttons.

We have compiled all the codes you need to make an interactive layout in this document, since it doesn't really work to copy paste it in here directly. You can find this HERE.

To start, add the base code to a document. This is the start of your code. Next you need to make the page base, do one for each page you want to display. One page = one designed layout = one swipe. Change the name of the box, this is important for the switches later. The pages can't have the same name. Add your background image, cursor image if wanted, and add the px measurements of the page.

To make a switch, find the measurements of where you want it and add it to the code. Add the link to where the code is gonna be used, if it's for your profile - add your profile id, if it's for a club - add the club id. Next add the name of the page you want the switch to take you to, this is where the different names come into play.

When you are playing around with switches you might notice it's not as easy as looking up the measurements on pixspy (if you are gonna add more than one). This is because the code uses relative placements, meaning that it's relative to the other objects on the page. So for each added object, the placement shifts. 

To manually edit the placement, open the profile editor and press the < > button. Add the code you have in your document (the top part + the base). Add the code for the switches after this.Add the same left measurement of the first switch to the second switch, save and see where on the layout the second switch ended up. Edit it by opening the < > button again, and changing the left measurement. By adding a higher number, it will go right, by adding a lower number, it will go left. If you are on 0px and still need it more to the left, use negative digits by adding - in front of the number, for example -10px. I recommend you using background-color: COLOR; in the switch code for this part, to see where the box is placed.

After you have made the first page and all the switches that go on it, you are good to go on continuing to make pages. Make as many as you want! In the document there is an example code showing how to stack the code to make more pages/switches, I recommend you to look at this if needed.

To learn more about coding and writing code:

https://codepen.io/

https://www.w3schools.com/

https://www.geeksforgeeks.org/

https://html.com/