Re: ALL ABOUT TEMPLATE CODING (WIP!) - Quill - 10-04-2018
Codes, Tips, and Tricks
[div style="width:60%; text-align:justify; font-family:times new roman; color:black; padding-top:10px; line-height:15px; font-size:12px;"]
Standard List:
Where WW/HH stands for Width/Height respectively. ## is a number. pp is a type (px/pt/percentage). Parenthasis ( ) are required. Brackets [ ] are an option to choose from. Curly Brackets { } are an optional aspect to the code.
Background:[Hex/color] (variant: background-color:[Hex/color]) This code designates a specific background color for a box.
background:url(LINK); This code makes the background of a box into a picture or a gif depending on the link supplied. All links must be contained within the ( ).
background:linear-gradient({direction/angle}, color, color, etc); Linear gradients typically go from left to right (like you would think of a color slider). The direction/angle is optional, but you can say to top, to bottom, to left, to right, and choose which direction the gradient moves. Or, you can supply an angle (i.e 90deg) and give the gradient a corner or angle to move in. Then, you can supply as many as (or repeat as many colors) as you want, separated by commas.
background:radial-gradient({direction/angle}, color, color, etc); Radial gradients work in the same way, except instead of moving from left to right, the gradient is like a circle that expands outwards with colors.
background-position:[top/left/right/bottom/center] When using a image, this code will say which corner/section of the picture to focus on. For instance, if you had a large background image, but you wanted to use the top right section of the background instead of the center, you can use this code to make it position on the top right corner.
background-repeat:[repeat/repeat-x/repeat-y/no-repeat] When using a background image, it can make an image (if it's too small for the background) to purposefully repeat to fill the area, or stretch (no repeat) to fill the area. Additionally, repeat-x will make the background section repeat only a section of the picture from left to right, while repeat-y will do the same, simply from top to bottom instead
Background-size: [WWpp HHpp/cover/contain] When using a background with an image, and the image is too big or too small for the area, but you don't want to have to edit it in another program, you can use these codes to size it down. If you want an exact size, you can use the first code. Where WWpp is the width (i.e 100px or 30%), and HHpp is the height (i.e 100pt or 30%)
Cover will make the background area cover the box to the best of its ability, even if it must stretch to do so.
Contain will make the background shrink to the area of the box if it's too big.
Opacity: 0.##; Opacity gives you the ability to make the background more transparent, using a decimal. Without using the code, it's assumed that there is an opacity of 100% (or 1.00). An opacity of 0.00 would be considered to be completely transparent. An opacity of 0.50 would be half its transparency, etc.
This code sets a border for a box, with a choice of style, size, and color. There are other codes (i.e the border-style) codes that does the same thing, just with more codes.
Border-[top/left/right/bottom]: ##pp type color; This code allows you to pick a side of a template box to put a border on. In other words, this allows you to have different border types on each side of a template. For instance, border-left:2px solid black would give you a 2px solid black border on the left side.
Border-radius: ##pp This code will round all corners of a given box. (Can use any width type like pt, px, or %).
Border-[top/bottom]-[left/right]-radius: ##pp; This code will round a specified corner, such as the bottom left corner (i.e border-bottom-left:34px). This can be used for all corners, or just one or two, but allows for rounded corners of different sizes.
The outline code works the same as the border code, only the outline is outside of a border. Both a border and an outline can be used at the same time, but an outline can only surround the entire box, not just a specific side.
BOXES
Height: ##pp; Defines the height of a box in pt, px, or % with a given number (i.e 30px or 40%).
Width: ##pp; Defines the width of a box in pt, px, or % with a given number (i.e 30px or 40%).
min-height: ##pp; Defines the MINIMUM height of a box in pt, px, or % with a given number (i.e 30px or 40%). When you use this code, it means that the given amount will always be showing first, and then anything more added to it will allow the template to stretch to fit the text accordingly.
min-width: ##pp; Defines the MINIMUM width of a box in pt, px, or % with a given number (i.e 30px or 40%). When you use this code, it means that the given amount will always be showing first, and then anything more added to it will allow the template to stretch to fit the text accordingly.
float: [left/right/center] In its simplest form, Float codes are used to make text wrap around an image. Specifically, float codes are responsible for the layout and position of an element within a box, such as making an image position to the left hand side. This is different from margins and paddings because it assumes you want the object to be positioned in one specific way. This can also be used to make tables without using the table codes
margin: {-}##pp; This code will specify a margin around all sides of a box. The bigger the number, the further the box will be pushed away from other elements in the code. Using a negative number will pull the box towards the other elements instead. Margins work OUTSIDE of the boxes to move elements around in codes.
margin-[top/left/right/bottom]: {-}##pp; Like the margin code above, but instead specifying a specific side or sides to be pushed or pulled in any one given direction. Use a positive number to push the box away from other elements, or a negative number to pull it towards other elements.
padding: ##pp; Padding adds area within a specified box or area. Instead of physically pushing a box in a direction, it's typically used to push text to a specified area by adding space between the boxes border and the wall of text. Using this specific code will add padding to all sides of a given box.
padding-[top/left/right/bottom]: ##pp; Like the code above for padding, this code allows you to specify a side for the padding to go on- for instance, if you only wanted padding on the top of a box to center a title better.
cursor: url("CURSORURL"), auto; This code allows you to specify a cursor to be used in your templates. Specify your URL between the ("") for it to work.
box-shadow:horizonal##pp vertical##pp {blur##pp spread##pp} color {inset}; This code allows you to add a shadow to your template boxes. The minimum that the code needs is defining the horizontal and vertical shadow amount as well as the color (i.e box-shadow:30px 30px red). However, you can also specify the blur, the amount of spread of the shadow, as well as if the shadow is inset from the box. You can use one or all of those additional codes (i.e 30px 20px 40px blue).
transform: rotate(##deg); -o-transform: rotate(##deg); -webkit-transform: rotate(##deg); -moz-transform: rotate(##deg) This code allows you to rotate boxes by a given degee. For instance, where it says ##deg, if you want to turn your box at a 90 degree angle, you would put 90deg for each of the feilds. This can let you turn, twist, and flip boxes around to your desire. It does make codes a little finnicky to work with, however, so if you do use it, DO IT FIRST (otherwise formatting everything else around it can be really tricky).
TEXT
font-family: FONT; This code specifies a specific font to use in a given box. Hence, you can use a multitude of fonts across different boxes.
font-size: ##pp; This code will designate a specific size (usually in px or pt) for text to be. I.E, 30px
line-height: ##pp; This code changes the amount of space between each line of text in a box. Small numbers (i.e 1) tend to pull the text super close to itself, while bigger numbers add a lot more space between each line.
letter-spacing: {-}##pp; This code changes the space between the letters in your box or your line of code. Positive numbers (i.e 3px) will put more space (i.e push the letters further away) in between each letter, while negative numbers will pull the letters closer together.
word-spacing: {-}##pp; Like letter spacing, this code changes the amount of space between each word in a given box. Positive numbers (6px, etc), will add more space in between each word, while negative numbers will pull each word closer together.
text-align: [center/left/right/justify] This code changes how text is formatted/aligned in a box. For instance, text-align:left will align all text to the left side of the box.
text-indent: ##px; This code adds an indent to the FIRST line of a box. Any subsequent lines do not seem to be indented no matter what you do, but it can add for a neat aesthetic.
text-transform:[uppercase/lowercase] This code will make all the text in a specified box all uppercase or all lowercase depending on what you choose, without you having to do it manually. Even if you type in caps, for instance, but you have it set to lowercase, it will modify that text to be lowercase.
word-break:break-all; Instead of your boxes breaking up lines of text at the nearest convenient word, it will break up text at the nearest letter and text-wrap it to the next line.
font-style:italic; This code's only purpose is to make all text in a specified box italic, much how like other text-transform tools work.
font-variant: small-caps; This code's only purpose is to make all text in a specified box into small-caps, much how like other text-transform tools work.
font-weight:bold; This code's only purpose is to make all text in a specified box bold, much how like other text-transform tools work.
text-shadow:horizonal##pp vertical##pp {blur##pp} color; This code adds a shadow to all text within a specified box. Much like the box shadow code, there is an option aspect to the code (the blur amount) that you an either keep or remove. Otherwise, you must at the minimum specify the horizontal shadow amount, the vertical shadow amount, and the color. (For example; text-shadow: 3px 3px red or text-shadow: 4pt 7pt 3pt blue).
SCROLLING
overflow:auto This code will add a scrollbar whenever the text overflows the limitations of a given box. I.E, if you have a box of 100 px, and the fourth line of text goes over 100px of space, a scrollbar will be added on the right hand side. This is the most commonly used scrolling code.
overflowcroll This code will put always-visible scroll bars on the right-hand side and the bottom of the template.
overflow:hidden This specific code doesn't actually add a scroll bar, but can be useful for ensuring that text does not flow beyond the limits of a box, because when it does, the template simply cuts it off into oblivion and you won't be able to see it. Instead, this code is often used in tandem with overflow:auto to create the classic 'hidden scrolling' boxes that you see (by using a box with this code and a box with overflow:auto on top of it, it can be used to cut off the scrollbar on the right side so it's "invisible")
direction:rtl Adding this code to a box with a scrolling bar will change the scroll bar from the right side to the left side.
Helpful Sites
HTML Color Picker - Allows you to input a color, and then gives you a range of colors and the hexcodes from lighter to darker; good for shades and finding contrast tones.
Colour Lovers - A site that gives you community-created palettes of colors to give you inspiration, or to find that 'perfect' shade of blue you're looking for.
Lorem Ipsum Text - Dummy text to quickly copy and paste when you need to test templates or present them.
Pic-to-Palette - Allows you to input an image from your computer or from a url and generates a color palette (with hex codes) from the colors in the image. Helpful for trying to color-match with a picture.
Placeholder Images - A site that lets you specify specific dimensions and gives you a plain image matching that size to use as a placeholder for boxes that need an image, like character portraits, without having to immediately input one. A place holder!
See something I missed? Have questions or comments? Feel free to message me or let me know in this thread!
)
croll