TUTORIAL CODING HELL

Status
Not open for further replies.

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
THE PROPERTIES
Note that not all properties are listed here, just the ones frequently used in this tutorial.

PART 1. BASE

WIDTH   sets the width of an element

width: value;
e.g. width: 100px;


HEIGHT   sets the height of an element

height: value;
e.g. height: 100px;


MARGIN   sets the distance between the element and other elements

margin: value;
e.g. margin: 100px;


+ MARGIN AUTO   centers an element

margin: auto;


+ MARGIN TRBL (Top Right Bottom Left)   sets the margin of specific sides

margin: TRBL;
e.g. margin: 3px 10px 5px 4px;
e.g. margin-top: 10px;


PADDING   sets the distance between the element and the border

padding: value;
e.g. padding: 10px;


+ PADDING TRBL (Top Right Bottom Left)   sets the padding of specific sides

padding: TRBL;
e.g. padding: 3px 10px 4px 4px;
e.g. padding-top: 10px;


PART 2. BACKGROUND

BACKGROUND COLOR   sets the background color of an element

background-color: name|hex;
e.g. background-color: black;
e.g. background-color: #000000;


BACKGROUND IMAGE   sets an image as the background of an element

background: url(url here);


BACKGROUND REPEAT   sets if/how a background image should be repeated

background-repeat: repeat-x|repeat-y|no-repeat;

Repeat-x repeats the image horizontally
Repeat-y repeats the image vertically


BACKGROUND POSITIONING   is used in conjunction with the background: url property, which is responsible for setting the image. The first value in the code below specifies the horizontal position whereas the second value specifies the vertical position of the background image used.

background-position: value value;
e.g. background-position: 0% 0%;


BACKGROUND SIZE   sets the dimensions of the background image

background-size: value-width value-height|cover;
e.g. background-size: 400px 200px;
e.g. background-size: 100% 50%;


PART 3. TEXT


COLOR   sets the color of the text

color: name|hex;
e.g. color: black;
e.g. color: #000000;


FONT FAMILY   specifies the font family for a selected text

font-family: fontname;
e.g. font-family: Times;


FONT SIZE   specifies the font size for a selected text

font-size: value;
e.g. font-size: 12px;
e.g. font-size: 12em;


LINE HEIGHT   specifies the distance between lines

line-height: value;
e.g. line-height: 2em;


LETTER SPACING   increases or decreases the space between characters

letter-spacing value;
e.g. letter-spacing: 2px;
e.g. letter-spacing: -2px;


WORD SPACING  increases or decreases the space between words in a text

word-spacing: value;
e.g. word-spacing: 10px;
e.g. word-spacing: -10px;


TEXT ALIGN   aligns the element

text-align: left|right|center|justify;


TEXT INDENT   adds indentation to the first line in a text block

text-indent: value;
e.g. text-indent: 20px;


TEXT SHADOW   adds shadow to the text

text-shadow: h-shadow v-shadow blur-radius color;
e.g. text-shadow: 2px 3px 3px #000000;


TEXT TRANSFORM   controls the capitalization of the text

text-transform: uppercase|lowercase|capitalize;


TEXT OVERFLOW   specifies how overflowed content should be displayed on the screen

text-overflow: clipped|ellipsis;

Clipped - overflowed content is clipped from view
Ellipsis - overflowed content is represented by an ellipsis


PART 4. BORDER


BORDER   sets the style, color, and thickness of the edge or boundary of an element

border: value style color;
e.g. border: 1px dotted #000000;


+ BORDER TRBL (Top Right Bottom Left)   sets the border properties of specific sides

border-top: value style color;
border-right: value style color;
border-bottom: value style color;
border-left: value style color;


+ BORDER STYLE TRBL (Top Right Bottom Left)   sets the border properties of specific sides

border-style: style-top style-right style-bottom style-left;
e.g. border-style: dotted solid dashed double;


Border styles are limited to the following: solid, dashed, double, ridge, groove, inset, and outset


BORDER RADIUS   sets the roundness of border corners

border-radius: value;
border-radius: top-left top-right bottom-right bottom-left;
e.g. border-radius: 20px;
e.g. border-radius: 15px 50px 30px 5px;
e.g. border-top-right-radius: 20px;


