RESOURCE TUTORIAL Divtionary 2.0

wren.

elegance is more important than suffering
Original poster
STAFF MEMBER
FOLKLORE MEMBER
Posting Speed
  1. Multiple posts per week
  2. One post per week
  3. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
  3. Adaptable
Preferred Character Gender
  1. Primarily Prefer Male
Genres
Slice-of-Life, Gothic, Horror, Fantasy
DIVTIONARY 2.0

A list of CSS properties available on Iwaku.

For any questions in regards to CSS coding, please head to the BBCode Help Thread.

Hello! I have been asked to take over the original Divtionary made by @Nemopedia. If you have any suggestions on what to add or improve, feel free to drop me a message. Please note that this is just a list of properties that can be used on Iwaku; this is by no means a complete list.



Basics

BBCODE MODE: the rich text editor setting that allows you to write bbcode without hiccups. You can activate it by clicking this little symbol in the corner:
IxczvY2.png

If you try to write BBcode in the normal text editor mode, you'll end facing a lot of issues like spacing between lines and the automatic creation of opening and ending tags.

DIV: the container, or element, that you are working in. In order to create an element, you must begin with
[div=] and end it with ][/div].

TAGS: an opening tag will look like
[FONT=], [COLOR=], [SIZE=], etc. Ending tags are repetitions of the opening tag with a forward slash in front of it, such as [/FONT]. Each tag has a different effect, like [FONT=][/FONT] changes the font of any text between the tags. For example, to use Dancing Script, you would use [FONT=Dancing Script]Hello[/FONT] to get 'Hello.'

NOTES: you can use
/*example text here*/ to leave yourself little notes inside a code that will not affect the code itself. This is handy for keeping track of which elements correspond to what section of the code. Alternatively, you can add font-size: 0px; to an element, making any text typed into the element invisible except within the code itself. The latter is particularly handy as certain sites require text within an element in order for that element to show.

PX: sets the size of an element using the absolute value of pixels.

%: sets the size of an element using the relative value of percentage.

MOBILE-FRIENDLINESS: how well the code can be seen on mobile compared to on a PC. Using percents instead of pixels for sizing elements helps make codes more mobile-friendly since the sizing will be more relative to the viewing screen, but you can also make mobile-friendly codes with pixels by making sure you are working within a width limit of 450px. If you have any element that pushes past that, it will get caught off on mobile. Height does not matter.

MARGIN: the space around an element's border. In other words, it controls the space outside an element. See more under the Dimensions section.

PADDING: the space between an element's border and the element's content. In other words, it controls the space inside of an element. See more under the Dimensions section.

HEIGHT: the height of the element. See more under the Dimensions section.

WIDTH: the width of the element. See more under the Dimensions section.

POSITION: determines how an element is positioned in a document. Use this in conjunction with top, left, right, and bottom properties to determine the element's final location. See more under the Dimensions section.

BACKGROUND: the background of the element. It can be a solid color, a gradient, or an image. See more under the Colors & Images section.

OPACITY: the transparency of an element. See more under the Colors & Images section.

BORDER: the edges of an element. The style (solid, dotted, etc), thickness, and color of a border can all be altered. See more under the Borders section.

BOX-SHADOW: adds a shadow around an element. See more under the Borders section.

BORDER-RADIUS: the roundness (or lack thereof) of the element's edges. See more under the Borders section.

DISPLAY: determines how an element will appear. Generally, this is used to align elements horizontally. See more under the Alignment section.

COLUMNS: sets elements side-by-side in columns. See more under the Alignment section.

FLOAT: sets an element to a specified side, useful for text-wrapping. See more under the Alignment section.

Z-INDEX: determines how elements are layered over each other. Giving an element a higher z-index value will bring it forward past the other elements. See more under the Layering section.

FONT AWESOME ICONS: various icons that can be used on Iwaku through a specific code. These icons can be treated similarly to regular text. See more under the Text section.

TEXT-SHADOW: adds a shadow to your text. See more under the Text section.

OVERFLOW: determines what will happen to the content that goes outside of the element's dimensions. In other words, whether the content in the element will scroll or get cut off. See more under the Scrolls section.

BACKGROUND-ATTACHMENT: determines whether a background image will scroll with the page or stay fixed. See more under the Scrolls section.

CURSOR: in this context, this allows you to change the website's default cursor when hovering over a code, even to a custom image. See more under the Mouse Interactions section.

POINTER-EVENTS: determines whether the cursor can interact with an element or not. See more under the Mouse Interactions section.

TRANSFORM: allows you to rotate an element. See more under the Rotation & Animation section.

ANIMATION: allows you to add animations to elements, such as fading in or out. See more under the Rotation & Animation section.

MEDIA PLAYER: allows you to attach videos and music to an element. See more under the Media Player section.

ACCORDION: creates a collapsable drop-down menu. See more under the Accordions section.

TABS: create tabs that one can switch between to divide content. See more under the Tabs section.

SLIDER: creates slides that swipe horizontally when clicked. See more under the Sliders section.

Index

- Dimensions
- Colors & Images
- Borders
- Alignment
- Layering
- Text
- Scrolls
- Mouse Interactions
- Rotation & Animation
- Media Player
- Accordions
- Tabs
- Sliders

 
DIMENSIONS


HEIGHT & WIDTH

height: _px; - determines the height of the element
height: auto; - makes the element stretch as content is added to it
width: _px; - determines the width of the element

MARGINS & PADDING

Margins and padding can appear very similar to each other and thus are easily confused. The big difference is that margins affect the space around an element while padding affects the space within the element.
boxdim.png


MARGINS

Margins refer to the space around the element, so changing their size will push and pull the code around in whatever direction you choose. If the number is positive, it'll push the element, and if it's negative, it will pull. For example,
margin-top: 5px; will add 5px of space above the element whereas margin-top: -5px; will pull the element up by 5px.

Let's say you make a smaller box underneath a larger first box, and you want to move that second box into the larger box — you want to use margins. If the margin input doesn't appear to be working, try using the opposite margin with a negative value. For example, perhaps you're using margin-bottom but the element won't move — you can use a negative number for margin-top instead, e.g., margin-top: -#px; which will pull the element up instead of pushing it down like a regular margin-top.

TLDR; if a positive margin value isn't working, try a negative value in the opposite direction.

margin: auto; - centers your element
margin: _px; - adds space to all sides of the element
margin-top: _px; - adds space to the top side of the element
margin-left: _px; - adds space to the left side of the element
margin-right: _px; - adds space to the right side of the element
margin-bottom: _px; - adds space to the bottom side of the element

You may also see margins written like this:
margin: _px _px _px _px;, margin: _px _px _px;, or margin: _px _px;. In this case, you read them like so:

When there are four numbers, they go in the order of top margin, right margin, bottom margin, left margin.
When there are three numbers, they go in the order of top margin, right and left margin, and bottom margin.
When there are two numbers, they go in the order of top and bottom margin, and right and left margin.

