TUTORIAL Coding Tutorial + Cheat Sheet

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia
aouR7hv.png

Includes Cheat Sheet
Please do not post in this thread.

This is meant to be read from top to bottom, but you are free to skip to sections that you feel are most relevant to you. I have also included external resources in this post (after internal navigation).

!IMPORTANT NOTE: It's good practice to also write a codeless version of your content for accessibility reasons. This is something you could place in [spoiler][/spoiler] tags above your code. Keep in mind that some people could be using screen readers, and bbcodes could make it difficult for them to read your posts.

INTERNAL NAVIGATION
- Introduction | How to use this guide, what is bbcode, disclaimer
- Cheat Sheet | Commonly used properties
- RTE & Set Up | How to use the Rich Text Editor
- Syntax | How to use [div][/div] and create a simple box
- Commenting | How to add comments
- Colors | How to add colors
- CSS Units | How to use px and %
- CSS Units (part II) | How to use other relative units
- Typography | How to style text, how to code text that automatically resizes
- Box Model | How to use margin, padding, border, border-radius, and box-shadow
- Outline-Offset | How to offset a border
- Box-sizing | How to change the box-sizing
- Block, Inline, and Inline-Block | How to place boxes side-by-side
- Display: Hidden, Visibility: None, and Opacity: 0 | How to hide boxes/change opacity
- Background Images | How to add background images
- Gradients | How to add gradients
- Combining Background Images & Gradients
- Overflow | How to add, hide, or customize scrollbars
- Float & Clear | How to make text wrap around image
- Position | How to move/displace elements
- Z-Index | How to place elements on top or below other elements
- Transform | How to translate, rotate, scale, skew
- Animation | How to animate elements
- Cursors | How to change cursors and use custom cursors
- FontAwesome Icons | How to add icons
- Columns | How to create columns and mobile-friendly boxes
- Flexbox | How to make responsive (mobile-friendly) boxes
- MP3 Players | How to create a functional audio player, how to use pointer-events
- Customized Accordions | How to customize accordions
- Customized Sliders | How to customize sliders
- Customized Tabs | How to customize tabs
- Common Mistakes | Common coding mistakes

Want me to write a coding guide on something specific that hasn't been covered? PM me.

EXTERNAL RESOURCES
/* CHEAT SHEETS */
- Iwaku BBCode Cheat Sheet
- CSS Cheat Sheet
- Font Awesome Cheat Sheet

/* COLORS, IMAGES, FONTS */
- Color Picker
- Free Photos & Videos
- Google Fonts

/* GENERATORS */
- Lorem Ipsum (Placeholder Text) Generator
- Placeholder Image Generator
- Seamless Pattern Generator
- Color Palette Generator

/* TUTORIALS */
- w3schools CSS Tutorial

/* OTHER RESOURCES */
- Browser Support Check
- Stack Overflow
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Position, Top, Right, Bottom, and Left

In Iwaku, the default position is relative. We cannot use or override this with any of the other values. Hence, we are not going to discuss position very much; rather, we are going to focus on how to move our elements using the top, right, bottom, and left properties.

Let's create an element with a red background.

[div=
width: 100px;
height: 100px;
background: red;
][/div]

Output:


Now, let's try moving our element to the left.

Normally, we are supposed to use position: relative and the other properties together. But like I mentioned before, Iwaku's default setting makes defining position: relative in our code unnecessary. Let's go ahead and define our left property.

In my demonstration, I'm going to use -20px for the left property.

[div=
width: 100px;
height: 100px;
background: red;
left: -20px;][/div]

Output:


By using the negative (-) value, we are essentially pulling our element from the specified side (in this case, left). If we used a positive (+) value instead, we would be pushing our element from the specified side. This value is always relative to the element's original position.

If we used right: 20px instead, it will have the same effect as left: -20px Here's the proof in case you don't believe me:



We can use top and bottom in the same way.


# Featured Properties

position: value;
top: value;
right: value;
bottom: value;
left: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Z-Index

Now that we know how to reposition our elements, let's see how we can determine their layer order.

First, let's do a little set-up. This time, we will be making three boxes and repositioning them so that they are overlapping each other. By default, the latest coded element will overlap the ones before it.

[div=
width: 100px;
height: 100px;
background: blue;][/div][div=
width: 100px;
height: 100px;
background: red;
top: -20px;
right: -20px;
][/div][div=
width: 100px;
height: 100px;
background: green;
top: -40px;
right: -40px;
][/div]

Output:


Now, what I want to do is reverse the layer order. I want the blue box to overlap the red box, and the red box to overlap the green box. z-index will help us achieve this.

z-index lets us define a negative or positive number. The higher the number, the higher it goes in the layer order.

In our case, we have three elements. Our elements have a z-index of 0 by default. Thus, we don't need to specify a z-index for our green box since we want it to be at the very bottom of our hierarchy. Instead, let's specify the order of our other elements:

