RESOURCE Divtionary

  • Welcome back, Iwaku! While we are still working on the site to get it back into shape, we've come back online so you can get back to doing what you love. Check out this announcement for more details.

Status
Not open for further replies.

Nemopedia

Storms lie. A breeze it becomes. A breath it ends.
SECURITY DEPARTMENT
The blubbing encyclopedia
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Slow As Molasses
My Usual Online Time
GMT +1/2 | CET/CEST | Random, mostly on my phone
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
Both, depending how much there is going on already.
Favorite Genres
Tragedy, Psychological, Historical, Steampunk, Mystery, Thriller, Sci-fi, see tag list for more...
Genre You DON'T Like
Romance
#1
Divtionary
Just a list of CSS properties. 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 (pls mercy) 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.


Base

Margin:
determines the distance between boxes (elements) or the position on the canvas.
Use: Margin: 00px;

Notes: you can specify which side the margin applies to by adding -top, -right, -left, -bottom behind margin.

Margin: auto; will bring the box (element) to the center.
(e.g: margin-left: 00px;)

you can specify all side with a single margin the direction goes clock-wise: top, right, bottom, left.
(e.g: margin: toppx rightpx bottompx leftpx)

Tips: Good for when you have multiple boxes next to each other and want a little distance between them.


Padding:
sets a distance between the box (element) and the border.
Use: Padding: 00px;

Notes: Similar to the margin you can specify the padding of each side separately.

Tips: -


Width:
sets the width of your box (element).
Use: Width: 00px;

Notes: the 'px' can be replaced with '%'

Tips: if you have set the width of your first box (element) and wish to work with a different width inside use an percentage '%' instead. That way the code will size up nicely on smaller screens (+ points mobile friendliness)
(e.g: [first div box = width: 100px; ] [second div box = width: 80%;] the second box will take 80% of the 100px defined in the first box. )

Adding a padding in the same brackets ‘[...]’ as the width will make the box wider and possibly cut out of the screen in a mobile unfriendly way. Add the padding in a new box to prevent that from happening. All widths should resize nicely on the screen if you follow the above few notes.


Height:
set the height of the box (element).
Use: Height: 00px;

Notes: see Width

Tips: see Width


Background:
set the background colour of your box (element) or an image as its background.
Use:
Background: name colour; OR #hex000; OR url(image url);
Notes: When setting an image on the background be sure to specify the height of the box. Otherwise the image won't show up.

Add in a gradient to the background with background: linear-gradient(colour 1 ,colour 2); the default direction is top to bottom.
For left to right use: background: linear-gradient(to right ,colour 1 ,colour 2);
For a diagonal gradient: background: linear-gradient(to bottom right, colour 1 ,colour 2);
For multiple colours: background: linear-gradient(colour 1 ,colour 2 ,colour3);