PART 5. OVERFLOW


OVERFLOW X   specifies what happens if content overflows an element box horizontally

overflow-x: scroll|hidden;
e.g. overflow-x: scroll;


OVERFLOW Y   specifies what happens if content overflows an element box vertically

overflow-y: scroll|hidden;
e.g. overflow-y: scroll;

Hidden - hides the overflowing content
Scroll - displays overflowing text along a particular direction


PART 6. OPACITY


OPACITY   sets the transparency of an element, with 0.0 being fully transparent and 1.0 being fully opaque

opacity: value;
e.g. opacity: 0.5;


PART 7. ROTATE


TRANSFORM ROTATE   rotates an element

transform: rotate(#deg);
e.g. transform: rotate(7deg);
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
HOW TO USE DIVS
THE BASICS

Before diving into this tutorial, I suggest fiddling with the more basic ones found here so as to get a good grasp of how BBCODES work here in Iwaku.

Now that that's out of the way, the first thing you would want to know is the div code: [div][/div] It's what we're mainly going to use in this thread. Without it, we can't really do much. The first [div] is the opening tag, whereas the last [/div] is the closing tag. These two come as a pair, always. The opening div specifies a section and how it's styled, while the closing tag specifies where that specific section ends.

Of course, nothing will happen when used on its own. This is where the properties come in.

To use properties, add an equal (=) sign in the opening div, followed by the property and its value. For example:

Code:
[div=width: 100px;][/div]
The above code specifies the width of an area. You can append more than one property to the opening div tag:

Code:
[div=width: 100px; background: white;][/div]
The above code now specifies the width of an area and its background.

Remember to always end the specified value with a semicolon (;)

You can also create a div within a div. Just keep in mind that the inner div (otherwise known as the child) inherits the values set in the outer div (also known as the parent).

Code:
[div=width: 100px; background: white; margin: auto;][div=height: 100px;][/div][/div]
In the example above, the child will have a height of 100px and inherit the width and background of the parent div. The entire code should appear centered, as specified by the margin.

This is the final output:



It sounds daunting, but bear with me. You can find here a list of properties that work in Iwaku and what they do. Trust me, you don't need to memorize them. It'll come naturally with practice.
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
DIV BOXES
HOW TO CREATE A SIMPLE LAYOUT

In this tutorial, I'm going to teach you how to create a simple div box which you can easily tweak to your heart's content and use for your character sheets or IC posts.

So, as always, we are going to be using the [div][/div] tag. We're going to start laying out the foundations first, namely the width, height, and background. I usually like my div boxes to be between 600px or 800px in width, but you can tweak the value to your discretion. I'll be using a simple white background for this, but feel free to use a hex code if you want a specific color. Or if there's a particular pattern or picture you want to use as a background, change the background: white; code to background:url(image url here);.

Code:
[div=width: 700px; background: white;][div=height: 500px;][/div][/div]
You can skip the height if you want your div box to adjust accordingly depending on the length of your text. This is the output so far:



The box isn't centered, so let's fix that by appending the margin: auto; property to the first div tag.

Code:
[div=width: 700px; margin: auto; background: white;][div=height: 500px;][/div][/div]


Now, let's add some text inside.

Code:
[div=width: 700px; margin: auto; background: white;][div=height: 500px;]Hello world.[/div][/div]
Hello world.


The text is a little too close to the edge. If you're viewing this on the Midnight Theme, the text may also appear as white on a white background. That's because it uses the default theme color. Let's fix those two things.

First, let's append the padding property to the first div tag, to put some space between the content and the borders. Next, we'll be changing the font color to blue. You can also use a hex code for the font color.

Code:
[div=width: 700px; margin: auto; background: white; color: blue;][div=height: 500px; padding: 20px;]Hello world.[/div][/div]
Hello world.


Let's see how many "Hello World"s we can fit in this box.

Code:
[div=width: 700px; margin: auto; background: white; color: blue;][div=height: 500px; padding: 20px;]Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world.[/div][/div]
Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world.


Houston, we have a problem. The text seems to be overflowing because of the div box's limited height. Good thing we have the overflow property to fix that right up. Append overflow-y: scroll; next to the height to add a scrollbar.

Code:
[div=width: 700px; margin: auto; background: white; color: blue;][div=height: 500px; overflow-y: scroll; padding: 20px;]Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world.[/div][/div]
Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world.
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
GOOGLE FONTS
AND HOW TO USE THEM

Google Fonts are an easy way to spice up your posts. Unfortunately, this feature is only available for Donating Members and Staff Members, so if you want to use them, you'll have to cough up a dollar or more in exchange for a sweet, sweet account upgrade. (Update 3/17 I believe that after the recent update, google fonts can now be used by anyone for so long as one Donor in a thread uses it in their post.)

Now, keep in mind that not all Google Fonts will work on Iwaku. Most of them do, but not all. You'll have to do a bit of testing yourself to see what works and what doesn't. The easiest method to incorporate Google Fonts to your post is by using the [FONT][/FONT] BBCODE. One of my favorite Google fonts would have to be Alfa Slab One, so let's give that a shot in the following example:

Code:
[FONT=Alfa Slab One]This is my text in fancy font.[/FONT]
This is my text in fancy font.​

This should suffice for many of you. But to coders who want to incorporate Google Fonts into their div tags, read on.

There are lots of benefits when specifying your font in the div tag instead of the simpler FONT bbcode. One benefit is that you don't risk your code breaking on you or duplicating itself.

To do this, the first thing you've got to remember is that the Google Font must be specified at least once, in plain BBCODE format, anywhere in the webpage for it to work properly in a div. That means you'll have to enter the font twice: both in the [FONT][/FONT] code and the div tag itself.

Code:
[FONT=Alfa Slab One]Alfa Slab One[/FONT]
[div=font-family: Alfa Slab One;]Now that the font is specified in the above bbcode, this should work properly now.[/div]
Alfa Slab One​
Now that the font is specified in the above bbcode, this should work properly now.


What I usually do is I specify all the fonts that I'll be using at the very beginning of the post, then hide it with the [div=display: none;][/div] code. That way, the finicky font bbcode is out of the way and I can do my coding in divs in peace.

Code:
[div=display: none;][FONT=Alfa Slab One]Alfa Slab One[/FONT][/div]
[div=font-family: Alfa Slab One;]Now that the font is specified in the hidden bbcode above, this should work properly now.[/div]
Alfa Slab One

Now that the font is specified in the hidden bbcode above, this should work properly now.
 
Last edited:
  • Love
Reactions: darkflames13

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
THE OVERFLOW PROPERTY
SCROLLS AND MORE
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
HIDING YOUR CONTENT
USING THE DISPLAY: NONE PROPERTY

So, for whatever reason you want to hide the content of your post from prying eyes. Well, look no further! What you're looking for is the display: none; property. Use that, and no one but you should be able to see the content of your post.

Unless people use the 'reply' feature to retrieve your code, but nobody's going to know you're hiding something unless you tell them right?

Code:
[div=display: none;]Let's hide this text.[/div]
Output:
Let's hide this text.


Well, of course you won't see the output, silly. It's hidden!
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
ROTATION
HOW TO ROTATE THINGS


Let's say you want to rotate this image:



You're going to need the transform: rotate(#deg); property to achieve your desired result. Let's use 7 degrees for the purposes of this tutorial. This should tilt our image ever so slightly.



Use a negative value to tilt your image to the left. You can also do this for div boxes and text.

This text is upside down.


Code said:
[div=transform: rotate(180deg);]This text is upside down.[/div]
There's an easier way to rotate text, however. For instance, you want to write some text in Japanese (for aesthetic purposes or whatever) and you want the text to show up vertically. The easiest way to achieve this is through the writing-mode property. Simply append writing-mode: vertical-rl; to the div containing your text, like so:

日本語
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
BORDERS
A TUTORIAL ON BORDERS.
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
FONT-AWESOME
A TUTORIAL ON FA ICONS
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
MODIFIABLE AUDIO PLAYER
HOW TO MAKE AUDIO PLAYERS OUT OF YOUTUBE VIDEOS


The latest update gave us a shiny new audio player. Unfortunately, it only plays mp3 files sourced from the internet, which limits our options. YouTube, on the other hand, gives us a variety of music to choose from. Fortunately, we can still embed YouTube videos and fiddle around with some coding to create a functional mp3 player of our own.

Here's how the final product should look like:

[ STILL ALIVE ] MT. EDEN ​


[ STILL ALIVE ] MT. EDEN


Here's how you do it:
Code said:
[div=width: 300px; height: 33px; overflow: hidden; margin: auto;][div=width: 58px; z-index: 1;][MEDIA=youtube]FDYIdBZUl2Y[/MEDIA][/div][div=padding: 5px; height: 38px; background: rgb(27, 120, 101); z-index: 2; pointer-events: none; top: -35px; color: white;][FA]fa-play-circle fa-2x[/FA] [FA]fa-pause-circle fa-2x[/FA][SUP][B] [ STILL ALIVE ] MT. EDEN [/B][/SUP][/div][/div]
What we need to do, first and foremost, is specify a width and a height for our mp3 player. margin: auto; centers our mp3 player. z-index is responsible for stacking our div boxes on top of one another. The value of the z-index is the stack order. For example, if we have two boxes with a corresponding value of one and two, two would be stacked above one.

What we're going to do is stack a dummy font-awesome icon above our YouTube video to give the illusion that it has a play and pause button.



Then, we append pointer-events: none; to the font-awesome icons so that we can click on the YouTube video underneath the fake buttons.

Add border-radius: 20px; to the first div tag to get rounded corners.
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
TWO ADJACENT DIV BOXES
HOW TO USE FLEXBOXES: PART 1

Test
Test


So let's say you want to put two boxes side by side. You can easily achieve this with flexboxes.

First, specify the width of the area that you want your flexboxes to cover. I normally default to 700px, so let's go with that. If you want to center your code, append margin: auto; to the same div.

Code said:
[div=width: 700px; margin: auto;][/div]
Now, to add the display: flex property. Append flex-wrap: wrap for mobile friendliness. This will make it so that the second flexbox goes to the next line when the viewport shrinks.

Code said:
[div=width: 700px; margin: auto;][div=display: flex; flex-wrap: wrap;][/div][/div]
Now to specify the width of each flexbox. If you want them both to have the same width, simply append flex: 1 for each. If you want them to have different sizes, simply append flex: 1 for the intended smaller box, and flex: 1.5 for the intended bigger box. ".5" means it will be half as big as the other box. If you specify the flex width to be 2, it will be twice as big as the other box, and so on.

For mobile friendliness, append min-width: 250px !important. As the name "minimum width" suggests, this will prevent the box from shrinking any further than the specified width when viewed from mobile.

Now, specify the height of that specific flex box. Add a background. Finally, should you want your boxes to be spaced apart, add a 5px margin on each end (left and right margin). It should look like this:

Code said:
[div=width: 700px; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 250px !important; height: 235px; background: blue; margin: 0 5px 0 5px;]Test[/div][/div][/div]
Do the same for the second flexbox.

Code said:
[div=width: 700px; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 250px !important; height: 235px; background: blue; margin: 0 5px 0 5px;]test[/div][div=flex: 1; min-width: 250px !important; height: 235px; background: red; margin: 0 5px 0 5px;]Test[/div][/div][/div]
And you're done!
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
TABS SIMPLIFIED
PART 1


First, let's specify a width of 500px.

[TABS=500][/TABS]

But that can't stand on its own. It kind of defeats the purpose of tabs. Let's add three slides.

Code said:
[TABS=500]
[SLIDE=1]This is Slide 1

Hello World![/SLIDE]
[SLIDE=2]This is Slide 2

Hello World![/SLIDE]
[SLIDE=3]This is Slide 3

Hello World![/SLIDE]
[/TABS]
  • This is Slide 1

    Hello World!
  • This is Slide 2

    Hello World!
  • This is Slide 3

    Hello World!


Now we want to get rid of the Slide Headers. They're clunky and it's hard to customize them (i.e. you can't change the font, etc.). To do that, first let's flip this entire thing over using the transform: scaley(-1); property.

Code said:
[div=transform: scaley(-1);][TABS=500]
[SLIDE=1]This is Slide 1

Hello World![/SLIDE]
[SLIDE=2]This is Slide 2

Hello World![/SLIDE]
[SLIDE=3]This is Slide 3

Hello World![/SLIDE]
[/TABS][/div]
  • This is Slide 1

    Hello World!
  • This is Slide 2

    Hello World!
  • This is Slide 3

    Hello World!


Now let's open a div tag in the other slides and use the transform property so that everything is readable again.

Code said:
[div=transform: scaley(-1);][TABS=500]
[SLIDE=1][div=transform: scaley(-1);]This is Slide 1

Hello World![/div][/SLIDE]
[SLIDE=2][div=transform: scaley(-1);]This is Slide 2

Hello World![/div][/SLIDE]
[SLIDE=3][div=transform: scaley(-1);]This is Slide 3

Hello World![/div][/SLIDE]
[/TABS][/div]
  • This is Slide 1

    Hello World!
  • This is Slide 2

    Hello World!
  • This is Slide 3

    Hello World!


Now let's open a new div tag. Using height and overflow-y: hidden;, we can make it so that the visible information cuts off exactly where we want it.

Code said:
[div=
height: 70px;
overflow-y: hidden;][div=transform: scaley(-1);][TABS=500]
[SLIDE=1][div=transform: scaley(-1);]This is Slide 1

Hello World![/div][/SLIDE]
[SLIDE=2][div=transform: scaley(-1);]This is Slide 2

Hello World![div=transform: scaley(-1);][/div][/div][/SLIDE][div=transform: scaley(-1);][div=transform: scaley(-1);]
[SLIDE=3]This is Slide 3

Hello World![/SLIDE]
[/div][/div][/TABS][div=transform: scaley(-1);][div=transform: scaley(-1);][/div][/div][/div][/div]
  • This is Slide 1

    Hello World!
  • This is Slide 2

    Hello World!
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
TABS SIMPLIFIED
PART 2

Now, let's make new tab links so that we can navigate between the three slides. These new tab links will also allow us to customize them.

Code said:
[div=
height: 40px;
overflow-y: hidden;][div=transform: scaley(-1);][TABS=500]
[SLIDE=1][div=transform: scaley(-1);]This is Slide 1 | {tab=2}Go to 2!{/tab} | {tab=3}Go to 3!{/tab}[/div][/SLIDE]
[SLIDE=2][div=transform: scaley(-1);]This is Slide 2 | {tab=1}Go to 1!{/tab} | {tab=3}Go to 3!{/tab}[/div][/SLIDE]
[SLIDE=3][div=transform: scaley(-1);]This is Slide 3 | {tab=1}Go to 1!{/tab} | {tab=2}Go to 2!{/tab}[/div][/SLIDE][/TABS][/div][/div]
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
TABS SIMPLIFIED
PART 3

Now we can change the font or add simple backgrounds. As seen in the first slide:

Code said:
[div=
height: 70px;
overflow-y: hidden;][div=transform: scaley(-1);][TABS=500]
[SLIDE=1][div=transform: scaley(-1);
font-family: Times New Roman;][BGCOLOR=blue]This is Slide 1 [/BGCOLOR]|[BGCOLOR=red] {tab=2}Go to 2!{/tab} [/BGCOLOR]|[BGCOLOR=green] {tab=3}Go to 3!{/tab}[/BGCOLOR]

Hello World![/div][/SLIDE]
[SLIDE=2][div=transform: scaley(-1);]This is Slide 2 | {tab=1}Go to 1!{/tab} | {tab=3}Go to 3!{/tab}

Hello World![/div][/SLIDE]
[SLIDE=3][div=transform: scaley(-1);]This is Slide 3 | {tab=1}Go to 1!{/tab} | {tab=2}Go to 2!{/tab}

Hello World![/div][/SLIDE][/TABS][/div][/div]
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
RESERVED
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
RESERVED
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
RESERVED.
 
Last edited:

Adrian

Lean Mean Role-playing Machine
Original poster
Posting Speed
1-3 posts per day, 1-3 posts per week, One post per week
Writing Levels
Give-No-Fucks
Preferred Character Gender
No Preferences
Genres
High Fantasy, Low Fantasy, Sci-Fi, Cyberpunk, Horror, LGBT+, Steampunk, Comedy, Post-apocalyptic, 80s, Thriller, Modern, Romance, Tragedy, Drama, Space Opera, Political Intrigue, Coming of Age
reserved
 
Last edited:
Status
Not open for further replies.