Faldrun Fangirl Club

[Ioan]

WELCOME TO THE CLUB

I actually don't have anything to say for this first post, but I guess I can put down the code here that lets people use cursors in their templates, as I use it in the templates for my two alts. I also have a hexcode resource.

A good resource I've used for cursors is here. For hexcodes, I go to here.

(DISCLAIMER: THE CURSOR IS ONLY USEFUL WHEN USED AS PART AS A STYLE SHEET. THERE IS AN EASY STYLE TOOL THINGY RIGHT ABOVE THE TEXT BOX WHEN YOU TYPE A NEW POST)

Code: Select all

cursor:url(CURSOR URL HERE), default;

To find the cursor link, in a place such as the one I listed above, here's the best description I can give.

You start by selecting your cursor:

In the next page that loads, you'll see that your internet cursor has changed to the one you selected. Don't be alarmed; it's not permanent. Here there are a couple links to the bottom of the page:

While I am certain you can use both links, I use the CSS one on the bottom. You can copy the whole selection and keep only the relevant part, but for the sake of this little 'tutorial', I'll select ONLY the relevant part:

Now, with that little cursor, you plug it into the code I shared above, like so:

Code: Select all

cursor:url(http://cur.cursors-4u.net/cursors/cur-9/cur828.cur), default;

Ta-da! As you can see, I am using the cursor in this post. It's pretty handy, and adds a bit of extra polish to your templates.

[Ioan]

BOXCODES

(DISCLAIMER: I WAS NOT FORMALLY TAUGHT CSS)

I decided to make these things because there were people in chat talking about their misgivings in not knowing how to make boxcodes.


Everything in this will be an element of CSS and therefore requires the use of "style" tags.

You will need to start your boxcode like this:

Code: Select all

[style=xxxx][/style]

This is the first and most crucial step, thus the priority.

I have a couple of references for you folk, now. The first is here. It gives a bunch of examples if you search the CSS term you want, such as "background image". Usually, if you google a term, such as "background image css", you'll end up with a link to this place. It's cool. I also offer up to you a pretty nifty tool I use to round out the borders of my boxcodes. It's called border-radius.

There will no doubt be more, but I should really just stick to the basics.

--

Alright. So, style. This site is one of the few I've encountered that has an "easy style" button on top of the post a reply page, right under such tools as alignment and font size and colour. Here:

See it?

Use it. What should pop up on your page is:

Cool, right? Yes.

Alright, so that's the style code. On this site, among the links I gave in my last post, is one to "hex codes". I won't link it here, because it's already there, so for this little tutorial I'll give you guys a basic black background. The code for black in hex is #000000. Inputting a component, such as background colour, is really as easy as this (the code to use is "background-color:"):

Code: Select all

[style=background-color:#000000;]This code has a black background.[/style]

On that note, though, ALWAYS close off individual components with a semi-colon: ";". If not, the code won't "hold" and there will be no effect. It's necessary, I promise. Also, as demonstrated with background-color, do not put spaces between the words, as a rule. There are times you can, but it's just to clean up how it looks, and it's not necessary to show it right now.

Anyway. That was background color. There is also font color, and for that I will show you how to do it. The colour I'll use is white. White's hex number is #ffffff. The code to use is "color:".

Code: Select all

[style=background-color:#000000;color:#ffffff]This code has a black background and white font.[/style]

There are other, really cool things such as font. For font in style codes, the ones I am 100% for sure knowing work are the ones you get in something like Word. So, think Times New Roman, Arial, Georgia. To use fonts in your CSS, you need to input the size (in "px"). The code to use is "font:".

Code: Select all

[style=font:20px Times New Roman;]Times New Roman[/style]

(NOTE: I prefer to use Google Fonts instead, but since Google Fonts don't go in CSS, I won't be showing them right now.)

At this point, with your black background and white, Times New Roman font, this is how your code will look:

Really big, right? Yeah, it sizes with the screen you use. It's unwieldy. So, I'm going to give you some hard/fast code that I can't describe for you to use.

"max-width: 0px; margin: auto;"

Those are two components I will always use. Width, pretty straightforward. It's the size of your boxcode, and for a forum like this, I think 700-750px should be the max. Margin: auto is simply there so that mobile users, like me, will have the post scaled down to fit our little digital sizes. It's very useful, because otherwise we'd have to scroll the width for hefty codes in order to read what was written there.

For me, I like to input those codes first in the order of components, like this:

Code: Select all

[style=max-width:600px;margin:auto;background-color:#000000;color:#ffffff;font:20px Times New Roman;]This is the boxcode now.[/style]

There is a very noticeable difference:

Now, these are the very basics. Consider this a PART ONE to the awesome tutorial thing, and I'll make a PART TWO when I get home/ when I wake up tomorrow. I'd suggest experimenting, so I'll show you guys how to use Google Font before I go.


Here's our style, but without the "font" component, because it'll be pretty useless.

Code: Select all

[style=max-width:600px;margin:auto;background-color:#000000;color:#ffffff;]Pretty basic.[/style]

I'll be inputting a bit of size for the text to use, so we won't have to rely on {size=}{/size} tags.

Code: Select all

[style=max-width:600px;margin:auto;background-color:#000000;color:#ffffff;font-size:120%;]Pretty basic.[/style]

Not much of a change, but it's pretty useful and nifty, and your {size} thing will change as a result when using it.

So, now for the meat and potatoes of google font.

This is what it looks like. I don't have time to describe it, so I'll let you folks experiment with it. I'll use the first font.

Code: Select all

[style=max-width:600px;margin:auto;background-color:#000000;color:#ffffff;font-size:120%;][googlefont=Open Sans]Open Sans is a basic font, I guess.[/googlefont][/style]

I'd suggest experimenting with fonts and colours. I'll be back to show you guys more stuff.

Ta.

[Tlarekih]

BOXCODES pt II

(DISCLAIMER: I WAS NOT FORMALLY TAUGHT CSS)

So, in my previous post, I covered background-color, color, width, and margin (as far as I'll go with them, because what I use works and I'll allow you folks some room for experimentation). Here, I'll cover a few other background elements.

We'll start with our basic style from last post, but I'll be removing the "background-color:" from it and I'm making "color:" black:

Code: Select all

[style=max-width:650px;margin:auto;color:#000000]This is our style code.[/style]

This is how it looks:

It is literally at its most basic point. Nothing fancy here, right? Well, let's slap in some background-image bullshit.

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");]This is the background-image code.[/style]

So, you can use really any image out there. It's super straightforward and super easy to put it in. The code you should be using for it is: "background-image:url("URL");". Sweet, right?

This is where I'll start using filler text. For this segment, the text I'll use is the much beloved Lorem Ipsum.

Inputting that into our current code is easy peasy. Here's what it'll look like in your text box:

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.[/style]

(I zoomed out to show the whole boxcode)

When you use filler text in your boxcodes, it makes it a bajillion times easier to see if your background image is repeating, fixed, what have you. It shows you what the code will look like when you actually use it for posting and fill it up with your hard thought-out words. Feel free to use any filler, even your posts as you type them out, and fiddle with the code as you will.

--

So, we slapped in some "background-image". Let's look at codes that work on it.

The first is background-repeat. It's useful only for when you're using images.

Now, the two functions I use when it comes to it are "no-repeat" and "repeat". When it's a seamless background, "repeat" is definitely the best. If your image is really big and/or not at all seamless, I'd suggest "no-repeat". The image I used last is not seamless, per se, but it is close. Here, I'll show you it with "no-repeat".

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");background-repeat:no-repeat;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.[/style]

As you can see, at the normal boundary of the image, it just doesn't exist anymore and you're back to writing on air.

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");background-repeat:repeat;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.[/style]

This is how it looks repeating. Even zoomed out, the code is hard to see, but I'm hoping that you can see the image is repeating. It's good. Really good. Use this. Much less tears this way.

-------

The final part of this will be "background-attachment".

Now, this isn't at all a necessary part of your code, and you could go through many without ever encountering this line of text. The codes that use it are pretty crazy (I think). What it's used for (because if you don't use it, your code functions normally) is to fix your image in place. This is how you'll write it up. If you use this, and your seamless background is big enough on its own to not justify "background-repeat", you can throw this in:

Code: Select all

background-attachment:fixed;

I can't adequately describe how it works. I really can't show you through an image, either. I'll put down the code, and you can try it out for yourself.

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");background-attachment:fixed;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.

Mauris quis arcu euismod mi rutrum ornare a nec elit. Maecenas non venenatis dui. Phasellus in turpis lacinia, pellentesque purus non, porta enim. Praesent euismod risus id dui placerat, eu sodales libero porta. In sit amet convallis libero. Donec convallis turpis eget efficitur pharetra. Sed sed velit quis erat laoreet pellentesque. In varius at turpis eget ullamcorper. Pellentesque laoreet vehicula sapien vitae auctor. Vivamus libero augue, tincidunt ut tincidunt eget, viverra non elit. Ut ut felis iaculis, elementum enim id, faucibus ligula. Nullam blandit sem eu orci condimentum, eu pulvinar mi imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel libero sit amet nisl feugiat eleifend. Maecenas vestibulum risus a libero mollis posuere. Sed eu magna mi.

Proin sit amet ipsum at arcu blandit maximus at a leo. Etiam nec eleifend erat. Aliquam ultrices enim at nisl tincidunt commodo. Aliquam erat volutpat. In tempus condimentum nisi eu ornare. Morbi sed mattis ex. Sed dignissim, dui at posuere scelerisque, odio sapien placerat neque, eget pulvinar justo risus et lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim neque, suscipit a placerat sit amet, pretium sit amet est. Maecenas id gravida ex, at ullamcorper mauris. Morbi dictum diam tellus, non aliquam dolor ullamcorper quis. Pellentesque fringilla massa sit amet tristique finibus. Suspendisse tincidunt lectus sit amet felis congue, vitae mattis dolor iaculis. Curabitur purus elit, euismod vel placerat eu, pellentesque in eros.

Quisque euismod sem vitae varius tincidunt. Donec eget ligula et massa rhoncus viverra sed consequat orci. Aenean quis lobortis diam, ac aliquam enim. Nulla facilisi. Cras at tellus nisl. Nunc vel leo auctor, pellentesque libero in, porta nulla. Aliquam sit amet risus semper, viverra nulla eu, dignissim ex. Aliquam pharetra odio ut turpis blandit, et tempor sem lobortis. Aliquam vitae tempus dui. Etiam eget tortor non mauris commodo convallis. Curabitur sagittis tempus nunc, congue efficitur risus. Vestibulum a orci et tortor euismod facilisis at vel mauris. Nulla quis dapibus magna. Phasellus vitae magna eget tellus pharetra suscipit. Pellentesque dapibus aliquam metus ut malesuada.[/style]

And that's that for tonight. Go crazy and experiment safely, kids.

(don't break the site)

[Ioan]

BOXCODE pt III

I feel like I've shown a lot of cool things for boxcode-making enthusiasts already, but I do have a few more super cool components that I guess could go in.

As usual, we requre our boxcode. Let's use the last one, with the image.

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");background-repeat:repeat;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.[/style]

I'll be introducing you lot to "padding".

It's pretty straightforward. In my eloquent manner of describing, padding determines the space between your text and the "wall" of the boxcode. So, you see how ours touches the very border?

Let's slap some padding in there!

Now, you can do this in a variety of ways, but I'll show you the short and sweet version, because it saves you a buttload of typing. Our code will therefore have this added in:

Code: Select all

padding: 30px 30px 30px 30px;

So, this is how it will look:

Code: Select all

[style=max-width:650px;margin:auto;color:#000000;background-image:url("/gallery/image.php?album_id=2&image_id=1791&view=no_count");background-repeat:repeat;padding:30px 30px 30px 30px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus velit sit amet lorem iaculis tempus. Sed mattis ornare dolor, at ullamcorper erat aliquet non. Nunc mi velit, faucibus eu leo vitae, posuere porta massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo mi eget dapibus laoreet. Quisque fringilla mollis lobortis. Aenean tempor iaculis dolor ac tempor. Suspendisse potenti. Donec sollicitudin ligula lorem. Donec vel justo vitae leo fringilla tempus. In finibus vehicula augue, at tincidunt nibh. Aenean elit augue, venenatis a velit viverra, euismod semper justo.

Praesent magna lorem, viverra in mattis sit amet, lobortis eget nisl. Donec interdum mollis consequat. Aliquam aliquet quam ut est molestie, at blandit turpis congue. Aliquam dictum varius nunc, a consectetur nunc condimentum non. Sed tempus pretium leo, non rutrum urna consequat nec. Praesent finibus semper metus, sit amet fringilla lectus eleifend sed. Proin non sapien at elit elementum interdum nec non elit. Mauris sodales ligula a tempus condimentum. Etiam eros est, euismod sit amet sem at, luctus condimentum tortor. Phasellus vel aliquam dui. Vestibulum porta mollis dapibus.[/style]

As you can clearly see, the padding sort of forced the boxcode to get bigger. Because we put 30px on all four sides, the width is now 60px larger (does this need clarification?). We can just go back in and edit the width of the code to:

Code: Select all

width:590px;

Makes sense, right? Well, this is what it looks like now:

10/10

-------

Now, I'd like to show you guys some font alignment stuff, because freeform text bothers me (I like to justify my posts, personally).

This new code is called "text-align:". Like I said, I like justify. For me, the code is "text-align:justify;". For others, it may be "text-align:left" or "text-align:center". The important ones (imho) are "center", "left", "right", and "justify". Theere are two others, but I've never used them and I won't even bother.

Hopefully, by this point, you guys have used the various alignments in your internet adventures, but just in case you are newbles, I'll take a few screencaps for you.

text-align:left;(this is the standard alignment whoops)

text-align:right;

text-align:center;

text-align:justify;

-------

Alright, guys. These are the codes that I use. If you have a request to other codes that other people use, I'll take requests. I'll also show off some of the super cool {style2} bullcrap that gets around (because it's literal magic sometimes).

Peace.

[Tlarekih]

My sun is a little red spot in the evening sky, and although we can't smell it, there's smoke over the city.

Can't wait to see what the moon looks like.

[Tlarekih]

I wanted to write a Star Trek 2009 fanfiction, and then I went and watched Civil War. Now I'm writing an Avengers fanfiction.

I'm getting too deep halp

[Shards]

I just want to say your box code tutorial is really helpful, thank you!

[Tlarekih]

I've been absent for nearly two weeks. Poker tournament at the casino, been on every single day from 7pm to 4am. Done the run on Tuesday and then three days off. Looking forward to coming back and wrecking stuff.

[Rumour]

We're looking forward to having you back too, Tlare!

xoxo

[Tlarekih]

I was gone for a year. o: