Tutorial 𝚌𝚛𝚊𝚜𝚑 𝚌𝚘𝚞𝚛𝚜𝚎 💥 — a guide to using code

[Uxie]

crash course

hi, it's me again! i'm back! let's talk asap...
would you do me a favour and read this ( . .)

welcome to crash course!

here, i'll just be posting quick and quirky mini-tutorials on using and customising code! i know there's a learning curve to using code for the first time because of how much text dump it looks like, and as a coder..... i just don't wanna see stuff break all the time.

therefore, here we are!

a huge disclaimer that i'm self-taught and by no means an expert in css — if you're here to learn proper things, i cannot guarantee any of my solutions or explanations are correct, let alone efficient. promise i'm trying my bestest, but i'm just not the cleverest! i'll link some other resources, but do note links are highlighted like

this

so that they're a little easier on the eyes.

feel free to drop any questions, disagreements, and whatnots in this thread too ☆ and ofc, leave a react if you appreciate my stuff. means a lot! mwah

 

[Uxie]

crash course

in this episode, we cover:

the very first step

before we do anything, please, please, please,
turn on bbcode editor!!!!

what's that? it's that little button at the top of your post toolbar:

you'll know you're in bbcode editor mode when it's the only thing highlighted on your toolbar, and everything else is greyed out. i cannot stress the importance of bbcode editor enough, because 60% of the time your code will break if you try posting it in not-bbcode editor (which is also known as RTE. don't ask me what it stands for, i only have guesses. real text editor? readable text editor? idk)

the basic explanation for this is just that your editor will try to fix up a code for you before posting, regardless of what mode you're in. bbcode editor doesn't do a completely fine job of this, but RTE goes absolutely insane with it sometimes if you accidentally deleted a little bit of the freebie's code while you're editing it. to be safe, always edit most of the code in bbcode editor, and post it while you're in bbcode editor mode.

especially if you're using freebies a ton, i'd advise you to just key in some of the formatting on your toolbar manually to avoid having to switch back and forth. you can see below for a list of them, but if you happen to forget you can always just use the function while in RTE, then swap to bbcode editor and see what it is! it's like you know coding already (o*･ω･)ﾉ

click!

basic formatting

