Tutorial How to Customise your profile!

Edit 07/12 : Added some new explanations on alternatives for backgrounds
Hello hello!

I saw many many people wanting to know how to fully customise their profile so I wanted to make this big tutorial that will cover most of them, I hope this will help ໒꒱
꒰ა Tip: When you try to share code the website won’t show it so I will be putting “/” at the start so you can see it but the actual code doesn’t have it

Before starting, here’s what I recommend using, they’re completely optional but they’re will be tools we can use to be more efficient:
A tumblr post showing you how to make your own stamps
A blinkie maker
If you want to make gifs with special effects
Blinkies ressources
Blinkies/Stamps/Buttons ressources (warning for flashing and bright colors)
Blinkies/Stamps/Buttons ressources (warning for flashing and bright colors)
Free version of Photoshop
Huuuuge ressources of cool image
Chrome Extension where you can see the results of your code

And finally, what we’re absolutely gonna need is this

This doc contains templates, examples and explanations on how to customise your profile, this may look terrifying at first but when we analyse the code bit by bit it’s pretty much simple

꒰ა Cool tip: Regularly copy and paste your code into a notepad so you can have a backup in case something happens

1. Base colors

The base colors will be your main aesthetic so choose them according to what you want to express
You can easily choose them by clicking on the little boxes on ‘Edit Profile’ and then ‘Generate color skin’ but doing this will also delete everything in your code, so we’re going to manually change it

[/data-skin-page] {
--skin-palette-backdrop: #111111;
--skin-palette-page: #171717;
--skin-palette-page-text: #f8fafc;
--skin-palette-surface: #262626;
--skin-palette-surface-text: #f8fafc;
--skin-palette-chrome: #7c3aed;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #a78bfa;
--skin-radius-panel: 8px;
background: #111111;
}

This is the code for the colors, in case you don’t know we’re using hex colors, but I believe you can also use rgb. You can easily find the hex code of any color online, have fun with it!

1.a How to have a background image?

Easy!
In the same box right after “background: #hexcode” you’re gonna write

url(“linkofyourimage”) (repeat or no-repeat, you choose);

you should see it!

1.b what if I want a transparent background?

There's two ways,
to do this we're going to play with the opacity of the main colors, for that you'll have to use rgba instead of hex codes
the opacity goes to 1 to 0, with 0 being absolutely nothing and 1 being the solid color
so you'll have to write something like this

--skin-palette-nameofthevariable:rgba(255,255,255,0.5);

1.c you said two ways?

Well technically there IS a second way that I discovered by accident, but that's only if you're lazy and you want to do
look right
look left
crime.

1.d at this point i'm just talking to myself

Instead of rgba we'll use hex code, in your line you're gonna write

--skin-palette-nameofthevariable:##000000
If you can't see the difference there's two #, is this a typo? Nope.
Basically the code will consider this an error and won't show any color, equivalent of having 0 opacity
This is for the lazies who don't want to search for the rgba version of your color

1.e How to have a special cursor?

(Edited to be more detailed, I saw someone having some problems with this and I was scared I wrongly explained it, do tell me if some parts need more details)

I recommend using this
after choosing the one you like, click on ‘get the html/css Code’
Now copy and paste the code and you’re good!

so now the code should look like this!

[/data-skin-page] {
--skin-palette-backdrop: #111111;
--skin-palette-page: #171717;
--skin-palette-page-text: #f8fafc;
--skin-palette-surface: #262626;
--skin-palette-surface-text: #f8fafc;
--skin-palette-chrome: #7c3aed;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #a78bfa;
--skin-radius-panel: 8px;
background: #111111 url(“linkofyourimage”) (repeat or no-repeat, you choose);
cursor: url("linkofthecursor") 0 0, auto !important;
}

2. Hooks

Don’t ask me what is a hook I have no idea, but they’re super useful, again if you take a look in the skins doc and scroll a bit you will see every kind of hooks we can use. They’re useful when you want to custom a specific part of your profile. Your theme song? Your navigation? Your photo? Everything!
I absolutely recommend to make trials and errors so you can develop your own style, your profile won’t take you one day trust me it takes a lot of times until you can finally be satisfied

2.a How do I add image in hooks?

This need to be addressed because holy macaroni did it take me a lot of time and crashouts, big thanks to Abbie for being patient with me and answering my questions this could not happen without you, normally when you want to add an image, you write
“<꒰აimg src=”linkofyourimage/>" but not this time, because you have to make it a background

2.b Alright background I got it, and now?

The exact code will look something like this

[/data-skin-part="nameofthehook"]{
background:url("linkofyourimage") center / contain no-repeat;
content:"";
display: block;
height:heightofyourimagepx;
margin-top:6px;
width:widthofyourimagepx;
}

SOMETIMES, it can also look like this

[/data-skin-part="nameofthehook"]::before{
background:url("linkofyourimage") center / contain no-repeat;
content:"";
display: block;
height:heightofyourimagepx;
margin-top:6px;
width:widthofyourimagepx;
}

you can either write ‘before’ or ‘after’ this will be if you want your image before or after the text, test it!

3. How do I add blinkies/stamps?

Huge thanks to MetalGearVenus for helping me on this one, you’re the goat you think you are
At the very bottom of your code after <꒰ა/style>
Write <꒰ა img src=”linkofyourimage” height=”heightofyourimage” width=”widthofyourimage/” />
and you’re good to go!

There’s so much more you can do that I haven’t said in this post, I reallyyyy recommend testing things out, share tips, ask questions and most importantly be patient and have fun!

꒰ა Tip: In the skin docs, there’s also the code of some examples, be sure to take a look at them if there’s an effect you really like on them

CDDouble Out! ໒꒱