[div=
width: 100px;
height: 100px;
background: blue;
z-index: 2;][/div][div=
width: 100px;
height: 100px;
background: red;
top: -20px;
right: -20px;
z-index: 1;][/div][div=
width: 100px;
height: 100px;
background: green;
top: -40px;
right: -40px;][/div]

Output:


Z-index is pretty powerful. We can do a lot of fancy stuff with this!


# Featured Properties

top: value;
right: value;
z-index: value;
 

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Transform

In this module, we'll be taking a look at all the things we can do with the transform property. Note that you can use negative values for this property.


> Translate

First is translate, which is another way of moving an element along the x and y-axes. Some argue this is better than position, but I digress. Let's append transform: translate(x,y); into our code.

[div=
width: 100px;
height: 100px;
background: red;
transform: translate(20px,20px);][/div]

Output:



One thing you should remember about the values going forward is that you shouldn't put a space where there isn't one. Otherwise, the code will not be parsed correctly.


> Scale

Next up is scale, which allows us to stretch, invert, and flip our elements.

To stretch our element, let's scale it along the y-axis with a value of 1.5. And yes, we can simply use numbers as our values for this one. Just remember that the default value is 1.

Our syntax will look like this: transform: scaley();

[div=
width: 100px;
height: 100px;
background: red;
color: white;
transform: scaley(1.5);]Text[/div]

Output:

Text


Now let's try to invert our element along the y-axis. To achieve this, we'll be using a negative value.
[div=
width: 100px;
height: 100px;
background: red;
color: white;
transform: scaley(-1);]Test[/div]

Output:

Text


Now let's try to flip our element along the x-axis. This time our syntax will be transform: scalex(); Once again, we'll be using a negative value.

[div=
width: 100px;
height: 100px;
background: red;
color: white;
transform: scalex(-1);]Text[/div]

Output:

Text

Should we want to manipulate our element along the x and y-axes at the same time, we can simply use the shorthand transform: scale();

For example:

[div=
width: 100px;
height: 100px;
background: red;
color: white;
transform: scale(-1,-1);]Text[/div]

Output:

Text



> Rotate

We can also rotate our element using transform: rotate(deg); This time, we'll be using degrees as our value.

In the following example, I'll be rotating my element 10 degrees.

[div=
width: 100px;
height: 100px;
background: red;
transform: rotate(10deg);][/div]

Output:




> Skew

Finally, we have skew: x,y; which will distort our element. Once again, we'll be using degrees to define our values.

[div=
width: 100px;
height: 100px;
background: red;
transform: skew(5deg,5deg);]Test[/div]

Output:

Test



# Featured Properties

transform: translate(x,y);
transform: scalex();
transform: scaley();
transform: scale(x,y);
transform: rotate(deg);
transform: skew(xdeg,ydeg);
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Animation

I had to go digging for this in the site's code, but below are the animations we can use in Iwaku. I haven't checked if there's more, but I'll be sure to update this thread if I find any.








To use these animations, we must append the following syntax to our target element:

animation: name duration timing-function delay iteration-count direction;

  • name tells the browser which animation to use for the target element
  • duration, which can be specified in 's' or seconds, defines the duration of the animation
  • timing-function specifies the speed of the animation, whether it be the same speed all throughout (linear), a slow start (ease in), a slow end (ease out), a slow start and a slow end (ease-in-out), slow-fast-slow (ease), etc.
  • delay, which can be specified in 's' or seconds, defines how long of a wait there should be before the animation begins
  • iteration-count, which can be specified in numbers (1,2,3..) or infinite, defines how many times the animation should be played
  • direction specifies whether the animation is played normally (normal), in reverse (reverse), alternating between normal and reverse (alternate), or alternating between reverse and normal (alternate-reverse)

Let's use the fb_mpn_fade_out animation for our example. Specify the name of the animation you'd like to use and the duration you'd like that animation to play. I'm going to input 2s (2 seconds) for mine:

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s;][/div]

Next, let's add the timing-function. I'm going to be using linear. This is default, so nothing too fancy.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear;][/div]

Next, we can specify a delay for our animation. I'm going to set mine to 0s since I don't want a delay.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 0s;][/div]

Next, we can specify our iteration-count, or how many times we'd like our animation to play. I'm going to set it to infinite, but it is possible to set the value to a specific number.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 0s infinite;][/div]

Finally, we can specify the direction of our element. I'm going to say reverse for mine.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 0s infinite reverse;][/div]

Output:




# Featured Properties

animation: name duration timing-function delay iteration-count direction;
 
Last edited:
  • Like
Reactions: zenith

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Cursors

When you hover over the element below, you may notice that your cursor changes:



This is fairly simple to do. Just use the the cursor: value; syntax, and input the name of the desired cursor. In my example below, I'll be using crosshair.

[div=
width: 100px;
height: 100px;
background: red;
cursor: crosshair;][/div]


You have the option to choose between many different cursors. Here is a list.


> Custom Cursors

You can also use an image as your cursor. However, it won't work if your image is too large. I suggest that you make your image 50x50 or smaller for it to work. This is the syntax:

cursor: url(), auto;