To set an opacity on the background rgba can be used. For this the red, green, blue values of the colour needs to be known, this can be figured out by simply googling. The 'a' in rgba stands for the opacity value which can lie between 0.1 and 1. This code would be: background: rgba( red value ,green value ,blue value ,opacity);
(e.g: black opacity: background:rgba(0 ,0 ,0 ,0.5);

When setting a background image with url(...); don't forget to specify the height: if no text is added within the element. That way the image will show up.

Tips: -


Background-repeat:
determines how the background image repeats itself over the width and height of the box (element), or the lack of it.
Use: Background-repeat: no-repeat; OR x-repeat; OR y-repeat;

Notes: No-repeat; image won’t tile itself over the box.
X-repeat; image will tile itself over the width of the box.
Y-repeat; image will tile itself over the height of the box.

Tips: -


Background-size
determines the dimensions of the background image.
Use: Background-size: (width)px (height)px; OR cover; OR contain;

Notes: The 'px' can be replaced by a '%' like usual.
Cover; will automatically resize the image to the dimensions set in the box (element).

Tips: -


Background-position:
determines the position of the image within the box (element).
Use: Background-position: (width side) (height side); OR (width)px (height)px;

Notes: 'px' can be replaced by '%'.
The automatic value on Iwaku is Left (width side) Top (height side). However by specifying the sides left/right/center (width) and top/bottom/center (height) the background image can be moved to one of the other corners or the center.

Tips: -


Background-attachment:
sets whether the background will scroll with the rest of the page of if it is fixed.
Use: Background-attachment: scroll; OR fixed; OR local;

Notes: scroll; the background will scroll with the rest of the page, default setting.
fixed; background will not scroll with the page.
local; background will scroll with the element's (box) content.

Tips: -


Display:
determines how a box will appear.
Use: Display: inline-block; OR flex; OR none;

Notes: Inline-block; the box will be on the same horizontal line. Good if you want two boxes in combination with a float: property.
Flex; popular when there are multiple boxes next to each other that need to be a certain width of each other, or all of the same width. Best option to make templates mobile friendly.
None; the box won't show up at all.

Tips: -


Float: lets the box (element) float to a side.

Use: Float: left; OR right;

Notes: -

Tips: -


Flex:
determines how the flex-boxes will act with each other and which box will be prioritised.
Use: Flex: (0.1 - #w/e);

Notes: Each box within the display: flex; needs to be given this property for the flex to work.

By setting the same number in boxes the widths between those will be the same on the screen. By setting a higher number the screen will prioritise the box and make it thus appear wider than the rest. With a lower number it will shrink to be smaller than the rest.
(e.g: a flex: 1; will be wider than a box with flex: 0.5;, but a flex: 2; will be wider than a flex: 1;)

Tips: Add in a min-width: to the element if a box needs to be at the very least a certain width.

Text

Color:
determines the text colour.
Use: Color: colour name; OR #hex000;

Notes: -

Tips: -


Font-family:
determines the font of the text.
Use: Font-family: font name;

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'];))

Tips: -


Font-size:
determines the size of the text.
Use: Font-size: 00px;

Notes: the font-size can also adjust itself to the size of the screen by using the formula: font-size:calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));. As can be imagined that isn't the easiest formula, so @darkflakes13 found a simpler formula: font-size: calc(10px + 2vw);.

Tips: -


Font-weight:
makes the font appear bolder or lighter.
Use: Font-weight: bold; OR lighter;

Notes: Bold; makes the font appear thicker.
Lighter; makes the font appear thinner.

Tips: -


Font-style:
makes the font appear in italics;
Use: Font-style: italic;

Notes: -

Tips: -


Font-variant:
specifies if the text appears in small-caps or not.
Use: Font-variant: small-caps; OR normal;

Notes: -

Tips: -


Text-decoration:
adds in a line underneath, or above, or through the text.
Use: Text-decoration: underline; OR line-through; OR overline;

Notes: Underline; adds a line underneath the text.
Line-through; strikes a line through the text.
Overline; add a roof to the text.

the line can be wavy, dotted, or coloured by adding the definition behind of the property.
(e.g: text-decoration: underline dotted red)

Tips: -


Direction:
determines the direction the text will go.
Use: Direction: ltr; OR rtl;

Notes: Ltr; left to right, the automatic setting.
Rtl; right to left.

Tips: -


Text-transform:
makes the text appear in either all uppercase, lowercase, or capitalises the first letter of each word.
Use: Text-transform: uppercase; OR lowercase; OR capitalize;

Notes: Uppercase; all caps.
Lowercase; no caps.
Capitalize; first letter of each word is capitalised.

Tips: -


Text-align:
aligns the text.
Use: Text-align: center; OR left; OR right; OR justify;

Notes: Center; centers the text.
Left; all text aligns to the left.
Right; all text aligns at the right side.
Justify; the text gets aligned at both sides.

Tips: -


Text-shadow:
adds a shadow underneath the text.
Use: Text-shadow: (h-shadow)px (v-shadow)px (blur)px color;

Notes: H-shadow - the size of the horizontal (width) shadow.
V-shadow - the size of the vertical (height) shadow.
blur - optional, can be left out, but is used to define the shadow.
color - the colour of the shadow. Can be either the name of the colour or a hexcode.

