What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Tutorial ☂ snippets

snippets
Hello and welcome to SNIPPETS, a quick tutorial thread full of short bits of code that we think you might find useful. The codes here have varying levels of diffculty, listed below.

COPY PASTE
Copy paste codes, are, as the name implies, snippets that you simply copy paste into the correct area of your design to fulfill its purpose. They require no thinking on the user's part. They are plug and play.

THINKING REQUIRED
These snippets may require you to change the values, do some simple calculations, etc, to become useable. They likely won't require much background knowledge, but complete newbies may struggle to understand them.

CODING REQUIRED
Familiarity with basic principles behind javascript/css/html is required to use this, otherwise it will likely look like a mess. You can try as a beginner, but be warned that we may use jargon and less common properties to achieve a particular effect. Jank may be involved in these.

If you'd like to see these snippets of code in action, check out our showcase
FEVER DREAMS
. In all likelihood, anything we post here we likely discovered via one of the designs there.
 
Last edited by a moderator:
:
foundation
So welcome to the first tutorial in this thread. We'll be discussing what's basically the foundation of most of our codes. This can be seen in any of our tab systems, their hover/selected tab styling and even in FEVER DREAMS' personalized spoiler button. In its simplest form, our code is based on this:

(= varname (index (split (getText) "SEPARATOR") 0 ))
wherein varname is a string

(show (+ varname "IDENTIFIER"))
wherein IDENTIFIER is a string used in a classname


To study it, we'll be using a sample tab system with three different tabs.

[nobr]

[class name=scontainer]
display: flex;
flex-flow: row wrap;
margin: 0px -4px;
overflow: hidden;
box-sizing: border-box;
width: 100%;
[/class]

[class name=sbutton]
margin: 0px 2px;
background-color: #f0f0f0;
color: #8d8d8d;
flex: 1 0 100px;
width: calc(100% - 10%);
background: #f0f0f0;
transition: all .8s ease-in-out;
cursor: pointer;
text-align: center;
padding: 10px 5%;
[/class]

[class name=sbutton state=hover]
background: #8d8d8d;
color: #FFFFFF;
[/class]

[class name=sbuttoncurr]
background: #8d8d8d;
color: #FFFFFF;
transition: all .8s ease-in-out;
[/class]

[class name=stab]
display: block;
background: #f0f0f0;
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 4px 2px;
[/class]

[script class=sbutton version=2]
(hide "stab")
(show "onetab")
(addClass "sbuttoncurr" "onebtn")
[/script]

[script class=sbutton version=2 on=click]
(hide "stab")
(removeClass "sbuttoncurr" "sbutton")
(= currenttab (index (split (getText) "#") 0 ))
(show (+ currenttab "tab"))
(addClass "sbuttoncurr" (+ currenttab "btn"))
[/script]

[div class="scontainer"]
[div class="sbutton onebtn"][div=display: none;]one#[/div]one[/div]
[div class="sbutton twobtn"][div=display: none;]two#[/div]two[/div]
[div class="sbutton threebtn"][div=display: none;]three#[/div]$$$[/div]
[div class="stab onetab"]tab one[/div]
[div class="stab twotab"]tab two[/div]
[div class="stab threetab"]tab three[/div]
[/div]

[/nobr]


one#
one
two#
two
three#
$$$
tab one
tab two
tab three


So above is a VERY simple tab system. You can see the naming and class scheme, wherein we used the same classes for similar elements. After that, we place class identifiers to specify which is which. Because we named "stab onetab", the system now knows that that is the "onetab", and so on. The same goes for the buttons. You can replace "one", "two", etc. with more specific identifiers such as "home", "personality", etc. I only need a total of 8 lines in my scripts, and this already includes styling the buttons upon select. We can dissect the code, starting from the innermost level.

(= varname (index (split (getText) "SEPARATOR") 0 ))
(= currenttab (index (split (getText) "#") 0 ))

(getText)
getText gets the text from the class. In this case, it grabs the text inside "sbutton" If i clicked "onebtn" for example, it would get "one#one". If I had clicked "threebtn", we would get "three#$$$".

(split (getText) "SEPARATOR")
(split (getText) "#")
From there, it splits the text at the separator. In this case, our separator is "#". The text we got from getText was "one#one". Since we told it to split at "#", we would have two separate pieces of text if we clicked the first button: "one" and "one". If we had clicked on tab three, we would get "three#$$$". After split, we would get "three" and "$$$".

(index (split (getText) "SEPARATOR") 0 )
(index (split (getText) "#") 0 )
What does index do? So remember how our text is now split into two? Index tells us which of the words to use. Since we used "0", it uses the first word. If we use the number "1", it would use the second word. We need to specify this, otherwise our code won't work as it will try to use both.

