Coding Guide

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
Hello, all! This coding guide originated as a tool used by myself and some friends in PMs, but I've decided to move it to threads so that more people can have access to it. My main reason for this is that I discuss some parts of coding that I have yet to find explanations for in other coding guides, such as tabs. My goal with this coding guide is to offer an in-depth, step-by-step explanation of various aspects of coding that beginners can easily understand. I hope that when people read through these explanations, they don't just leave with a copied code but also a greater understanding of the 'why's so that they can advance towards a more instinctive understanding of coding.

These three resources will be instrumental in your coding journey, and a lot of what I explain here is taken from these resources, so make sure to refer to them as well:
Divtionary
BBcode List
BBCode Help

Some other helpful resources worth noting:
HTML Color Picker
Tint and Shade Generator
Random Palette Generator
Transparent Textures
Stripe Generator

If you'd like some templates to play around with while you learn, or just in general, feel free to use my templates located here: rosemary ও peppermint {coding storage}.

Now, here are the different topics, placed in spoilers to save space:

Let's start with some basics, shall we? So, every "box" is going to require div. Which looks like this:
Code:
[div=]
That's how you start a div box. You are always going to want to close a div box with:
Code:
[/div]
Similarly, any time you use an opening tag like [ FONT ] or [ COLOR ] or [ TABS ], you’re going to eventually close the element, in the same way, using the ‘/‘.

A little tip: you can use /*example text here*/ within codes to leave yourself little notes 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; and then add text to the element, which will not show, but will act as a label. This particular code is handy as certain sites require text within an element in order for that element to show.

Now, dimensions.
Code:
[div=
margin: auto;
width: 100px;
height: 100px;
background-color: teal;][/div]



where margin: auto; centers your div.
The width: #px; and height: #px; sets height and width
I used px but, alternatively, you can use % as well. % makes it mobile-friendly because it occupies that percent of the screen but it's more difficult to work with when your code's more complicated, in my experience.

Tip for making mobile-friendly codes: Iwaku codes are (in my experience) always mobile-friendly as long as you're working with a code with a width of less than 450px (it's probably more like less than 500px, but I go by 450px to be safe). The height of a code doesn't matter, but the width will get cut off on mobile. Also, if you have an element that you've pushed outside of that 450px limit, it will also be cut off on mobile. Basically, it's better to make long and skinny codes than to make wide ones if you want to make codes safe for both PC and mobile.

Notice the use of ';' after each input. That's important, or that input won't work.

MARGINS AND PADDING:

On margins, you can also change specific parts of the margins. Meaning you can do margin-top, margin-bottom, margin-left, and margin-right. You can also use margin: _px; to affect all sides of the element, or margin: auto; to center the element. Margins refer to the space around the element, so changing their size will push and pull the code around in whatever direction you choose. 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 (margin-right, etc) because it's easier for people to navigate. Still, if you see them written like above, now you know what it means.

Similarly, you can use padding, which works in the same way with padding-top, padding-bottom, padding-left, and padding-right. Additionally, you can do just plain padding which will impact all sides of the element, or you can write them out with the four/three/two numbers system. Unlike margins, which are the space around the entire element, padding controls the space between an element and its border.

For a visual, here is a simple diagram:
boxdim.png


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-TOP VS TOP:
Another thing to keep in mind is that there are also top: _px;, bottom: _px;, right: _px;, and left: _px; codes that are separate from margin-top, etc. It's a bit hard to sum up the difference in plain English, so I'd suggest looking here for a more in-depth explanation if you'd like it: Top Versus Margin-Top.

Really, all you need to know is that sometimes when you make a div within a div, margin-top isn't going to actually position the element due to the div's positioning value. If this happens, use top instead, and that should solve the problem.

Don't get background-color and color confused. Background-color refers to the color of the box, whereas color refers to the color of the text in the box. Personally, I just use the plain background, as this works for solid colors, gradients, and images (which I will guide you through later). But some people do use the background-color, and that code can be combined with the background: URL( ) code, so it’s still worth noting.

