Author Topic:  How to Make a Template + Codes Index!  (Read 88 times)

grubsong

How to Make a Template + Codes Index!
« on: September 26, 2019, 03:37:46 AM »
As you may be aware, across griffonage you can find posts that have fancy backgrounds, borders, text, and so on - these are called templates, and are made by utilizing bulletin board code (bbc) and cascading style sheets (css) ! css, along with html, is what makes up the majority of websites, including this one! by making a template, you're basically just making a tiny website code ;)

If that all sounds a lil too complicated, don't worry, I'm gonna lead you through how to make a simple posting template.

to begin, you're gonna want to make a code like this:
Code: [Select]
[div style="codes here"][/div]every single template starts with the "div" bbc, and ends with /div. If something seems a lil broken, don't forget to add the /div part, in the brackets, at the end!

to start, let's add a maximum size to our template. After each specific piece of code in the div, remember to add a ; (semicolon) otherwise it could break, or not apply that piece of code.
This template has a width of 350 pixels (px) and 15 pixels.
Code: [Select]
[div style="width: 350px; height: 15px"][/div]As you can see, the text overflowed a little bit - you can fix that by adding overflow: auto!

This template has a width of 350 pixels (px) and 15 pixels.
Code: [Select]
[center][div style="width: 350px; height: 15px; overflow: auto;"]This template has a width of 350 pixels (px) and 15 pixels.[/div][/center]Now you can scroll to see the rest of the message properly! next, let's add a background. To add a background colour, use background-color: colour!

This template has a width of 350 pixels (px) and 50 pixels - and a blue background.
Code: [Select]
[center][div style="width: 350px; height: 50px; overflow: auto; background-color: blue;"]This template has a width of 350 pixels (px) and 50 pixels - and a blue background.[/div][/center]As you can see, using just "blue" makes it quite bright, right? you can also use hex codes - 6 values that equal a colour - to use a specific code.

This template has a width of 350 pixels (px) and 50 pixels - and a blue background with the hex code #90c1e0.
Code: [Select]
[center][div style="width: 350px; height: 50px; overflow: auto; background-color: #90c1e0;"]This template has a width of 350 pixels (px) and 50 pixels - and a blue background with the hex code #90c1e0.[/div][/center]To add an image as a background, use background-image: url("link here"); - if the image doesn't fit, try using background-position: top; to align it to the top of the template, or background-size: fill; to make sure it fills the image.