Tips: -


Text-indent:
adds in an extra space at the start of the first word of a text.
Use: Text-indent: 00px;

Notes: Doesn't repeat itself with a new paragraph.

Tips: -


Text-verflow:
determines what will happen to the text that goes out of the box.
Use: Text-overflow: clip; OR ellipsis; OR user defined;

Notes: clip; the text will move out of sight when overflowing.
ellipsis; the text overflowing will turn into ellipsis ('...')
user defined; the overflowing text will turn into whatever the user defined ('///') or ('---').

Tips: -


Line-height:
determines the height of a line.
Use: Line-height: 00px;

Notes: -

Tips: -


Letter-spacing:
sets a space between the letters on a line.
Use: Letter-spacing: 00px;

Notes: Can also be used to target only words by replacing 'letter' with 'word'.
(e.g: Word-spacing: 00px;)

Tips: -


Writing mode:
sets the reading direction of the text. Good for Chinese characters, for example.
Use: Writing-direction: horizontal-tb; OR vertical-rl; OR vertical-lr;

Notes: Doesn't work 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.

Tips: -


Word-wrap
determines what happens to long words at the end of a line.
Use: Word-wrap: break-word;

Notes: It will break the word at whatever letter passes the end of the line.
Tips: -


White-space:
determines what happens to the white space in an element (box).
Use: White-space: nowrap; OR normal; OR pre;

Notes: nowrap; text will wrap up to one sentence, text won't wrap to the next line.
normal; the default. Text will wrap when necessary.
pre; white space is preserved on all browsers, will only wrap on a new line with line breaks.

Tips: -

Box

Border:
sets a border-style, colour and thickness around the box.
Use: Border: (thickness)00px style color;

Notes: Thickness: the size of the border.
Style: the style of the border. This can be dotted, solid, dashed, etc...
Color: the colour of the border. This can be the name of the colour or the hexcode.
The side where the border appears can be specified by adding in the side behind border.
(e.g: border-top: to target the appearance of the top border.)

Tips: -


Box-sizing:
helps the border to be defined separate from the box (element).
Use: Box-sizing: border-box;

Notes: all padding, height, width added in after the Box-sizing will include the border as well.

Tips: -


Box-shadow:
adds a shadow to the box.
Use: Box-shadow: (h-shadow)px (v-shadow)px (blur)px #color;

Notes: H-shadow - the size of the horizontal (width) shadow.
V-shadow - the size of the vertical (height) shadow.
blur - optional, can be left out, but is used to define the shadow.
color - the colour of the shadow. Can be either the name of the colour or a hexcode.

Tips: -


Border-radius:
rounds the corners of the box (element).
Use: Border-radius: 00px;

Notes: the 'px' can be replaced by '%' as per usual.

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

Tips: -


Overflow:
determines what happens to the content that goes outside (overflows) of the specified width or height of the box (element).
Use: Overflow:hidden; OR scroll;

Notes: Hidden; hides the overflowing content.
Scroll; adds in a scroller and makes the content scrollable.

To target the y-axis (height) or x-axis (width) specifically add in the letter of the axis behind the overflow.
(e.g: Overflow-y: scroll; to add the scroller only to the y-axis (height).)

Tips: The appearance of the scroller can't be altered, but it can be hidden! This can be achieved by either layering something on top of it, or by cutting it out of the box (element) with the help of overflow: hidden;.


Opacity:
makes an element appear 'faded'/'transparent'.
Use: Opacity: 0.1-1

Notes: The closer the number is to 1 the more 'opaque' (not transparent) the element turns.

Tips: -


Transform:
Rotates an element.
Use: Transform: rotate(00deg); OR scaleY(00); OR scaleX(00);

Notes: Rotate(00deg); rotates the element by the angle given.
ScaleY(00); rotates on the y-axis (height).
ScaleX(00); rotates on the x-axis (width)

Tips: -