[div=
width: 100px;
height: 100px;
background: red;
cursor: url(https://i.imgur.com/QibQ6y8.png), auto;][/div]

Output:




# Featured Properties

cursor: ();
cursor: url(), auto;
 
Last edited:
  • Like
Reactions: zenith

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

FontAwesome Icons

So, let's say you want to add some icons to your code, just like this:



First, choose an icon you'd like from this list of free icons. Enclose it in [fa][/fa]:

[fa]fa-comment[/fa]


Output:


You can resize the icon using font-size: value;

[div=
font-size: 2.5em;][fa]fa-comment[/fa][/div]

Output:


You can also change the color. It goes like this:

[div=
font-size: 2.5em;
color: red;][fa]fa-comment[/fa][/div]

Output:


That's it!


# Featured Properties

[fa][/fa]
font-size: value;
 

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Columns


As of writing, I don't think I've ever seen anyone discuss columns, which is a shame because it's pretty powerful. With this, you can pretty much achieve a responsive layout without having to use flexbox at all. What's more, it's fairly easy to do!

First, let me show you what this property does in its basic form. Let's say you have a huge amount of text that you want to separate into three columns. All you have to do is enclose your text in [div][/div] tags, and define columns: 3 in your opening div, like so:

[div=
columns: 3;
]Lorem[/div]


That's not quite enough to make it responsive though. So why don't we specify a minimum width? In this example, I'll be using a min-width of 100px. We can simply input our minimum width in the same declaration as our column number:

[div=
columns: 3 100px;
]Lorem[/div]


Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

Try making your browser smaller. Watch these three columns merge once they hit their minimum width.

But wait, we're not done yet! You can also style these columns. Say you want to add a border between them. This can be done by appending the following syntax:

column-rule: width style color;

And yes, these are the same styling values that you would use for regular borders. Check the Cheat Sheet for more styling options (Box > Border).

Now, I'm thinking I want a red border between my columns. I'm going to append a width of 4 pixels, but you can use other lengths in your code.

[div=
columns: 3 100px;
column-rule: 4px double red;
]Lorem[/div]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

I don't like how close they are to each other, but luckily I can easily solve this issue with column-gap: value. We can use lengths as the value. In my example, I'm going to go with 40 pixels so you can see the distinction.

[div=
columns: 3 100px;
column-rule: 4px double red;
column-gap: 40px;
]Lorem[/div]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

By now you may be thinking, this looks a little too plain for your tastes. It's nothing like flexbox, you say. But hold your horses, because it's about to get real. Do note that you may have to read the other guides first before proceeding (namely Color, Box Model, and Background Images).

Alright, with that out of the way: let's say you want to make two adjacent boxes, with the first box holding your character picture, and the other box holding your content. Let's add our columns:

[div=
columns: 250px 2;
][/div]

I'm added a min-width of 250px as I find that it's best for mobile responsiveness.

Next, let's input the actual items that will be going into our two columns: namely, our character image box and content box. We're going to need to specify a height for each of them, and we'll have to nest them inside our existing div tags.

[div=
columns: 250px 2;][div=
/* Character Image */
height: 400px;
][/div][div=
/* Content */
height: 400px;
][/div][/div]

Okay, let's input a background for each of our boxes. In the first box, I'll be using the character image as the background, and in the second box, I'll be using a white background.

[div=
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(
https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
][/div][/div]

Output:


I don't like how it takes up the whole post container, so let's go back to our first div tag, in which we specified the width for our columns. Let's input a width and add margin: auto to center our columns.

[div=
width: 700px;
margin: auto;

columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;][/div][/div]

Output:


Now let's add some text and give it a black font color

[div=
width: 700px;
margin: auto;
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
color: black;
]This is content[/div][/div]

Output:

This is content

Add padding so that our text isn't too close to the edge. Let's also input overflow-y, so we can scroll through our content.

[div=
width: 700px;
margin: auto;
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
color: black;
padding: 20px;
overflow-y: scroll;
]This is content[/div][/div]

Output:

This is content

And that's it! Try resizing your browser.

As always, you can style your columns differently. Feel free to play around with all these codes.


# Featured Properties

columns: column-count min-width;
column-gap: value;
column-rule: width style color;
 
Last edited:
  • Useful
Reactions: Loveless and zenith

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Flexbox

There are many ways to style a flexbox, but I'll keep this one simple so that it'll be easier to follow.

First, I want to illustrate what flexbox actually does. While it is an alternative to displays, floats, and other layout properties, it is a lot better as it makes our design responsive—that is to say, mobile-friendly. Check out these two examples and see how they respond to your browser as you resize it:

With Inline-Block and %:


With Flexbox:


As you can see, flexbox enables us to arrange items easily, and once our viewport shrinks, the second box moves to the next line. Now, the latter isn't anything new and is something you could easily achieve with columns. Personally though? I prefer flexbox as it allows for better control and styling. Now, if you're going for something simple, columns may be your best bet.

So how do we actually make a flexbox? We're going to need two different components: a container and its items. Let's get started with creating our container.

First, we're going to input display: flex; You can add a width for your container, and margin: auto; to center it. However, width and margin are optional. It depends on what design you're going for.

[div=
width: 600px;
margin: auto;
display: flex;
][/div]

Next, let's nest our items. In this example, I'll be using two items. However, you can use as few or as many as you'd like.

Let's give our first nested item a red background and 100px height so we can actually see what we're working with. We're going to do the same for its sibling, except we're going to give that one a blue background.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
][/div][div=
background: blue;
height: 100px;
][/div][/div]

Let's add flex: 1 to our red box and flex: 2 to our blue box.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
flex: 1;
][/div][div=
background: blue;
height: 100px;
flex: 2;
][/div][/div]

flex: 2; is basically making our blue box grow 2x faster than our red box, making it larger. If you make this value 3, it will be 3x as fast. And so on and so forth. If you use a value of 1 for both boxes, however, they will be the same size.

Next, we're going to append min-width: 230px to each of our flexboxes. This stands for minimum width.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;
][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;
][/div][/div]

