GUIDE New guide to DIV styling for post templates!

[Orion]

Beasts of Beyond uses DIV styling, a type of coding that integrates HTML with CSS. 'DIV' is essentially a DIVision (or section), while styling is what defines how that box looks. By combining the two, we get DIV styling.

For those familiar with HTML/CSS,, you would do this in a CSS + HTML code to create a white box:     

Code:

<div class="box"></div>

.box {
     background-color: white;
}

Since we do not allow HTML on Beasts of Beyond, we have combined styling in this format:

Code:

<div style="background-color:white;"></div>

And transformed it into this so it works with BBCode:

Code:

[div style="background-color:white;"][/div]

That means the format for ALL DIV styling on Beasts of Beyond should follow this format.

Code:

[div style=""][/div]

BASIC STYLING GUIDE

If you want your code to look spiffy, you're going to need to style it. While we are not going to go over all styling options, other guides such as this or this will go over a lot of properties and techniques to use.

NOTE:
— Replace # with a number.
— Replace COLORHERE with the name of a color or a hex code (ex. #FFFFFF or #FFF is white, #000000 or #000 is black).
— Replace LINKHERE with a link (image or URL depending on situation).

Width: The width or horizon size of the box. It is highly recommended to use max-width to make your template mobile friendly. You can set your width in pixels (px) or a percentage based off the environment around it. You can also use other sizes, such as em (relative to font size), to size your box.

Code:

width: #px;
width: #%;
max-width: #px; /*Highly recommended for mobile-friendliness.*/
min-width: #px;

Height: The height or vertical size of the box. You can set your width in pixels (px) or a percentage based off the environment around it. You can also use other sizes, such as em (relative to font size), to size your box.

Code:

height: #px;
height: #%;
max-height: #px;
min-height: #px;

Overflow: If you have any text or elements that go outside of a box, how do you want to deal with them? 

Code:

overflow: auto; /*Adds a scrollbar.*/
overflow: hidden; /*Hides any overflow.*/
overflow: stretch; /*Stretches your box to fit it.*/
overflow: none; /*Everything will continue outside of the box.*/

Background: A background for your box! There are a few options.

Code:

background: COLORHERE; /*Basic usage for a background color.*/
background: url("LINKHERE"), COLORHERE; /*Shorthand for an image with a background color. Useful for transparent images.*/
background-image: url("LINKHERE"); /*Makes background an image.*/
background-color: COLORHERE; /*Makes background a color.*/
background: linear-gradient(COLORHERE, COLORHERE); /*Makes background a gradient from top to bottom*/
background: linear-gradient(to right/left, COLORHERE, COLORHERE); /*Makes background from left/right to right/left depending on choice.*/
background: radial-gradient(COLOR, COLOR); /*Makes background a radial gradient.*/

Background-size: If you need to edit your background image's sizing.

Code:

background-size: cover; /*Resized to fit the box.*/
background-size: contain; /*Resized so it is entirely visible.*/
background-size: 50%; /*Resized based on percentage.*/
background-size: 50% 50%; /*Resized based on percentage. First % is width, second % is height.*/
background-size: #px #px; /*Resized based on pixel dimensions. First px is width, second px is height.*/

Background-position: Position your image accordingly.

Code:

background-position: top/bottom/left/right/center;
background-position: 50% 50%; /*Positioned based on percentages. First is horizontal, second is vertical. Think of this as an X/Y grid where 0% 0% is the top left corner and 100% 100% is the bottom right.*/

Background-repeat: If your image is repeating due to 'cover' or is just too small, use repeat to fix that.

Code:

background-repeat: repeat|repeat-x|repeat-y|no-repeat;

Border: If you want to add a border to your box, use this property. Types of borders are solid, dotted, dashed, double, groove, ridge, inset, and outset. View examples of borders here.

Code:

border: #px solid COLORHERE; /*Size by pixels, then type of border, and then what color it is.*/
border-top/bottom/left/right: #px solid COLORHERE;

Border-radius: Rounded borders use this. The bigger the number, the rounder the corners.

Code:

border-radius: #%;
border-radius: #px;
border-radius: #px #px #px #px; /*Corners in order: top-left, top-right, bottom-right, bottom-left*/

Color: The color of your text!

Code:

color: COLORHERE;

Font-family: If you want to use a certain font for your text, define that. Beasts of Beyond only uses the fonts included in the forum software and does not use downloadable fonts unless specified.

Code:

font-family: FONTNAMEHERE;

Font-size: Size your fonts accordingly and make sure they are readable for most, if not all, users. Do not use absurdly large or small text.

Code:

font-size: #px;

Text-align: Aligns your text per specified value.

Code:

text-align: center/justify/left/right;

Font-style: If you want to italicize all your text in a box, use this.

Code:

font-style: italic;

Font-weight: For bold or lighter fonts, use this.

Code:

font-weight: bold/bolder/lighter;
font-weight: 500; /*Value between 1-1000 with 1000 being the boldest.*/

Text-decoration: For underlining and more.

Code:

text-decoration: underline/overline/line-through;

Text-indent: Indents the first line of text.

Code:

text-indent: #px;

Letter-spacing: Space between each letter.

Code:

letter-spacing: #px;

Word-spacing: Space between each word.

Code:

word-spacing: #px;

Line-spacing: Space between each line.

Code:

line-spacing: #px;

Text-shadow: Adds a shadow or a glow behind your text.

Code:

text-shadow: #px #px #px COLORHERE; /*Vertical, horizontal, blur radius, color.*/

Text-transform: This makes all text uppercase or lowercase.

Code:

text-transform: uppercase/lowercase;

Margins: Margins are the space OUTSIDE of the box. This is also how you can center your box.

Code:

margin: auto; /*Centers your box.*/
margin: #px #px #px #px; /*Top, right, bottom, left*/
margin-top/right/bottom/left: #px;

Padding: Padding is the space INSIDE of the box.

Code:

padding: #px;
padding: #px #px #px #px; /*Top, right, bottom, left*/
padding-top/right/bottom/left: #px;

Opacity: Determine how opague/translucent you want your box.

Code:

opacity: #; /*Use 0-1, decimals includes. 0.5 would be halfway.*/

Tilt: Tilting will rotate your box based on a 360 degree numerical.

Code:

transform: rotate (#deg); -o-transform: rotate(#deg); -webkit-transform: rotate(#deg); -moz-transform: rotate(#deg);

Box-shadow: Adding a shadow to your box may make it easier on the eyes on similar colored themes.

Code:

box-shadow: #px #px #px #px COLORHERE;  /*Vertical, horizontal, blur radius, opacity, color.*/

---

MOBILE-FRIENDLINESS GUIDE

Beasts of Beyond has a lot of mobile users, so it is important to make your codes mobile-friendly.

For a single box:

Max-width: This is an important one. Max-width prevents a box from going over a certain size, but allows it to shrink for smaller screens.

Code:

max-width: #px;

FLEXBOX: for rows OR columns:

Flexboxes: If you want to have items in a row and have them side-by-side, this is priority. Since BoB does not have tables anymore (as of May 2024's revamp), this takes its place. View an interactive guide to flexbox here.

I'll simplify it for you in one bundle of code.

Code:

[div style="justify-content: center; align-items: center; display: flex; flex-direction: row;"]
OTHER DIV BOXES IN A ROW GO HERE
[/div]

 
Since you cannot use 'margin: auto;' on a flexbox, you will need to use justify-content (horizontal) and align-items (vertical) to align your box. You can also optionally add ' flex-wrap: wrap;' to make items go in a column when the box size is exceeded.

GRIDS: for rows AND columns:

Grid: Grid is like flexbox but is designed to work on both rows and columns at the same time. View an interactive guide to grids here.

To start off, use 'display: grid;' to define your boxes as a grid in the surrounding (also known as 'parent') box.

Code:

display: grid;

Then define your column layout with 'grid-template-columns.' NOTE: 'fr' stands for fraction. For example, doing 1fr 3fr will cause the first box to take up 1/4th of a space, while the second will take up 3/4ths.

Code:

grid-template-columns: #% #%; /*Two columns. Add more #s for more. This will overflow/NOT distribute space.*/
grid-template-columns: #px #px; /*Two columns. Add more #s for more. This will overflow/NOT distribute space.*/
grid-template-columns: #fr #fr; /*Two columns. Add more #s for more. This will NOT overflow and adjust with screen-width/distribute space.* */
grid-template-columns: repeat(3, 1fr); /*This is three columns in one row. This will NOT overflow and adjust with screen-width/distribute space.*/
grid-template-columns: repeat(2, 20px 1fr); /*Repeats two sets of 2fr 1 fr across a column.*/

**IMPORTANT FOR MOBILE-FRIENDLINESS**
grid-template-columns: repeat(auto-fill/auto-fit, #fr); /*Auto-fill fills the row with as many columns as possible, while auto-fit collapses any extra and takes up the extra space.*/
grid-template-columns: repeat(auto-fill/auto-fit, minmax(250px, 1fr)); /*This version adds a minimum width.*/

If you are using 'grid-template-columns' with two 'fr' variables, upon placing a third box, a new row will be created. That new row will follow the previous rules defined in 'grid-template-column.'

If you want to define your rows, you can use 'grid-template-rows.' 

Code:

grid-template-rows: #rem #fr; /*'rem' will define the size of the first row.*/ grid-template-rows: 5rem 1fr;

For gaps between grid rows/columns, use this:

Code:

gap: #px;

You can also assign children to fill out a certain space in a grid. This will go on the INNER/child box of your code.

For a 4x4 grid, This code will pick ONLY the third box down from the row and two over in a column.

Code:

grid-row: 3;
grid-column: 2;

You can also pick a space between multiple grid points. This code will occupy the 2x2 space in the middle by selecting all boxes between the two points. 2 -> 4 in rows and 2 -> 4 in columns.

Code:

grid-row: 2 / 4;
grid-column: 2 / 4;

Like flexboxes, you will have to center your content in a different way that is not 'margin: auto;' and use 'justify-content' and 'align-content' for grids. You can also change 'center' to start/end/space-between/space-around/space-evenly depending on preference. This is ONLY for columns.

Code:

justify-content: center;
align-content: center;

If you want to align rows, you must use 'justify-items.' By default, this is stretched. Changing it to any of these options will compress it. This can be used in the parent box.

Code:

justify-items: stretch/start/center/end;

If you want to align columns, you must use use 'align-items.'

Code:

align-items: stretch/start/center/end;

If you want to align rows/columns at the same time, you can use 'place-content' to cheat the system.

Code:

place-content: center; /*You can use this instead of margin: auto; in a single box scenario as long as you include 'display: grid;*/

For defining a single box's justification/alignment, use 'justify/align-self.'

Code:

justify-self: stretch/start/center/end;
align-self: stretch/start/center/end;

---

WHY DOESN'T MY CODE WORK?

— These properties MUST be used in A DIV style code. They cannot be posted independently. 
— Remember code syntax.
— A bracket ([]) on each side is needed.
— Don't forget double quotes are needed. You CAN use " but not or “” or `` (two apostrophes) or '' (two apostrophes).
— Put spacing between your styling properties. Do NOT do 'background:#fff;color:#000;' and do 'background: #fff; color: #000;' instead.
— Make sure to end every DIV style with [ /div ] or it will NOT work. (Spaces added.)