(= varname (index (split (getText) "SEPARATOR") 0 ))
(= currenttab (index (split (getText) "#") 0 ))
currenttab is a variable, which means it's a representation of a value. In this case, whatever we got in the index step will now be the new value of currenttab.


Moving on, notice our naming scheme. We have "onebtn" and "onetab", "twobtn" and "twotab", so on and so forth. Using this system is required; whatever word you used to name your button should be the same name as your tab. So if you have a button named home, your tab and button better be named "hometab" and "homebtn". This code won't work otherwise.

Now how does this make things more efficient? BBCode+ ver2 can combine variables with class names!

[script class=sbutton version=2 on=click]
(hide "stab")
(removeClass "sbuttoncurr" "sbutton")
(= currenttab (index (split (getText) "#") 0 ))
(show (+ currenttab "tab"))
(addClass "sbuttoncurr" (+ currenttab "btn"))
[/script]

(show (+ currenttab "tab"))
(addClass "sbuttoncurr" (+ currenttab "btn"))
Using that ability, we're able to cut it down considerably! What that does is it combines the value of currenttab and whatever string you put beside it. So if your currenttab had the value of "one", it would become "onetab" and "onebtn". If you properly named your tab and button, and it will only do those actions to the specificed classes.


As a last note, since you have general classes which contains all the styling, anything you do using it will apply to all divs of that class name. It's why I hide "stab" instead of specifying which particular tabs to remove. This makes my code much shorter.

You'll see variations of this code in use in almost all of our designs. As mentioned earlier, our spoiler button uses it with a slideToggle. In my ENDGAME code, I use it to identify a character's team and auto-assign the color of their cs and apps. It's a very useful snippet which can be changed to suit your needs.
 

Alteras

The Sleepy One
Moderator
Supporter
:
music
For some time now, we've been trying to make more stylized music players. As such, we've been playing around with Google Drive embeds. One of the lesser known things is that you can use the gdoc tag to insert music.

[div=max-width: 350px; height: 50px; overflow: hidden; border: 0 solid black; border-radius: 10px;][div=margin-top: -325px; margin-left: -225px;][gdoc]ID[/gdoc][/div][/div]
where the ID is the google drive link ID when you share the link.



It is very simple and all you have to do is change the ID in the tag. Normally, the gdoc being displayed would be an extremely large square box, however, the two divs cut and crop it into a cleaner size. Unfortunately, we cannot cut off any more of the gray, since the music play will actually shrink and be unplayable. We can take apart how the code is made.

[div=max-width: 350px; height: 50px; overflow: hidden; border: 0 solid black; border-radius: 10px;][div=margin-top: -325px; margin-left: -225px;][gdoc]ID[/gdoc][/div][/div]
[div=max-width: 350px; height: 50px; overflow: hidden; border: 0 solid black; border-radius: 10px;][div=margin-top: -325px; margin-left: -225px;][gdoc]1C1H3Ybxeg4IxGR7LNjm41pFDwtnFfggF[/gdoc][/div][/div]

[gdoc]ID[/gdoc]
[gdoc]1C1H3Ybxeg4IxGR7LNjm41pFDwtnFfggF[/gdoc]

First we use the [gdoc] tag that bbcode has. The text in the code is taken from the shareable URL link we obtained from the google drive. https://drive.google.com/open?id=1C1H3Ybxeg4IxGR7LNjm41pFDwtnFfggF

[div=margin-top: -325px; margin-left: -225px;][gdoc]ID[/gdoc][/div]
[div=margin-top: -325px; margin-left: -225px;][gdoc]1C1H3Ybxeg4IxGR7LNjm41pFDwtnFfggF[/gdoc][/div]

Here we use a div negative margins to move it to the top and move it to the left. We've found that these numbers position it quite nicely to where we want it.

[div=max-width: 350px; height: 50px; overflow: hidden; border: 0 solid black; border-radius: 10px;][div=margin-top: -325px; margin-left: -225px;][gdoc]ID[/gdoc][/div][/div]
[div=max-width: 350px; height: 50px; overflow: hidden; border: 0 solid black; border-radius: 10px;][div=margin-top: -325px; margin-left: -225px;][gdoc]1C1H3Ybxeg4IxGR7LNjm41pFDwtnFfggF[/gdoc][/div][/div]

And now we crop it. We specify the max-width to be 350px, since the embed will actually resize itself if the device is too small. With a height of 50px, we can comfortable give it a near perfect amount of gray to match the sides. The key property here is the overflow: hidden, which hides anything that is outside of our defined height and width. the border and border-radius is to smooth out the corners and give it a matching circular look.


While we could've used another more efficient way of making it to size, we've found that this is the only way that will reliably let us play music on any desktop. Unfortunately, due to how google drive works on mobile, it can't be used on there. You can actually make it only display the play button by making the max-width be only 50px or so. It is quite a nice thing to have, especially when the music you want to use isn't on any support platform.
 
