Divtionary

[Nemopedia]

Divtionary

A list of CSS properties available on Iwaku.

For any questions in regards to CSS coding, please head to the BBCode help thread.

If you have any suggestions on what to add, to improve, or to write a guide on 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.

Nifty Links

- W3schools CSS references
- Css Reference
- CSS Tricks
- Playground
- BBcode help thread
- Iwaku BBCode list
- Font-awesome cheat sheet
- Flexbox Cheatsheet

Index

- Hiding the scrollbar
- Youtube player with CSS

Base

MARGIN: Determines the distance between the elements or the position on the canvas.

USE: Margin: 00px; or
Margin: auto; (brings the box to the center when used in combination with a width.)

NOTES: You can specify which side the margin applies to by adding -top, -right, -left, -bottom behind margin. (e.g: margin-left: 00px;)

Padding: Sets a distance between the element and the border.

USE: Padding: 00px; or
Padding: 00%;

NOTES: Similar to MARGIN the side that is affected by the padding can be specified.
(e.g: Padding-right: 00px;)
Adding the padding in the same tag as the width will make the box wider and possibly have it cut out of view when viewed on smaller screens. Split the padding and the width to prevent that from happening.

WIDTH: Sets the width of the element.

USE: Width: 00px; or
Width: 00%;

NOTES: When working with several elements stacked on top of each other of various widths it is best to set the width of the parent element (first box) with absolute numbers ('px') and then all following elements within with relative numbers ('%'). This will help with mobile friendliness.
(e.g: 1st div = width: 100px;] [ 2nd div = width: 80%;] The first div is the parent from which the second div (the child) will take 80% of.)

HEIGHT: Sets the height of the element.

USE: Height: 00px; or
Height: 00%;

NOTES: See WIDTH

BACKGROUND: Sets the background colour of the element, or places an image as its background.

USE: Background: colour name; or
Background: #colour hex; or
Background: url(image url);

NOTES: When setting an image as the background be sure to specify the height of the box. The image won't show up otherwise.

GRADIENT: Continuation on BACKGROUND, but dedicated to setting a gradient.

USE: (Top-Bottom)
Background: linear-gradient(col1 ,col2); or
(Left-Right)
Background: linear-gradient(to right ,col1 ,col2); or
(Diagonal)
Background: linear-gradient(to bottom right, col1 , col2); or
(Multiple colours)
Background: linear-gradient(col1 ,col2 ,col3);

NOTES: Try some advanced gradient effects as found in this article for more.

OPACITY: Second continuation on BACKGROUND, but dedicated to setting the opacity. Determines how see through an element is.

USE: Opacity: 0.1 - 1; or
Background: rgba(r,b,g,a);
(red,green,blue,alpha)

NOTES: Opacity will target the element as a whole, including text. Background: rgba(..) will only target the background of the element and leaves the text alone.

BACKGROUND-REPEAT: Determines how the background image repeats itself over the width and the height of the element, or the lack of it.

USE: Background-repeat: no-repeat; or
Background-repeat: x-repeat; or
Background-repeat: y-repeat;

NOTES: Background images default themselves into repeating when nothing is specified and there is still 'room' that needs to be filled up.

X = Horizontal
Y = Vertical

BACKGROUND-SIZE: Sets the dimensions of the background image.

USE: Background-size: (width)px (height)px; or
Background-size: (width)% (height)%; or
Background-size: cover;

NOTES: See the article of CSS reference on background-size to see more options and what they do.

BACKGROUND-POSITION: Determines the position of the image within the element.

USE: Background-position: (x)px (y)px; or
Background-position: (x)% (y)%; or
Background-position: center;

NOTES: See W3schools for more properties and their uses.

X = Horizontal
Y = Vertical

BACKGROUND-ATTACHMENT: Determines whether the background image stays fixed or will scroll along.

USE: Background-attachment: scroll; or
Background-attachment: fixed;
Background-attachment: local;

NOTES: Scroll - the default setting, scrolls along with the page.
Fixed - will not scroll with the page.
Local - scrolls according to the element set.

Doesn't seem to work on Apple devices?

DISPLAY: Determines how an element will appear.

USE: Display: inline-block; or
Display: flex; or
Display: none;

NOTES: Inline-block - the element(s) will appear on the same horizontal line.
Flex - does the same as inline-block, best option for making mobile-friendly templates.
None - the box won't appear at all.

Flexbox cheatsheet

FLOAT: Sets an element to a specified side.