Output:


Alright. Personally, I don't like how these boxes are sticking too close together, so let's add a gap, shall we? How about a 10px gap? Let's add it to our container.

[div=
width: 600px;
margin: auto;
display: flex;
gap: 10px;
][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;][/div][/div]

Output:


If you try resizing your browser now, you'll notice that the second box doesn't go to the next line. Not yet, anyway. We need one last thing to make this perfectly mobile-friendly, and that's flex-wrap: wrap;

Let's append it to our container once again.

[div=
width: 600px;
margin: auto;
display: flex;
gap: 10px;
flex-wrap: wrap;
][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;][/div][/div]

Output:


flex-wrap is working with our minimum width. As soon as the screen becomes too small to contain our flexboxes at their minimum width, the second box moves to the next line. I find that a 230px-250px of minimum width or each flexbox is best for mobile-viewing.

Now, we also have the option of using flex-wrap: wrap-reverse instead of flex-wrap: wrap. By using this, we are making our red box move to the next line instead.


Try making your browser smaller!

Before we end this section, I want to add that there's actually another way to do this, but it's finicky and very difficult to get right especially if you're a beginner, as it requires the right container value and flex values, and so on and so forth. What I've showed you thus far is the easiest method.

Now, if that's all you wanted to know, you can stop reading here. It should be enough to help you create responsive designs. However, if you'd like to know more about flexboxes and what we can do with them, read on. Just be warned that it may get confusing at times! Flexbox is an advanced topic, so I'd suggest playing around with what I've shown you so far before diving into the gritty details.


> Grow, Shrink, Basis

Earlier, I refrained from dissecting flex: value as there simply wasn't enough space to discuss it in detail. It definitely warrants its own section as there is a lot to say about them, but don't be overwhelmed. They're easy to understand once you get the hang of them. As always, it just takes practice.

The syntax that I used in the previous article is actually a shorthand, flex: grow shrink basis; Once again, I will be using visual aid to demonstrate how it is used. However, do bear in mind this will make a lot more sense if you view it on a desktop, where you can resize your browser to see the effects taking place.

Alright, with that out of the way, let's begin.

flex-basis defines the starting value of our items. It is the base value, the actual width of our flexboxes. You can use lengths, like px, to specify its value.

flex-basis: 100px;
flex-basis: 100px;
flex-basis: 100px;

See that extra space on the right?

flex-grow, makes the element grow according to the container size or window size. It defines how much of the extra space should be distributed among the items. We use numbers to specify its value.

If we set it to 0 (the default value), none of the items will take up the extra space. They will remain at their basis, which is 100px in our example.

So, instead, let's try setting our first item to flex-grow: 1; Watch what happens:

flex-grow: 1;
flex-grow: 0;
flex-grow: 0;

As you can see, it took up all the extra space for itself. Make your browser smaller. Now, slowly drag to make it bigger. See how the red box grows? That's flex-grow doing the work.

Alright, let's set the second item to 2 and see what happens.

flex-grow: 1;
flex-grow: 2;
flex-grow: 0;

Try resizing your browser again. As you can see, the blue box grows twice as fast as the red box.

This time, let's try giving all the boxes a value of 1.

flex-grow: 1;
flex-grow: 1;
flex-grow: 1;

If they all have a value of 1, the space will be distributed equally among all the items.

flex-shrink, on the other hand, makes the items shrink according to the window size. I'm going to change the basis to 300px real quick just so I can better demonstrate to you what it does.

The default value for flex-shrink is 1.

flex-shrink: 1
flex-shrink: 1
flex-shrink: 1

Make your browser smaller. You can see that at 1, they will all shrink at an equal rate and can even become smaller than our basis of 300px.

Let's try setting our red box to a shrink value of 0.

flex-shrink: 0
flex-shrink: 1
flex-shrink: 1

If we set an item to 0, it will not shrink. However, the other items still shrink in our example as they still have the same shrink value of 1.

Let's see what happens if we set our green box to 5.

flex-shrink: 0
flex-shrink: 1
flex-shrink: 5