:
music 2
Alt's method of adding music to posts is much more mobile and user friendly than the soundcloud version I'm about to show you. Honestly speaking, unless you understand how the color wheel works, the personalization option isn't going to make much sense to you. This isn't very mobile-friendly - in fact, I highly recommend disabling it completely from appearing using maxWidth on the outermost div class in the provided code.

this tutorial only works on desktops as the code is automatically disabled on mobile

[div style="height: 40px; width: 40px; font-size: 0px; position: relative; overflow: hidden; display: inline-block; border-radius: 50%; border: 0px solid #000000; overflow: hidden; transform: perspective(0);"][div style="position: absolute; overflow: hidden; position: relative; top: -11px; left: -10px; width: 130px; height: 100px; filter: hue-rotate(-18deg) contrast(90%) brightness(100%) saturate(90%);"][media=soundcloud]https://soundcloud.com/mac-tango/limitless[/media][/div][/div]
where the filter property is changed according to user preference



Here's a little known fact: the soundcloud interface can be manipulated by CSS filters. This janky way of personalizing was actually the origin of the color changing transition for fever dreams. Above are three variations of the code - these color changes are all through the use of CSS filters.

[nobr][class name=scontainer]
display: flex; justify-content: center;
[/class]
[class name=sbuttoncontainer]
display: inline-block;
margin: 0px 10px;
height: 40px;
width: 40px;
font-size: 0px;
position: relative;
overflow: hidden;
display: inline-block;
border-radius: 50%;
border: 0px solid #000000;
overflow: hidden;
transform: perspective(0);
[/class]
[class name=sbuttoncontainer maxWidth=400px]
display: none;
[/class]
[class name=sbuttonfilter]
position: absolute;
overflow: hidden;
position: relative;
top: -11px;
left: -10px;
width: 130px;
height: 100px;
[/class]
[class name=sbtnone]
filter: hue-rotate(-18deg) contrast(90%) brightness(100%) saturate(90%);
[/class]
[class name=sbtntwo]
filter: hue-rotate(275deg) contrast(80%) brightness(200%) saturate(60%);
[/class]
[class name=sbtnthree]
filter: hue-rotate(180deg) contrast(300%) brightness(140%) saturate(80%);
[/class][div class="scontainer"][div class="sbuttoncontainer"][div class="sbuttonfilter sbtnone"][media=soundcloud]https://soundcloud.com/mac-tango/limitless[/media][/div][/div][div class="sbuttoncontainer"][div class="sbuttonfilter sbtntwo"][media=soundcloud]https://soundcloud.com/mac-tango/limitless[/media][/div][/div][div class="sbuttoncontainer"][div class="sbuttonfilter sbtnthree"][media=soundcloud]https://soundcloud.com/mac-tango/limitless[/media][/div][/div][/div][/nobr]


As you can probably see from the above code, I separated the three buttons' filter properties with sbtone, sbtntwo and sbtnthree respectively. Most of the time you can get away with just putting the filter property in sbuttonfilter as you'll probably have a consistent color scheme. Contrast/brightness/saturate are all honestly optional depending on your design. The most important filter attribute is hue-rotate.

[class name=sbtnone]
filter: hue-rotate(-18deg) contrast(90%) brightness(100%) saturate(90%);
[/class]
[class name=sbtntwo]
filter: hue-rotate(275deg) contrast(80%) brightness(200%) saturate(60%);
[/class]
[class name=sbtnthree]
filter: hue-rotate(180deg) contrast(300%) brightness(140%) saturate(80%);
Hue-rotate dictates what color you'll create based on the color wheel.
[/class]


This next part is going to be confusing, so keep this reference image handy. This next part will discuss how you can find out what degree value to use.


Imagine you have a pointer from the center going towards the red orange part. This is your starting point. Say you want to achieve blue-green, which is directly opposite it. How many degrees do you have to turn your pointer from red orange to blue green? 180 degrees, or half of a full rotation. Say I wanna achieve yellow? Based on the chart, I need to rotate 90 degrees. Violet? -90 degrees or 270 degrees. "But that's not the exact shade I want" - and that's normal. These points are meant to be guides for you so you're not doing the full 360 degree spectrum. If you're trying to achieve a shade of blue, you now know that it'll be around 180 degrees and you can go up or down from there. You can fine tune it further by using contrast/brightness/saturate to achieve the exact color you want.

Lastly, I added a code for disabling it from appearing on mobile. This is because the soundcloud widget changes appearance on mobile, replacing the play button with text suggesting the user to use their app. Obviously, we don't want that. This class is more or less copy-paste as is, but you'll probably want to change the display and margin properties to fit your layout.

