A Jar on Art - Jaronart's Templates (Feel free to use)

[attr="class","jarpoke"]


~

[attr="class","jarhootcontainer"]

[attr="class","jarhootcredit"]
coded by JARONART

[attr="class","jarmanu"]

[attr="class","jarmanucredit"]
made by jaronart of WW

[attr="class","jarheroesredo"]

[attr="class","newclassclass"]NEWCLASS CLASS!!!![break][break]
OK so this is my quick little lesson on newclass. It's actually a very simple concept to understand, once you get the hang of it. It also makes your codes much easier to read and much neater as well.[break][break]
So say I want to make a square, 100x100 div that is orange in color (color hex code #ffa500) and has text in it that is white.. Normally, without newclass, it would look like this:[break][break]
[break][div style="width:100px;height:100px;background:#ffa500;"][font face="verdana"][font color="ffffff"]text in box[/font][/font][/div][break][break]
Well, you can also do this in newclass! But first, quick lesson on the "font face" and "font color":[break][break]
In newclass, "font face" is changed to "font-family". So if I want a Verdana font, then it would look like this in newclass: "font-family:verdana;"[break][break]
Font color is simplified. All it is in newclass is simply like so: "color:#fff;"[break][break]
Just like in regular bbcode, the semicolons simply separate different elements of the div.[break][break]
OK now back to newclass. Remember how the div had all those different parts? We can simplify it with newclass. This is the original code:[break][break]
[break][div style="width:100px;height:100px;background:#ffa500;"][font face="verdana"][font color="ffffff"]text in box[/font][/font][/div][break][break]
This is the newclass code:[break][break]
[break][div][attr="class","demo1"][/div][break][break]
Much simpler, right? Except, where did the attr and class and demo come from?[break][break]
Thing is, in newclass, it's like you're replacing the divs with tags. So for the above, I named that class "demo1" and at the end, I laid out exactly what I wanted the class to do. So currently, at the bottom of my code, I have this:[break][break]
[newclass=.demo1]width:100px;height:100px;background:#ffa500;color:#fff;[/newclass][break][break]
The [newclass] allows me to label a class, which is the thing that comes after the = sign. Note that classes in the newclass box need to have a . before the class name, and that when it's called into the actual template (by using the attr="class","classname") it does not have the . before it.[break][break]
Another important thing about newclass: use [nospaces]. This tag is extremely helpful so it doesn't mess up your code. You'll need to use break tags, but it'll help with your code a lot. Trust me. It's never fun to see code break because you've forgotten nospaces.[break][break][break]
A LITTLE EXTRA!!![break][break]
Let's talk googlefonts. What if you're getting sick of the old times new roman, verdana, arial, etc? You can easily incorporate googlefonts by using this: [break][break]
[googlefont=fontname][break][break]
So say I had the same orange box from earlier, but I want to change the font to Abel. For this example, I'm using a new newclass, but it will look exactly the same as the demo1. This time, I'll name the newclass demo2:[break][break]
[nospaces][googlefont=Abel]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Abel[/newclass][break]
[nospaces][googlefont=Abel][div][attr="class","demo2"]text in box[/div]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Abel[/newclass][break][break]
Well, look at that! The text is all fancy-schmancy now. You can go to the GOOGLE FONTS page and look up fonts. For fonts that are more than one word, simply use a + instead of a space between them. Within the newclass, you do not need this + however. This + only applies to the googlefont tag. So for example, the newclass would look like this:[break][break]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Open Sans[/newclass][break][break]
As opposed to the googlefont tag which will look like this:[break][break]
[googlefont=Open+Sans][break][break]
OK so let me know if you have any questions. Newclass takes some practice, but once you get the hang of it, it's much easier to read since you can place ALL newclass tags at the bottom of the code. It doesn't need to be in the middle.[break][break]
Alright! Have fun with Newclass!



[newclass=.newclassclass]width:400px;text-align:justify;font-family:Open Sans;[/newclass]
[newclass=.demo1]width:100px;height:100px;background:#ffa500;color:#fff;[/newclass]