USE: Float: right; or
Float: left;

NOTES: Usually used in combination with the 'inline-block' property explained in DISPLAY.

FLEX:Determines how elements interact with each other and stack next to each other.

USE: Flex: #;
'#' being any number you want.

NOTES: Fill in any number as needed for each flex box. The lower the number of the flex-box the lower its priority is over other boxes with a higher number, thus making them smaller. Equal numbers will give the boxes equal priority and thus equal amount of room.

Text

COLOR: Determines the colour of the text.

USE: Color: colour-name; or
Color: #hex;

NOTES: I apologise to all British-English users. It triggers me as well.

FONT-FAMILY: Determines the font of the text within the element.

USE: Font-family: fontname;

NOTES: Google fonts don't work within div boxes unless they have been 'summoned' before. This is possible by adding the fonts at the start of the template through its regular bbcode tag.
(e.g: (['font'= font name] font name [/'font'];))

FONT-SIZE:Determines the size of the text within the element.

USE: Font-size: 00px; or
Font-size: 00em; or
Font-size: calc(10px+2vw);
- credit to @darkflames13 for finding a standard formula.

NOTES: For more on font-sizes see the article of CSS Reference. The full formula for a font-size that will adjust itself to the screensize is:
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

The formula in the box left is a simplified version of above.

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 uppsercase, 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.
colour = the colour of the shadow. Can be the name of the colour 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.

Box

BORDER: Sets a border style, colour, and thickness around the box.

USE: Border: 00px style colour;

NOTES: 00px = the size of the line.
Style = solid, dotted, wavy, etc...
Colour = either the name of the colour or its hexcode.

The side of where the border appears can be specified by adding the side after 'border'.
(e.g: border-top: to target the top border.)

Box-sizing: Helps the border to be defined separately from the element.

USE: Box-sizing: border-box;

NOTES: All padding, height, and width added after the box-sizing will include the border as well.

BOX-SHADOW: Adds a shadow to the box.

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

NOTES: W = width of the shadow.
H = height of the shadow.
B = blur of the shadow, optional. Helps with the definition of the shadow.
Colour = can be the name of the colour or the hex.

BORDER-RADIUS: Rounds the corners of the box.

USE: Border-radius: 00px; or
Border-radius: 00%;

NOTES: Using relative numbers ('%') helps with mobile-friendliness.