[class name=sbuttoncontainer]
display: inline-block;
margin: 0px 10px;
height: 40px;
width: 40px;
font-size: 0px;
position: relative;
overflow: hidden;
display: inline-block;
border-radius: 50%;
border: 0px solid #000000;
overflow: hidden;
transform: perspective(0);
[/class]
[class name=sbuttoncontainer maxWidth=400px]
display: none;
[/class]

Disables the button from appearing when the viewing device has a width of 400px and less


This is honestly a bit on the trickier side as it requires a bit of color theory. However, I personally don't think it's one that requires extensive knowledge of either coding or color theory, which is why I've ranked this as a yellow. I hope you guys find this useful!
 

Alteras

The Sleepy One
Moderator
Supporter
:
scrollbar
One of the most popular requests in the BBCode Center is for hidden scrollbars. While there are many ways to hide the scrollbar, most methods aren't very versatile or easy to scale to different designs. This method of hiding it is fortunately very versatile. Unfortunately, on windows, there will be an extra gap to the right of the text. There's no good way to fix it.

[div= CONTAINING DIV with overflow: hidden;][div=width: 100%; height: 100%; box-sizing: content-box; padding-right: 200px; overflow-Y: scroll; overflow-X: hidden;]
Text Here
[/div][/div]
CONTAINING DIV is where you state height/width, as well as any other styling like text color, bg color, etc


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet mattis justo, non dictum orci placerat ut. Vestibulum viverra sagittis pretium. Duis finibus fringilla convallis. Nunc felis odio, condimentum vel sapien nec, viverra blandit diam. Morbi vehicula, urna quis auctor egestas, felis augue laoreet ex, ut sollicitudin leo arcu sit amet odio. Vivamus in tincidunt odio, ac imperdiet neque. Nullam viverra erat porta ligula aliquam luctus. Morbi finibus tortor non convallis luctus.

Nam interdum sed turpis at eleifend. Donec a turpis efficitur mauris pharetra ultricies. Nunc vel ornare eros, non fringilla est. Vivamus sagittis viverra pulvinar. Praesent nec velit ut nisi consequat luctus. Mauris dictum, erat vel porttitor iaculis, elit nunc dapibus magna, eu ullamcorper lorem magna eu eros. Cras elit arcu, aliquam eu lobortis a, sodales id lacus. Vestibulum tristique turpis varius purus dapibus tincidunt. Aliquam aliquet non eros id scelerisque. Quisque sit amet massa velit. Curabitur nulla tellus, bibendum a est quis, suscipit accumsan ante. Vivamus non quam sit amet lacus pharetra venenatis in nec tortor. Ut pretium efficitur risus, sed interdum sapien varius quis.


Here is the code for the live version:
[class name=container]
overflow: hidden;
max-width: 500px;
width: 100%;
box-sizing: border-box;
height: 150px;
margin: 0 auto;
border: 5px solid #8d8d8d;
padding: 5px;
[/class]
[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[div class=container][div class=scroll] text here [/div][/div]

As you can see, the container class has CSS code for the set height, width, border, and padding. Any formatting you want to do for the text or div should be done in the container class, not in the scroll class. The only important thing that needs to be in the container class is that overflow: hidden;. The code itself is very easy, as the goal is to push the scrollbar out of view. This is done first by defining the width and padding, as well as box-sizing.

[class name=container]
overflow: hidden;
max-width: 500px;
width: 100%;
box-sizing: border-box;
height: 150px;
margin: 0 auto;
border: 5px solid #8d8d8d;
padding: 5px;
[/class]
[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;

overflow-Y: scroll;
overflow-X: hidden;
[/class]
[div class=container][div class=scroll] text here [/div][/div]

width: 100% and height: 100% makes the scroll div adopt the already given width and height previously set by the container div. padding-right: 200px is how we push the scrollbar. This puts space between the text and the right edge of the box. However, we need to use box-sizing: content-box to make sure it does get pushed outside of the width: 100%. By default, most things are set to content-box, but we want to be safe, as if we let it be set to border-box, we'll actually just end up with a squished text and alot of space on the right and a scrollbar.

The next part is then actually hiding the extra space and the scrollbar, this is done through some nifty overflows.

[class name=container]
overflow: hidden;

max-width: 500px;
width: 100%;
box-sizing: border-box;
height: 150px;
margin: 0 auto;
border: 5px solid #8d8d8d;
padding: 5px;
[/class]
[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;

[/class]
[div class=container][div class=scroll] text here [/div][/div]

With the overflow: hidden; in the container div, we hide everything outside of the set box. We can actually stop there, but its safer to go through the trouble of adding overflow-Y:scroll; and overflow-X: hidden; to make sure it only scrolls up and down.

And that's all there is to it! Quite a simple bit of code. There are other ways to do this, but this method is the cleanest and easiest. Again, if you want to format the text, add fonts, backgrounds, etc, do so in the containing div, not in the scroll itself.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top