If we set our third item to 5, it will shrink five times faster than our second item, which has a value of 1.

Now, all these three can simply be specified with a shorthand, which is as follows:

flex: grow shrink basis;


> Flex Item Order

We can also change the order that our items present themselves without restructuring our code. To do this, we simply append the order property and input numbers.

A
B
C

Let's try to move these letters around.

[div=
display: flex;
height: 50px;
color: white;][div=
flex-grow: 1;
order: 2;

background: red;]A[/div][div=
flex-grow: 1;
order: 3;

background: blue;]B[/div][div=
flex-grow: 1;
order: 1;

background: green;]C[/div][/div]

Output:

A
B
C

Pretty easy, right?


> Main Axis & Cross Axis + Justify-Content

An important component of flexbox are the axes, namely the main axis and the cross axis. By default, the main axis would be referring to the row, whereas the cross axis would be referring to the column. However, it's not that straightforward, which is probably where a lot of the confusion regarding flexboxes come from.

By default, our boxes would be positioned along a row, like so:

A
B
C

Now, if we want to change where our items are situated within that row, we use justify-content by default. There are many values associated with this property, and they are as follows:

  • flex-start - positions items at the beginning of the container
  • flex-end - positions items at the end of the container
  • center - positions items at the center of the container
  • baseline - positions items at the baseline of the container
  • space-around - items are evenly distributed along the line, with spaces around them
  • space-between - items are evenly distributed along the line, with spaces between them
  • space-evenly - items are distributed so that the spacing before, between, and after two adjacent items is the same

We've already seen flex-start in action, as it is the default, so let's see what flex-end does.

[div=
height: 50px;
display: flex;
justify-content: flex-end;

border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C


And center:
A
B
C


BUT--and this is where it gets confusing--justify-content does not always position items along the x-axis, no sir! It goes hand-in-hand with flex-direction. Now, if you omit flex-direction from your code, it will default to row, thus enabling justify-content to align items in a row.

However, if you specify flex-direction: column, that will flip things around, meaning justify-content does not align items in a row anymore! It aligns things in a column. Capeesh?

Yeah, I know, it's a lot. But a simpler way to remember this is that they both always mirror each other.

TL;DR
  • If flex-direction is default row, justify-content will align items along a row.
  • If flex-direction is column, justify-content will align items along a column.

Okay, so let's try appending flex-direction: column into our code.

I'll be changing some stuff around, so you can better see how things are working.

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Alright, what do you think will happen if I append justify-content: center; Will it align our items horizontally or vertically?

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Yup, it aligns our items along a column to mirror justify-content: column!

But now you must be wondering: well, there must be another property related to this right? Surely this guy has a twin that aligns our items in the opposite arrangement?

You're right. This is where align-items comes in.


> Align-Items

Unlike justify-content which aligns items horizontally by default, align-items aligns our items vertically by default.

When the flex-direction is flipped to column, however, align-items begins affecting horizontal alignment.

Let's check our first example. For now, I'll be using the default direction, which is row.
A
B
C

The default value for align-items is stretch, meaning the items stretch to fit the container along the main axis. However, we can use some of the same values as the ones we used for justify-content. To refresh your memory, they are as follows:
  • flex-start - positions items at the beginning of the container
  • flex-end - positions items at the end of the container
  • center - positions items at the center of the container
  • baseline - positions items at the baseline of the container

To use any of these values, simply append them after align-items: Don't forget to put them in the div holding the container!

This is how flex-start would look like:

[div=
height: 150px;
border: 1px solid yellow;
display: flex;
color: white;
align-items: flex-start;
][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: red;]A[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: blue;]B[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: green;]C[/div][/div]

For the purposes of this demonstration, I will be adding a height of 150px for our container, as well as a yellow border so that you see its dimensions. I allocated 33.33% height and 100px basis for each of our items to make them smaller, enabling you to see them moving around in the box.

Output:

A
B
C

Now, what if we changed the alignment to flex-end?

Output:

A
B
C

And center?

Output:

A
B
C

Now, let's try to change our flex-direction. Once again, I'll be changing some stuff around (namely the flex property) so you can better see how things are working.

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

So, like I said before, by using flex-direction: column, we have flipped our axes around. Now, align-items will now control the cross axis, which is now the x-axis:

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
align-items: flex-start;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Flex-end will look like this:

A
B
C

Center:

A
B
C



> Individual Item Alignment

So you want to align items individually? One of the properties we can use is align-self. Instead of putting this in our div container, we place it in the div defining our items. Like so:

[div=
height: 150px;
border: 1px solid yellow;
display: flex;
color: white;][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: red;
align-self: flex-start;
]align-self: flex-start;[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: blue;
align-self: center;
]align-self: center;[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: green;
align-self: flex-end;
]align-self: flex-end;[/div][/div]

Output:

align-self: flex-start;
align-self: center;
align-self: flex-end;


On the other hand, we can't really align items individually with justify-content. However, we can use margin to aid us with this.

Let's say we want C to go all the way to the right. By using margin-left: auto we will be pushing C from the left:

[div=
height: 50px;
display: flex;
border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;
margin-left: auto;
]C[/div][/div]

Output:

A
B
C

Now, if we append the same declaration to B, look what happens:

[div=
height: 50px;
display: flex;
border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;
margin-left: auto;
]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Pretty cool, right?


> Centering Items

Now that we know how to manipulate the main axis and the cross axis, let's talk about centering items in our flex container.

Let's say you want to put some text in the middle.

First, let's make our base. As usual, it's width, height, and a red background.

[div=
width: 200px;
height: 200px;
background: red;
][/div]

Output:


Let's input our text next. We'll make the color white so we can see it clearly.

We will center our text later.

[div=
width: 200px;
height: 200px;
background: red;
color: white;
]Hello world.[/div]

Output:

Hello world.

Now for the fun part. Once again, we'll be using display: flex

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
]Hello world.[/div]