For either, you can use the name of the color, a hex code, or the rgb. 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);


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. For example:


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:


You can also repeat the gradient with
background: repeating-linear-gradient(hex code, hex code, hex code, hex code);.


Do you want a circular gradient? Use
background: radial-gradient(hex code, hex code);. For example:


If you'd like it to repeat, use
background-color: repeating-radial-gradient(hex code, hex code, hex code, hex code);.

If you want to make the box more translucent, like this:



You can do that via opacity: #;
with # being between 0 and 1, with 0 being completely translucent and 1 being completely opaque.

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 opacity, which affects all of the elements within the div including text, the rgba code will only affect the background of the element.

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



Basically, instead of putting the color, you use the URL(link). For example, using the above picture:

background: url(https://i.pinimg.com/236x/10/1b/f7/101bf72c429590ff0f8ba15f4a363b9a.jpg);


SIZE:

Now, I'll show you how to size the images. To do this, you use background-size: ___;

There are three options for sizing:

background-size: cover;
background-size: contain;

and background-size: #px;

Using 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.

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.

Using #px basically acts as a zoom. The higher the number, the more it zooms in on the picture.

POSITION:

Now I'll show you how to position the image.

For this, 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%).

FILTER:

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(%)

TEXTURE/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:


Time for borders! Is



too boring for you? Try a border!



You do this via border: #px style color;

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

You can also change specific parts of the border by using border-top, border-bottom, border-left, or border-right instead of the normal border.

OUTLINE:

Outline is an alternative border code that can be combined with the border code for a double-border. The code for this is outline: #px style color;.

ROUNDING OUT:

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

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



You can also make different parts more rounded by others by doing border-radius: #% #% #% #%;, which goes from top left > top right > bottom right > bottom left.

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;.

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 grey.

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 to the normal code 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(horizontalpx, verticalpx, blurpx, color);.

It'll look like this:

So, there are three options for display.
display: block;
display: inline-block;

and display: flex;

display: block;
is basically the default setting, but it just puts the two boxes in different lines, so they're on top of each other. For example:


display: inline-block; puts the blocks on the same line, meaning they are right next to each other.



display: flex; is the more complicated one. Here's a good site to help you learn about them. But here are some helpful terms:

display: flex; starts 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

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

For example:


Code:
[div=
/*flexbox opened*/
margin: auto;
width: 500px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;][div=
/*pink box*/
width: 50px;
height: 100px;
background: #f282df;][/div][div=
/*bordered box*/
width: 100px;
height: 50px;
background: #3e4d9a;
border: 5px double #16ca09;][/div][div=
/*picture*/
width: 150px;
height: 70px;
background: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/27C9/production/_103158101_tha.jpg);
background-size: cover;
background-position: center;
padding-left: 25px;
padding-top: 20px;][div=
/*blue box inside picture*/
width: 100px;
height: 30px;
background: rgba(66, 134, 244, 0.6);][/div][/div][/div]

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

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


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 impossible to transition from one slide to another, I would imagine.

There are two ways to hide it: 1) 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]






2) Make a div box outside of the tabs with z-index: 2; and then use 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 margins. 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;][/div]

Makes this:




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; 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;
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=
float: right;
z-index: 10;
position: relative;
height: 300px;
width: 47px;
background: green;
margin-top: -300px;
pointer-events: none;][/div]

Which will give you this:
content
content 2

It's a lot simpler to just order things in the traditional way, but this is helpful for covering up parts of code you don't want visible. You do this by using z-index: #;.

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:

This




becomes this



Once I assign a z-index value of 1 to the purple box and a z-index value of 2 to the blue box. The blue box has been layered over the purple now.

So you wanna learn how to make a scroll box? It's super easy. You just use overflow: ___;. The options are

overflow: hidden;
overflow: scroll;

