Custom CSS is the latest trick we're pulling out of the bag, but there's a fair bit to understand before jumping in!

What is CSS?

I suppose I should outline what CSS is! CSS, short for Cascading Style Sheets, is like the magic wand of web design. It's the language used to add style and flair to your website, making it visually appealing and user-friendly. With CSS, you can change colors, fonts, layouts, and more, giving your site its unique look and feel. Think of it as the artist's palette that brings your digital canvas to life!

Why should I use it?

Well, you really don't have to, but for those who want it we wanted to give you the option! So if you wanted to add more than whats currently available, you have all the power to modify everything in terms of the style. Our mission is all about providing the best and the most customization, and what's more customizable than raw code?

 

The Basics

So we do really recommend that folks who plan on using the feature understand some basic fundamentals of CSS. It's a pretty easy language and anyone with basic code knowledge should be able to figure it out quite quickly. If you are completely new to CSS, I want to give you some resources to go and quickly learn it:

• Learn CSS In 5 Minutes - freeCodeCamp
• CSS In 5 Minutes - (Aaron Jack on YouTube)

 

Syntax

This will be updated over time as we add and modify things, but right out of the bat we wanted to make it easy for you to understand and to get started. We've added some id's and classes for specific blocks, though some things may have been overlooked. If you want something to be more specific, please let us know in Discord and we can get on that for you!

Blocks will have the id block and a class "stringified" to your button text.
Example:

button.link-block {
    background: red;
}

Let's break this down.

• button - Defines we're looking for the <button> element
• .link-block - Defines we're looking for the button that has the title "Link Block"
• background - Shows we're looking to change the background color
• red - We're changing the background to red

What this will basically do is any block you have on your profile that has the title "Link Block" will now have a red background, instead of anything else you may have defined.

You can do much more however, here's another example that adds a different color when the button is hovered:

button.link-block{
    background: red;
}
button.link-block:hover {
background: blue;
}

This will now change the button to blue when hovered!

The easiest way to know how to modify a specific thing would be to use the page inspector in your browser and see the defined classes, ID's and the likes. You need a "selector" to be able to tell choose what CSS you're modifying.

For another example, let's modify the display name, specifically, adding a nice background to it using some variants. By default your primary and accent color are marked as variants and can be called when writing your CSS.

Display name background example

First, let's find out how to select it. Inspecting the page on the browser, we can see it's defined with the id display-name, so let's create a rule and define it.

#display-name {
/* We can add our styling in here*/
}

Now with this, let's go ahead and make our button color be the background, define a text color, and we'll add on some padding on the sides, round it, and a shadow:

#display-name {
background: var(--primary);
color: white;
padding: 0 10px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Voila! We now have a custom styled heading all my ourselves. Here's a before and after:

Adding a custom font

Applying a custom font is something that users really wanted, and while we were implementing this CSS update, we thought it'd be valuable to showcase how you can use this to apply it! That way you can fully ensure it's working as intended, and not having to worry about file types and other strange oddities.

For simplistic terms, I'll import a font from Google Fonts, and then get it to be on a specific block.

@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&family=Jersey+10+Charted&display=swap');
button.twitch {
  font-family: "Jersey 10 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}

Now we can this applying an absolute hideous font to my Twitch button.

Sky is the limit

With this kind of power, you can truly create something only you have thought of. The only limits are your imagination, and willingness to learn CSS. 

We've also created a new channel in our Discord server where users can share their CSS code snippets, so if you create something really cool and want to share it with the community you absolutely can!