This template has a width of 350 pixels (px) and 50 pixels - and a starry image background.
Code: [Select]
[center][div style="width: 350px; height: 50px; overflow: auto; background-image: url("https://i.imgur.com/P6pclgy.jpg");"]This template has a width of 350 pixels (px) and 50 pixels - and a starry image background.[/div][/center]Is the text a little hard to read? that's no problem! add "color: colour here;" to change the template's text. This one we're gonna use white.

This template has a width of 350 pixels (px) and height of 50 pixels, a starry background, and white text.
Code: [Select]
[center][div style="width: 350px; height: 50px; overflow: auto; background-image: url("https://i.imgur.com/P6pclgy.jpg"); color: white;"]This template has a width of 350 pixels (px) and height of 50 pixels, a starry background, and white text.[/div][/center]Does the text need some more breathing room? you can add padding! padding can be added to each side, or to all sides (ie, padding-left will do the left side, while just padding: numberpx; will do all sides.) to give it's contents some more room.

This template has a width of 350 pixels (px), a starry background, and white text, with 5px padding.
Code: [Select]
[center][div style="width: 350px; overflow: auto; background-image: url("https://i.imgur.com/P6pclgy.jpg"); color: white; padding:5px;"]This template has a width of 350 pixels (px), a starry background, and white text, with 5px padding.[/div][/center]Next, let's add a border! borders come in all different fashions, such as dashed, rounded borders, or borders just on one side - let's just do a normal border for this tutorial. Adding border: 2px #000 solid; will give us a solid border with a width of 2px, in black.

This template has a width of 350 pixels (px), a starry background, and white text, with 5px padding and a black border.
Code: [Select]
[center][div style="width: 350px; overflow: auto; background-image: url("https://i.imgur.com/P6pclgy.jpg"); color: white; padding:5px; border: 2px #000 solid;"]This template has a width of 350 pixels (px), a starry background, and white text, with 5px padding and a black border.[/div][/center]
Now, of course, there's a million other things you can add - I'll make an index of them below, but for now, have a go at fiddling with all of that and see how it goes? ultimately I learned how to code by fiddling with templates by myself, it just takes time and a lot of patience. If your codes are breaking, or you're having some trouble, feel free to ask for help in the helpful board or on discord! good luck!
.
grubsongshe/heradmin/ownersleep deprivedstorage

grubsong

Re: How to Make a Template + Codes Index!
« Reply #1 on: September 26, 2019, 03:38:35 AM »
Helpful Links:

html color picker, to pick a color and/or shade
color fader, to give your text a gradient
coolors, helps you make + pick a colour scheme




Codes:

Height and Width: I almost always start off with these. Try not to go above 600px for width; width in percentages will come up as the division of the entire space available (ie, if you did 50% of a 300px template, it would be 150px, or just half depending if on mobile.)
Code: [Select]
width: NOpx; OR width: NO%;
height: NOpx;

Text Color: to change the text colour of the template away from the website theme's default.
Code: [Select]
color: #hexcode; OR color: red/white/black; etc.
Backgrounds: to change the background color and/or image
Code: [Select]
background-color: #hexcode;
Code: [Select]
background-image: url("LINKHERE");
Borders: can have various different pattern types along with just solid; give them all a go and see if they work. (i've had mixed results)
Code: [Select]
border: SIZENOpx #hexcode solid/dashed/dotted/double/inset;
Code: [Select]
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

Rounded borders: to give a border a curved corner instead of sharp corners. Use four numbers to change the curvature on each corner seperately.
Code: [Select]
border-radius: NOpx;
Code: [Select]
border-radius: NOpx NOpx NOpx NOpx;
Margins: give space outside the template, but can also be use with a negative value to push the template in a specific direction (ie, margin-top: -5px; would push the template up above where it normally sits, fitting it over another template or image etc)
Code: [Select]
margin: NOpx;OR
Code: [Select]
margin-top: NOpx; margin-bottom: NOpx; margin-right: NOpx; margin-left: NOpx;
Padding: is much like margins but is for inside the template rather than outside. Not sure if negative values work w this.
Code: [Select]
padding: NOpx;OR
Code: [Select]
padding-top: NOpx; padding-bottom: NOpx; padding-right: NOpx; padding-left: NOpx;
Outline: makes another border outside the template/already existing borders.
Code: [Select]
outline: SIZENOpx #hexcode solid/dashed/dotted/double/inset;


TEXT CODES
just a mini subsection for some text codes

text align: works the same way as the center, left, right and justify bbcodes, just that you don't have to apply it over and over.
Code: [Select]
text-align: center/left/right/justify;
text shadow: while there is a bbcode button for this above the posting box, you can also apply it to all text through this code.  The first and second numbers represent the horizontal and vertical distance, while the third represents the blur distance.
Code: [Select]
text-shadow: NOpx NOpx color/#hexcode;OR, add an extra number to make the shadow blur a little.
Code: [Select]
text-shadow: NOpx NOpx NOpx color/#hexcode;
letter spacing: lets you make the gaps between letters bigger or smaller - try it in decimals.
Code: [Select]
letter-spacing: NOpx;
line height: lets you change the space between lines of text. try it with decimals, like letter spacing.
Code: [Select]
line-height: NO;
font-family: changes the font used for the template. note that only fonts that are installed on your (or someone elses') computer will appear/work.
Code: [Select]
font-family: fontname;
font-style: you can use this to make all the text normal or italicized.
Code: [Select]
font-style: normal/italic;
font-size: kinda self explanatory, use this to change the font size for the whole template - remember that anything smaller than about 8pt is pretty hard to see for most people. You can also use pixels, em, or percentages to resize them.
Code: [Select]
font-size: NOpt; or font-size: NO;
font-weight: normal or bold, etc
Code: [Select]
font-weight: bold;



overflow: overflow is used when you want to add a scrolling bar to a smaller template so the contents don't overflow, literally.
Code: [Select]
overflow: auto/hidden/scroll;
opacity: use opacity to make the specific template more transparent, or to make entire template parts invisible, basically. Use decimals (0.0-1.0) for this one.
Code: [Select]
opacity: NO;
float: float is one of the more advanced ones; you use float to make an object (ie a template or an image) float to the left or right of another template. you can use this with negative margins to adjust where an object sits.
Code: [Select]
float: left/right;
« Last Edit: September 26, 2019, 05:19:01 AM by grubsong »
.
grubsongshe/heradmin/ownersleep deprivedstorage

grubsong

Re: How to Make a Template + Codes Index!
« Reply #2 on: September 26, 2019, 05:51:20 AM »
Bonus Code: Transform

I almost considered giving it it's own section in the last post but this one is p complicated and I didn't even know we could use it on this forum so-

just look at it here. you can also find a heap of other codes.

rotate:
Code: [Select]
transform: rotate(NOdeg);translate: moves the object a certain distance
Code: [Select]
transform: translate(NOpx, NOpx);there's a few more but those are the most useful.

note: thank you to puppy for making me realize we can use this code :P
.
grubsongshe/heradmin/ownersleep deprivedstorage

Tags: