[anchor=OptionOne][/anchor]
This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.
--
[anchor=OptionTwo][/anchor]
This is the top box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the bottom box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor plasdacerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.
--
[anchor=OptionThree][/anchor]
This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.
This is the first row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
--
[anchor=OptionFour][/anchor]
This is the first row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.
This is the second row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
--
[anchor=OptionFive][/anchor]
This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.
This is the right-side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus
--
[anchor=OptionSix][/anchor]
Here are some tips and tricks to help you get the most out of this template. Let's start with the basics:
Well, one of the basics is to use subheaders. The simplest way to do this is to simply alter the size. In this case the top title has a size of 200 while the subheader has a size of 140. Easy! Here's the code:
Code: Select all
[align=center][font size=140]THE BASICS[/font][/align][hr]
You can also change the font of the subheader, of course, like so:
The code for the 'HURRAY!' header above is:
Code: Select all
[googlefont=Homemade Apple][align=center][font size=140]TADA![/font][/align][hr][/googlefont]
I can also recommend bountiful use of the 'table2' tag in combination with the 'tab' tag. The table2 allows you to set the border modes to transparent which, basically, makes the borders in the table invisible. This almost always looks prettier, in my estimation. Here's an example followed by the code.
| HEADER 1 | HEADER 2 | HEADER 3 |
| Something something! | Something more! | I don't know what to write! |
| Something something! | Something more! | I don't know what to write! |
| Something something! | Something more! | I don't know what to write! |
Code: Select all
[table background_color=[tr][td]transparent border_color=transparent][/td][/tr]
[tr][td]HEADER 1[indent=100][/td][td] HEADER 2[indent=200][/td][td] HEADER 3[/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td][/td][/tr]
[/table]
Notice how you can space out the columns using the 'tab=#' tag. This can be really useful if you're trying to align the columns of two tables that are vertically stacked!
Few people seem to make use of the 'anchor' and 'goto' tags which, in my view, are two of the coolest BBCodes available on ST. You might have noticed that there's a little menu row at the bottom of each of these templates and by clicking on one of the items, you jump right to whatever you clicked on! Also notice that the url, in adress bar of your browser, has changed. If you're using the little black menu that is in these templates, you'll see 'OptionOne' or 'OptionTwo' or 'OptionThree' etc, attached to the end of the URL. The cool thing is that if you were to send that link to someone:
they jump right to the appropiate spot too!
Maybe I am explaining this all wrong and none of the above made sense. Let me break down how the menu at the bottom of each of these templates works. If you check the code, you'll see that each template ends with a 'style3' containing a whole bunch of 'goto=' tags. A 'goto' is like a 'url=' tag, only you're linking to anchors that you specify (or, in other words, specific spots on the page). Suppose you were to put this somewhere in code:
Code: Select all
[goto=RunForestRun]Click me![/goto]
Well, that by itself won't do much, but if you put an anchor somewhere:
Code: Select all
[anchor=RunForestRun]This is where we'll jump to![/anchor]
So: the goto targets the destination (the anchor). Easy enough. So where are those anchors in these templates? Well, they're at the very top. Each of these template posts starts with:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionSix][/anchor][/style]
?!?! I hear you think. Welcome to a little hack. If you use a default goto/anchor combination the page scrolls down a little too far. I've worked around this by putting a hidden (invisible) anchor at the very top of each post and have manually offset it 50 pixels upward so that the goto jumps a little above the destination. If this doesn't make sense: just try making a default goto/anchor combination and notice that it jumps too far up or down.
WE'RE NOT IN KANSAS ANYMORE...
There's much more you can do with this template, such as changing the background colors of each row/column (as demonstrated in the Black & White template). Just find the 'style3' for the row/column you want to target and add a 'background-color: rgba(#,#,#,#)' where the first three numbers are red (0 to 255), blue (0 to 255), and green (0 to 255). The last value is the opacity of the background color. If you make it '0.5' the row/column will have a semi-transparent background color. Naturally you can also add borders, border insets, etc. Go wild, and have fun!
One more thing. Notice that the background adapts to the length of each template, for this reason I recommend you use high-resolution images as your background images.
-------------------------------------------------------------------------------
1:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionOne][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:24px;padding-right:18px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN ONE[/font][/align][hr][align=justify]This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:18px;padding-right:24px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN TWO[/font][/align][hr][align=justify]This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.[/align][/googlefont][/style3][style3=background-color:rgba(0,0,0,1);color:#434343;padding-top:8px;padding-bottom:8px;float:left;max-width:100%;][align=center][googlefont=Poppins][font size=90][color=white]① [/color][goto=OptionOne][color=white]2-COLS[/color][/goto] ② [goto=OptionTwo][color=#434343]2-ROWS[/color][/goto] ③ [goto=OptionThree][color=#434343]2-COLS 1-ROW[/color][/goto] ④ [goto=OptionFour][color=#434343]1-ROW 2-COLS 1-ROW[/color][/goto] ⑤ [goto=OptionFive][color=#434343]BLACK & WHITE[/color][/goto] ⑥ [goto=OptionSix][color=#434343]TIPS[/color][/goto][/font][/googlefont][/align][/style3][/style2][/style]
2:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionTwo][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;][style3=padding-top:8px;padding-left:24px;padding-right:18px][googlefont=Exo 2][align=center][font size=200]ROW ONE[/font][/align][hr][align=justify]This is the top box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-top:8px;padding-left:18px;padding-right:24px;][googlefont=Exo 2][align=center][font size=200]ROW TWO[/font][/align][hr][align=justify]This is the bottom box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor plasdacerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.[/align][/googlefont][/style3][style3=background-color:rgba(0,0,0,1);color:#434343;padding-top:8px;padding-bottom:8px;float:left;max-width:100%;][align=center][googlefont=Poppins][font size=90]① [goto=OptionOne][color=#434343]2-COLS[/color][/goto] [color=white]②[/color] [goto=OptionTwo][color=white]2-ROWS[/color][/goto] ③ [goto=OptionThree][color=#434343]2-COLS 1-ROW[/color][/goto] ④ [goto=OptionFour][color=#434343]1-ROW 2-COLS 1-ROW[/color][/goto] ⑤ [goto=OptionFive][color=#434343]BLACK & WHITE[/color][/goto] ⑥ [goto=OptionSix][color=#434343]TIPS[/color][/goto][/font][/googlefont][/align][/style3][/style2][/style]
3:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionThree][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:24px;padding-right:18px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN ONE[/font][/align][hr][align=justify]This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:18px;padding-right:24px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN TWO[/font][/align][hr][align=justify]This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.[/align][/googlefont][/style3][style3=padding-top:8px;padding-left:24px;padding-right:18px;float:left;][googlefont=Exo 2][align=center][font size=200]ROW ONE[/font][/align][hr][align=justify]This is the first row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=background-color:rgba(0,0,0,1);color:#434343;padding-top:8px;padding-bottom:8px;float:left;max-width:100%;][align=center][googlefont=Poppins][font size=90]① [goto=OptionOne][color=#434343]2-COLS[/color][/goto] ② [goto=OptionTwo][color=#434343]2-ROWS[/color][/goto] [color=white]③[/color] [goto=OptionThree][color=white]2-COLS 1-ROW[/color][/goto] ④ [goto=OptionFour][color=#434343]1-ROW 2-COLS 1-ROW[/color][/goto] ⑤ [goto=OptionFive][color=#434343]BLACK & WHITE[/color][/goto] ⑥ [goto=OptionSix][color=#434343]TIPS[/color][/goto][/font][/googlefont][/align][/style3][/style2][/style]
4:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionFour][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;]
[style3=padding-top:8px;padding-left:24px;padding-right:18px;float:left;][googlefont=Exo 2][align=center][font size=200]ROW ONE[/font][/align][hr][align=justify]This is the first row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:24px;padding-right:18px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN ONE[/font][/align][hr][align=justify]This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:18px;padding-right:24px;max-width:358px;][googlefont=Exo 2][align=center][font size=200]COLUMN TWO[/font][/align][hr][align=justify]This is the right-side box.
Cras vestibulum rhoncus nulla sed consectetur. In hac habitasse platea dictumst. Proin convallis, mauris quis porttitor tempus, massa turpis tempor augue, ac molestie purus mi id arcu. Cras efficitur dignissim urna in rhoncus. Aenean condimentum, risus interdum pretium efficitur, tellus sem mollis dolor, quis ullamcorper erat neque in turpis. Suspendisse dapibus velit pretium, mattis dolor non, ornare leo. Nam porta augue magna, convallis scelerisque urna porttitor ut. Sed eget pulvinar arcu, eleifend venenatis augue. Nam vel velit ut ipsum vulputate porttitor placerat et libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat sapien ac dolor varius pellentesque. Quisque luctus nisl risus, non eleifend dolor ultrices quis. Sed massa libero, pretium at consectetur a, commodo quis tortor. Suspendisse vestibulum rutrum sapien, vitae sodales risus eleifend sit amet. Phasellus quam erat, pellentesque sed viverra vitae, viverra at orci.[/align][/googlefont][/style3][style3=padding-top:8px;padding-left:24px;padding-right:18px;float:left;][googlefont=Exo 2][align=center][font size=200]ROW TWO[/font][/align][hr][align=justify]This is the second row.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=background-color:rgba(0,0,0,1);color:#434343;padding-top:8px;padding-bottom:8px;float:left;max-width:100%;][align=center][googlefont=Poppins][font size=90]① [goto=OptionOne][color=#434343]2-COLS[/color][/goto] ② [goto=OptionTwo][color=#434343]2-ROWS[/color][/goto] ③ [goto=OptionThree][color=#434343]2-COLS 1-ROW[/color][/goto] [color=white]④[/color] [goto=OptionFour][color=white]1-ROW 2-COLS 1-ROW[/color][/goto] ⑤ [goto=OptionFive][color=#434343]BLACK & WHITE[/color][/goto] ⑥ [goto=OptionSix][color=#434343]TIPS[/color][/goto][/font][/googlefont][/align][/style3][/style2][/style]
5:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionFive][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:24px;padding-right:18px;max-width:358px;background-color:rgba(0,0,0,0.6);][googlefont=Exo 2][align=center][font size=200]COLUMN ONE[/font][/align][hr][align=justify]This is the left hand side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus bibendum.[/align][/googlefont][/style3][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:18px;padding-right:24px;max-width:358px;background-color:rgba(255,255,255,0.6);color:black;][googlefont=Exo 2][align=center][font size=200]COLUMN TWO[/font][/align][hr][align=justify]This is the right-side box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem turpis, facilisis eu dapibus dapibus, finibus eget ipsum. Ut eu velit sed nisl congue scelerisque. Praesent auctor placerat tincidunt. Praesent vel suscipit lectus, vel pulvinar enim. Nam porttitor, tellus ac interdum congue, sem augue pretium libero, in scelerisque sapien arcu in odio. Donec scelerisque finibus molestie. Pellentesque non vulputate urna. Sed posuere, dui eget aliquam ultrices, ante turpis pulvinar nunc, ac volutpat sem leo eget ante. Nulla ut ipsum vulputate, ultricies neque at, congue massa. Sed quis fringilla mauris.
Phasellus ac egestas dolor. Suspendisse ut odio non risus rhoncus aliquam. Etiam ligula nunc, suscipit a fringilla at, egestas sed ipsum. Fusce magna purus, pretium et justo vel, euismod pulvinar eros. Ut sem magna, feugiat id velit in, aliquam tempus orci. Quisque ultricies, turpis nec varius ultrices, enim nunc scelerisque sapien, eget lobortis lacus nunc quis ligula. Nunc congue mi et ligula faucibus pellentesque. Morbi quam neque, vehicula vitae magna ac, hendrerit posuere orci. Morbi volutpat ullamcorper dui a suscipit. Ut luctus leo a cursus[/align][/googlefont][/style3][style3=background-color:rgba(0,0,0,1);color:#434343;padding-top:8px;padding-bottom:8px;float:left;max-width:100%;][align=center][googlefont=Poppins][font size=90]① [goto=OptionOne][color=#434343]2-COLS[/color][/goto] ② [goto=OptionTwo][color=#434343]2-ROWS[/color][/goto] ③ [goto=OptionThree][color=#434343]2-COLS 1-ROW[/color][/goto] ④ [goto=OptionFour][color=#434343]1-ROW 2-COLS 1-ROW[/color][/goto] [color=white]⑤[/color] [goto=OptionFive][color=white]BLACK & WHITE[/color][/goto] ⑥ [goto=OptionSix][color=#434343]TIPS[/color][/goto][/font][/googlefont][/align][/style3][/style2][/style]
6:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionSix][/anchor][/style][style=max-width:800px;box-shadow: 2px 2px 30px black;color: #E8E8E8;border:1px solid rgb(40,40,40);font-size:100%;margin-left:16px;margin-right:16px;margin-top:8px;background-image:url('/gallery/image.php?album_id=552&image_id=14068&view=no_count');background-size:cover;background-position:50%;background-color:rgba(16,16,16,0.5);][style2=background-color:rgba(0,0,0,0.55);max-width:100%;overflow:hidden;][style3=float:left;padding-bottom:8px;padding-top:8px;padding-left:24px;padding-right:18px;][googlefont=Exo 2][align=center][font size=200]TIPS[/font][/align][hr][align=justify]Here are some tips and tricks to help you get the most out of this template. Let's start with the basics:[/align]
[align=center][font size=140]THE BASICS[/font][/align][hr]
[align=justify]Well, one of the basics is to use subheaders. The simplest way to do this is to simply alter the size. In this case the top title has a size of 200 while the subheader has a size of 140. Easy! Here's the code:
[code]
[align=center][font size=140]THE BASICS[/font][/align][hr]
You can also change the font of the subheader, of course, like so:[/align][/googlefont]
The code for the 'HURRAY!' header above is:
Code: Select all
[googlefont=Homemade Apple][align=center][font size=140]TADA![/font][/align][hr][/googlefont]
I can also recommend bountiful use of the 'table2' tag in combination with the 'tab' tag. The table2 allows you to set the border modes to transparent which, basically, makes the borders in the table invisible. This almost always looks prettier, in my estimation. Here's an example followed by the code.
[td]transparent border_color=transparent][/td][/tr]
| HEADER 1 | HEADER 2 | HEADER 3 |
| Something something! | Something more! | I don't know what to write! |
| Something something! | Something more! | I don't know what to write! |
| Something something! | Something more! | I don't know what to write! |
|
Code: Select all
[table background_color=[tr][td]transparent border_color=transparent][/td][/tr]
[tr][td]HEADER 1[indent=100][/td][td] HEADER 2[indent=200][/td][td] HEADER 3[/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td]Something something! [/td][td] Something more! [/td][td] I don't know what to write![/td][/tr]
[tr][td][/td][/tr]
[/table]
Notice how you can space out the columns using the 'tab=#' tag. This can be really useful if you're trying to align the columns of two tables that are vertically stacked!
Few people seem to make use of the 'anchor' and 'goto' tags which, in my view, are two of the coolest BBCodes available on ST. You might have noticed that there's a little menu row at the bottom of each of these templates and by clicking on one of the items, you jump right to whatever you clicked on! Also notice that the url, in adress bar of your browser, has changed. If you're using the little black menu that is in these templates, you'll see 'OptionOne' or 'OptionTwo' or 'OptionThree' etc, attached to the end of the URL. The cool thing is that if you were to send that link to someone:
they jump right to the appropiate spot too!
Maybe I am explaining this all wrong and none of the above made sense. Let me break down how the menu at the bottom of each of these templates works. If you check the code, you'll see that each template ends with a 'style3' containing a whole bunch of 'goto=' tags. A 'goto' is like a 'url=' tag, only you're linking to anchors that you specify (or, in other words, specific spots on the page). Suppose you were to put this somewhere in code:
Code: Select all
[goto=RunForestRun]Click me![/goto]
Well, that by itself won't do much, but if you put an anchor somewhere:
Code: Select all
[anchor=RunForestRun]This is where we'll jump to![/anchor]
So: the goto targets the destination (the anchor). Easy enough. So where are those anchors in these templates? Well, they're at the very top. Each of these template posts starts with:
Code: Select all
[style=position:relative;top:-50px;][anchor=OptionSix][/anchor][/style]
?!?! I hear you think. Welcome to a little hack. If you use a default goto/anchor combination the page scrolls down a little too far. I've worked around this by putting a hidden (invisible) anchor at the very top of each post and have manually offset it 50 pixels upward so that the goto jumps a little above the destination. If this doesn't make sense: just try making a default goto/anchor combination and notice that it jumps too far up or down.
WE'RE NOT IN KANSAS ANYMORE...
There's much more you can do with this template, such as changing the background colors of each row/column (as demonstrated in the Black & White template). Just find the 'style3' for the row/column you want to target and add a 'background-color: rgba(#,#,#,#)' where the first three numbers are red (0 to 255), blue (0 to 255), and green (0 to 255). The last value is the opacity of the background color. If you make it '0.5' the row/column will have a semi-transparent background color. Naturally you can also add borders, border insets, etc. Go wild, and have fun!
One more thing. Notice that the background adapts to the length of each template, for this reason I recommend you use high-resolution images as your background images.
[/style3]
[/style2][/style]
[/code]