or overflow: auto;.

Basically, any content that spills over the dimensions of the box can either be hidden or provided a scroll bar. With the auto choice, it will only add a scroll bar if the item is flowing outside the dimensions of the box, but will not create a scroll if it is within the dimensions of the box. If you use the scroll option, it will create a scroll bar no matter what.

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.

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;.

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


Also, you can make your background image scroll with you, or stay fixed. You do this through
background-attachment: scroll;
background-attachment: fixed;

or background-attachment: local;.

The local option works similarly to auto in overflow.

Do you want to jazz up (maybe literally) your stuff with some music? We can do that, and I'll show you how using the example in the divtionary.

First, you need the media BBcode. Which is [ media = youtube ] link to the mv [ / media ]. Without the spaces, obviously. 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 ].

Want it in a little square?

First, start with a base box like:


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

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

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

You should get this:

Don't like the look of that? How about a bar with a play and pause button?

The first and second steps are the same as with the square, but you're going to want to make a rectangle like this:



Third, open another element and add in a display: inline-block;. Set the text color to whatever you wish, but in this case I'll use white. Add in padding and margins as you wish. Then, you'll want to use font awesome code. To do this, use [ fa ]fa-(name of symbol) [ / fa ]. Then, close the element. So you should have:



Now, open a fourth element and add in a width, a display: inline-block;, an opacity: 0.01;, a position: absolute;, and margins as needed to move the media player over to the "buttons".

Then, add in the media player and close the remaining elements.


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

transform: rotate(00deg);
transform: scaley(00);
if you use a value of (-1), it flips the picture vertically.
transform: scalex(00); if you use a value of (-1), it flips the picture horizontally.
transform: skewy(00);
transform: skewx(00);


For a longer list, as well as seeing examples, go here.

Let's focus on rotation. Use the transform: rotate(#deg); option, and change the #deg to whatever degree you want to rotate the element.

Using a 60 degree rotation, you go from this:



to this:


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


Tired of the same old cursors? You can change them within an element! To do this, 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:

Do you have a layer underneath another that shouldn't be seen, but that needs the mouse to interact with it? Then use pointer-events: auto;. Use pointer-events: none; to prevent the mouse from interacting with a certain element.

I've never used this, but you can find more on this here.

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, the ability to increase the size of the icon and to animate it 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-nameoficonhere[ /fa ].

You can change the color and size of the icon by simply using the [ COLOR = ] [ /COLOR ] and [ SIZE = ] [ /SIZE ] codes from before.

- accessible-icon
- air-conditioner
- alarm-clock
- alarm-clock-plus
- alarm-clock-snooze
- album
- alien
- align-center
- align-justify
- align-left
- align-right
- align-right
- amp-guitar
- 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
- bandcamp
- barcode
- barcode-scan
- bars
- baseball
- basketball-hoop
- bat
- battery-empty
- battery-slash
- battle-net
- bat
- bed-empty
- bell
- bell-exclamation
- bell-plus
- bell-slash
- bezier-curve
- bicycle
- blender
- blinds
- blinds-open
- blog
- blogger
- 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
- brush
- buffer
- bug
- building
- bullhorn
- bullseye
- bullseye-arrow
- burger-soda
- burrito
- bus
- bus-school
- business-time
- cactus
- calculator
- calendar
- calendar-check
- calendar-exclamation
- calenda-minus
- calendar-plus
- calendar-star
- calendar-week
- 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
- cheese
- chess
- chess-bishop
- chess-knight
- chess-pawn
- chess-queen
- chess-rook
- cheese
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- child
- church
- circle
- city
- clipboard
- clipboard-check
- clipboard-list
- clock
- closed-captioning
- cloud
- code
- coffee
- coffin
- coin
- 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
- faucet
- 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
- gamepad
- 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
- sitemap
- skull
- skull-crossbones
- smog
- smoking
- snake
- snowflake
- snowman
- solar-panel
- sort
- spa
- space-station-moon
- spade
- sparkles
- 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
- traffic-light
- 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

