Faldrun Fangirl Club

This personal journal is rife with Templates and Personal Notes.

This section is for players to post about things unrelated to the Standing Trials roleplay. You may talk about anything from world issues, to your personal life, to funny things you found on the internet. You are free to use this forum to express yourself as a player and not as your actual character. You can also post in other players journals so long as they give you permission to. Please remember not to post anything relating to pornography or anything with extensive use of profanity.

Moderator: Staff

User avatar
Ioan
Approved Character
Posts: 17
Joined: Sat Sep 26, 2015 8:54 am
Race: Aukari
Profession: Spy
Renown: 0
Character Sheet
Plot Notes
Personal Journal
Wealth Tier: Tier 1

Milestones

Miscellaneous

Faldrun Fangirl Club

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:
Image
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:
Image
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:
Image
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.
word count: 279
User avatar
Ioan
Approved Character
Posts: 17
Joined: Sat Sep 26, 2015 8:54 am
Race: Aukari
Profession: Spy
Renown: 0
Character Sheet
Plot Notes
Personal Journal
Wealth Tier: Tier 1

Milestones

Miscellaneous

Faldrun Fangirl Club

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:
Image
See it?
Image
Use it. What should pop up on your page is:
Image
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:
Image
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:
Image

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]
Image
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]
Image
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.
Image
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]
Image
I'd suggest experimenting with fonts and colours. I'll be back to show you guys more stuff.

Ta.
Last edited by Ioan on Fri May 06, 2016 1:48 am, edited 1 time in total. word count: 966
User avatar
Tlarekih
Approved Character
Posts: 89
Joined: Sat Apr 23, 2016 10:49 pm
Race: Yludih
Profession: Doctor
Renown: -10
Character Sheet
Plot Notes
Personal Journal
Templates
Letters
Wealth Tier: Tier 1

Contribution

Milestones

Miscellaneous

Events

Faldrun Fangirl Club

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:
Image
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]
Image
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]
Image
(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]
Image
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]
Image
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)
word count: 4482
User avatar
Ioan
Approved Character
Posts: 17
Joined: Sat Sep 26, 2015 8:54 am
Race: Aukari
Profession: Spy
Renown: 0
Character Sheet
Plot Notes
Personal Journal
Wealth Tier: Tier 1

Milestones

Miscellaneous

Faldrun Fangirl Club

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?
Image
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]
Image
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:
Image
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)
Image
text-align:right;
Image
text-align:center;
Image
text-align:justify;
Image
-------
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.
word count: 816
User avatar
Tlarekih
Approved Character
Posts: 89
Joined: Sat Apr 23, 2016 10:49 pm
Race: Yludih
Profession: Doctor
Renown: -10
Character Sheet
Plot Notes
Personal Journal
Templates
Letters
Wealth Tier: Tier 1

Contribution

Milestones

Miscellaneous

Events

Faldrun Fangirl Club

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.
word count: 34
User avatar
Tlarekih
Approved Character
Posts: 89
Joined: Sat Apr 23, 2016 10:49 pm
Race: Yludih
Profession: Doctor
Renown: -10
Character Sheet
Plot Notes
Personal Journal
Templates
Letters
Wealth Tier: Tier 1

Contribution

Milestones

Miscellaneous

Events

Faldrun Fangirl Club

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
word count: 30
User avatar
Shards
Prophet of Old
Posts: 349
Joined: Fri Mar 13, 2015 9:48 pm
Race: Mer
Renown: 0
Office
Wealth Tier: Tier 1

Featured

Contribution

Milestones

RP Medals

Events

Faldrun Fangirl Club

I just want to say your box code tutorial is really helpful, thank you!
word count: 14
User avatar
Tlarekih
Approved Character
Posts: 89
Joined: Sat Apr 23, 2016 10:49 pm
Race: Yludih
Profession: Doctor
Renown: -10
Character Sheet
Plot Notes
Personal Journal
Templates
Letters
Wealth Tier: Tier 1

Contribution

Milestones

Miscellaneous

Events

Faldrun Fangirl Club

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. :)
word count: 40
User avatar
Rumour
Prophet of Old
Posts: 2295
Joined: Wed May 11, 2016 3:47 am
Race: Prophet
Renown: 0
Plot Notes
Office
Personal Journal
Templates
Wealth Tier: Tier 1

Featured

Contribution

Milestones

RP Medals

Miscellaneous

Staff

Events

Faldrun Fangirl Club

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

xoxo
word count: 11
Image

"There is only one thing in the world worse than being talked about, and that is not being talked about."
Office | Rharne | Rharne Lore | Lightning Knights | Thunder Priestesses | Merchants Guild
User avatar
Tlarekih
Approved Character
Posts: 89
Joined: Sat Apr 23, 2016 10:49 pm
Race: Yludih
Profession: Doctor
Renown: -10
Character Sheet
Plot Notes
Personal Journal
Templates
Letters
Wealth Tier: Tier 1

Contribution

Milestones

Miscellaneous

Events

Faldrun Fangirl Club

I was gone for a year. o:
word count: 7
Post Reply Request an XP Review Claim Wealth Thread

Return to “Personal Journals”