Output:

Hello world.

Then, use justify-content: center to center our item horizontally. Append align-items: center to center items vertically.

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
]Hello world.[/div]

Output:

Hello world.

You can also center other elements using this process!

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
][div=
background: blue;
width: 100px;
height: 100px;
border-radius: 100%;][/div][/div]

Output:


And there you have it. Flex makes everything simple for us.

Now that you know how to flexbox, go and flex your skills!


# Featured Properties

display: flex;
flex: grow shrink basis;
flex-grow: value;
flex-shrink: value;
flex-basis: value;
order: value;
min-width: value;
justify-content: value;
align-items: value;
align-self: value;
margin-left: value;
margin-right: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Mp3 Player

Iwaku has its own shiny audio player. Unfortunately, it only plays mp3 files sourced from the internet, which limits our options. YouTube, on the other hand, provides us with a variety of music to choose from. Fortunately, we can embed YouTube videos and fiddle around with some coding to create a fully functional mp3 player of our own.

What we need to do, first and foremost, is link our music player. Once again, I'll do it step-by-step. However, I won't be able to show you the results of each step like I've done previously, as Iwaku only allows a limited number of media to be shown in a post.

Let's say I want to use this song for my music player. Copy the content ID, which can be found after the equals (=) sign in the link.

https://www.youtube.com/watch?v=tVCUAXOBF7w


Input the content ID between the [MEDIA=youtube][/MEDIA] tags. It should look like this:

[MEDIA=youtube]tVCUAXOBF7w[/MEDIA]


Now, let's specify a width and height for our music player. How does 30x30 sound?

[div=
width: 30px;
height: 30px;
][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div]


Let's add something to cover it up, like a play and pause button. We'll be using FontAwesome icons for this.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][FA]fa-play-circle[/FA]


Let's put this in a 30x30 container, and let's make our icon bigger and center it while we're at it.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
][FA]fa-play-circle[/FA][/div]


Now we're going to pull our button up so that it sits above the video player. Since our container is 30px, -30px should do it.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -30px;
][FA]fa-play-circle[/FA][/div]


Okay, but now we can't click our button. This is easily solved by pointer-events: none; which allows us to click through the element.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -30px;
pointer-events: none;
][FA]fa-play-circle[/FA][/div]


Now let's lower the opacity of our media player. 0.01 ought to do it. We should also remove that space it leaves at the bottom with height: 30px and overflow: none;

[div=[PLAIN][COLOR=#34987c]
height: 30px;
overflow: none;[/COLOR][PLAIN]][div=
width: 30px;
height: 30px;
opacity: 0.01;
][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -30px;
pointer-events: none;][FA]fa-play-circle[/FA][/div][/div]

Output:



Alternatively, we could add a background for the button. I'm going to use white, so we'll have to add a font color too so that we can actually see our button.

[div=
height: 30px;
overflow: none;][div=
width: 30px;
height: 30px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -30px;
pointer-events: none;
background: white;
color: black;
][FA]fa-play-circle[/FA][/div][/div]

Output:




> Mp3 Player (Bar)

So that one is a popular design you'll see floating around. However, this next one is what I personally like to use.

We'll be using the latest code we did for our previous one, except we'll be removing text-align and we'll be changing the width to 300px.

This time, we'll be creating a 50px width container for our media player.

[div=
height: 30px;
overflow: none;][div=
width: 50px;

opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;

height: 30px;
background: #34987c;][/div][/div]

We do much of the same thing we did last time, except this time we'll be using a width of 300px for our second div, as well as a teal background to match Iwaku.

Next, we will be inputting the display: flex; so that we can better control the various elements we'll be placing in our box.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;
][/div][/div]

Now, we can go ahead and add our icons. This time I'll be adding a pause icon as we have more space to work with. We'll be coloring it white and adding a font-size of 20px.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;
][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][/div][/div]

Next to the icons, we'll be opening another div where we'll be placing our song name. Input a font-size and a color.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
font-size: 12px;
color: white;
]Pixies - Hey[/div][/div][/div]

Let's add some padding to the left and right sides of our icons so that they aren't sticking too close to the edge. Let's add padding to the div holding our text too.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;
padding: 0 5px;
][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
padding: 5px;

font-size: 12px;
color: white;]Pixies - Hey[/div][/div][/div]