[b]this is to bold text[/b] [i]this is for italics[/i] [u]this is for underline[/u] [s]this is for a strikethrough[/s] [size=3]this is for adjusting font sizes[/size] [color=#hex]this is for changing text colours[/color] [font=Font Name]this is for changing fonts[/font] [left][center][right][justify]this is for text alignment[/justify][/right][/center][/left] [url='xx']this is to embed a link in your text[/url] [ispoiler]this is for an inline spoiler[/ispoiler]

little pro-tip: they got rid of the save button a few site versions ago, but you can actually force-save content on your editor, regardless of the mode you're in. just refresh your page, and the editor will lock in whatever content you have in there — safer than closing it and hoping auto-save had your back.

 

[Uxie]

crash course

in this episode, we cover:

tags and nesting

when i say tags, i'm referring to the literally all bbcode on this site, even the non-advanced ones that are covered in the bbcode guide. ngl, this is just going to be a slightly expanded version of the

first post on the bbcode guide

. it's just so important, and will help you most when attempting to debug a broken freebie.

on this site, tags are little functions called out with their names in little square brackets '[ ]' that the site will read and turn into something cool in your final post. the most important thing to know is that every function needs to have an opening and closing tag for it to work properly:

[TAG]your content[/TAG]

your closing tag will always just be the opening tag with a '/' before it. this is a leading reason why codes break, because sometimes people accidentally delete a closing tag or a square bracket here or there. so, if a freebie looks nothing like what it's supposed to be, you probably accidentally deleted something. save your content, ctrl+z, and then be very careful when you do it the second time around. and of course, if you're adding your own bits of formatting into freebie templates, like bolding text or changing colours, remember to close your tags too, or else you'll get situations like:

[/div][font=Roboto][/font][/div][font=Roboto][/font][/div]

it's the result of the editor desperately trying to (and failing) to figure out where to close off the tag for you. even if these don't always break the code — which usually has more to do with missing a closing tag or closing it in the wrong order, see nesting below — it messes up your code a lot and makes it more difficult to read.

you might have noticed, too, that some tags need additional inputs to work, i.e. putting in a font name or a font size:

[font=FONT NAME]your content, which will come out as FONT NAME[/font] [size=3]your content, which will come out as SIZE 3[/size] [url='xx']your content, which come out embedding the link you put in the tag[/url]

these come after an '=' sign and will not need to be included in your closing tag. huzzah!

you'll notice some coders using inverted commas when they add these inputs, like i did for the link in the example. this isn't necessary, but since these tags are technically HTML (i think?) i've heard it's in good practice to do so. i only do it for links because i'm silly. either way, this is important for you to know since if a freebie template you're editing makes use of inverted commas in their tags, these inverted commas also need to be closed. like, [url='xx'][/url] will work but [url='xx][/url] won't. another thing to look out for when editing!

JUST REMEMBER TO CLOSE THINGS

adding a small section on nesting below, which is more like additional reading than anything but explains a bit on the organisation of tags in complex codes. in my heart of hearts, i'd have loved to include an exercise in closing tags, but i don't have the brain to come up with something good enough quite yet 人(_ _*)

click!

nesting

nesting essentially refers to using several tags on a single element! this is a proper explanation of it, if you want, but it just means i've got something like this:

[center][font=FONT NAME][size=3]content[/size][/font][/center]

the most important thing to remember for nesting is that you need to close tags in the order they are opened. imagine like a russian doll — they all fit together because they're stacked from smallest to largest, and the same idea applies for nesting. in the above example, you'd imagine [size=3][/size] as the smallest russian doll, and [center][/center] as the largest russian doll.

nesting is most important to understand when you're mixing tags, because there's a high tendency for such tags to break if you don't close them in the correct order. the editor will get ANGRY, and start throwing tags wherever they want again!

in complex codes, on the other hand, messing up a nesting order might not affect your code as much because most complex codes will mostly use only one tag, be it divs, borders, or whatever. since all the tags are the same, there basically isn't an order. HOWEVER, because it can be really easy to get confused, it's really good practice to organise your codes with the concept of nesting in mind.

for me, personally, i add three spaces for every level, albeit somewhat arbitrarily which is why my codes do NOT look all that proper. but you'll see stuff like this a lot in mine:

[div=height:50px; width:50px; background:red; padding:10px; box-sizing:border-box;] [div=height:auto; width:auto; background:black;] [div=height:auto; width:auto; color: white;]blah blah[/div] [/div] [/div]

i know fluticasone does it more properly in their codes (they have one div per level, iirc, while i might lump several together) but it helps me keep track of whether all my divs have been closed properly — i think it also visualizes the russian doll analogy to some extent! if you're trying to troubleshoot my freebies, you can try figuring out whether you've deleted a div by counting the number of opening div tags on a level and seeing if it matches up with the number of closing div tags. i hope that makes sense!

edit: i forgot about this! line breaks in code like this will affect how it's displayed which is why you either add line-height:0; to your first div or wrap the whole thing in a [nobr][/nobr] tag. both will get rid of line breaks within your code, but you'll need to add another property or tag respectively to your content too so that the linebreaks are respected where you want it to be.

 

[Uxie]

crash course

in this episode, we cover:

properties + variables

finally... we're getting to the bits that more people will benefit from!

some background on the complex bbcoding on RPN is that the reason why they get to be so complicated is thanks to CSS injection. CSS is a language used in coding to style HTML elements, and they use things called properties to make things pretty. you'll notice most complex codes use the div tag, which i feel is best explained like a blank canvas, which you then add stuff onto with CSS properties? idk if that makes sense.

either way, in the following example:

[div= height: 150px; width: 150px; background: red; border: 2px solid black; font-size: 15px; color: #fefefe;] [/div]

everything after [div= is a property, and you'll see they follow the format of property-name: value; each property is closed off with a semi-colon ';', which "closes" off the property.

this is important to know when you make use of variables while customising complex code. you'll probably have stuff like these a lot at the start of many codes:

--bg: #hex; --color-1: #hex; --bg-image: URL('xx');

these are variables! using variables is basically making a little library for your code to refer back to instead of repeating the values manually, and allows you to do stuff like having a consistent colour palette or repeating certain pictures. it also makes customisation a lot easier, since these are usually included at the very top of the code, within the first (and biggest) container div, allowing you (the user) to not have to dig through all the properties to put stuff in yourself.

variables follow a very basic format of two hyphens, the variable name without spaces, and the variable's values:

--variable-name: value;

similar to properties, each variable needs to be closed off with a semi-colon to be read properly, which is important not to miss out when you're editing variables in your codes! you can click below for a bit of additional things on customising some common variables, and making new variables + referencing them.

click!

customising colours

colours in HTML can be input in four forms: a hexcode, rgb values, hsl values, or a name. i think the hexcode is most commonly used, and i'll leave it to

this site

to explain what they are and how they're calculated. tldr; all colours have a hexcode tied to them, and you can refer to a colour by #hexcode! e.g. #ff32e7 is a brilliant shade of neon pink:

rgb and hsl stand for red, green, blue, and hue, saturation, lightness, respectively, and same for hexcodes, each colour has specific rgb/hsl values tied to them. you might see them in codes, however, because of fourth channel it can support — the alpha channel, or the opacity/transparency, which is why coders may write rgba/hsla instead (where the a stands for alpha). this allows you to add transparency to your colours, where 0.0 is fully transparent and 1.0 is fully opaque! e.g. rgb(255, 50, 231) is the same shade of neon pink, and rgb(255, 50, 231, 0.5) is the pink at half transparency.

CSS itself has a library of colours it can recognise by name, which you can refer to

here

. it's way easier to just use either of the above forms, though! you get more colours to choose from.

colours in codes could be used for a ton of things, including background colours, border colours, text colours, etc.

click!

customising fonts

customising fonts can be a little trickier, because it requires two steps: calling out the font, and then editing the variable.

RPN is able to access most google fonts, but for it to be used within codes via the property font-family, it first needs to be "called out" by making use of the actual font bbcode tag. you'll see stuff like this at the top of codes, too:

[comment][font=Font Name]font call[/font][/comment] [div= --font: 'Font Name', font-family; ][/div]

therefore, to replace fonts, you need to edit both for it to work properly. take note, also of the capitalisation of the font to make sure it matches the google font's name accurately — i can't remember if it actually affects it, but i feel like it does. better safe than sorry!

the second part of the font variable will usually include the font family as well, which refers to the

generic CSS font families

. it's not actually necessary to include, but it provides a back-up for the code to fall back on in case the font doesn't work/load for whatever reason. if you're able to figure out what font-family the font you want to use is, you can also change this part if you like. if not, leaving it won't affect the display of your font in any way.

it's worth noting that using the actual bbcode font tag before your text can also override the variable, if it's something that's easier for you to work with, just like i'm about to randomly throw pixels here. that said, please be careful with closing your tags and doing so at the right places. you can refer to

TAGS AND NESTING

for this.

click!

customising images

easiest of them all! images require just inputting a URL at the variable, just make sure your URL actually directs to the image itself, and not the site the image is hosted on. for pinterest, for example:

--link-one: URL('https://www.pinterest.com/pin/702350504415986686/'); --link-two: URL('https://i.pinimg.com/564x/79/1b/3a/791b3a33b2ce3320ca1817310ad9ae58.jpg');

link one will not work, while link two will. test this out by opening it in a new tab: if the only thing on the tab is your image, it's correct!

an additional layer of customisation can usually be found in the cropping of the image, with the property background-position. it accepts inputs in the form of background-position: value% value%; , where the percentages refer to the positioning in terms of x and y respectively, with 0% as the minimum and 100% as the maximum value. for example, background-position: 0% 100%; will yield an image cropped to the bottom left, while background-position:100% 100%; will yield an image cropped to the bottom right. this will only really work depending on a different property, background-size, and the size of your image — if your image does not need to be cropped at all because it fits the element perfectly, these values won't affect anything!

for my codes specifically, i usually leave instructions to adjust the cropping by the relevant div within the code, like so:

[div= --bg-image: URL('xx'); height:50px; width:50px; background: var(--bg-image); background-size:cover; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; ][/div]

you can usually find these by searching within the page with ctrl+f or whatever browser equivalent with the variable name. on hindsight, this probably isn't the easiest way for this to be accessed, and i should probably change it to a variable. maybe i will.

ANYWAYS, since some codes do not declare a value on this property, however, you can also add these in when editing your variable to save yourself some time cropping it! thanks to the wonders of shorthand properties, this just means adding the percentages on at the end of your variable, like so:

[div= --bg-image: URL('xx') 50% 50%; ][/div]

if background-position is declared in the div itself, however, this will get overridden, unfortunately. so it's always worthwhile to check!

click!

making & referencing variables

making variables is as easy as following the format before, and adding them on below the other variables! do note naming conventions for variables, though: they're case-sensitive, no spaces so use _underscores_ or -hyphens- instead, two variables can't share the same name! in the case of the latter, it'll result in your code only recognising the most recent variable (the one that's in the nearest line from the bottom??), so be careful while choosing names.

**for coders, it should be noted that variables can only be referenced within the specific div it's in, or any nested divs. this is why it's best to put them within the container that your entire code sits within!

referencing variables is also pretty easy, and they can be called out to replace an input in the format 'var(--variable-name)' !! like so:

[div= --bg-color: #49ff71; height:50px; width:50px; /*i'm calling out the variable!!!*/ background: var(--bg-color); ][/div]

make sure you're writing the variable names exactly, given the naming conventions i mentioned above, or else it won't work! you could use this, for example, in place of retyping the colour tag in an in-character post by instead adding a variable and using a div to reference it:

[div= --dialogue: #49ff71; height:50px; width:180px; border:1px solid black; color: #fefefe;]here's some text, and here's [div=display:inline; color: var(--dialogue);]coloured text[/div] [/div]

here's some text, and here's

coloured text

or for my codes, at least, i sometimes ask users to add in their own variables if they want to add in new gallery or relationship or role images. hopefully this helps break it down a little!

 

[logastellus]

Girl this is amazing and super helpful for beginner coders

 

[Uxie]

crash course

in this episode, we cover:

music players

custom music players are actually really easy to customise, because they're made using the actual embed media tag which is [media=media type][/media]. this one will just cover what kind of links work, because i've had people confused before about why their links weren't working.

some background, the only two types of music players that are available are soundcloud and google drive. no youtube, because it violates youtube TOS to cover up the video or something, and you could use spotify but it only plays a snippet, so, like, why would you do that over a full song on soundcloud or google drive? the important code for music players will look like this:

[media=soundcloud]link[/media] [media=googledrive]file code[/media]

for soundcloud, you need just the link to the song! HOWEVER, be careful dropping in the direct link you get when you click the "share" or "copy link" button under a song:

because it'll actually give you a link that's still got the UTM parameters attached, which will result in the link NOT working. you'll need to remove the following:
?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing
from your link first. alternatively, click on the song first to open it to its own page, then copy the link directly from your address bar! slap that between your media tags, and your soundcloud music player should be working! just note that some songs may not be available in other regions, which means some users may not be able to listen to your songs. this is hard to check, and difficult to avoid anyways.

for google drive, you'll need to first upload the song to a google drive and then update the sharing permissions to 'everyone can view'. your permissions should look like this:

afterwards, copy the link, and then take out the file code. this is the string of numbers and letters between /d/ and /view?usp=sharing. put that between your media tags, and yay! it should be working!!

click!

for my codes

i usually include both of soundcloud and google drive music players in my codes to give you some ☆ choice ☆. this adds an additional step to using music players in my codes, which is hiding the music player you're not using. i add instructions, usually, but i'll explain it anyways in case it's not clear!

here's what my music player code usually looks like:

[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment] [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;] [media=soundcloud]soundcloud link[/media] [/div] [comment]----google drive (replace the google file code within media tag with your own)----[/comment] [div=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;] [media=googledrive]file code[/media] [/div]

the relevant part to look at here is /*remove this to use me, and add it to the other*/ display:none;. this particular string of code will hide the media player it's on, so make sure it's on the one you DON'T want to use and NOT ON the one you're using. and take care not to accidentally delete the closing square bracket!!

click!

music player code snippet

and for my coders, have a snippet! i copy and paste this one snippet for all of my music players with different play button containers — i'm sharing it with you too because i'm DONE gatekeeping (there's no logic for me to gatekeep this at all)

[div=/*this is the main play button container*/ height:auto; width:fit-content; width:-moz-fit-content; position:relative;][div= /*use this div to style your play button!*/ height:auto; width:auto; color: #fefefe; font-size:10px; line-height:100%; position:relative; pointer-events:none;][fa]fas fa-music[/fa][/div]
   [div=/*this is the start of the media player -- no need to edit ANY of this ever*/ height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
      [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
      [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
[media=soundcloud]https://soundcloud.com/xx_cold_seragaki_xx-43/cure-alien-stage[/media]
      [/div]

      [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
      [div=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
[media=googledrive]1YLzmWVXtz1dH5xuIAwE-dOwyc5Lf1H80[/MEDIA]
      [/div]
   [/div][/div]
[/div]

all that just gives you this:

the three important properties for this are position:relative/absolute;, z-index:1/2/3;, and pointer-events:auto/none;! a very simplified explanation of this is that the position property allows me to stack the play button and media players on top of each other, z-index allows me to arrange them in the correct order so that it's play button over media players, and pointer-events:none; ensures that your play button can't be clicked while your media players can.

there's an additional opacity:0.01% there that i've had to add in for music players where i can't add a background to the play button, which makes the media players BARELY opaque. which actually means the stacking isn't super necessary but. whatever! you don't have to touch anything on the media players themselves — overflow:hidden; hides most of their UI and because of how small the play button is,, they'll always be on top of each other!!! yay (︶▽︶)

also, always remember to test both to make sure it works!

iiii don't know if that all makes sense! but hopefully it does....

no need to credit me or anything for this, but hope this helps someone add a little music player into their code if they need it!! that said, do be careful adding this into templates that aren't yours — this isn't really gonna look that pretty unless you know enough code to fit it into good places. i wouldn't really consider this frankensteining since it's just a snippet, but some others might!

for those who just want something to add to the ends of placeholder scrolls or whatever,

Spoiler: here u go!

[div=
/*colour of the play button + song name. leave this blank if you're adding this to a scroll w. no background, so it works on light and dark mode!*/
--color-1: #fefefe;

height:auto; width:auto; display:flex; flex-flow:row nowrap; align-items:center; line-height:0;]
   [comment]----play button----[/comment]
   [div=height:auto; width:fit-content; width:-moz-fit-content; position:relative;][div= /*use this div to style your play button!*/ height:auto; width:auto; font-size:10px; line-height:100%; position:relative; pointer-events:none; color: var(--color-1);][fa]fas fa-play[/fa][/div]
      [comment]----media players----[/comment]
      [div=/*this is the start of the media player -- no need to edit ANY of this ever*/ height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
         [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
         [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
[media=soundcloud]https://soundcloud.com/xx_cold_seragaki_xx-43/cure-alien-stage[/media]
         [/div]

         [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
         [div=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
[media=googledrive]1YLzmWVXtz1dH5xuIAwE-dOwyc5Lf1H80[/MEDIA]
         [/div]
      [/div][/div]
   [/div]
   [comment]----play button end----[/comment]

   [comment]----song name----[/comment]
   [div=height:auto; flex:1; color: var(--color-1); margin-left:15px; font-size:12px;][font=Montserrat]SONG NAME[/font][/div]

[/div]

SONG NAME

this will probably be my last post here for a bit, because i can't think of anything else related to customising that i haven't covered. might return with some small snippets for beginner coders to pick up, but i'm not sure yet since i'm not great at explaining css well! ﾍ(･_| we shall see! if you have any questions about stuff or other things you'd like a crash course on, please feel free to leave them in the thread ☆

 

[AnimeGenork]

Hiii Uxie! First of all, you're a goddess, as per usual, this has all been excellent to read! Though I still do some coding, perhaps your teachings will help me attempt some more complicated stuff someday! (Though frankly I'm too smooth brain sometimes for some things. Which brings me to...)

I have a couple questions about the second music player snippet! I wanted to test it out, but I ran into a couple issues. The first most obvious one being that the "song name" aspect isn't lined up with the play button as it is in your post, and I can't tell if this is smooth brain moment or if I missed something (could be both tbh).

The other part was that no matter what I did, the play button didn't work? Which honestly maybe is me missing it with my mouse, I sometimes miss the button in general, but I'm not sure if it is? The first one worked just fine, so I'm unsure what I did to this one

Thank you in advance, and thank you again for sharing all your expertise and help!

Here's a screenshot of what I'm talking about with the song name part:

Edit: A fix has been provided, praise be to Uxie!

 

[Uxie]

Hiii Uxie! First of all, you're a goddess, as per usual, this has all been excellent to read! Though I still do some coding, perhaps your teachings will help me attempt some more complicated stuff someday! (Though frankly I'm too smooth brain sometimes for some things. Which brings me to...)

I have a couple questions about the second music player snippet! I wanted to test it out, but I ran into a couple issues. The first most obvious one being that the "song name" aspect isn't lined up with the play button as it is in your post, and I can't tell if this is smooth brain moment or if I missed something (could be both tbh).

The other part was that no matter what I did, the play button didn't work? Which honestly maybe is me missing it with my mouse, I sometimes miss the button in general, but I'm not sure if it is? The first one worked just fine, so I'm unsure what I did to this one

Thank you in advance, and thank you again for sharing all your expertise and help!

Here's a screenshot of what I'm talking about with the song name part:

View attachment 1161360

hey! that was My Bad
the only reason why it isn't aligned is due to the additional line breaks i added to organise the code.

adding line-height:0; to the first div or wrapping the whole thing in will fix that!! i've added the former to my original post ( ^ω^ )

 

[AnimeGenork]

hey! that was My Bad
the only reason why it isn't aligned is due to the additional line breaks i added to organise the code.

adding line-height:0; to the first div or wrapping the whole thing in will fix that!! i've added the former to my original post ( ^ω^ )

Thank you so much!!! Once again you are an absolute godsend, I can't wait to Look Cool everywhere *add a bunch of other emojis here*

 

[Uxie]

The other part was that no matter what I did, the play button didn't work? Which honestly maybe is me missing it with my mouse, I sometimes miss the button in general, but I'm not sure if it is? The first one worked just fine, so I'm unsure what I did to this one

I COMPLETELY MISSED OUT THIS PART?? do you mean the play button isn't working on the second code snippet?

 

[AnimeGenork]

I COMPLETELY MISSED OUT THIS PART?? do you mean the play button isn't working on the second code snippet?

Yes! No matter how much I tried, it would not play le song

Edit: IT'S BEEN FIXED Y'ALL DON'T WORRY

 

[Uxie]

crash course

in this episode, we cover:

faq: hidden scrolls

wow! are we finally doing code tutorials? idk, maybe! whatever, hi again!!! ヾ(*'▽'*)

this might be the most commonly asked question in the bbcode forum! not that people seem to search up past threads instead of making a new one anyway, but here's a post for anyone to link to if it ever comes up again. i present: a (sort-of) masterlist of hidden scroll codes!!!!

i do not claim credit for any of these codes! i'll be doing my best to link the original posts of each code snippet (at least, the earliest i can remember of seeing it), most of which will go into better detail about why the codes works as it does. also, some caveats for each version! hah! pick and choose as it suits your needs, though i will recommend the scrollbar-width method as of now! it's the simplest (・ω・)

the only thing to note for hidden scrolls is padding. to get vertical padding that also acts as a border for the scroll content, you'll need two divs, where the first has overflow:hidden; and your vertical padding, while the second has your horizontal padding. why this is so.... i can sort of guess for some but not for others, so.... i don't know! anyways, here's a side-by-side of what the difference looks like with the scrollbar-width method:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

one div

two divs

i'll add little comments on where to put your padding, if you want to, for each of the methods too! so use whatever works best for you! to note, also, the padding values are written in shorthand, so the first px value refers to vertical padding while the second refers to horizontal padding. you can read more about padding shorthand

here

!

click!

v1: scrollbar-width

this method comes from

cloudyskyloftymoon

, although this way of doing hidden scrolls was just not supported up until recently! it is very nice to have though, because of how simple it is! very basic example:

[div=height:180px; width:180px; box-sizing:border-box; border:2px solid black; overflow-y:scroll; overflow-x:hidden; /*this is the impt property!*/ scrollbar-width:none;]woohoo! let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div]

woohoo!
let's scroll this box!
yeah!!!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

do note this code unfortunately does not work on safari, and the scrollbar will still be visible for users on that browser. heh.

here's a two-div version for you if you want to add in padding (a space between the content and the border) too!

[div=height:180px; width:180px; margin-left:15px; display:inline-block; /*edit your vertical padding value here*/ padding:15px 0; box-sizing:border-box; overflow:hidden; border:2px solid black;][div=height:100%; width:100%; /*edit your horizontal padding value here*/ padding:0px 15px; box-sizing:border-box; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none;]woohoo! let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div]

click!

v2: padding-right

this method comes from

alteras & fluticasone

, and generally just involves hiding the scrollbar with padding, namely the padding-right property. they explain it perfectly well in their post, so if you're interested to learn about why this works, i'd direct you to their post instead! the only caveat i can add for this is that it will result in a wider space on the right side of your code, which you can sort of work around by adjusting your own padding values if you happen to make a box that doesn't have content flush around the border.

[div=height:180px; width:180px; box-sizing:border-box; border:2px solid black; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; overflow-x:hidden; /*shoving the scrollbar to the right*/ padding-right:200px;]woohoo! let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div][/div]

woohoo!
let's scroll this box!
yeah!!!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

note you should specify box-sizing:content-box; for the overflow-y:scroll; div for it to show up correctly on preview at times — the preview on rpn automatically applies box-sizing:border-box; when certain codes are used (like tabs, or accordions, i think?), which can mess up this code. you can read up a little on the box-sizing property and why it matters

here

.

adding padding is as simple as adding another div, like so:

[div=height:180px; width:180px; /*add your vertical padding here*/ padding:15px 0; box-sizing:border-box; border:2px solid black; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; overflow-x:hidden; /*shoving the scrollbar to the right*/ padding-right:200px;][div=/*an extra box if you want horizontal padding! if not, just 2 divs are fine!*/ height:auto; width:100%; /*add your horizontal padding here*/ padding:0 15px; box-sizing:border-box;]woohoo! let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div][/div][/div]

click!

v3: width finicking

this method comes from

valen t.

, a long-retired coder who was really good at mobile-friendly things! this is also primarily the one i use in my codes! it's the same principle as alteras and fluticasone's, but achieving scrollbar hiding off to the right with width instead of padding.

i preferred this one to theirs simply because the amount of extra space on the right that results from this method is a little lesser than theirs, and for the me who makes teeny codes....... it was easier to fix visually. i've on occasion also added a display:flex; flex-direction:column; to the first div, but that was mostly due to some issues with it not being able to scroll on mobile which was found by one of my old friends (i miss you, hannah). so if you ever run into a similar issue with this, you can try that fix, and if it works, you have hannah to thank!

also, since this is three divs, i can indicate where you can put in padding all in one code! yay!

[div=height:180px; width:180px; /*add in your vertical padding here*/ padding:15px 0; box-sizing:border-box; border:2px solid black; overflow:hidden;][div=height:100%; /*making the width huge so the scrollbar is hidden*/ width:200%; overflow-y:scroll; overflow-x:hidden;][div=height:auto; /*putting it back to our original width..!*/ width:50%; /*add your horizontal padding here*/ padding:0 15px; box-sizing:border-box;] let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div][/div][/div]

woohoo!
let's scroll this box!
yeah!!!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

click!

v4: width finicking (ancient)

i'm genuinely not sure who to credit this to, because this is SO OLD. however, i will link you to

fyuri's tutorial

. same principle as the above two methods, only you're using fixed value widths instead. once more, she explains it perfectly well in her post! THAT SAID, the version in her post isn't actually mobile-friendly. i add a third div in this one, which allows it to be mobile-friendly!

the lovely benefit of this code is that there is no space, unlike the above two methods. so lovely, so fun! HOWEVER, it'll only work if you use a stated value for the width. that means no percentages in any of your divs!!! back in the day,, i've tried using calc(100% + 17px) in the second div and calc(100% - 17px) in the third div in lieu of the actual values themselves, but this results in a little space on the right too, similar to scroll methods v2 and v3.

if you're trying to make mobile-friendly codes, this is really only gonna be for certain cases, since mobile-friendly codes will rely on a lot of non-absolute units to adjust their sizing to different viewports. but i will show it to you anyways, for those of you who might find a use for it, and for the sake of education. call me an archivist...... a bbcode historian....... or just someone who has been here a little too long.

[div=height:180px; width:180px; /*add in your vertical padding here*/ padding:15px 0; box-sizing:border-box; border:2px solid black; overflow:hidden;][div=height:100%; /*adding 17px to the width*/ width:197px; overflow-y:scroll; overflow-x:hidden;][div=height:auto; /*the original width!*/ width:180px; /*add your horizontal padding here*/ padding:0 15px; box-sizing:border-box;]woohoo! let's scroll this box! yeah!!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div][/div][/div]

woohoo!
let's scroll this box!
yeah!!!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ut fringilla nisi, consequat dapibus felis.
Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.

 

[L0ck0n]

Thank you very much! This information is wonderful, and very useful!
You organized it all nicely, and it's easy to understand!!

 

[Uxie]

crash course

in this episode, uxie stops gatekeeping:

custom tabs

i should begin this with an apology:

SORRY. <(_ _)>

a tabs tutorial has been long overdue, because i feel like people ask for it pretty often, and especially because the last tutorial made on this that every new person keeps referring back to was

made by pasta in 2020

, when bbcode+ was first gutted and we hadn't even figured out borders were the best div replacement. now, we have actual divs; it's high time for a refresh, i say, so i'm releasing my patented, probably-unoptimised, uxie custom tabs tech® (｡•̀ᴗ-)✧!!!!
all /j. i DID figure this out on my own, but i'm sure others did too. this is just what i taught all my friends

if you don't know what custom tabs are, we're basically just working with the actual bbcode [tabs][/tabs] and covering it up so we can have custom buttons and extra-custom content. that's all it is! for all of you who like that! ♡ again, i don't think i'm all that great at explaining, especially to those reading this who haven't already figured out the basics of css injection n whatnot. apologies in advance, feel free to dm me with questions.

OKAY! — we're gonna move through this like we're building legos. go through the parts like you're flipping the instructions sheet or something.
*please note: all my examples are spaced and line broken for easy viewing. you'll need to add line-height:0; to your container div, wrap your entire code in [nobr][/nobr] or remove all the linebreaks between the divs for it to look and align as it should.

click!

p.0: position properties

hello! welcome to stage one! these are for my friends who are still pretty new to css, and need a banger explanation on what properties we're using. the most relevant ones for this tutorial are the position properties. there's several of them, all with their own functionalities. you can read more about that

here

! the only two we care about in this tutorial are position:relative; and position:absolute;

position:relative; is like default, but IT ISN'T. if you opened the link you would know the default value is static. adding position:relative; to a div allows you to make use of positioning properties —

left: value; , right: value; , top: value; , bottom: value;

— to adjust the position of the div. the value here, in what ever units you choose to use, refers to the value that the div will move away from that direction. try copying this example and adjusting the values to see how your box can run around:

[div=height:40px; width:40px; background:red; position:relative; /* star of our show! */ left: 30px; /* moves this item 30 pixels FROM the left, i.e. to the right */ bottom: 20px; /* moves this item 20 pixels FROM the bottom, i.e. upwards */ ][/div]

it's important to note you can only use one property out of reach pair per direction, i.e. top OR bottom, left OR right. if you use more than one, it'll follow normal css rule conventions and override one another. just pick one for each direction, ok?

position:relative; is nice for nudging things into position, but if you're just getting into coding and you'd like to get better, don't use it too often! it's not the most ""proper"" way of positioning things, because rather than the entire item moving, it's more like the image of the item is moving. like, moving it was position:relative; astral projects the div to the position you want, but it's actual body is still there (you just can't see it). I HOPE THAT MAKES SENSE. if you want to move the entire div (rather than splitting it between image and body), try using the

margin

property instead. not gonna go into that here, because it's not that relevant for tabs.

next up, position:absolute;! also allows you to make use of positioning properties like position:relative;, but putting position:absolute; on a div will turn it... incorporeal? basically, it'll ignore the normal positioning of how a default positioned element should be, existing on a different layer than basically everything else, even other position:absolute; elements, and importantly, the bounds of the code itself. an uncontrolled position:absolute; is a leading cause of broken site layouts on rpn, because when it goes haywire, it does some crazy things. i don't know how it works, just know that it happens. what i'm getting at, anyways, is that you need to lock your ghost in a house with an anchor. the house is, you guessed it, position:relative;!

the positioning properties on position:absolute; elements will be made relative to the nearest parent container with position:relative; on it. meaning:

[div= /*house div*/ height:150px; width:150px; background:brown; border:1px solid black; position:relative; /*boom! anchored.*/ /*you don't need to dictate any values for your positioning properties for position:relative; divs, btw*/] [div= /*ghost div*/ height:30px; width:30px; background: white; border-radius:50%; /*just makes this a circle bc it's more fun*/ position:absolute; /*boom! danny phantom*/ top: 20px; /*same as before~*/ right: 0px; /*even if you don't want to move it from the corners, you SHOULD state a null value, like right:0; for position:absolute; elements, or they'll hover in some weird spot.*/][/div] [/div]

that's so fun! anyways, a cool thing about position:absolute; going to the nearest relative positioned element is that if you don't dictate an element to be position:relative;, i.e. leave it as position:static;, it won't cage the ghost. this is part of the magic of my custom tabs.

you get the gist of how position:relative; and position:absolute; work. yay! let's keep going.

click!

p.1: the set-up

there are 3.5 main divs that make up this way of doing tabs! i will colour code them for you to refer to as we move along; they are:
- container div [yellow]
- tab div 1 [green]
- tab div 1.5 (optional, actually, but i always include it!)
- tab contents div [blue]
- tab buttons div (in part 2. for later.) [pink]

i think the easiest way for me to explain this is by just giving you the step-by-step of me setting this up......... here's our container div, which is where the bounds of our ENTIRE code. i've also just thrown the tabs in there for you to see what we're working with (and what we have to cover):

• 1

• hello, this content is stuck here. and this line is ugly.

[div= height:200px; width:200px; border:1px solid black; background:yellow; position:relative; /*this is the only property that matters. THIS is the ONLY div out of the 3.5 that's going to have position:relative; on it*/] [tabs] [tab=1]hello, this content is stuck here. and this line is ugly.[/tab] [/tabs] [/div]

hate the line. hate being boxed in. let's set up the tab divs to first hide the line, making use of overflow:hidden;, which we learnt about in

FAQ: HIDDEN SCROLLS

!!

• 1

• hello, this content is stuck here. and this line is ugly.

[div=/*container div*/ height:200px; width:200px; border:1px solid black; background:yellow; position:relative;] [div= /*tab div 1*/ height:30px; /*this is the height that's exact to the buttons' height. you can adjust this also to suit your needs*/ width:100%; /*100%, a fixed value (like 200px), this is just how much space you'll let your tabs take up.*/ overflow:hidden; /*HIDE THAT LINE*/ background:green;] [div= /*tab div 1.5 -- because it's a small box and because the tabs have a little bit of padding built in around the edges, i use this to shove it in so it's flush to the edge. try removing this div or adjusting the margin values and seeing the difference!*/ height:auto; width:auto; margin-top: 5px; /*moving the tabs down by 3 pixels, WITHIN the tab box, to center it!*/ margin-left: -10px; /*moving the tabs to the left by 5 pixels, WITHIN the tab box*/] [tabs] [tab=1]my content is hidden now. like magic![/tab] [/tabs] [/div] [/div] [/div]

as you can see, the ugly line is gone, but so is my content! it was boxed in, and now it's been wiped. no worries, one last div, and we'll stick it right back! fun interaction here -- position:absolute; will ignore overflow:hidden; if the div doesn't have position:relative;!!

• 1

• YAY! MY CONTENT IS BACK!

[div=/*container div*/ height:200px; width:200px; border:1px solid black; background:yellow; position:relative;] [div= /*tab div 1*/ height:30px; width:100%; overflow:hidden; background:green;] [div= /*tab div 1.5*/ height:auto; width:auto; margin-top: 5px; margin-left: -10px;] [tabs] [tab=1][div= /*tab content div. time for position:absolute;!!!*/ height:160px; /*just container div minus tab box (30px) and a 10px margin between tab buttons and content */ width: 100%; /*i want it to take up the full length*/ background: pink; position:absolute; /*YEAHHHHH*/ bottom: 0px; /* i want it at the bottom of the code, so this is quicker! but top: 35px; will also work!*/ left: 0px; /*full width, left or right doesn't matter!*/ ]YAY! MY CONTENT IS BACK![/div][/tab] [/tabs] [/div] [/div] [/div]

with this tech, you can do fun things like putting your content above the tabs, or even have it super far away. so fun. so easy to mess around with!
alright, go! next! next!

click!

p.2: custom buttons

we made it! the section most people care about!!! let's change up those buttons !!

of course, a little caveat that to really customise buttons, you kind of need to know how to... you know, code the buttons yourself. but for those who are just looking for a snippet to stuff in your basic codes, i'll have that over in p.6 instead. for those who are still here, let's get on with it!

so, first off. i lied! there's actually a fourth main div that you'll need, which is what i usually label as the "tabs cover" in my codes. this is just a div i use to cover up the tab buttons, and it makes use of position:absolute; to become a ghost and sit on top of the buttons as well as pointer-events:none; to make the buttons clickable. if you don't remember, both of these were also in the music player episode! love a little call back.

let's make the tab cover div purple, and stick it in there. you wanna make it the same size as tab div 1, basically, so it covers well, and you want to nest it on the same level as tab div 1 (they're both hanging out in the container together!) for now, let's also give it opacity:0.4; so you can see how the layers are working out, in action, you can just remove this property entirely:

• 1

• wow, that's purple now.

[div=height:200px; width:200px; border:1px solid black; background:yellow; position:relative;] [div= /*tab div 1*/ height:30px; width:auto; overflow:hidden; background:green;] [div= /*tab div 1.5 */ height:auto; width:auto; margin-top: 5px; margin-left: -10px;] [tabs] [tab=1][div= /*tab content div*/ height:160px; width: 100%; background: pink; position:absolute; bottom: 0px; left: 0px;]wow, that's purple now.[/div][/tab] [/tabs] [/div] [/div] [div= /*new hot div just dropped! meet tab cover div*/ height:30px; width:200px; background: purple; position:absolute; /*ghost mode active*/ top: 0px; left: 0px; /*placing it right over the buttons*/ pointer-events:none; /*you need this to make sure the buttons are clickable behind it. it just gets your mouse to ignore it!*/ opacity:0.6;] [/div] [/div]

again, because the only div that has position:relative; in this entire code is the container div, it's easy to get stuff to fit into place. let's just throw two buttons in the tab cover div, add another tab in, and i'll remove the opacity property so you can see how it's working!

• 1
• 2

• wow, that's purple now.
• brand new tab!

tab 1

tab 2

[div=height:200px; width:200px; border:1px solid black; background:yellow; position:relative;] [div= /*tab div 1*/ height:30px; width:auto; overflow:hidden; background:green;] [div= /*tab div 1.5 */ height:auto; width:auto; margin-top: 5px; margin-left: -10px;] [tabs] [tab=1][div= /*tab content div*/ height:160px; width: 100%; background: pink; position:absolute; bottom: 0px; left: 0px;]wow, that's purple now.[/div][/tab] [tab=2][div=height:160px; width:100%; background:pink; position:absolute; bottom:0; right:0; line-height:100%;]brand new tab![/div][/tab] [/tabs] [/div] [/div] [div= /*tab cover div*/ height:30px; width:200px; background: purple; position:absolute; top: 0px; left: 0px; pointer-events:none; opacity:0.6; padding:6px; box-sizing:border-box;] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; float:left;]tab 1[/div] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; float:left; margin-left:10px;]tab 2[/div] [/div] [/div]

not the most elegant-looking thing, but you're a good coder, i'm sure you can prettify it. since the buttons are in a single row, i've added float:left; to each of them to get them to stay on the same line. using display:flex; or display:inline-block; will probably work just as well!

well, them's the basics. you've got it! you've got custom tabs! i'm so proud of you!!! (´• ω •`)

click!

p.3: other cheeky things

here are some other cheeky interactions that i've discovered can work with tabs to adjust how they lay out and whatnot. these are super good!

1. vertical tabs are so easy to do. limit the width of tab div 1 to force the tabs into a single column (and of course, adjust your height to make space for it. you can also adjust the distance between the tabs with line-height. just remember to re-adjust line-height in the tab content divs as well! try this example:

[div=height:200px; width:200px; border:1px solid black; background:yellow; position:relative; line-height:0;] [div= /*tab div 1*/ height:60px; width:55px; /*skinny tab div 1... */ overflow:hidden; background:green;] [div= /*tab div 1.5 */ height:auto; width:auto; margin-top: 5px; margin-left: -20px;] [tabs] [tab=1][div= /*tab content div*/ height:200px; width:140px; background: pink; position:absolute; bottom: 0px; right: 0px; line-height:100%;]wow, that's purple now.[/div][/tab] [tab=2][div= /*tab content div*/ height:200px; width:140px; background: pink; position:absolute; bottom: 0px; right: 0px; line-height:100%;]brand new tab![/div][/tab] [/tabs] [/div] [/div] [div= /*tab cover div*/ height:60px; width:60px; background: purple; position:absolute; top: 0px; left: 0px; pointer-events:none;] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; margin-top:5px;]tab 1[/div] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; margin-top:10px;]tab 2[/div] [/div] [/div]

2. getting long tabs without filling it up with AAAAAAA is also pretty okay! just use letter-spacing to make the letters take up more space, and "1" can suddenly fill an ocean. same as before, just remember to re-adjust/re-state letter-spacing in the tab content divs!

3. using an image background is just a matter of making things work with z-index and adding another ghost. you'll notice this method makes use of the coloured background on tabs cover to hide the tab buttons from sight. in an easy world, we could use an opacity hack like we do for the music player, but that unfortunately affects the tab content as well (sad). so you just need to play around with your layers. layer it like this with z-index:

-top layer (visible)-
[tab cover div -- position:absolute; z-index:3;]
[tab contents div -- position:absolute; z-index:3;]
[image background div -- position:absolute; z-index:2;]
[tab div 1 and 1.5 -- no position property]
-bottom layer-

all as separate divs, all nested within the container div. i hope that makes sense? here's an example, in case it wasn't:

[div=height:200px; width:200px; border:1px solid black; background:yellow; position:relative; line-height:0;] [div= /*tab div 1*/ height:30px; width:auto; overflow:hidden; background:green;] [div= /*tab div 1.5 */ height:auto; width:auto; margin-top: 5px; margin-left: -10px;] [tabs] [tab=1][div= /*tab content div*/ height:160px; width: 100%; background: pink; position:absolute; bottom: 0px; left: 0px; z-index:3; line-height:100%;]wow, that's purple now.[/div][/tab] [tab=2][div=height:160px; width:100%; background:pink; position:absolute; bottom:0; right:0; z-index:3; line-height:100%;]brand new tab![/div][/tab] [/tabs] [/div] [/div] [div= /*tab cover div*/ height:30px; width:200px; position:absolute; top: 0px; left: 0px; z-index:3; pointer-events:none; padding:6px; box-sizing:border-box;] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; float:left;]tab 1[/div] [div=/*button div*/ height:auto; width:55px; background: blue; border:1px solid black; text-align:center; color: black; font-size:14px; line-height:100%; float:left; margin-left:10px;]tab 2[/div] [/div] [div= /*image background div*/ height:100%; width:100%; background: url('https://i.imgur.com/vVlRzVu.png'); pointer-events:none; position:absolute; top:0; left:0; z-index:2;][/div] [/div]

yeah. i think that's all the tricks i can think of right now. feel free to dm me if you have any specific questions about this!!! i hope this was alright to understand ♡

click!

p.4: epilogue (snippet)

and lastly, as promised! here is a little snippet with basic, customisable buttons you can use! unfortunately, this will only work with a background due to the way it works, and if you don't want to add a scroll to the tab's contents, they're sort of fixed in the area. honestly, this is just making it look nice :") i'll do my best to make use of other bbcode so you can look there for explanations instead of getting confused by css. i hope this is useful to some people??

all you need to do is just add more tabs and add more buttons with it. it should be really simple to customise, and you can put centerblock before or after bg if you want to shrink it!!! here you go:

Spoiler: tabs snippet

[bg=#dce3f7][div=/*container div*/

--bg: #dce3f7; /*make this the same colour as in the bg tag!*/
--button-bg-color: #fefefe;
--button-border: 2px solid #3d424c;
--button-text-color: #3d424c;
--button-radius: 8px; /*the higher this value is, the more the edges of the button curve*/

--tab-bg: #fefefe;
--tab-border: 2px solid #3d424c;

height:auto; width:100%; position:relative;][comment]
[/comment][div=height:auto; width:100%; position:relative; top:5px;][tabs]

      [tab=tab 1][div=height:auto; width:100%; background: var(--tab-bg); border:var(--tab-border); padding:10px; box-sizing:border-box; position:relative; z-index:2;][font=Tiny5][color=#000]tab 1's content goes here!
      [/color][/font][/div][/tab]

      [tab=tab 2][div=height:auto; width:100%; background: var(--tab-bg); border:var(--tab-border); padding:10px; box-sizing:border-box; position:relative; z-index:2;][font=Tiny5][color=#000]tab 2's content goes here!
      [/color][/font][/div][/tab]

      [tab=tab 3][div=height:auto; width:100%; background: var(--tab-bg); border:var(--tab-border); padding:10px; box-sizing:border-box; position:relative; z-index:2;][font=Tiny5][color=#000]tab 3's content goes here!
      [/color][/font][/div][/tab]

   [/tabs][/div][comment]

   ----buttons (make sure the number of buttons matches the number of tabs)----[/comment]
   [div=height:30px; width:100%; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:row wrap; padding:0 20px; box-sizing:border-box; pointer-events:none; line-height:0; --mb:3px 10px 0 0;]

      [div=/*button div. copy the whole thing*/ height:25px; width:fit-content; width: -moz-fit-content; margin: var(--mb); padding:4px 22px; box-sizing:border-box; background: var(--button-bg-color); border: var(--button-border); color: var(--button-text-color); border-radius: var(--button-radius); line-height:110%; font-size:15px;][font=Tiny5]tab 1[/font][/div]

      [div=/*button div. copy the whole thing*/ height:25px; width:fit-content; width: -moz-fit-content; margin: var(--mb); padding:4px 23px; box-sizing:border-box; background: var(--button-bg-color); border: var(--button-border); color: var(--button-text-color); border-radius: var(--button-radius); line-height:110%; font-size:15px;][font=Tiny5]tab 2[/font][/div]

      [div=/*button div. copy the whole thing*/ height:25px; width:fit-content; width: -moz-fit-content; margin: var(--mb); padding:4px 23px; box-sizing:border-box; background: var(--button-bg-color); border: var(--button-border); color: var(--button-text-color); border-radius: var(--button-radius); line-height:110%; font-size:15px;][font=Tiny5]tab 3[/font][/div]

   [/div][div=height:100%; width:100%; background: var(--bg); position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/div]
[/div][/bg]

i'm not 100% sure there aren't errors in some of the codes here.... so you can have the fun coder's experience of troubleshooting. dm me if it gets real bad, otherwise, all the best. and hope this helps, at least a little!!! ( ◡‿◡ )