Personally, I always write each margin out separately (e.g.,
margin-right) because it's easier for people to navigate. Still, if you see them written like above, now you know what it means.

PADDING

Padding works almost identically to margins, except it works within the element instead of around it.

padding: _px; - adds space to all sides of the element
padding-top: _px; - adds space to the top side of the element
padding-left: _px; - adds space to the left side of the element
padding-right: _px; - adds space to the right side of the element
padding-bottom: _px; - adds space to the bottom side of the element

You may also see padding written like this:
padding: _px _px _px _px;, padding: _px _px _px;, or padding: _px _px;. In this case, you read each like so:

When there are four numbers, they go in the order of top padding, right padding, bottom padding, left padding.
When there are three numbers, they go in the order of top padding, right and left padding, and bottom padding.
When there are two numbers, they go in the order of top and bottom padding, and right and left padding.

EXAMPLE

Let's try these things out! Let's first create a plain box without any margins or padding.
Code:
[div=
height: 200px;
width: 200px;
background: pink;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada accumsan porttitor. Aliquam egestas dictum urna, ut efficitur ipsum aliquet lobortis. Donec in metus nec odio rutrum ullamcorper. In mollis elit eget leo dignissim, at efficitur ipsum porta.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada accumsan porttitor. Aliquam egestas dictum urna, ut efficitur ipsum aliquet lobortis. Donec in metus nec odio rutrum ullamcorper. In mollis elit eget leo dignissim, at efficitur ipsum porta.


Next, let's add a left margin and some padding.

Code:
[div=
margin-left: 40px;
height: 200px;
width: 200px;
padding: 10px;
background: pink;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada accumsan porttitor. Aliquam egestas dictum urna, ut efficitur ipsum aliquet lobortis. Donec in metus nec odio rutrum ullamcorper. In mollis elit eget leo dignissim, at efficitur ipsum porta.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada accumsan porttitor. Aliquam egestas dictum urna, ut efficitur ipsum aliquet lobortis. Donec in metus nec odio rutrum ullamcorper. In mollis elit eget leo dignissim, at efficitur ipsum porta.


POSITIONING

There are a couple of ways that you can position an element on Iwaku that will be useful for you:

position: absolute; - the element is removed from the normal document flow, and no space is created for the element in the page layout, meaning the other elements will act as if it isn't there. It is positioned according to its parent element.
position: relative; - the element is positioned according to the normal flow of the document, and then offset relative to itself based on the following properties.

POSITIONING PROPERTIES

These values are similar-looking to margins but affect positioned elements without affecting the surrounding elements, whereas margins do affect the other elements.

top: _px; - pushes the element down
left: _px; - pushes the element to the right
right: _px; - pushes the element to the left
bottom: _px; - pushes the element up

You can find more details about positioning and its properties here and here.

EXAMPLE


Here is an element inside another element without position properties:
Code:
[div=
margin: auto;
height: 200px;
width: 200px;
background: black;][div=
margin: auto;
height: 100px;
width: 100px;
background: green;][/div][/div]



Adding property elements:
Code:
[div=
margin: auto;
height: 200px;
width: 200px;
background: black;][div=
top: 20px;
margin: auto;
height: 100px;
width: 100px;
position: relative;
background: green;][/div][/div]


 
  • Love
Reactions: ImaginationGoneWild
COLORS & IMAGES

The background of an element can be a solid color, a gradient, or an image. You can also control the transparency of the background. There are a few ways to code a background:

background: - this is a general background code that can be used for both colors and images
background-color: - this is a code you can use if you want a solid color background
background-image: URL(link here): - this is the code you use if you want to use an image as your background

SOLID COLORS

To create a background with a solid color, you can use name of the color, the color's hex code, or the color's rgb values. Using only background-color as an example, you can make a pink background by using

background-color: pink;
or background-color: #FFBEBE;
or background-color: rgb(255, 190, 190);

Using one of these will give you:


GRADIENTS

You can also do gradients! You do this with
background: linear-gradient(#hex code, #hex code);
with the gradient moving from leftmost color to rightmost color. You can use as many colors as you want by simply adding more hex code values.

For example, going from white to pink:
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background: linear-gradient(#ffffff, #FFBEBE);][/div]



You can also change the direction of the fading with
background: linear-gradient(direction, hex code, hex code);. Direction can be left, right, top, bottom, top left, etc. Angles can also be used. For example, going toward the bottom right:
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background: linear-gradient(to bottom right, #ffffff, #FFBEBE);][/div]



You can repeat the gradient with
background: repeating-linear-gradient(hex code, hex code, hex code, hex code);. For example:
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background: repeating-linear-gradient(#ffffff, #FFBEBE, #ffffff, #FFBEBE);][/div]



Do you want a circular gradient? Use
background: radial-gradient(hex code, hex code);. For example:
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background: radial-gradient(#ffffff, #FFBEBE);][/div]



You can also repeat these through
background-color: repeating-radial-gradient(hex code, hex code, hex code, hex code);.
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background: repeating-radial-gradient(#ffffff, #FFBEBE, #ffffff, #FFBEBE);][/div]



OPACITY

You can make an element more translucent through
opacity: #;
with # being between 0 (completely transparent) and 1 (completely opaque). For example:
Code:
[div=
margin: auto;
height: 150px;
width: 150px;
padding-top: 25px;
padding-left: 25px;
background: repeating-radial-gradient(#ffffff, #FFBEBE, #ffffff, #FFBEBE);][div=
width: 80%;
height: 100px;
background: teal;
opacity: 0.3;][/div][/div]



You can also turn
background: rgb(#, #, #); into background: rgba(#, #, #, #); with the a slot representing opacity and using values between 0 and 1 as well.

Unlike the former opacity code, which affects all of the elements within the div including text, this code will only affect the background of the element. For example, using the plain opacity code with black text would give you this:
Code:
[div=
margin: auto;
height: 150px;
width: 150px;
padding-top: 25px;
padding-left: 25px;
background: repeating-radial-gradient(#ffffff, #FFBEBE, #ffffff, #FFBEBE);][div=
width: 80%;
height: 100px;
background: teal;
opacity: 0.3;
color: black;]hello this is hard to see[/div][/div]

hello this is hard to see


Whereas using the rgba code gives you this:
Code:
[div=
margin: auto;
height: 150px;
width: 150px;
padding-top: 25px;
padding-left: 25px;
background: repeating-radial-gradient(#ffffff, #FFBEBE, #ffffff, #FFBEBE);][div=
width: 80%;
height: 100px;
background: rgba(0, 128, 128, 0.3);
color: black;]hello this is less hard to see[/div][/div]

hello this is less hard to see


IMAGES

Now, I'll show you how to use images instead of colors for div boxes, like this:



This is where you use the
background: URL(link here); code and plug in the image link between the parentheses. After that, you can alter the size and positioning of the image within the element.

SIZING

To size an image, you use
background-size: ___;

There are three options for sizing:

background-size: cover; - makes the one image fill up the size of the box. This will likely only make a portion of the image show up, however. This is the option I would recommend.
background-size: contain; - makes the entire image fit into the box
background-size: #px; - using #px basically acts as a zoom. The higher the number, the more it zooms in on the picture.

Using contain makes the entire image fit into the box, although if the picture is smaller, it will repeat the image to fill up the space. If you don't want it to repeat, you can use
background-repeat: no-repeat;. I find that code very helpful for when I need something small, like the tacks in my pinboard template. If you do want the image to repeat, you can control which direction it repeats in using background-repeat: x-repeat; or background-repeat: y-repeat; where x = horizontal and y = vertical.

POSITIONING

For positioning an image, you just use the straightforward
background-position: x% y%;.

Imagine the photo like a graph with an x-axis and a y-axis. Changing the x% positions the picture more to the left or right, with 50% being the middle. The y% positions the picture more up or down, with 50% being in the middle.

You can also use the names of directions like center (which is 50% 50%), top (50% 0%), bottom (50% 100%), left (0% 50%), and right (100% 50%).

FILTERS

Is the image you want to use not quite right in terms of color? You can always make adjustments through other programs, but you can also use filters on Iwaku! You do this through
filter: ____;.

The list of options are as follows:
blur(px)
brightness(%)
contrast(%)
grayscale(%)
hue-rotate(deg)
invert(%)
saturate(%)
sepia(%)

TEXTURES & PATTERNS

Another thing to note is that you can use textures/patterns from this site here to overlap with colored backgrounds. You do this by using background-color in combination with background-image: URL( ), with the texture acting like an image. When you do that, you get something like this:
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background-color: #008c41;
background-image: URL(https://www.transparenttextures.com/patterns/arabesque.png);][/div]


 
  • Love
Reactions: ImaginationGoneWild
BORDERS

Are regular elements not fancy enough for you? Borders add a touch of flare, and also help draw the eye to important information.

REGULAR BORDER



You can add a border to your element using
border: #px style color; - adds a border to all sides of the element
border-top: #px style color; - adds a border to the top side of the element
border-left: #px style color; - adds a border to the left side of the element
border-right: #px style color; - adds a border to the right side of the element
border-bottom: #px style color; - adds a border to the bottom side of the element

#px determines the thickness of the border
style can be options like solid (as seen above), dotted, wavy, etc
color is... color, shockingly.

OUTLINE

Outline is an alternative border code that can be combined with the border code to make a double border. The code for this is
outline: #px style color;. Using both an outline and a border at the same time gives you something like this:



where the outermost border is the outline and the innermost one is the border.

BOX SHADOWS

Now, this isn't technically a border, but it sure looks like a partial one, so I'm putting it here.

You can give your box a shadow like this:



To do this, you use
box-shadow: (w)px (h)px (b)px color;
where (w)px determines the width of the shadow, (h)px determines the height of the shadow, and (b)px determines the blur of the shadow, and color is color. The example above uses
2px 2px 2px black.

Notice how this only leaves a shadow on the right and bottom sides of the box. If you want to add the shadow to the other sides, you can add on to the code to make
box-shadow: 0 0 Xpx Ypx #fff, 0 0 Xpx Ypx #fff, 0 0 Xpx Ypx #fff;.

The first line controls the inner color, the middle line controls the middle color, and the last line controls the outer color.

Here it is in action:


You can also add inset at the end to make the glow come from within the box like so:



DROP-SHADOW

This is similar to the box shadows, but it makes the image pop out more! To use this, use
filter: drop-shadow((w)px, (h)px, (b)px, color); where (w)px determines the width of the shadow, (h)px determines the height of the shadow, and (b)px determines the blur of the shadow, and color is color.

It'll look like this:


ROUNDING CORNERS

You can also make a square a circle! You do this via
border-radius: #%;

The higher the percentage, the more rounded the edge. 100% looks like:



If you don't want to round the whole thing, you can round ONLY the corners using
border-radius: #px; instead. Similarly, you can go corner by corner with border-radius: #px #px #px #px;, which goes from top left > top right > bottom right > bottom left.
 
  • Love
Reactions: ImaginationGoneWild
ALIGNMENT

Display determines how an element will appear. Generally, this is used to align elements horizontally. There are three options for display settings, with flexboxes being the most complicated.

BLOCK & INLINE-BLOCK

display: block; - the default setting, it puts the boxes on different lines
Code:
[div=
height: 100px;
width: 100px;
display: block;
background-color: blue;][/div][div=
width: 100px;
height: 100px;
display: block;
background-color: green;][/div]

display: inline-block; - puts the blocks on the same line, meaning they are right next to each other
Code:
[div=
height: 100px; 
width: 100px;
display: inline-block;
background: red;][/div][div=
height: 100px;
width: 100px;
display: inline-block;
background: orange;][/div]


FLEXBOXES

display: flex; - starts a flexbox, which is similar to inline-block, but allows for a lot more customization. Here are the key components of a flexbox:

flex-direction: row | row-reverse | column | column-reverse;
sets direction for the items inside said flexbox

flex-wrap: wrap | no-wrap | wrap-reverse;
makes the items in the flexbox wrap around each other if they don't fit in a line (this is especially useful for making wide codes on PC that will then stack vertically on mobile)

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
this decides how the items inside the flexbox are going to be spaced apart from one another, will require that you set a width so it knows how far to stretch

align-items: flex-end | flex-start | center | stretch | baseline;
this aligns items on the line.

Code:
[div=
/*flexbox opened*/
display: flex;
margin: auto;
width: 400px;
flex-direction: row;
justify-content: space-evenly;
align-items: center;][div=
/*pink box*/
height: 100px;
width: 100px;
background: pink;][/div][div=
/*black box*/
height: 200px;
width: 200px;
background: black;][/div][div=
/*blue box*/
height: 100px;
width: 50px;
background: blue;][/div][/div]



COLUMNS

Columns are similar to flexboxes, but a lot simpler. With columns, you can make something like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel urna enim. Maecenas et consectetur eros. Vestibulum feugiat leo sit amet sapien pulvinar sodales. Proin nec dapibus sem. Pellentesque malesuada lectus et lectus consequat, viverra eleifend metus tempor. Quisque at nibh diam. Nam scelerisque auctor tellus, quis iaculis sem maximus in. Nunc sapien tortor, pharetra nec maximus sed, bibendum in mauris. Nulla facilisi.
Nunc pharetra blandit massa, eu placerat orci malesuada id. Fusce id facilisis nisl. Vivamus vel mauris eget urna tempus volutpat. Quisque et ipsum vel ante scelerisque aliquet quis eget odio. Donec pellentesque odio eget ex dapibus, sit amet iaculis nisl tempus. Etiam mattis, nunc sed finibus sagittis, felis nisl eleifend sapien, ac placerat nunc elit ac neque. Suspendisse potenti. Morbi mollis vitae metus quis ullamcorper. Phasellus faucibus, mi vel pharetra vulputate, risus eros efficitur magna, eu ornare ipsum nulla eget dui. Cras consectetur mauris vel felis dapibus consectetur. Curabitur elit leo, semper eu arcu sit amet, tempus vestibulum felis. Duis elementum hendrerit massa at finibus. Vivamus leo lectus, maximus non tortor vitae, efficitur sollicitudin dolor. Vivamus fringilla risus orci, vitae viverra ipsum tristique id. Suspendisse vitae mattis velit.


To do this, here are the main column properties:
columns: #; - how many columns to create
column-gap: _px; - how big the gap should be between each column
column-rule-width: _px; - adds a vertical border between the columns and alters its thickness
column-rule-style: style; - adds a vertical border between the columns and alters its style (solid, double border, etc)
column-rule-color: color name or hex code; - adds a vertical border between the columns and alters its color

You can also combine all of the column-rule codes to make
column-rule: _px style color;, which you'll notice is very similar to the border code.

You can also use divs inside columns to achieve a flexbox effect, like this:



Code:
[div=
margin: auto;
column-count: 3;
column-gap: 20px;][div=
margin: auto;
height: 100px;
width: 100px;
background: black;][/div][div=
margin: auto;
height: 100px;
width: 100px;
background: gray;][/div][div=
margin: auto;
height: 100px;
width: 100px;
background: white;][/div][/div]

FLOAT

You can set an element to a specified side through
float: right;
float: left;

Using the
float: right; as an example,

Code:
[div=
margin: auto;
height: 100px;
width: 100px;
float: right;
background: pink;][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nunc a quam tempus posuere sed at augue. Pellentesque consequat dolor eget dapibus sagittis. Proin ornare erat eget nulla feugiat, vel convallis ligula aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam interdum, turpis eu imperdiet volutpat, felis ipsum consequat augue, a lobortis est nunc nec quam. Suspendisse potenti. Suspendisse vel ligula iaculis, pretium enim vitae, sodales dolor. Curabitur sodales ex ut magna laoreet pellentesque. Curabitur in quam libero. Morbi dui mauris, ultrices ut eros eu, pharetra ullamcorper justo. Aliquam vestibulum tristique consequat. Proin ipsum mi, finibus quis erat sit amet, sagittis venenatis felis. Donec rutrum erat sit amet maximus posuere. Vestibulum rhoncus erat eu ligula dictum scelerisque. Mauris gravida condimentum justo at pharetra. Praesent tincidunt velit at ipsum porttitor ullamcorper. Proin sodales est id purus scelerisque, convallis mollis ipsum cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nunc a quam tempus posuere sed at augue. Pellentesque consequat dolor eget dapibus sagittis. Proin ornare erat eget nulla feugiat, vel convallis ligula aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam interdum, turpis eu imperdiet volutpat, felis ipsum consequat augue, a lobortis est nunc nec quam. Suspendisse potenti. Suspendisse vel ligula iaculis, pretium enim vitae, sodales dolor. Curabitur sodales ex ut magna laoreet pellentesque. Curabitur in quam libero. Morbi dui mauris, ultrices ut eros eu, pharetra ullamcorper justo. Aliquam vestibulum tristique consequat. Proin ipsum mi, finibus quis erat sit amet, sagittis venenatis felis. Donec rutrum erat sit amet maximus posuere. Vestibulum rhoncus erat eu ligula dictum scelerisque. Mauris gravida condimentum justo at pharetra. Praesent tincidunt velit at ipsum porttitor ullamcorper. Proin sodales est id purus scelerisque, convallis mollis ipsum cursus.

You can see how any text placed after the element wraps around it.
 
  • Love
Reactions: ImaginationGoneWild
LAYERING

This is helpful for covering up parts of code you don't want visible! The code is
z-index: #; and can be used in conjunction with position: relative;.

The z-index value determines layering of div boxes. The value 0 is the Iwaku webpage itself, so the standard value of div boxes is 1. If you want to layer a box over another, you use a higher value like 2. For example, once I assign a z-index value of 1 to the purple box and a z-index value of 2 to the blue box, this:

Code:
[div=
margin: auto;
height: 300px;
width: 300px;
background: blue;][/div][div=
margin: auto;
margin-top: -250px;
margin-bottom: 50px;
height: 200px;
width: 200px;
background: purple;][/div]



becomes this:

Code:
[div=
position: relative;
z-index: 2;
margin: auto;
height: 300px;
width: 300px;
background: blue;][/div][div=
margin: auto;
margin-top: -250px;
margin-bottom: 50px;
height: 200px;
width: 200px;
background: purple;][/div]



The purple box is now hidden underneath the blue box!

NOTE: the divs must be separate; they will not work if the elements are nested in each other.
 
TEXT

Let's talk about all the ways you can alter the look of your text!

PLAIN BBCODE

When it comes to changing the color, size, and font type of your text, you can use
[COLOR=color name or hex code here][/COLOR], [SIZE=_px][/SIZE], and [FONT=font name here][/FONT] respectively. These codes don't require a div, they just have to placed around text like so:

Code:
[FONT=Dancing Script][SIZE=18px][COLOR=#6AAC85]Hello![/COLOR][/SIZE][/FONT]

Hello!

DIV CODES

There are also a series of codes that you can plug into a div box to affect the content within the element.

COLOR: determines the color of the text.

USE: color: color-name; or
color: #hex;

NOTES: Apologies to all British-English users, the American spellings are required.
FONT-FAMILY: determines the font of the text within the element.

USE: font-family: fontname;

NOTES: The list of fonts available on Iwaku can be found in the rich text editor, and more can be requested here.
FONT-SIZE: determines the size of the text within the element.

USE: font-size: 00px;

NOTES: -
FONT-WEIGHT: makes the font appear bolder or lighter than its default.

USE: font-weight: bold; or
font-weight: lighter;

NOTES: -
FONT-STYLE: puts the font into italics.

USE: font-style: italic;

NOTES: -
FONT-VARIANT: specifies if the text appears in small-caps or not.

USE: font-variant: normal;
font-variant: small-caps;

NOTES: -
TEXT-ALIGN: determines how the text aligns within the element.

USE: text-align: left; or
text-align: right; or
text-align: center; or
text-align: justify;

NOTES: The default is left.
TEXT-DECORATION: adds a line to the text. Can either go underneath, on top, or strike through the text.

USE: text-decoration: underline; or
text-decoration: line-through;
text-decoration: overline;

NOTES: The line can be wavy, dotted, or coloured by adding more definitions behind the property.
(e.g: text-decoration: underline dotted red;)
DIRECTION: determines the direction the text will go.

USE: (Left-Right)
direction: ltr; or
(Right-Left)
direction: rtl;

NOTES: -
TEXT-TRANSFORM: makes the text appear in either all uppercase, lowercase, or capitalise the first letter of each word.

USE: text-transform: uppercase; or
text-transform: lowercase; or
text-transform: capitalize;

NOTES: -
TEXT-SHADOW: adds a shadow in the text.

USE: text-shadow: (w)px (h)px (b)px colour;

NOTES: w = width of the shadow.
h = height of the shadow.
b = blur of the shadow. This is optional but can be used to define the shadow.
color = the color of the shadow. Can be the name of the color or a hex.
TEXT-INDENT: add in an extra space at the start of the first word of the text.

USE: text-indent: 00px;

NOTES: Doesn't repeat itself in new paragraphs. Will need to be repeated.
TEXT-OVERFLOW: determines what will happen to the text that goes out (overflows) the element.

USE: text-overflow: clip; or
text-overflow: ellipsis; or
text-overflow: user defined;

NOTES: Clip: The text will move out of sight when overflowing.
Ellipsis: The overflowing text will turn into ellipsis ('...')
User defines: The overflowing text will turn into whatever the user defined it to be.
LINE-HEIGHT: determines the height of a line.

USE: line-height: 00px;

NOTES: Needs a defined 'height' for it to work.
LETTER-SPACING: sets a space between the letters in a text.

USE: letter-spacing: 00px; or
word-spacing: 00px;

NOTES: Can also be used to target words instead of letters individually by replacing the word 'letter' with 'word' (see box to the left).
WRITING-DIRECTION: sets the reading direction of the text.

USE: writing-direction: horizontal-tb; or
writing-direction: vertical-rl; or
writing-direction: vertical-lr;

NOTES: Not supported on all browsers.

Horizontal-tb = default setting. Left to right, top to bottom.
Vertical-rl = Read from right to left and from top to bottom.
Vertical-lr = Read from left to right and from top to bottom.
WORD-WRAP: determines what happens to long words at the end of the line.

USE: word-wrap: break-word;

NOTES: Breaks the word at whatever letter passes the end of the line and goes to the next sentence.
WHITE-SPACE: determines what happens to the white space in an element.

USE: White-space: normal; or
White-space: nowrap; or
White-space: pre;

NOTES: Normal - Default setting, text will wrap when necessary.
Nowrap - The text will wrap up on one line and won't go to the next.
Pre - White space is preserved on all browsers and will only wrap on a new line with line breaks.


FONT AWESOME ICONS

WARNING: There's a bug on Iwaku in regards to the font awesome icons, so only a handful are still able to be used. Additionally, resize and animations are no longer available either.

So you may have seen icons like these floating around on the site:

Those are font awesome icons, which can be accessed here: [x]. Not every single icon is available for use on Iwaku, but the majority should be. To use an icon, use this code:

[fa]fa fa-nameoficonhere[/fa].

You can treat these icons like text, meaning you can change their color, size, etc in the same way you can regular text.

- accessible-icon
- air-conditioner
- alarm-clock
- alarm-clock-plus
- alarm-clock-snooze
- album
- alien
- align-center
- align-justify
- align-left
- align-right
- anchor
- android
- angle-down
- angle-left
- angle-right
- angle-up
- angular
- apple
- archway
- arrow-down
- arrow-left
- arrow-right
- arrow-up
- artstation
- asterisk
- at
- atlassian
- atom
- audio-description
- award
- aws
- axe
- baby
- baby-carriage
- backpack
- backward
- bacteria
- badge
- ballot
- ban
- barcode
- barcode-scan
- bars
- baseball
- basketball-hoop
- bat
- battery-empty
- battery-slash
- bat
- bed-empty
- bell
- bell-exclamation
- bell-plus
- bell-slash
- bezier-curve
- bicycle
- blinds
- blinds-open
- blog
- bluetooth
- bold
- bolt
- bomb
- bone
- book
- book-user
- bookmark
- books
- boombox
- bootstrap
- border-all
- border-bottom
- border-left
- border-none
- border-outer
- border-right
- border-top
- bowling-ball
- box
- boxing-glove
- brackets-curly
- braille
- brain
- bread-loaf
- bread-slice
- briefcase
- broom
- browser
- bug
- building
- bullhorn
- bullseye
- bullseye-arrow
- burger-soda
- burrito
- bus
- bus-school
- business-time
- cactus
- calculator
- calendar
- calendar-check
- camcorder
- camera
- campfire
- campground
- candle-holder
- cannabis
- car
- car-battery
- car-side
- car-wash
- caravan
- caret-down
- caret-left
- caret-right
- caret-up
- carrot
- cars
- cart-arrow-down
- cart-plus
- cash-register
- cassette-tape
- cat
- cauldron
- cc-amazon-pay
- centos
- certificate
- chair
- charging-station
- chart-bar
- chart-line
- chart-pie
- check
- check-circle
- cheese
- chess
- chess-bishop
- chess-knight
- chess-pawn
- chess-queen
- chess-rook
- cheese
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- child
- circle
- city
- clipboard
- clipboard-check
- clipboard-list
- clock
- closed-captioning
- cloud
- code
- coffee
- coffin
- coins
- comet
- comment
- comment-check
- comment-minus
- comment-plus
- comment-slash
- comments
- compass
- compass-slash
- compress
- computer-classic
- computer-speaker
- cookie
- copy
- copyright
- corn
- couch
- cow
- credit-card
- crop
- cross
- crosshairs
- crown
- cube
- dagger
- database
- desktop
- dharmachakra
- diamond
- dice-d10
- dice-d12
- dice-d20
- dice-d4
- dice-d6
- dice-d8
- dice-five
- dice-four
- dice-one
- dice-six
- dice-three
- dice-two
- diploma
- disc-drive
- divide
- dna
- do-not-enter
- dog
- dollar-sign
- dolly
- door-closed
- door-open
- download
- draw-circle
- drone
- duck
- dumbbell
- egg
- eject
- elephant
- engine-warning
- envelope
- envelope-open
- eraser
- ethernet
- euro-sign
- exclamation
- expand
- eye
- eye-slash
- fan
- farm
- fax
- feather
- file
- file-certificate
- file-chart-pie
- file-check
- file-code
- file-csv
- file-excel
- file-exclamation
- file-export
- file-image
- file-import
- file-music
- file-pdf
- file-plus
- file-powerpoint
- file-user
- file-video
- file-word
- files-medical
- film
- filter
- fingerprint
- fire
- fire-extinguisher
- fireplace
- fish
- flag
- flag-checkered
- flashlight
- flask
- flower
- flower-tulip
- folder
- folder-open
- folder-plus
- folders
- font
- font-awesome
- football-helmet
- forklift
- forward
- function
- futbol
- garage
- garage-open
- gas-pump
- gas-pump-slash
- gavel
- gift
- glass
- glasses
- globe
- golf-club
- graduation-cap
- greater-than
- guitar-electric
- hammer
- hand-heart
- hand-holding
- hand-peace
- handshake
- hashtag
- hat-chef
- hand-side
- heading
- headphones
- headset
- heart
- helicopter
- helmet-battle
- hexagon
- highlighter
- hockey-puck
- hockey-sticks
- horse
- hospital
- hotel
- hourglass
- house
- house-user
- ice-cream
- ice-skate
- id-card
- images
- images
- inbox
- indent
- infinity
- info
- island-tropical
- italic
- jack-o-lantern
- key
- keyboard
- khanda
- knife-kitchen
- lambda
- lamp
- language
- laptop
- lasso
- leaf
- leaf-maple
- less-than
- light-switch
- lightbulb
- lightbulb-on
- lightbulb-slash
- link
- lira-sign
- list
- list-ol
- location
- lock
- loveseat
- lungs
- magnet
- mailbox
- map
- marker
- mars
- mask
- meat
- medal
- megaphone
- memory
- mercury
- meteor
- microphone
- microphone-slash
- microscope
- microwave
- mobile
- money-bill
- moon
- motorcycle
- mountain
- music
- music-slash
- network-wired
- newspaper
- not-equal
- notes-medical
- octagon
- oil-can
- om
- omega
- ornament
- outdent
- oven
- paint-roller
- palette
- paper-plane
- paperclip
- parachute-box
- paragraph
- passport
- pause
- paw
- peace
- pen
- pencil
- pepper-hot
- percent
- person-booth
- phone
- phone-plus
- phone-slash
- pi
- piano
- pig
- piggy-bank
- pizza
- plane
- plane-slash
- planet-moon
- play
- plus
- podcast
- podium
- poll-people
- popcorn
- power-off
- prescription
- projector
- pump-medical
- pumpkin
- puzzle-piece
- qrcode
- question
- quote-left
- quote-right
- rabbit
- radar
- radiation
- radio
- rainbow
- receipt
- record-vinyl
- rectangle-wide
- recycle
- refrigerator
- repeat
- reply
- reply-all
- ribbon
- ring
- road
- robot
- rocket
- rocket-launch
- router
- rss
- ruble-sign
- ruler
- rupee-sign
- sack
- satellite
- sausage
- saxophone
- scanner
- school
- screwdriver
- scroll
- sd-card
- seedling
- send-back
- server
- share
- share-all
- sheep
- shield
- shield-check
- shield-cross
- ship
- shovel
- shower
- shredder
- shuttlecock
- sigma
- signal
- signal-slash
- signature
- sim-card
- skull
- skull-crossbones
- smog
- smoking
- snake
- snowflake
- snowman
- solar-panel
- sort
- spa
- space-station-moon
- spade
- speaker
- speaker
- spider
- spider-web
- spray-can
- sprinkler
- square
- square-root
- star
- star-and-crescent
- star-half
- star-of-david
- stars
- steering-wheel
- stethoscope
- stocking
- stomach
- stop
- stopwatch
- shop
- strikethrough
- sunglasses
- sunrise
- sword
- syringe
- table
- tablet
- taco
- tag
- tags
- tape
- taxi
- telescope
- tennis-ball
- terminal
- text
- thermometer
- thumbs-down
- thumbs-up
- thumbtack
- ticket
- tilde
- toilet
- toilet-paper
- tombstone
- toolbox
- tooth
- toothbrush
- tractor
- trademark
- traffic-cone
- train
- trash
- treasure-chest
- tree
- trophy
- truck
- trumpet
- turtle
- tv
- typewriter
- ufo
- umbrella
- underline
- unicorn
- upload
- usb-drive
- user
- user-check
- user-clock
- user-lock
- user-minus
- user-music
- user-plus
- user-slash
- user-tie
- users
- vector-square
- venus
- video
- video-plus
- video-slash
- violin
- virus
- voicemail
- volume-slash
- vr-cardboard
- walker
- wallet
- wand
- warehouse
- watch
- water
- weight-hanging
- wheat
- whistle
- wifi
- wifi-slash
- wind-turbine
- window-maximize
- window-minimize
- window-restore
- windsock
- won-sign
- wrench
- x-ray
- yen-sign
- yin-yang
 
SCROLLS

Tired of posts that are as long as the Nile? Add a scroll and cut down on the space you're taking up on your screen!

OVERFLOW

There are three ways of dealing with overflow, two of which involve scrolls.

overflow: hidden; - makes all content that overflows out of the element's dimensions will be hidden
overflow: scroll; - adds a scroll to the element regardless of content length
overflow: auto; - adds a scroll to the element when there is overflow

When you make a scroll box, I suggest using padding to make sure that all of the text can be seen inside the box and isn't hidden by the scroll bar. To show you the difference, compare this scroll without padding versus one with:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat lectus et diam venenatis ullamcorper. Aenean luctus faucibus augue vel dignissim. Nam placerat, elit eget aliquam laoreet, quam sem mollis diam, id lacinia ligula sapien in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu elit fringilla, blandit nulla vel, lacinia est. Proin a quam efficitur, dapibus purus a, tincidunt lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum orci elit, at tempor est imperdiet a.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat lectus et diam venenatis ullamcorper. Aenean luctus faucibus augue vel dignissim. Nam placerat, elit eget aliquam laoreet, quam sem mollis diam, id lacinia ligula sapien in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu elit fringilla, blandit nulla vel, lacinia est. Proin a quam efficitur, dapibus purus a, tincidunt lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum orci elit, at tempor est imperdiet a.


SCROLLING IMAGES

If you are using an image as your background for the scrolling element, you can make it scroll with the page, or stay fixed. You do this through

background-attachment: scroll; - scrolls with
background-attachment: fixed; - stays fixed
background-attachment: local; - scrolls according to the element set

NOTE: make sure you put the code after the
background: URL(link here); code or else it won't work.
SECOND NOTE: doesn't work on Apple products.

Since images automatically scroll with the page, I'll show you what it looks like when the image is fixed.

Code:
[div=
width: 300px;
height: 150px;
background: url(https://images.unsplash.com/photo-1605749439419-80c81f67eefc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Zmxvd2VycyUyMGFlc3RoZXRpY3xlbnwwfHwwfHw%3D&w=1000&q=80);
background-size: cover;
background-position: center;
background-attachment: fixed;][/div]



INVISIBLE SCROLLS

Do you think the scroll bar is ugly? Do you want to get rid of it? You can. To do this, create a base box with
overflow: hidden;. Then, create another box inside the base box. Add width: 120%;, overflow-y: scroll;, margin-left: #%;, and padding-right: #px;. Adjust the values for margin-left and padding-right until hidden.

You can see it here:
Example example example example example example example example example example example example example example example example example example.


With this example, margin-left is set at 17% and padding-right is set at 15px.
 
MOUSE INTERACTIONS

Feeling nostalgic for the customization days of Myspace? Well, you can customize how your mouse interacts with your elements!

CURSORS

To change your cursor inside an element, simply use
cursor: name cursor;

A list of available cursors is here.

For example, I'll use the grab cursor in the orange box here:

box with cursor


If you want custom cursors, you can use any image that is 120px by 120px or less using this code:
cursor: URL(link), auto;

It is highly recommended that you use an icon around only 30px by 30px as the field of the cursor will become less accurate the bigger the image.

POINTER EVENTS

pointer-events: auto; - the default, allows the mouse to interact with a certain element
pointer-events: none; - prevents the mouse from interacting with a certain element

This is very useful for when you layer an element over another one and want to be able to interact with the element below it. For example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.
try to select text through me

 
ROTATION & ANIMATION

Time to tap into those 'Middle Schooler Got Ahold of Powerpoint Animations' vibes!

ROTATION

Wanna rotate and move some stuff? No problem, you do this with a few different options:

transform: rotate(00deg); - rotates the element however many degrees you choose


transform: scaley(0); - resizes the element along the vertical axis. If you use a value of (-1), it flips the picture vertically.

transform: scalex(00); - resizes the element along the horizontal axis. If you use a value of (-1), it flips the picture. horizontally.

transform: skewy(00deg); - skews an element in the vertical direction on the 2D plane


transform: skewx(00deg); - skews an element in the horizontal direction on the 2D plane


ANIMATION

Animation is done through
animation: name, duration, timing-function, delay, iteration-count, direction;.

Name, duration, and delay are pretty self-explanatory.
Timing-function refers to the speed of the animation over time, which can be consistent with linear, have a slow start with ease in, a slow end with ease out, and both with ease-in-out.
Iteration-count defines how many times the animation will play. You can use a specific number, or infinite.
Direction, in this case, refers whether the animation should play normally, in reverse (reverse), or alternating (alternate | alternate-reverse).

A common animation you'll see is spinning. You can achieve this through rotateSpinner. For example, using
animation: rotateSpinner 27s linear 0s infinite; gives you:



The other animations currently available on iwaku are fb_mpn_fade_out



fb_mpn_landing_page_slide_up



fb_bounce_in_from_left



fb_bounce_out_from_left



fb_mpn_bounce_in



and fb_mpn_bounce_out


 
MEDIA PLAYER

Do you want to jazz up (maybe literally) your stuff with some music? We can do that.

First, you need the media BBcode. Which is
[media=youtube]link to the video[/media]. If you're using a youtube video, you only need the string of letters and numbers at the end. So

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

Becomes
[media=youtube]hZvFGEE26vE[/media].

PLAIN

First, start with a base box like:
Code:
[div=
height: 32px;
width: 32px;
background: black;][/div]

Second, create another box inside the first. The height and width should be the same as the first one. Then add
overflow: hidden;.

Code:
[div=
height: 32px;
width: 32px;
background: black;][div=
height: 32px;
width: 32px;
overflow: hidden;][/div][/div]

Third, create another box within the other two. Add
position: absolute; and a margin-top input; so that the media player fits inside.

Code:
[div=
height: 32px;
width: 32px;
background: black;][div=
height: 32px;
width: 32px;
overflow: hidden;][div=
height: 32px;
width: 32px;
background: black;
position: absolute;
margin-top: 7px;][/div][/div][/div]

Fourth, add the media player code and then close the elements.

You should get this:

HIDDEN VIDEO

First, make a box. It can be any size that you wish.
Code:
[div=
width: 300px;
height: 30px;
background: #393939;][/div]


Second, add another box with the
[fa]fa-play-circle[/fa] and [fa]fa-pause-circle[/fa] font awesome icons. You can also add text, like a song title, and add whatever kind of fancy text codes you want. I recommend using padding-left:_px; to push the text over a bit so that the icons aren't hugging the left side.
Code:
[div=
width: 300px;
height: 30px;
background: #393939;][div=
padding-left: 10px;
line-height: 30px;
letter-spacing: 2px;
font-variant: small-caps;
font-style: italic;
font-size: 12px;][fa]fa fa-play-circle[/fa][fa]fa fa-pause-circle[/fa] ← click these buttons![/div][/div]

← click these buttons!


Finally, make another box containing the media player. Make sure to include
width: _px;, position: absolute;, and a bottom: _px; with the width and bottom size being whatever helps it fit in the box best. Then, add opacity: 0.01; so that you can't see the video. Afterward, use margins and position properties to pull the video under the icons. Personally, I like to use margin: auto; to center the video in the middle of the box, and then I use left: -_px; to pull the video toward the left until it is underneath the icons.

Code:
[div=
width: 300px;
height: 30px;
background: #393939;][div=
padding-left: 10px;
line-height: 30px;
letter-spacing: 2px;
font-variant: small-caps;
font-style: italic;
font-size: 12px;][fa]fa fa-play-circle[/fa][fa]fa fa-pause-circle[/fa] ← click these buttons![/div][div=
margin: auto;
left: -127px;
width: 30px;
opacity: 0.01;
position: absolute;
bottom: 25px;][media=youtube]mcdO9UP0hp8[/media][/div][/div]

← click these buttons!
 
ACCORDIONS

The basic setup of accordions is this:
Code:
[ACCORDION=#|b____]
{slide=clickable panel 1}text here{/slide}
{slide=clickable panel 2}text here{/slide}
[/ACCORDION]

The # acts as the width of the accordion panels and the b___ specifies how they will be aligned. The content within the {slide} tag determines what the panel looks like and the content between {slide} and {/slide} is what will be inside the panel once you click on it. To show this all in action, this

Code:
[ACCORDION=300|bcenter]
{slide=clickable panel 1}text here{/slide}
{slide=clickable panel 2}text here{/slide}
[/ACCORDION]

makes this:

clickable panel 1
text here
clickable panel 2
text here


You don't just have to use text on and within the slide, however. You can also create div boxes. For example, this

Code:
[ACCORDION=300|bcenter]
{slide=[div=margin: auto; height: 50px; width: 50px; background: green;][/div]}text here{/slide}
{slide=[div=margin: auto; height: 50px; width: 50px; background: green;][/div]}[div=margin: auto; height: 100px; width: 100px; background: purple;][/div]{/slide}
[/ACCORDION]

creates this:

text here


Now, if you're like me, you probably think the gray border of the panel is gross. Well, good news — you can get rid of it! To do this, add
[div=visibility: hidden;] right before the [ACCORDION] opening tag. Then add visibility: visible; to both the div box inside the panel and the div box on the slide. For example, this

Code:
[div=visibility: hidden;][ACCORDION=300|bcenter]
{slide=[div=visibility: visible; margin: auto; height: 50px; width: 50px; background: green;][/div]}[div=visibility: visible;]text here[/div]{/slide}
{slide=[div=visibility: visible; margin: auto; height: 50px; width: 50px; background: green;][/div]}[div=visibility: visible; margin: auto; height: 100px; width: 100px; background: purple;][/div]{/slide}
[/ACCORDION][/div]

makes this:
text here


Another little detail, if you'd like to add a bit of flourish to your panels, is if you write |open within the panel, it'll keep that panel open until you click on another one. For example, this

Code:
[div=visibility: hidden;][ACCORDION=300|bcenter]
{slide=[div=visibility: visible; margin: auto; height: 50px; width: 50px; background: green;][/div]|open}[div=visibility: visible;]text here[/div]{/slide}
{slide=[div=visibility: visible; margin: auto; height: 50px; width: 50px; background: green;][/div]}[div=visibility: visible; margin: auto; height: 100px; width: 100px; background: purple;][/div]{/slide}
[/ACCORDION][/div]

becomes this:

text here

 
TABS

Besides accordions, another common way to divide up your content is through tabs.

SIMPLE TABS

The simple way to do tabs is:
Code:
[TABS]
{slide=TITLE OF TAB}
content of tab here
{/slide}
{slide=TITLE OF TAB 2}
content of tab here
{/slide}
[/TABS]

which looks like this:


  • content of tab here

  • content of tab here


COMPLEX TABS

You can also use navigation links within the tab to switch back and forth between them without having to click on the actual tab name. To do this, you put
{tab = tab#} {/tab} around the word(s) you want to use as the navigation link. For example:

Code:
[TABS=300|bcenter]
{slide=UNO}y{tab=2}a{/tab}s{/slide}
{slide=DOS}yaa{tab=1}a{/tab}aas{/slide}
[/TABS]

Which gives you
  • yas
  • yaaaaas


You'll notice the links are the typical color of your layout choice. You can change the color of the text by using the normal
[COLOR=NAME] [/COLOR] code around the text.

You also aren't restricted to just text between slides and tab links. You can put div boxes, images, and text/font awesome icons between them.

This method is beneficial if you want to make codes where you click on a little image or icon on a sidebar and it changes the text box beside it.

HIDING THE TAB BAR

Think the tab bar is ugly and ruining your a e s t h e t i c ? You can hide it. Although you should only hide it using the second version of the tab codes, as the simple way would make it difficult to transition from one slide to another.

There are two ways to hide it: 1) Make a div box outside of the tabs with
z-index: 2;, position: relative;, and margin-top:-_px; to adjust it until it is laid over the bar. Use margin-bottom: _px; to add some space between the code and the website. For example:

Code:
[TABS=300|bcenter]
{slide=yeet}some real {tab=2}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}
{slide=skeet}some fake {tab=1}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}[/TABS]
[div=width: 300px; height: 50px; background: green; margin: auto; margin-top: -115px; margin-bottom: 50px; z-index: 2; position: relative;][/div]

Makes this:





2) Create a div element that encompasses the entire code + a little extra and add
overflow: hidden; to it, then add [div=margin-top: -#px;], both of which should be right before the [TABS] code to push the entire code up until the bar is hidden. For example:

Code:
[div=width: 300px; height: 50px; overflow: hidden;]
[div=margin-top: -70px;]
[TABS=300|bcenter]
{slide=yeet}some real {tab=2}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}
{slide=skeet}some fake {tab=1}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}
[/TABS]
[/div][/div]





 
SLIDERS

WARNING: If you're experiencing the same bug I am, then you may notice that you can't click the middle section of the slider despite it showing that it should be clickable. I assure you that the code does function when freshly posted, but for some reason, it bugs out in preview mode, after editing the post, and seemingly in spoilers like so.

Alrighty! So, are you familiar with sliders? They look like this normally:
content
content 2


and are obtained through this code:
Code:
[slider]
{slide}content{/slide}
{slide}content 2{/slide}
[/slider]

But you want to make them fancy, don't you? We can do that! For example, let's go ahead and get rid of the arrows and bottom circles, shall we?

To do this, we need to establish dimensions for the slider element. Shout out to Ardent for figuring out the dimensions on these!

For this, I'm going to use
[slider=300x300]. That'll resize the slider to this:
content
content 2


Now, we need to put the slider in a smaller div with
overflow: hidden; so that when we add margins to push the element around, the arrows and dots will get hidden when they overflow. In terms of the dimensions of this smaller div box, since the arrows are about 47px wide, we'll need to reduce the div's width by 94px (47 + 47 = 94). In this case, since I'm using 300px, that'll be 300px - 94px = 206px. For the dots, they are about 25px tall, meaning we need to reduce the div's height by 25px, which in this case would be 300 - 25px = 275px.
Code:
[div=
width: 206px;
height: 275px;
overflow: hidden;][slider=300x300]
{slide}content{/slide}
{slide}content 2{/slide}
[/slider][/div]

Now that we've done that, we can add the left and right margins in a second div, which would be
margin-left: -47px; and margin-right: -47px;. We also need to add a max-width of the same size as the slider (in this case, 300px). You also need to add !important after the max-width to override the the element's default max-width. Now, you should have:
Code:
[div=
width: 206px;
height: 275px;
overflow: hidden;][div=
margin-left: -47px;
margin-right: -47px;
max-width: 300px !important;][slider=300x300]
{slide}[div=
width: 206px;
height: 275px;
background: green;][/div]{/slide}
{slide}[div=
width: 206px;
height: 275px;
background: purple;][/div]{/slide}
[/slider][/div][/div]

(Boxes added so it's easier to see.)

This will finally give you:


If you like having the regular middle section but want to cover up the arrows, we can do that, too! That's a simple matter of layering our own items over them, like when you hide the tab bar. So, let's take our simple code again with some established dimensions:
Code:
[slider=300x300]
{slide}content{/slide}
{slide}content 2{/slide}
[/slider]

Now let's create a div with the same height (in this case, 300px) and a width of 47px. Afterward, we'll need to add a
margin-top: -_px; code to drag the div up and over the slider code, a z-index: 10; and position: relative; to bring it over the original arrow, and pointer-events: none; so that we can click through it. So:
Code:
[slider=300x300]
{slide}content{/slide}
{slide}content 2{/slide}
[/slider][div=
z-index: 10;
position: relative;
height: 300px;
width: 47px;
background: green;
margin-top: -300px;
pointer-events: none;][/div]

Which will look like this:
content
content 2


Then, you want to do the same thing with another div but also add
margin-left: _px; to push it right over the arrow. So:
Code:
[slider=300x300]
{slide}content{/slide}
{slide}content 2{/slide}
[/slider][div=
z-index: 10;
position: relative;
height: 300px;
width: 47px;
background: green;
margin-top: -300px;
pointer-events: none;][/div][div=
z-index: 10;
position: relative;
height: 300px;
width: 47px;
background: green;
margin-top: -300px;
margin-left: 255px;
pointer-events: none;][/div]

Which will give you this:
content
content 2