Let's move the element holding our play button -28 pixels from the top. Add pointer-events so that we can click through the element.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;
top: -28px;
pointer-events: none;
][div=
font-size: 20px;
color: white;
padding: 0 5px;][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
padding: 5px;
font-size: 12px;
color: white;]Pixies - Hey[/div][/div][/div]

Output:

Pixies - Hey

Feel free to play around with the width and the height.


# Featured Properties

pointer-events: none;
 
Last edited:
  • Like
Reactions: zenith

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Customized Accordions

So, customized accordions.

I don't use them very often, but I've seen a lot of these floating around. People have tried cutting the borders, the padding, etc. etc., but they stubbornly persisted in people's code. Never to worry! I poked around with devTools, so we can now officially say begone to all them pesky padding and borders.

First, let's introduce the accordion tag into our code and specify the width.

[accordion=500]{slide}{/slide}[/accordion]

Output:

Tab 1

Since the slide tag is a slave tag, we can actually use divs inside the brackets. Let's open a div inside the slide and add some background, color, and text. I'll go ahead and add padding and text-align so that it looks even better.

[accordion=500]{slide=[div=
background: red;
padding: 20px;
text-align: center;
color: white;
]This do be the title[/div]}{/slide}[/accordion]

Output:

This do be the title

As you can see, there's whitespace around the background. To remove this, we first apply a max-width of 500px !important. We need !important to override the element's set max-width of 100%.

We then apply a margin of -10px to cut away at the, well, margin.

[accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;

background: red;
padding: 20px;
text-align: center;
color: white;]This do be the title[/div]}{/slide}[/accordion]

Output:

This do be the title

Let's do the same thing for the area inside of our slide. AKA our content area.

[accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
]Lorem[/div]{/slide}[/accordion]

Output:

This do be the title
Lorem


There's still that fugly border, so let's enclose the entire accordion in a div tag with the visibility property. Set this value to hidden.

Obviously, we don't want everything in our accordion to be hidden, just the border. So we're going to override the hidden visibility with visibility: visible to the places we want to be seen.

[div=
visibility: hidden;
][accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;
]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;
]Lorem[/div]{/slide}[/accordion][/div]

Output:

This do be the title
Lorem

Copy-paste the slides to make more of them in one accordion.

[div=
visibility: hidden;][accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;
]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;
]Lorem[/div]{/slide}[/accordion][/div]

Output:

This do be the title
Lorem
This do be the title
Lorem

You can add open after the equals sign of a slide so that it defaults to open.

[div=
visibility: hidden;][accordion=500]{slide=open|[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}[/accordion][/div]


Output:

This do be the title
Lorem
This do be the title
Lorem



# Featured Properties

max-width: value;
!important
 
Last edited:
  • Like
Reactions: zenith

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Customized Sliders

Next on the menu is sliders!

Typically, sliders would look like this:

[slider=500x300] <---500x300 are the dimensions I'm using, but you can change it.
{slide}{/slide}
{slide}{/slide}
[/slider]

Output:


Since it's very difficult to see otherwise, I added a temporary backdrop.

Anyway, today we're going to make the sliders look less ugly. Let's banish those arrows first. To cast it away from our offended eyes, we need to do some math. I'm sorry.

Luckily, it's super basic math, so you'll probably be fine.

Each arrow is 47px in width, so let's remove 94px from our slider's width. In my case, that's 500 - 94 = 406.
There's an arbitrary 25 that we need to remove from our slider's height (don't ask me where it came from. I trial-and-error'ed this because I was too lazy to find out). That's 300 - 25 = 275 in my case.

Now, we open a div tag surrounding our slider and input the results as its width and height. We're also going to input overflow: hidden so as to hide any excess (aka the arrows and dots)

[div=
overflow: hidden;
width: 406px;
height: 275px;
][slider=500x300]{slide}{/slide}{slide}{/slide}[/slider][/div]

Output:



Alright, we need to do one more thing to hide the arrows. Nest another div inside of the div. This time, let's input a max-width of 500px. Add !important so that it overrides the element's default max-width.

We're also going to specify our left and right margins. margin: 0 -47px should do it. Again 47 because our slider buttons are 47px in width.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;
][slider=500x300]
{slide}{/slide}{slide}{/slide}[/slider][/div][/div]

Output:


(Yeah, you can't see anything there. It's normal. Moving on.)

Now, inside our slide, let's input our 406x275 dimensions yet again. I'm going to add a background color for good measure.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;][slider=500x300]
{slide}[div=
width: 406px;
height: 275px;
background: red;
][/div]{/slide}{slide}{/slide}[/slider][/div][/div]

Output:


Repeat the slide codes where needed.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;][slider=500x300]
{slide}[div=
width: 406px;
height: 275px;
background: red;][/div]{/slide}{slide}[div=
width: 406px;
height: 275px;
background: blue;
][/div]{/slide}[/slider][/div][/div]

Output:


And done!


# Featured Properties

