Tutorial div tutorials

[pasta]

tutorials​

​

​

div​

Heyo~! This is will be a tutorial thread for divs. I know there was one last year, but it was shortlived, unfortunately. I am in no way an expert of the art of divs, but hopefully this will help beginners. I've found divs are actually pretty easy if you take the time to understand them. They're a lot neater than if you just did seperate tags since you can maybe fit the whole code in a few divs (really depends on how simple the code is).

 

[pasta]

TUTORIAL 001 - DIV TABS
I DON'T RECOMMEND DOING THIS CODE IF YOU DON'T HAVE ANY EXPERIENCE WITH DIVS​

now now, this is kind of basic but a lot of people have been asking how to make tabs.
step one: making the tabs
normal tab code

• hl1o
• h1lo
• hll0

• ff
• fo
• fg

put it into a div:
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hl1o]ff[/tab][ tab=h1lo]fo[/tab][ tab=hll0]fg[/tab][/tabs][/div]

• hello
• h3llo
• hell0

• ff
• fo
• fg

cover up the tabs:
note: the div covering the tabs should be long enough to cover the first line
pointer-events:none - makes it clickable
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hl1o]ff[/tab][ tab=h1lo]fo[/tab][ tab=hll0]fg[/tab][/tabs][/div]

[ div=height:50px;background:white;position:relative;margin:auto;top:-300px;pointer-events:none;]

• hl1o
• h1lo
• hll0

• ff
• fo
• fg

customizing the div:
you can add more divs over the tabs as long as they have pointer-events:none
im just going to keep it simple and just use words
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hl1o]ff[/tab][ tab=h1lo]fo[/tab][ tab=hll0]fg[/tab][/tabs][/div][ div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][ size=20px][ b][ font=Arial][ color=black][ color=transparent]////\\[/color]some[ color=transparent]///\\/[/color]some[ color=transparent]////\\/[/color]some[/color][/font][/b][/size][/div]

• hl1o
• h1lo
• hll0

• ff
• fo
• fg

////\\some///\\/some////\\/some

getting rid of that stupid line
i make the inside of the tab the same height as the whole div [ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hl1o] [ div=height:300px;margin:auto;center;]f[/div][/tab][ tab=h1lo][ div=height:300px;margin:auto;center;]fo[/div][/tab] [tab=hll0][ div=height:300px;margin:auto;center;]fg[/div][/tab][/tabs][/div][ div=height:0px;][ div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][ size=20px][ b][ font=Arial][ color=black][ color=transparent]////\\[/color]some[ color=transparent]///\\/[/color]some[ color=transparent]////\\/[/color]some[/color][/font][/b][/size][/div][/div]

• hl1o
• h1lo
• hll0

• f
• fo
• fg

////\\some///\\/some////\\/some

 

[cherub.]

A BLESSING

 

[pasta]

TUTORIAL 002 - POSITIONING​

in divs there are ways to get the image/textbox etc to a certain place. to do this, we use left, right, top, bottom. i usually use top and left, so that's what i'm going to talk about. for both of these commands, you can use px or %. you can also use a negative sign. for instance, when using a negative number with the top command, it will make the div go up. no negative will make the div go down. same with left. negative goes to the left, no negative goes to the right.
left:26% left:-26%
note : px is much more precise than %.
top:-100px top:100px
this will not work if you don't have either "position:relative" or "position:absolute"
i use position:relative most of the time.
example: {making img go to the right & up}

[div=width:130px;height:130px;background:url('https://78.media.tumblr.com/3946c3159258bff2527a0f89df86b20d/tumblr_orj99cFVDO1vigciro1_400.gif');background-size:100%;margin:auto;center;position:relative;left:220px;top:-100px;][/div]

 

[pasta]

TUTORIAL 003 BORDER RADIUS​

thought tutorials would be lame but i was wrong.
this is very simple. almost everyone knows how to do it!!
normal div image:
[div=width:130px;height:130px;background:url('https://pbs.twimg.com/media/CkrhDqtXEAABkr_.jpg');background-size:100%;margin:auto;center;][/div]