Alright, so we've pretty much finished everything that I can think of for the actual boxes. So let's talk about text options!

Keep in mind these codes are used inside of the div box code, and therefore don't use the [ FONT = ] / [ SIZE = ] / [ B ] / [ I ] / [ CENTER ] / etc coding you might see with regular posts. These are to be added to the div code like any other code we've discussed before would be, and will affect all of the text inside the box. Text would be placed inside the div box by placing it between the closing "]" and the "[/div]."


COLOR:

We've already mentioned color: color-name; as the way to change the color of the text within a div box. You can also use a hex code in place of a color name for more customization. If you want to change the color of just a small portion of text, instead of all of the text within the div box, use [ COLOR] [ /COLOR ].

GLOW:

You can add a white glow to your text through [ GLOW ] [ /GLOW ]. If you want the glow to be a specific color, use [ UGLOW=colorname ] [ /UGLOW ].

FONT:


WARNING: The latest Iwaku update has broken Google fonts. You can request more here: [x].

To use a font within an entire div box, use font-family: name of font;. If you only want to change a portion of the text, use [ FONT ] [ /FONT ].

NOTE: Not all fonts work with the font-family code. Instead, you will have to use the [ FONT ] [ /FONT ] around the entire div box to change all of the text or within the div box to change the text for that specific section.

You can find the list of google fonts here: [x].

BLUR:
You can blur text using [ BLUR ] [ /BLUR ].

SIZING:

This is simple: font-size: #px;.

WEIGHT:

If you want the text to look bolder or lighter than that font typically does, use font-weight: bold; or font-weight: lighter;.

ITALICS:
Use font-style: italic;.

SMALL CAPS:

Use font-variant: small-caps;.

TEXT ALIGNMENT:

There are four options for this, as I'm sure you're already familiar with.
text-align: left;
text-align: right;
text-align: center;

or text-align: justify;.

ADDING A LINE:

If you want to underline the text, use text-decoration: underline;. If you want to strikethrough, use text-decoration: line-through;. If you want a line above, use text-decoration: overline;.

Like with borders, you can also change the style and color of the line. For example, you can do text-decoration: underline dotted red;.

TRANSFORM:

Unlike with boxes, this doesn't make the text tilt. The options for this are:
text-transform: uppercase;
text-transform: lowercase;

or text-transform: capitalize;

and they are what they say on the tin.

SHADOW:

Similar to a box-shadow, but for text! It works in the same way with text-shadow: (w)px (h)px (b)px color;.

LINE HEIGHT:

This determines the height of the line, basically making the space between each line of text larger or smaller. This is done through line-height: #px;.

LETTER-SPACING:

Want your text to look l i k e t h i s? Use letter-spacing: #px;.

WORD WRAP:

Want to do what they do in books where long words are sometimes separated with a "-" at the end of a line? Use word-wrap: break-word;.

TOOLTIPS:
Want to hide a secret message inside of text? Use [ TOOLTIP=secret text here ] visible text here [ /TOOLTIP ]. This will reveal a secret message when you scroll over the text. For example: visible text here.

ISPOILER:
Another way of hiding a secret message that isn't so secret is by hiding the text until it is clicked on. You can do this through [ ISPOILER ] visible text here [ /ISPOILER ]. For example: visible text here.


And that's pretty much all you need to know!

I hope some of you find this helpful! If there's another topic that you'd like me to explain, or if you require further assistance, don't be afraid to shoot me a message or leave a comment here.
 
Last edited:
Updated 04/13/22 with slider information
 
Updated 07/15/2022 with a full list of font awesome icons that currently work on Iwaku for your reference. Since I did this by hand, it's possible I missed one or two, so if you notice an icon missing, please let me know so I can add it to the list! c:

I also separated the font awesome icons section from the 'text stuff' section so that it's easier to find.