the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Aug 6, 2013 21:40:28 GMT -8
What makes up a post template?A post template is made up of html, the language used to create the LOOK of any web page. These things are programmed in the browser. The only thing you have to do is to type them down for them to work. The basic syntax of html is property: description. It sounds already like you have no idea what to put so here's a graphical sample. property: descriptionfont-weight: bold font-style: italicfont-family: georgiafont-size: 10pxfont-variant: small-capsThe property is the name you're calling and the description is where you put what you want it to do. font-weight: specifies the weight or thickness of the font. By saying bold, you're telling it that you want it to be bold thick. Now you're probably wondering: how the hell do I know what to write in the description? Well, you have to know what the property is about. You can look them up in the Internet for reference but for now, just stick to everything I tell you. I'll provide the html you can add for the tutorial. How do you put html in posts?Just typing font-weight: bold isn't going to do anything. The browser reads that as an ordinary text. You have to be able to tell the browser that "dude no I want you to bold my text." This is where the scary div style comes in. You use DIV as the tag to tell the browser to read font-weight: bold as an html and not as a plain text. The syntax is as follows: [div style="property: description; property: description; property: description;"] plain text [/div] This syntax is what you will always use. In this format, you called 3 properties. You can call as many as you'd like in one div tag but you always have to remember that... - The div must always have an opening and closing bracket
- The html must always be inside quotation marks
- Put the html in one line only
- Always put a semi-color ( after the description
- You must close the entire div with a blackslash div to tell the browser to stop making the html true.
As long as you copy paste the syntax given exactly as it is, you'll be fine. If the code doesn't work, go back to the list above to check if you accidentally erased or added something else. And you're good to go!Technically but if you want someone to continue helping you step-by-step, the next post will provide you just that.
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Aug 6, 2013 21:41:14 GMT -8
Step 1: The lorem ipsumWe're going to start out with the easiest part: the text. Even though this is the easiest, this is the most important part of a post template. If the text formatting is terrible and unreadable, your template loses its purpose. You want people to use your template and when they do, you want people to be happy when they see it, and not complain about how they can't read a single word on it. Lorem ipsum is some Latin mumbo-jumbo that the likes of Jin love. I don't know what it is either but just click that link and you can copy paste the lorem ipsum there to use it as your placeholder. Let’s try imitating what the block appears as in that site. HTML to use:- width: 00px
00px will dictate how wide it would be. px stands for pixels, which is how it’s measured. Just enter the number with your best estimate and preview. Try around 250px for example.
- font-family: font name;
Font name is the font of your choice. Try verdana!
- font-size: 00px;
The px is back! So I guess you know the drill. 10px is the most acceptable small font size. Try using 11px or 12px too.
- text-align: text alignment;
Text alignment is where you put left, right, center, or justify.
Be sure to follow the syntax from the first post. When you manage to work it out, congratulations! You’ve pretty much got it already. Step 2: Backgrounds and paddingI’m going to dedicate an entire step for the background and the padding. So many templates fail because people forget to use a padding in their templates. Before we proceed, try adding a title above your lorem ipsum placeholder. Make it have a bigger size, font, and align it to the center. Put a space between the title and the block by pressing the enter button. Now, you should have at least 2 div tags: one enclosed on the title and the other on the lorem ipsum block. For this step, we’re going to add a third div tag, one that would enclose both the title and the block. HTML to use:- width: 00px
See for yourself what it looks like without a width.
- background-color: color
For color, you can use white, green, black, or a hexadecimal color. Hexadecimal colors must always begin with the number sign #
- padding: 00px
For now, keep it at 00px.
For this html to cover both the title and the block, just do it as you normally would. It should become like a div within a div. If you’re still unable to get it, here’s a working sample: [div style="width: 250px; background-color: gray; padding: 00px;"] [div style="font-family: trebuchet ms; font-size: 19px; font-weight: bold; font-variant: small-caps; text-align: center;"] TITLE RIGHT HERE [/div] [div style="width: 250px; font-family: verdana; font-size: 10px; text-align: justify;"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.[/div][/div] If you were able to make it work, notice how crammed to the sides the block is. Even if you adjust the width of the background, the text will just fill the space up. What it needs is a padding. Padding is...well, just go use it to see how it works >:C I think if I explain it, it would only confuse you. Step 3: DesigningAt this point, you're really good on your own. There are a lot of properties you can call such as floats, borders, etc, plus other graphics you might want to integrate. There are a lot of tricks you can use and I will be including my favorite ones below. I know I didn't explain much that might help you understand how a certain template came to be but in my experience, I just learn from a lot of experimentation and trial-and-error. It's not time-efficient but I was never really good at theories. Here are some basic properties that I often use besides the examples given: - margin: auto;
This aligns your template to the center. Try adding it in your tutorial template.
- border: 0px color type;
Type can be solid, dashed, dotted, double. If you don't include a color, it will automatically use the forum's border color.
- border-radius: 0px;
Makes your border rounded. Try using it with background: url(youricon);.
- opacity: 0.5;
Sets opacity. 1 is the default and 0 makes it pretty much invisible.
- box-shadow
I don't understand this fully either but it's really beautiful and nice. Just steal the examples from here
- gradient background
Instead of using a solid color or a pattern for your background, try using a gradient background. Just copy paste the stuff in the CSS. You'd have to erase linebreaks there though. That long stuff needs to be in one long line.
- tables in general
I didn't include tables in this tutorial because PB v5 doesn't support it as far as I know. You can also create templates without div. If you want to pull the effect of a table though, check out the next step.
Step 4: Nifty tricks (optional)Table-like formatDisplay: inline-block will let you accomplish this. Let the sample speak for itself first. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Display: inline-block allows your div elements to still behave as a block but in an inline-level. If you remove display: inline-block, the two of them wouldn't be side-by-side. Being inline, however, allows them to be in one line. You have to add a vertical-align if you want them to specify whether they should occupy the top or bottom. The icon's vertical-align property is set to the bottom while the text is on top. RGBA backgroundIf you want to have a transparent background while keeping the text solid, just go to this article. It's simple. Again, just a matter of copy-pasting and trying it out yourself. If you don't know what RGBA is though... RGBA stands for Red, Green, Blue, Alpha. The rgb determines the color and the alpha determines the opacity. If you look at the whole syntax, rgba(255,255,255,0.8);, you would notice that the parameters follow that pattern. 255, 255, 255 rgb is the color for black while 0.8 is the set opacity.
|
|
|
Post by POLARBEAR on Aug 7, 2013 4:40:42 GMT -8
This is VERY helpful, thank you so much for posting this. TT///TT
|
|