Shape-outside:
Determines how content will wrap around the floating element.
Use: Shape-outside: circle(00px 00px); OR ellipse(00px 00px); OR inset(00px 00px) OR polygon(00px 00px); OR url(image url);

Notes:
Circle(00px 00px); for a circular shape, the 'px' can be replaced by '%' and define once more width and height.
Ellipse; for an elliptical shape.
Inset; triangular
Polygon; for any shape with three or more vertices (corners).
Url(image url); to wrap text around the image. CSS version of the imga= BBCode.

Tips: -


Cursor:
Changes the look of the cursor within the box (element).
Use: Cursor: name cursor


Tips: -


Z-index:
where y- stands for height and x- for width, z- stands for the layers. With the help of z-index elements can be moved forward, or to the background as needed.
Use: Z-index: 00;

Notes: 1 is the standard. The more layers the higher the count becomes to move forward.

Tips: -


Pointer-events:
defines whether an element (box) reacts to pointer events (your mouse).
Use: Pointer-events: auto; OR none;

Notes: Really nifty when layering elements and only the hidden layer needs to react.

Tips: -

 
Last edited:

Nemopedia

Storms lie. A breeze it becomes. A breath it ends.
SECURITY DEPARTMENT
The blubbing encyclopedia
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Slow As Molasses
My Usual Online Time
GMT +1/2 | CET/CEST | Random, mostly on my phone
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
Both, depending how much there is going on already.
Favorite Genres
Tragedy, Psychological, Historical, Steampunk, Mystery, Thriller, Sci-fi, see tag list for more...
Genre You DON'T Like
Romance
#2
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.

N.B: The steps are the same for both with and without flex.

Step 1: The Base - set the width of the first box (element), add in an overflow: hidden;. In this example I used a gray background and set the box to 100px width. 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 there to be 120%;. Also ad in the height, for the example I used: height: 100px;. Add in Overflow-y: scroll; and add in a margin-left: 10%; and a padding-right: 20%;. Let's name it Box 2.

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.


Adjust as needed!


  N.B: Twiddle around with the padding and experiment. The paddings I used here are what I like to use in my own sheets, as I like to have a little bit of scroller left to be seen in case people don't realise it is there. It is entirely possible to have the scroller disappear completely if you fiddle with the margin-left and padding-right properties.
 
Last edited:

Nemopedia

Storms lie. A breeze it becomes. A breath it ends.
SECURITY DEPARTMENT
The blubbing encyclopedia
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Slow As Molasses
My Usual Online Time
GMT +1/2 | CET/CEST | Random, mostly on my phone
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
Both, depending how much there is going on already.
Favorite Genres
Tragedy, Psychological, Historical, Steampunk, Mystery, Thriller, Sci-fi, see tag list for more...
Genre You DON'T Like
Romance
#3
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 now, 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 and bolded the identifier:

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!

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: The base - open the first element (box) and set the width and height of the box. In the example the width and height are both 32px to create square.

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

Result:




Step 2: The overflow - 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 percentages (100%;) is also allowed. Set an overflow: hidden;.

Result:




Step 3: The positioning and placement - open a third element (box) within the two elements (boxes) that are already there. 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 (boxes) after. Finished!

Result:


A/N: Add in an opacity property in the third element (box) to fade away the player. Play around with the box-stylings 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: The base - open the first element (box) 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: The overflow - open another element (box) and repeat the width and height again, they may be replaced by percentages (100%;) as well. Add in an overflow: hidden; property.

Result:




Step 3: Inline-block & font-awesome - open another element (box) and add in an inline-block (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 makes only use of a padding-left). Close the element (box). Add in the font-awesome within the element (box). 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 ] (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: Inline-block, opacity & positioning - open another element (box) and add in add in an inline-block (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: The media player - Add in the media player bbcode as shown in the beginning of the guide. Close the remaining elements (boxes) after. Finished!

Result:

A/N: change the background colour, or add in shadows and the likes with the help of the first post in the thread to personalise the code accordingly!
 
Last edited:
Status
Not open for further replies.