Nano
procrastination symphony
hi
@import url('https://fonts.googleapis.com/css?family=Dosis|Marcellus+SC');
.tabs {
margin: 15px auto;
height: 300px;
width: 400px;
position: relative;
}
.tab {
float: left;
}
.tab [type=radio] {
display: none;
}
.tab label {
width: 80px;
height: 35px;
background-color: #595959;
border-width: 1px;
border-style: solid;
border-color: #000000;
font-family: Times New Roman, Times, serif !important;
font-size: 16px;
color: #ffffff;
display: block;
line-height: 35px;
text-align: center;
position: relative;
}
.content {
padding: 10px 15px;
top: 34px;
left: 0;
right: 0;
bottom: 0;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
font-family: Times New Roman, Times, serif;
font-size: 16px;
color: #000000;
line-height: 150%;
position: absolute;
}
.tab [type=radio]:checked ~ label {
background: #ffffff;
color: #000000;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Heyo!
Someone once asked me to make a tutorial of some sort, so here it is! owoSo back in the first few days or weeks of the html beta on rpn, ViAdvena made a tutorial teaching the basics of html which included the use of tabs. However, a lot of people still seemed to be pretty confused and lost on how to make them, so I thought it might help if someone made a (hopefully) in-depth guide on how to code tabs? I just hope I don’t fail too badly in explaining things, haha.
Forenotes
-If you aren’t very familiar with the coding process, I highly suggest visiting ViAdvena’s html cheat sheet here, and Fyuri’s new introduction to CSS here!
-Please DO NOT post your tab experiments in the comments. This can potentially cause the tab used in the explanation to break and not function properly. If you feel the need to send your code over in order to ask a question, please do so via PM.
-I don't do inline, so if you avoid CSS like the plague, you might wish to look elsewhere for guidance. Sorry!-These are pure CSS tabs meaning that they will include no use of javascript/jQuery.-This is not the only way to make tabs. I just feel that the method I posted here is the simplest and neatest.-This tutorial assumes that you know the basics of CSS and are fully aware of RPN's html policy.
-I’ll be referring to the part of the tab that you click on to change the content as “tab buttons” and the stuff that appears in the boxes below the tab buttons as the “content box.”
-Disclaimer: I am completely self-taught and have taken no formal classes for coding or web design.
Intro
As a lot of you have already noticed for a long time, tabs and accordions are no longer available on RPN’s button editor/RTE. I’ve been seeing a lot of people asking around on how to make tabs due to this, so I thought I’d do something productive for once and make a tutorial on tabs that’s hopefully easy enough to understand.
For the building of the tabs, I’ll be going with my preferred method. There are actually several different ways to code functional tabs, but most of center around the idea of using the :target pseudo class selector and to be perfectly honest, that method is too jerky/clunky, making it more of a nuisance rather than a good way to organize your information. This tutorial will thus be centered around a method to make tabs using hidden radio buttons and the :checked method.
Building Tabs
To start, I’ll be posting the code for the tabs. Keep in mind that most of the values inputted are actually random numbers/colors/etc I decided to use for this tutorial and can be adjusted.
Note that it is suggested to paste the sample code into a separate document so that it's easier to follow along with the tutorial!
The Code + Sample:
~ 1 ~
Testing testing 1, 2, 3...
~ 2 ~
What am I supposed to even write here?
~ 3 ~
My dog is sitting on my pillow. >B(
The CSS Explained
“.tabs”
The most important properties here are“height” and “position”.
If you neglect to put “position: relative;”, you might as well kiss your edit button goodbye. Using other values causes the tabs to extend out of its specified area or its overall position becomes screwy, so it usually ends up covering the “edit” button when not set as “relative.”
Height is probably the most important in getting the tabs to work, though. When making tabs, you MUST input a set value. This means that you can’t use percents, since the tab box containing the content will just remain the same size.
.tab
This is simply to have the tab buttons stack neatly side by side. Use “float: right;” instead if you want to have right-aligned tabs.
.tab [type=radio]
Here is the part of the code that hides the radio buttons. All we need is the ability to check and uncheck them and not the actual visual.
.tab label
This is basically where and how you’ll be altering the appearance of the tabs (the buttons not the content box). Most of it is pretty self-explanatory, but there are still some things to note. The tabs must be set relative to each other to stack side by side neatly, “display: block” fixes an issue where the tabs would more or less ignore the height and width that you set for the tabs, and “line-height” makes sure that your tabs look the same throughout all three themes. In general, setting the value of “line-height” to whatever value that you set for the “height” will center your text.
It’s extremely important to take note of the “!important” property used in the “font-family” and "font-size" property. For some reason, RPN is really stubborn about the font inside of the label, and using “!important” is the only way to override the default font and size (at least to the best of my knowledge). I do not suggest using “!important” anywhere else, however.
.content
To put it simply, this is the content box where your information will be displayed. Position it absolutely so that all of the boxes stack on top of each other neatly. Also, since the dimensions of the content box conform to the values that you set for “.tabs”, you use top, left, right, bottom properties to alter the size of the box so that it doesn’t overlap with the tab buttons. Since the tab buttons are located above the content box, just leave the values of the left, right, and bottom as 0. As for the top, I suggest setting the value as the height that you set in “.tab label” minus 1 (e.g. 35px - 1px = 34px, so you use 34px for the top). Note that this only applies to RPN, and will most likely not provide the proper positioning on other sites/html testers.
.tab [type=radio]:checked ~ label
The properties and values you put here will affect how your tab button appears when it’s checked (you click on it). I highly suggest making the tab a different color when checked in order to help yourself and others easily know which tab it is that you’re on.
The z-index is just to ensure that the tab buttons will always appear on top of the content box in case you ever decide to place them over the content box, although I don’t know why you would do that...
.tab [type=radio]:checked ~ label ~ .content
As long as its value is a number lower than the one you set for the z-index in “.tab [type=radio]:checked ~ label”, it doesn’t really matter what number you choose. It can be 1. It can be 867. You must include this in order to make the tabs “switch content” on click.
Afterword
I hope that wasn’t too bad?
Please keep in mind that this tutorial is explaining just the basics. You can go much more beyond what’s put here in terms of styling and decorating your tabs, so go wild. You can actually even use images as the tab buttons or alter the border-radius of the tab button so that it looks somewhat like a leaf (I’ve noticed that this has been popular on RPN lately?). Tabs with buttons that are to the side of the content box rather than the top are also a possibility.
I might add a “Common Errors and Issues” section later on, so feel free to ask any questions you might have. I’m not a professional coder, so I can’t guarantee an answer, but I’ll try my best!
Happy coding~
-Nano
Edit: Uhhh...hello repetitive usage of words. > - >;;;
View full tutorial
@import url('https://fonts.googleapis.com/css?family=Dosis|Marcellus+SC');
.tabs {
margin: 15px auto;
height: 300px;
width: 400px;
position: relative;
}
.tab {
float: left;
}
.tab [type=radio] {
display: none;
}
.tab label {
width: 80px;
height: 35px;
background-color: #595959;
border-width: 1px;
border-style: solid;
border-color: #000000;
font-family: Times New Roman, Times, serif !important;
font-size: 16px;
color: #ffffff;
display: block;
line-height: 35px;
text-align: center;
position: relative;
}
.content {
padding: 10px 15px;
top: 34px;
left: 0;
right: 0;
bottom: 0;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
font-family: Times New Roman, Times, serif;
font-size: 16px;
color: #000000;
line-height: 150%;
position: absolute;
}
.tab [type=radio]:checked ~ label {
background: #ffffff;
color: #000000;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Heyo!
Someone once asked me to make a tutorial of some sort, so here it is! owoSo back in the first few days or weeks of the html beta on rpn, ViAdvena made a tutorial teaching the basics of html which included the use of tabs. However, a lot of people still seemed to be pretty confused and lost on how to make them, so I thought it might help if someone made a (hopefully) in-depth guide on how to code tabs? I just hope I don’t fail too badly in explaining things, haha.
Forenotes
-If you aren’t very familiar with the coding process, I highly suggest visiting ViAdvena’s html cheat sheet here, and Fyuri’s new introduction to CSS here!
-Please DO NOT post your tab experiments in the comments. This can potentially cause the tab used in the explanation to break and not function properly. If you feel the need to send your code over in order to ask a question, please do so via PM.
-I don't do inline, so if you avoid CSS like the plague, you might wish to look elsewhere for guidance. Sorry!-These are pure CSS tabs meaning that they will include no use of javascript/jQuery.-This is not the only way to make tabs. I just feel that the method I posted here is the simplest and neatest.-This tutorial assumes that you know the basics of CSS and are fully aware of RPN's html policy.
-I’ll be referring to the part of the tab that you click on to change the content as “tab buttons” and the stuff that appears in the boxes below the tab buttons as the “content box.”
-Disclaimer: I am completely self-taught and have taken no formal classes for coding or web design.
Intro
As a lot of you have already noticed for a long time, tabs and accordions are no longer available on RPN’s button editor/RTE. I’ve been seeing a lot of people asking around on how to make tabs due to this, so I thought I’d do something productive for once and make a tutorial on tabs that’s hopefully easy enough to understand.
For the building of the tabs, I’ll be going with my preferred method. There are actually several different ways to code functional tabs, but most of center around the idea of using the :target pseudo class selector and to be perfectly honest, that method is too jerky/clunky, making it more of a nuisance rather than a good way to organize your information. This tutorial will thus be centered around a method to make tabs using hidden radio buttons and the :checked method.
Building Tabs
To start, I’ll be posting the code for the tabs. Keep in mind that most of the values inputted are actually random numbers/colors/etc I decided to use for this tutorial and can be adjusted.
Note that it is suggested to paste the sample code into a separate document so that it's easier to follow along with the tutorial!
The Code + Sample:
<p style="display: none;">hi</p>
<style type="text/css">
.tabs {
margin: 15px auto;
height: 300px;
width: 400px;
position: relative;
}
.tab {
float: left;
}
.tab [type=radio] {
display: none;
}
.tab label {
width: 80px;
height: 35px;
background-color: #595959;
border-width: 1px;
border-style: solid;
border-color: #000000;
font-family: Times New Roman,Times, serif !important;
font-size: 16px;
color: #ffffff;
display: block;
line-height: 35px;
text-align: center;
position: relative;
}
.content {
padding: 10px 15px;
top: 34px;
left: 0;
right: 0;
bottom: 0;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
font-family: Times New Roman, Times, serif;
font-size: 16px;
color: #000000;
line-height: 150%;
position: absolute;
}
.tab [type=radio]:checked ~ label {
background: #ffffff;
color: #000000;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="group-1" checked>
<label for="tab-1">~ 1 ~</label>
<div class="content">
<p>Testing testing 1, 2, 3...</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="group-1">
<label for="tab-2">~ 2 ~</label>
<div class="content">
<p>What am I supposed to even write here?</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="group-1">
<label for="tab-3">~ 3 ~</label>
<div class="content">
<p>My dog is sitting on my pillow. >B(</p>
</div>
</div>
</div>
<style type="text/css">
.tabs {
margin: 15px auto;
height: 300px;
width: 400px;
position: relative;
}
.tab {
float: left;
}
.tab [type=radio] {
display: none;
}
.tab label {
width: 80px;
height: 35px;
background-color: #595959;
border-width: 1px;
border-style: solid;
border-color: #000000;
font-family: Times New Roman,Times, serif !important;
font-size: 16px;
color: #ffffff;
display: block;
line-height: 35px;
text-align: center;
position: relative;
}
.content {
padding: 10px 15px;
top: 34px;
left: 0;
right: 0;
bottom: 0;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
font-family: Times New Roman, Times, serif;
font-size: 16px;
color: #000000;
line-height: 150%;
position: absolute;
}
.tab [type=radio]:checked ~ label {
background: #ffffff;
color: #000000;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="group-1" checked>
<label for="tab-1">~ 1 ~</label>
<div class="content">
<p>Testing testing 1, 2, 3...</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="group-1">
<label for="tab-2">~ 2 ~</label>
<div class="content">
<p>What am I supposed to even write here?</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="group-1">
<label for="tab-3">~ 3 ~</label>
<div class="content">
<p>My dog is sitting on my pillow. >B(</p>
</div>
</div>
</div>
~ 1 ~
Testing testing 1, 2, 3...
~ 2 ~
What am I supposed to even write here?
~ 3 ~
My dog is sitting on my pillow. >B(
The CSS Explained
“.tabs”
The most important properties here are“height” and “position”.
If you neglect to put “position: relative;”, you might as well kiss your edit button goodbye. Using other values causes the tabs to extend out of its specified area or its overall position becomes screwy, so it usually ends up covering the “edit” button when not set as “relative.”
Height is probably the most important in getting the tabs to work, though. When making tabs, you MUST input a set value. This means that you can’t use percents, since the tab box containing the content will just remain the same size.
.tab
This is simply to have the tab buttons stack neatly side by side. Use “float: right;” instead if you want to have right-aligned tabs.
.tab [type=radio]
Here is the part of the code that hides the radio buttons. All we need is the ability to check and uncheck them and not the actual visual.
.tab label
This is basically where and how you’ll be altering the appearance of the tabs (the buttons not the content box). Most of it is pretty self-explanatory, but there are still some things to note. The tabs must be set relative to each other to stack side by side neatly, “display: block” fixes an issue where the tabs would more or less ignore the height and width that you set for the tabs, and “line-height” makes sure that your tabs look the same throughout all three themes. In general, setting the value of “line-height” to whatever value that you set for the “height” will center your text.
It’s extremely important to take note of the “!important” property used in the “font-family” and "font-size" property. For some reason, RPN is really stubborn about the font inside of the label, and using “!important” is the only way to override the default font and size (at least to the best of my knowledge). I do not suggest using “!important” anywhere else, however.
.content
To put it simply, this is the content box where your information will be displayed. Position it absolutely so that all of the boxes stack on top of each other neatly. Also, since the dimensions of the content box conform to the values that you set for “.tabs”, you use top, left, right, bottom properties to alter the size of the box so that it doesn’t overlap with the tab buttons. Since the tab buttons are located above the content box, just leave the values of the left, right, and bottom as 0. As for the top, I suggest setting the value as the height that you set in “.tab label” minus 1 (e.g. 35px - 1px = 34px, so you use 34px for the top). Note that this only applies to RPN, and will most likely not provide the proper positioning on other sites/html testers.
.tab [type=radio]:checked ~ label
The properties and values you put here will affect how your tab button appears when it’s checked (you click on it). I highly suggest making the tab a different color when checked in order to help yourself and others easily know which tab it is that you’re on.
The z-index is just to ensure that the tab buttons will always appear on top of the content box in case you ever decide to place them over the content box, although I don’t know why you would do that...
.tab [type=radio]:checked ~ label ~ .content
As long as its value is a number lower than the one you set for the z-index in “.tab [type=radio]:checked ~ label”, it doesn’t really matter what number you choose. It can be 1. It can be 867. You must include this in order to make the tabs “switch content” on click.
Afterword
I hope that wasn’t too bad?
Please keep in mind that this tutorial is explaining just the basics. You can go much more beyond what’s put here in terms of styling and decorating your tabs, so go wild. You can actually even use images as the tab buttons or alter the border-radius of the tab button so that it looks somewhat like a leaf (I’ve noticed that this has been popular on RPN lately?). Tabs with buttons that are to the side of the content box rather than the top are also a possibility.
I might add a “Common Errors and Issues” section later on, so feel free to ask any questions you might have. I’m not a professional coder, so I can’t guarantee an answer, but I’ll try my best!
Happy coding~
-Nano
Edit: Uhhh...hello repetitive usage of words. > - >;;;
View full tutorial