max-width: value;
!important
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Customized Tabs

The last thing we've got is tabs. The fanciest and, quite possibly, hardest thing on this guide. It's cool, though, because you'll get the hang of it after a while.

Let's begin by taking a look at what the tabs are like by default. I'm going to set a width of 730px, but you can tweak this to a size you'd much prefer.

[TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS]

Note: If this is your first time ever seeing tabs, I suggest that you play around with it first in your own testing thread. You can use the code above if you like. Just remember that {slide}{/slide} is essentially a page, while the {tab}{/tab} is the link to that page.

Output:


Yeah, they don't look like much right now, but they'll start looking interesting real soon. As you can see, we can link between slides using {tab}{/tab}. This will be very handy later.

Anyway, let's begin by cutting away that annoying navigation bar. We don't need it.

To do this, we're going to need to enclose our tabs in a pair of div tags. We will set the same width for them, and margin: auto to center. We're also going to specify overflow: hidden so that anything that spills out will get cut out of view.

I'm also going to add a temporary background so we can see exactly what we're working with.


[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;
][TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS][/div]

Output:


Let's nest another div inside those tags. In it, we're going to specify margin-top: -40px so that we can pull it up until it can't be seen, so essentially cutting away our navigation bar from view.


[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;][TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS][/div][/div]

Output:


Remember the lesson on flexboxes? Yeah, we're going to use them now. If you haven't seen it, I suggest reading it first before proceeding.

I'm thinking let's do a navigation bar at the top, and two columns below it where we can put our character information. First, let's enclose our first slide in a div and specify display: flex. Don't forget the closing tag! Let's also add the links to the other slides.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;][TABS=730]
{slide=1}[div=
display: flex;
]1 {tab=2}2{/tab} {tab=3}3{/tab} {tab=4}4{/tab}[/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Alright, now let's make individual flexboxes for our navigation links. Input flex: 1 in each of them. I'm also going to make the background color white, and the font color black.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;][div=
flex: 1;
background: white;
]1[/div][div=
flex: 1;
background: white;
]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;
]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;
]{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's add some height to our flexboxes and center our text.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;
][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]1[/div][div=
flex: 1;
background: white;]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;]{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Copy paste the same specifications on all tabs.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;
][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]1[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's rename them so they look better.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Now let's add our two columns. Open up a div after the navigation bar and its container. Once again, we will be specifying display: flex; We will also be adding flex-wrap: wrap this time. This will help in making our second flexbox wrap to the second line when we shrink our browser. Again, this was covered in the flexbox tutorial.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's create our two items. One will be flex: 1 and the other will be flex: 2, meaning that the second will take up a bigger amount of space.

Specify a min-width for both so that when our browser shrinks past that minimum width, our second flexbox will work in tandem with flex-wrap: wrap and go to the second line.

Add a background so we can see what we're working with.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: white;
][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


I don't like how they're sticking so close to each other, so let's add a 5px gap between our elements. Add margin-top: 5px to make a gap between the nav bar and the columns.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
][div=
flex: 1;
min-width: 230px;
height: 400px;
background: white;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's add a background image to the first big block. If you don't know how to add backgrounds, check this guide!

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(
https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Now let's add some text. The padding will make it so that it doesn't stick too close to the edge. We don't like that here!

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
padding: 10px;
]Lorem[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Add overflow-y: scroll so our text doesn't spill out when we have too much of them.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
padding: 10px;
overflow-y: scroll;
]Lorem[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Copy-paste to other slides. Just mind the navigation links. Let's also remove the base gray background.

[div=
width: 730px;
margin: auto;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
/* NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 1 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 1 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 1 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem[/div][/div]{/slide}
{slide=2}[div=
/* TAB 2 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Personality[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 2 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 2 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 2 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 2[/div][/div]{/slide}
{slide=3}[div=
/* TAB 3 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Biography[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 3 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 3 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 3 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 3[/div][/div]{/slide}
{slide=4}[div=
/* TAB 4 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Misc[/div][/div][div=
/* BODY 4 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 4 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 4 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 4[/div][/div]{/slide}
[/TABS][/div][/div]

Output:


I added comments so you can see where things are, should you want to edit this code.



And that's it for this coding tutorial thread! Hope you learned something new!
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Common Mistakes

Code not working? Check for the following:

  • Each declaration must be separated with a semicolon (;). Did you forget a semicolon?
  • The property and the value are separated by a colon (:). Did you forget to input a colon somewhere?
  • Did you input space where you weren't supposed to? For example, it's transform: scale(x,y); not transform: scale ( x , y );.
  • Always remember that div tags go in a pair! Did you forget to close your div tag with a [/div]? Did you forget to input any of the other closing tags?
  • Remember that the syntax follows American English. Did you use a different spelling, like colour instead of color? Did you misspell any of the properties or values by accident?
  • Some properties go hand-in-hand for them to work. Did you forget some of them?
  • Did you input a false value?

When people approach me for help, 80% of the time the code is broken because of a very simple reason. Remember to check for these if something isn’t working right!
 
Last edited: