Spoilers Tag Pictures

So, I have quite the limited knowledge when it comes to these things. But I see lots of people using the Spoiler Tag system to create very nice signatures that have the pictures of their navis superimposed upon them. Please tell me and others like me how to do the same. In the greatest and most thorough detail if possible.

Fera's Step-by-Step Basic Guide to Awesome Picture-Tabs

[li]1- Determine number of tabs you want to have.
[li]2- Find a picture that has a height of (Number of Desired Tabs x 18) pixels. Or just like, crop an image to this height.
-- Try not to do images that are too wide. Right now, the three people that have these tabs have images about 300-400ish pixels wide.
[li]3- Using MS Paint or whatever, separate the images into 16-pixel-high tabs. [See PROTIP below for PROTIP. THEY'RE FOR PROS.]
[li]4- Upload said tabs into Photobucket/Imageshack/Tinypic/Whatever.
[li]5- Back up your old sig code. You do NOT want to be stranded with a smattering of shit sitting at the bottom of your posts.
[li]6- Using this code, create your tabs. Be sure to arrange them properly!



PS: Don't put those parentheses in, except for Background-Image: URL.
PPS: Width is a number. Put in a number there. Also no parentheses involved.


• 7- Update your signature, and voila! Pictured tabs!
  

Notes to Be Wary Of:

[li]This is just a very basic explanation of how to make pictured tabs. If you want to tinker around with it more, you can ask people who are more knowledgeable about the code used in this, which is CSS. People like Shuryou and Knight.
[li]If you see your tabs all repeating and mangled in the signature editing window, don't panic. Open up a forum thread, and check your signature there. It should be correct.
[li]If all you see is your nice tab contents sprawled out all over the place, you probably missed a /spoiler tag somewhere. Look around.

• PROTIP: Lazy bastards who can't be bothered to slog through precious minutes in MS Paint separating their tabs can use this tab-creation template and just copypaste it onto the desired image. After that you can cut out the individual tabs. What, you want more help?
  

(Sorry about the code being an image. Apparently I can't get the spoiler code I want into a code box, InvisionFree gets mad for some reason.)

A good way for artists to get their image to fit is to draw the image 2x the size before shrinking down to appropriate size.

Since I'm a swell kind of fellow, I will provide the secrets of INVISO-TABS.

Use the following for your surface tabs, and change "Title" as you see fit. The background is just a bar of RERN's main skin color, that the tabs rest against.
[spoiler=Title style="color:#000000;width:294; border:0px solid #000000; background-image:url(http://i78.photobucket.com/albums/j111/Bomberman87/TagBackground1.png);"][/spoiler]

Use the following for your embedded tabs. This is different because the interior of tabs are a different color than RERN's main skin color.
[spoiler=Title style="color:#000000;width:294; border:0px solid #000000; background-image:url(http://i78.photobucket.com/albums/j111/Bomberman87/TagBackground2.png);"][/spoiler]

Everyone's just too good for Drakim-tabs all of a sudden. How sad. D:

Drakim's tabs still have merit. They are smaller and load faster, and "float" instead of expanding like when you open these tabs. You can also style them like you can style the spoiler tags, if you want to.

Spoilers are, however, faster to use and work in posts.

So yeah, use whichever you feel fits you more.

EDIT: Quick note for Bomber: you can use "Background-image:inherit" instead of having to put the image URLs in. Should work in both, so you don't even need different tabs.



[spoiler=Title style="color: rgb(0, 0, 0); width: 294px; border: 0px solid rgb(0, 0, 0); background-image: inherit;"][spoiler=Title style="color: rgb(0, 0, 0); width: 294px; border: 0px solid rgb(0, 0, 0); background-image: inherit;"]See? It does.[/spoiler][/spoiler]

EDITII: fixed the CODE boxes, kinda. They still malfunction for multiple spoilers for some reason...

EDITIII: Now totally fixed. Yay!

How do you straight up just change the spoiler tag to different colours?

Adding to old news, if you add DIV tags at the beginning and the end of spoiler tags, you can add backgrounds to your messages in spoilers. Granted, there's a 3px border around the edges (due to CSS padding), but if you add padding onto your DIV tags, it makes it look slightly uniform.



[spoiler=Example style="background-color: black; color:white;"]<div style="background-color: blue; color:white; padding: 2px 2px 2px 2px;">OMG BLUE SCREEN OF DEATH</div>[/spoiler]

You can replace "background-color" with "background-image" to add a picture that tiles, but most of you probably know that much.

INTERNET EXPLORER USERS: Using this code with "background-image" will extend your spoiler messages to the maximum length of the current table cell. No biggie, just remember that.

*off to experiment further*

EDIT: Yes, I realize it's not working properly just yet. <_<

FURTHER EDIT: <DIV> tags do not work in posts. Go figure. Just look at my tabs for the example. <_<

Shoot me for the double-post, but I think this deserves it;

I fixed the border.

Since it doesn't show here anyway, I'll just put a sample code.

[spoiler={SpoilerTitle} style="width: 400; height: 18; padding: 0px 0px 0px 0px; background-image: url('{YourSpoilerTitlePictureHere}');"]<div style="background-image: url('{YourSpoilerMessageBackgroundHere}'); padding: 3px 3px 3px 3px; margin: -4px;"></div>[/spoiler]

For those not in the know:
{SpoilerTitle} = What appears as text in the spoiler bar before you open it.
{YourSpoilerTitlePictureHere} = If you use spoiler picture tabs, your pic's URL goes here. Otherwise, delete this and use {background-color: color;} instead.
{YourSpoilerMessageBackgroundHere} = The URL of the background picture for your spoilers once they are opened. Again, if this is to be a color, follow the advice from above.

If the default text colour isn't desirable, use {color: color;} to change it.

TIP WORTH NOTING: If you use this exact code with tabs of 400 pixels by 18 pixels, the entire signature will look exactly the same from the outside no matter what part of the forum you see them. This includes the Signature editing section.

Here is just a very simplified Signature layout, designed so all you have to do is change names, make a quick replace all(explained below), and copy the whole thing into your signature, and you should have one of those fancy signatures you see the rest of us using.

Below is the layout as it would appear inside your signature edit box.

[spoiler=What it looks like]
[spoiler=Operator Name Here][|[URL=Insert link to Homepage here]Homepage[/URL] || [URL=Insert Email Link here]E-mail[/URL] || [URL=If you have a trades thread, insert link here]Trades[/URL] |]
[spoiler=Key Items]Key items like your PET, or other things of importance go here[/spoiler]
[spoiler=E-mail Contacts]This space is for links to other player's e-mails that you've met through roleplay[/spoiler]
[spoiler=Subchips]This is where you'd put your subchips.[/spoiler]
[URL=Insert link to Operator Proflie page here.]Profile[/URL][/spoiler]
[spoiler=Navigator Name Here][| [URL=Link to Navi Profile here.]Appearance[/URL] |]
[b]Statistics:[/b]
[b]HP:[/b] Max HP here
[b]Level:[/b] Current Level here
[b]Element:[/b] Navi's element here
[b]Subtype:[/b] Navi's subtype here
[b]Buster:[/b] Attack/Rapid/Charge values here[Starting value is 1/1/1]
[b]Buster Type:[/b] None[This is for added effect upgrade that is purchased later]
[b]Speed:[/b] Action Total here [Default is 3, 3 additional actions can be purchased later]
[spoiler=Upgrades ]This space is for upgrades you buy in stores that add levels to a navi, such as:
HP Memory:
Process Upgrade:
Speed Upgrade:
PowerUP:
Buster Upgrade:
Chip Levels:
SP Levels: [/spoiler]
[spoiler=GMO's]This space is optional for when/if you make GMOs for your navi.[/spoiler]
[spoiler=NaviCust XX/40]This is for any NCP upgrades currently equiped, such as:
Undershirt [10/40]
Set Grass [15/40]
It starts at a max space of 40, more space can be purchased.[/spoiler][/spoiler]
[spoiler=Support Program Here]This space would be done up the same way as a navi's tab would be.[/spoiler]
[spoiler=FXP & Crosses]This space would be for FXP[Friendship Experience Points], that is earned when you interact with other player navi's, or NPC navis. a Simple layout is like:
[b]FXP: [Current/Next Level][/b]
Insert Navi name here: x/30 FXP

[b]Crosses:[/b]This section would be for CrossFusions when you've gained enough FXP with another navi.[/spoiler]
[spoiler=Signatures]This section is where you would put your signatures, a good method is like:
[| [b]Cap: 60 [90] / 15 [Start][/b] || [b]Points: amount spent/your current max[/b] |] [This is the starting limit, it goes up as you gain levels, generally at every 5th level]
[b][u]Passives:[/b][/u]
[spoiler=Signature Name Here]Signature details and cooldown[if applies] here.[/spoiler][u][b]Actives:[/b][/u]
[spoiler=Same as Above]Same as above.[/spoiler][/spoiler]
[spoiler=Battlechips XX/30]List of battlechips currently owned and used would go here.[/spoiler]
[b]=Zenny: 10=[/b] [b]=Bugfrags: 230=[/b][/spoiler]

Copy the contents of the above box into the signature edit interface, and you will get this:




Just a note: Zenny and Bugfrags can never be in a spoiler, they can be the title for one, but their totals must be visible outside of a spoiler tag. Feel free to add or remove anything that you don't personaly want listed, this was just a quick template to act as a jumpstarter.

Now, there might be some minor bug fixing that needs done, the most common error, is there was a space between "spoiler=Spoiler name", please note that no space can be between the equal sign, and the name of the tag.

The second most common issue is at times one might forget to add a /spoiler, if you cannot find the error, you can always refer to PaladinGC, or Morisha in chat or PM for help with fixing your signature.

Lastly, you can clean the signature some, I left it in this formatting for easy reference, to make the signature look cleaner: Simply go to the opener of each spoiler tag, and hit backspace once. It will make the signature look more like a jumbled mess in the edit box, but once done, the signature will instead look like:



More will be added later, mostly advanced types of spoilers, but that should be enough to get you started, or simply refer to previous posts.