A specific corner can be targeted by adding in the side after 'border'.
(e.g: border-top-right: 00px style colour; will target the top right corner.

OVERFLOW: Determines what will happen to the content that goes outside of (overflows) the element.

USE: Overflow: hidden; or
Overflow: scroll; or
Overflow: auto;

NOTES: Hidden = hides the overflowing content.
Scroll: adds a scroll for the overflowing content.
Auto: will add in a scroll as needed.

To target either the y-axis (height) or the x-axis (width) specifically add in the letter of the axis behind the overflow.
(e.g: overflow-y: scroll; will make the content of the element scrollable vertically (in height).)

Guide for an invisible scroller.

Transform: Rotates an element.

USE: Transform: rotate(00deg); or
Transform: scaley(00); or
Transform: scalex(00); or
Transform: skewy(00); or
Transform: skewx(00);

NOTES: See W3schools to see what each property does and what they mean.

SHAPE-OUTSIDE: Determines how the content will wrap around the floating element.

USE: Shape-outside: circle(00px 00px); or
Shape-outside: ellipse(00px 00px); or
Shape-outside: inset(00px 00px); or
Shape-outside: polygon(00px 00px); or
Shape-outside: url(image url);

NOTES: The absolutes ('px') can all be replaced by relatives ('%')

More info about shape-outside on CSS-Tricks.

CURSOR: Changes the appearance of the cursor within the element.

USE: Cursor name cursor;

NOTES: List of cursors - W3schools.

Z-INDEX: Where Y- stands for the height of the element and X- for the width of the element, Z- stands for the layers of the elements. With the help of the z-index elements can be moved forward, or to the back as needed.

USE: Z-index: #;
'#' being whatever number you want to enter.

NOTES: '1' is the standard, with '0' being the webpage of Iwaku itself. Each div tag counts for a layer and properties like slides and tabs often have added layer(s) as well. It often takes a little guessing and adjusting to get the right number with more complicated codes.

Ordering the layers of the elements from the beginning through tags is often much more effective than using the z-index.

POINTER-EVENTS: Defines whether an element reacts to pointer events (your mouse).

USE: Pointer events: auto; or
Pointer-events: none;

NOTES: Really nifty for when elements are stacked on top of each other and only the underlying layers need to interact with the mouse, but not appear.

More on pointer-events by CCS Tricks.

ANIMATION: CSS animations without the use of HTML or Javascript.

USE: Animation: name, duration, count;
(e.g:animation:fa-spin 5s linear infinite;)

NOTES: Still a very limited feature. Most guides online give more options than are actually available on Iwaku, or most browswer.

- CSS Tricks on CSS animations.
- W3schools on CSS animations.

 

[Nemopedia]

Hiding the Scroller

Hiding that scroller because its looks can't be helped. Revamped after the September 2018 server update to make the code compatible.

Step 1: The Base - set the width of the first element, add in an overflow: hidden;. In this example I used a blue background and set the box to a width of 100px. Let's call it box 1.

Result:

Example example example
Lorem ipsum something Latin, let's be fancy we are just trying things out. Note how the text gets cut off by the box once it grows too long for the height?

Step 2: The Scroll - create within box 1 another box by opening a new div tag. Set the width to: Width: 120%;. Add in the height, for the example I used a height: 100px;. Add in Overflow-y: scroll; and add in a margin-left: 00%; and a padding-right: 00px;. Let's name it Box 2. For the example I used a margin-left: 20%; and a padding-right: 15px;, however the numbers can vary depending on the design and the frames. There are no set numbers!

Result:

Example example example
Lorem ipsum something Latin, let's be fancy we are just trying things out. Note how the text gets cut off by the box once it grows too long for the height? And now you can read it because there is a scroller.

N.B: The steps are the same for both with and without flex. Adjust as needed!

 

[Nemopedia]

Youtube player with CSS.

This guide has been updated to reflect the latest server update of September 2018!

Once upon a time there was a guide that explained how to make a nice and compact YouTube player with the help of CSS. Unfortunately the member has gone inactive and as such the guide has been archived. However, the guide is still relevant and so here goes...

The Media BBCode

First, we will need to understand the BBCode behind the media player. The media BBCode the forum uses goes as follows: [ media = youtube ] link to the mv [ / media ]. Take care not to copy the whole YouTube link, just the identifier is fine. You can find the identifier at the end of the url in your browser. To show you an example I have taken a full YouTube link marked the identifier bold:

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

That is the part you will copy and pasting for the media code. So in this case the code would look as follows:

[ media = youtube ] ckxLXofmFF [ / media ]

N.B: Be sure to delete the spaces between! More information on BBCodes on Iwaku can be found through Help > BBcodes.

The Square

Now that we have the basics down we get to the following steps. Resizing it to a nice and compact player. The most commonly used format I have seen is the square in a corner. I will share the basic formatting, without any dressing up so that everyone can style it accordingly.

STEP 1: Open the first element and set the width and height of the box. In the example the width and height are both 32px to create a square.

Result:

N.B: for easier understanding I have added a black background colour to the element. The default setting is transparent.

STEP 2: Open another element inside of the first element. Set again the width and height of the second box, make it the same as the first one. Replacing it with relative numbers (100%;) is also allowed (and easier). Set an overflow: hidden;.

Result:

STEP 3: Open a third element within the previous two elements created. Add in a position: absolute; and top: 5px;. This will help the mediaplayer position nicely in the square box already created.

Result:

STEP 4: The media player - Add in the media player bbcode as shown in the beginning of the guide. Close the three elements after. Finished!

Result:

A/N: Add in an opacity property in the third element to fade away the player. Play around with the box-styling as seen in the first post of this thread to see what effects can be added for an extra layer of personality and style.

The Bar

Another popular way to style the YouTube player is by displaying it as a black bar with a play and pause button. This one is a little more tricky, in my opinion, but looks very smooth. Again, I'm sharing the functional parts of the codes. The codes can be altered and dressed up to own preference and needs.

STEP 1: Open the first element and set the width and height. This time the example uses 100px for the width and 22px for the height. Set the background colour to be black, or whatever colour is preferred.

Result:

STEP 2: Open another element and repeat the width and height again, they may be replaced by relative numbers(100%;) as well. Add in an overflow: hidden; property.

Result:

STEP 3: Open another element and add in an display: inline-block; . Set the text colour to white. Add in a padding, the margins can be determined to own taste and preference (the example only makes use of a padding-left). Close the element. Add in the font-awesome within the element. The example uses the fa-play and the fa-pause.

About font-awesome.

The font-awesome feature is a BBCode supported on Iwaku that helps you insert symbols. To use the font-awesome all that is needed is the following code:

[ fa ] fa-(name of symbol) [ / fa ]

And there is no need to add in anything between! Again, delete the white spaces. To find out what font-awesome symbols there are there is a nifty cheat sheet roaming around the internet.

Result:

STEP 4: Open another element and add in add in a display: inline-block;. Add in an opacity of 0.01;. Add in a position: absolute; and a bottom: 15p; so that the player will align nicely in the box created with the first elements.

Result:

STEP 5: Add in the media player bbcode as shown in the beginning of the guide. Close the remaining elements after. Finished!

Result:

A/N: change the background colour, or add in shadows, or etc... with the help of the first post in the thread to personalise the code accordingly!

 

[Nemopedia]

Gotta figure out tabs again. Whenever I have the time.

Tabs

Tabs. Versatile, if you know how. A simple basic guide on how to fix that.

The Tabs BBCode

First thing is the Tab BBcode in overall. You can find the code in the BBCode list of Iwaku.

It is fairly straight-forward. [Slide] is for each new slide and the {tab} links to the slide in the order that you have them. Do keep in mind that for each new slide you use a square bracket, like you do with most codes, but for tabs you use curly brackets.

N.B:As this guide only aims to explain the foundation of how tabs can be used. I will go the simple route and use three slides and accompanying tabs with.

Cutting it out

STEP 1: Start with a the tab BBCode.

Result:

Tab 1 Tab 2 Tab 3

• Content 1
  2
  3
• 1
  Content 2
  3
• 1
  2
  Content 3

code

[SLIDE_HEADER]Tab 1[/SLIDE_HEADER]
[SLIDE] Content 1
{tab=2}2{/tab} 
{tab=3}3{/tab}
[/SLIDE]
[SLIDE=Tab 2]
{tab=1}1{/tab} 
Content 2
{tab=3}3{/tab}[/SLIDE]
[SLIDE=Tab 3]
{tab=1}1{/tab} 
{tab=2}2{/tab}
Content 3[/SLIDE][/TABS]

STEP 2: Open an element in front of the whole tab. Add in a top:-55px; and close it at the end of the table. You're done now.

N.B: For the example I added in a height: 100px; and an overflow: hidden; in a separate element before so that it will cooperate. If your code template has a bunch of text on top like it does here, then it is recommended that you define the height first and add in the overflow: hidden; element as well before following with the negative top-margin.

Result:

Tab 1 Tab 2 Tab 3

• Content 1
  2 >
  3 > >
• < 1
  Content 2
  3 >
• < < 1
  < 2
  Content 3

Covering it up

STEP 1: Start with a the tab BBCode.

Result:

Tab 1 Tab 2 Tab 3

• Content 1
  2
  3
• 1
  Content 2
  3
• 1
  2
  Content 3

code

[SLIDE_HEADER]Tab 1[/SLIDE_HEADER]
[SLIDE] Content 1
{tab=2}2{/tab} 
{tab=3}3{/tab}
[/SLIDE]
[SLIDE=Tab 2]
{tab=1}1{/tab} 
Content 2
{tab=3}3{/tab}[/SLIDE]
[SLIDE=Tab 3]
{tab=1}1{/tab} 
{tab=2}2{/tab}
Content 3[/SLIDE][/TABS]

STEP 2: Open a div tag. Add in a z-index: 1;, add in a background: colour set the height: 60px; and top: 55px;.Close the element '[ / D I V ]' before the '[ T A B S ]'. You may adjust the numbers, but I find these to work for me.

For the sake of the example I have used gray for the background colour.

Result:

Title 1 Title 2 Title 3

• Content 1 -
  2
  3
• 1
  Content 2
  3
• 1
  2
  Content 3

STEP 3: Open another div at the very beginning of the code so that it will surround the whole table. Add in a background: colour of the same colour as you used to cover the top part of the tabs. In this example that would be gray as well (always keep in mind to adjust the text colour as well). Now you are finished!

Now you can play around with the widths and heights, or colours, or whatever else there is you want to play around with (add in more slides, etc... flip it over...) and customise as you like. You have the base here.

Result:

Title 1 Title 2 Title 3

• Content 1 -
  2 >
  3 > >
• < 1
  Content 2
  3 >
• < < 1
  < 2
  Content 3