now you add a border
[div=width:130px;height:130px;background:url('https://pbs.twimg.com/media/CkrhDqtXEAABkr_.jpg');background-size:100%;margin:auto;center;border:5px solid #ddcccc;][/div]

now the radius
note : you can either use px or %. px is probably better
border-radius:70px
[div=width:130px;height:130px;background:url('https://pbs.twimg.com/media/CkrhDqtXEAABkr_.jpg');background-size:100%;margin:auto;center;border:5px solid #ddcccc;border-radius:70px;][/div]

now now, that's the border-radius everyone knows but you're also able to decide which corners get the radius. we're going to round the top right and the bottom left
take div from step 2 and place this into the code:
border-top-right-radius:50px;border-bottom-left-radius:50px
[div=width:130px;height:130px;background:url('https://pbs.twimg.com/media/CkrhDqtXEAABkr_.jpg');background-size:100%;margin:auto;center;border:5px solid #ddcccc;border-top-right-radius:50px;border-bottom-left-radius:50px;][/div]

 

[pasta]

TUTORIAL 004 OPACITY​

start with a normal background. i'll be using an image~
[div=background:url('https://pbs.twimg.com/media/CTvfLdPUEAAGypW.jpg');backgound-size:100%;margin:auto;center;height:350px;width:350px;][/div]

creating the opacity div. there are 2 ways to do this. one way with translucent text and one opaque text. let's do the translucent text first.

so pick out the height, width, and background. you can also center the div if you want. (fill it out if you want ofc)
[div=height:20px;width:65px;background:black;margin:auto;center;][/div]

pretty​

ok now to the opacity
opacity:0.6
[div=height:20px;width:65px;background:black;margin:auto;center;opacity:0.6;][/div]

pretty​

add it to the img/textbox
no need to show the code because it's simple.

pretty​

onto the opaque text!!! (my preferred version tbh)
background: rgba(0, 0, 0, 0.6)
the 0.6 is what makes the div translucent, you can easily convert whatever color you pick to rgba. you can use google for that. just but in #cccccc and the rgba will show up for that.

[div=height:20px;width:65px;margin:auto;center;background: rgba(0, 0, 0, 0.6);][/div]

pretty​

now combine the img/text box with the div~~~
again no need to show the code

pretty​

 

[arctic]

TUTORIAL 001 - DIV TABS
I DON'T RECOMMEND DOING THIS CODE IF YOU DON'T HAVE ANY EXPERIENCE WITH DIVS​

now now, this is kind of basic but a lot of people have been asking how to make tabs.
step one: making the tabs
normal tab code

• hello
• h3llo
• hell0

• ff
• fo
• fg

put it into a div:
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hello]ff[/tab][ tab=h3llo]fo[/tab][ tab=hell0]fg[/tab][/tabs][/div]

• hello
• h3llo
• hell0

• ff
• fo
• fg

cover up the tabs:
note: the div covering the tabs should be long enough to cover the first line
pointer-events:none - makes it clickable
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hello]ff[/tab][ tab=h3llo]fo[/tab][ tab=hell0]fg[/tab][/tabs][/div]

[ div=height:50px;background:white;position:relative;margin:auto;top:-300px;pointer-events:none;]

• hello
• h3llo
• hell0

• ff
• fo
• fg

customizing the div:
you can add more divs over the tabs as long as they have pointer-events:none
im just going to keep it simple and just use words
[ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hello]ff[/tab][ tab=h3llo]fo[/tab][ tab=hell0]fg[/tab][/tabs][/div][ div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][ size=20px][ b][ font=Arial][ color=black][ color=transparent]////\\[/color]some[ color=transparent]///\\/[/color]some[ color=transparent]////\\/[/color]some[/color][/font][/b][/size][/div]

• hello
• h3llo
• hell0

• ff
• fo
• fg

////\\some///\\/some////\\/some

getting rid of that stupid line
i make the inside of the tab the same height as the whole div [ div=width:300px;height:300px;margin:auto;center;background:white;][ tabs][ tab=hello] [ div=height:300px;margin:auto;center;]f[/div][/tab][ tab=h3llo][ div=height:300px;margin:auto;center;]fo[/div][/tab] [tab=hell0][ div=height:300px;margin:auto;center;]fg[/div][/tab][/tabs][/div][ div=height:0px;][ div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][ size=20px][ b][ font=Arial][ color=black][ color=transparent]////\\[/color]some[ color=transparent]///\\/[/color]some[ color=transparent]////\\/[/color]some[/color][/font][/b][/size][/div][/div]

• hello
• h3llo
• hell0

• f
• fo
• fg

////\\some///\\/some////\\/some

you are a gOD

 

[cherub.]

i have a questionnnn
how do you make tabs vertical
and not horizontal?

 

[pasta]

i have a questionnnn
how do you make tabs vertical
and not horizontal?

i may have to do a tutorial for that since it's manipulating the info the inside of the tabs. it's a little hard to explain, but maybe i'll make it when i have the time.

 

[cherub.]

oh alrighty!

 

[youngkyun]

tabs with fa?

 

[Lyro]

tabs with fa?

The fa tab vulnerability was patched. It is no longer possible. However, a similar effect can be achieved with the a and goto tags.

I would suggest waiting until Friday's update, though.

 

[youngkyun]

The fa tab vulnerability was patched. It is no longer possible. However, a similar effect can be achieved with the a and goto tags.

I would suggest waiting until Friday's update, though.

Alright thanks.

 

[pasta]

The fa tab vulnerability was patched. It is no longer possible. However, a similar effect can be achieved with the a and goto tags.

I would suggest waiting until Friday's update, though.

i believe she was referring to putting fa icons onto tabs rather than fa links.

 

[MissAn0nymus]

hi, I'm new

 

[pasta]

TUTORIAL 005 ROTATING​

ignore my disappearance... i've been posting on this thread all the time. ok, fine, it's been awhile but i've come across something i use to use. it's rotating a div, which is very simple.

so, i'm going to use a div img for this.
[div=height:180px;width:240px;margin:auto;center;background:url('https://78.media.tumblr.com/057db9749eae3cde0c9a818d6bd82bec/tumblr_p4x8ctnoX51vjupp8o3_400.gif');background-size:100%;][/div]

alright, you just have to add: transform:rotate(180deg);
the number is changeable. this will just flip the img upside down. height becomes width & width becomes height if that makes sense. mess around the number until you get your desired rotation.
[div=height:180px;width:240px;margin:auto;center;background:url('https://78.media.tumblr.com/057db9749eae3cde0c9a818d6bd82bec/tumblr_p4x8ctnoX51vjupp8o3_400.gif');background-size:100%;transform:rotate(180deg);][/div]

 

[pasta]

little things that don't really need a tutorial

001 line-height:0px - line height decides how far apart/close you want the lines to be.
002 text-shadow: 0px 0px 0px - this allows you to make your words '3D' and the last px can make it smokey.
003 box-shadow: 0px 0px 0px - it's the same but it's for text boxes.
004 text-transform:uppercase - makes the text all uppercase.
005 text-align: justify - makes the text jusitfy. you can also use center and all that jazz.
006 letter-spacing:0px - let's you decide how much space you want between your words.
007 background:linear-gradient(to right,#f1f1f1, #ffd7ca, #f1f1f1) - makes the background gradient. you can change the colors ofc.

i'll be adding more to this ofc.

 

[pasta]

Okay, I really want to make more tutorials but I can think of any? Does anyone need anything?

Note: this is div tutorials

 

[youngkyun]

Okay, I really want to make more tutorials but I can think of any? Does anyone need anything?

Note: this is div tutorials

music links?

 

[pasta]

music links?

as in soundcloud? like so you click them and music plays?

 

[youngkyun]

as in soundcloud? like so you click them and music plays?

ye isnt that divs lmao

 

[pasta]

ye isnt that divs lmao

yeah it's covering up w/ divs and stuff
coOL i'll work on it

 

[pasta]

TUTORIAL 006 Soundcloud​

requested by youngkyun

make a div box~
[div=height:25px;width:100px;background:#666;][/div]

okay surround your song by the div. it's needs to be from sound cloud.
[div=height:25px;width:100px;background:#666;][media=soundcloud]https://soundcloud.com/slayer_op/pxzvc-bad-idea-ft-shiloh-dynasty-extended[/media][/div]

okay, you need to make the song opacity 0. you have to use margin-left to get the play button where you want it to be (basically so you can add the fake play button in).
here: [div=opacity:0;margin-left:-30px;][/div]
[div=height:25px;width:100px;background:#666;][div=opacity:0;margin-left:-25px;][media=soundcloud]https://soundcloud.com/slayer_op/pxzvc-bad-idea-ft-shiloh-dynasty-extended[/media][/div][/div]

now you just have to add in the fake play button or some quotes~ you do need to use margin-left and margin-top to position the quote/play button
[div=height:25px;width:100px;background:#666;][div=opacity:0;margin-left:-25px;][media=soundcloud]https://soundcloud.com/slayer_op/pxzvc-bad-idea-ft-shiloh-dynasty-extended[/media][/div][div=margin-left:5px;margin-top:-150px;color:#fff;font-size:12px;font-family:Arial][fa]fa-play[/fa] bad idea[/div][/div]

bad idea

press the play button and voila~!

edit: i don't believe this works anymore unfortunately :[

 

[HannaTheHippy]

I'm like super new to BBC coding whozewhatsitwhatever, so this is gonna be a really stupid question.

im so new to coding I figured out how to use the accordion feature and got excited

Anyways, I was wondering the code for your second post, with the clickable horizontal tabs? I'm almost 99% sure its like some simple thread that I missed while looking, but I figured I'd ask.

Thanks!

hopefully its not too dumb of a question

pasta

 

[pasta]

I'm like super new to BBC coding whozewhatsitwhatever, so this is gonna be a really stupid question.

im so new to coding I figured out how to use the accordion feature and got excited

Anyways, I was wondering the code for your second post, with the clickable horizontal tabs? I'm almost 99% sure its like some simple thread that I missed while looking, but I figured I'd ask.

Thanks!

hopefully its not too dumb of a question

pasta

aha, it was just the text above it. i think you're referring to need the code? i put spaces between the brackets because it was before i started using the plain tag.

[div=width:300px;height:300px;margin:auto;center;background:white;][tabs][tab=hl1o][div=height:300px;margin:auto;center;]f[/div][/tab][tab=h1lo][div=height:300px;margin:auto;center;]fo[/div][/tab][tab=hll0][div=height:300px;margin:auto;center;]fg[/div][/tab][/tabs][/div][div=height:0px;][div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][size=20px][b][font=Arial][color=black][color=transparent]////\\[/color]some[color=transparent]///\\/[/color]some[color=transparent]////\\/[/color]some[/color][/font][/b][/size][/div][/div]