|
Post by oxymoron on Aug 18, 2012 12:47:09 GMT -8
Then you get one obvsly, obvsly. BUT BEFORE WE START, KEEP IN MIND THAT MOST TEMPLATES DON'T EXCEED 500px WIDTH.
Now, first when you're making a template, you have to start with the basic shell. That means you start the table tags in the beginning, most obviously. I usually like to center my templates before I start making them, but I mean, you don't have to, you can do it after. It just makes more sense and I'm rambling.
So, to start a table, you just need to put these tags in order, and I usually close them up and then add the things I want inside, so:
[table][tr][td]
[/td][/tr][/table]
Now once you've done that, you'll probably get something pretty funky looking, with borders and spaces you don't want. That's because I left out a certain part of the code because I'm an evil little hobag and you need to learn what they do*~*~*~
[atrb=cellspacing,0,true] <---- CELLSPACING ATTRIBUTE This declares how much space you have within cells, so your TR and TDs. (TR are vertical columns while TD are horizontal, I don't mess with TR). I keep it at zero because you can always mess with margins, but you can change it to whatever.
[atrb=border,0,true] <---- BORDER ATTRIBUTE Don't panic, your template can still have pretty borders if you want it to, this just gets rid of the messy preexisting borders that come with the template making experience.
***** Keep in mind that although the attributes above do not have to be in a specific order, your table, tr, and td tags must be in that order! And also, tags that start with "atrb" do not need to be closed!
ALRIGHT NOW THAT THAT'S OVER AND DONE WITH, YOU CAN DO FUN STUFF YAY FOR YOU GOOD JOB.
So here's your shell, right?
[table][tr][td][atrb=cellspacing,0,true][atrb=border,0,true]
[/td][/tr][/table]
Great, now you can do styling. If you want a background image you can do yet another atrb tag. [atrb=style, background-image:url(yoururlhere)]
That "style" is extremely crucial! if you don't put it in, nothing will show up, silly! But! If you want the background image to show up even in a different TD tag, then add ",BTABLE" at the end. Don't forget the comma though~
In that atrb style tag, you can also add width and margin and padding, all of those things. Here's an example:
[table][tr][td][atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;]
[/td][/tr][/table]
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] this is how that will turn out!
|
Now you can mess around with the top of your template. I'll use an icon and some lyrics for giggles. This will be done using style tags*~*~
For the icon, I'm going to round it. Of course you can do other things like put a border on it, just round the corners, all of that. But lately I've been loving rounded icons. To do that, I'll start a style tag (you need to close these tags with a [/style]).
[div style="width:100px; height:100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-image:url(your icon here)"] [/div]
You'll put that style coding right behind the atrb tags, but keeping it in the table tags like so:
[table][tr][td][atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;][div style="width:100px; height:100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-image:url(your icon here); float:left;"] [/div][/td][/tr][/table]
And it'll look something like this:
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] |
Now let's look into this coding and pick out some things. Now, the width and the height of you icon can be adjusted to whatever. As you can see, I changed the height and width, knocking it down 20 pixels. Just because I thought that 100x100 was too large for this specific template. You can also see that the icon image has not changed, because it is stuck to the background. Think of it like when you were a kid and put a toilet paper roll over your eye. Imagine that squeezing smaller and smaller. The view does not change, but the amount of what you see does.
You can also mess around with the border radius (i use this site). I put "float:left" in so the text can be displayed next to the icon without having to fuck around with multiple tables and td tags. You can also add style to the border, like a dotted, dashed, solid, or doube one using css like "border:1px solid #color".
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] now you can add text right after the style tag like it's no biggie. because of the float property earlier, the styling should automatically go to this side. |
For this, I'm just going to use a larger, more elegant font on top and a small paragraph of lyrics on the bottom. Possibly adding in a space for a word count and such.
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] obedear the sky is low now text will still be on this side, be patient c: |
That's what it should look like by now. I'll post a list of things you can do in styles later with fonts and all of that fun stuff. But right now I'm going to talk about what I did to the positioning. I put a margin on the top of the words, moving it down a bit, and also on the left side so that the border on bottom didn't poke out from behind the icon.
Now I'm gonna modify the text below that lyric and all of that fun stuff.
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] obedear the sky is low Watch fluids seem and rid their rudders soul , They'll grace it with their wind arrows. 'Tis in the feathers that, that They branch below, low ###words with tagged |
Notice how I used a color tag instead of style. I didn't want to risk messing anything up, and messing with too many style tags can get annoying. But now we can start a new style tag for the actual post's text.
[atrb=cellspacing,0,true][atrb=border,0,true][atrb=style, background-image:url(http://i.imgur.com/5o3x7.png); width:400px; padding:20px;] obedear the sky is low Watch fluids seem and rid their rudders soul , They'll grace it with their wind arrows. 'Tis in the feathers that, that They branch below, low ###words with tagged Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. |
I just added another style tag behind the one I used for the top. I margin'd this one so the top would not run into the icon. I think templates look best with justified text. I also weakened the opacity so that the text wouldn't kill everyone's eyes against the dark background. I was also just 2lzy to find a darker text color. **Remember to specify color if you're using a background, otherwise it will just convert to the site's forum font color!
That's pretty much it, just add a credit and shit and you'll be done. I apologize about the quickness of this and I'll probably edit this later but I'm tired ughu. ;w; And I'll be putting up a list of css style properties and all of that fun stuff, what things in style tags do. Be patienttt ;w;
|
|
|
Post by hatti on May 22, 2013 13:27:40 GMT -8
This is amazing and I love you for it. 8'D
|
|
|
Post by yeongu on Jun 14, 2013 3:07:10 GMT -8
Sankyu na! saved my life^^
|
|