Post by Chiz on May 27, 2011 1:10:38 GMT -5
Advanced Signatures is a new way of decorating your signature block to a greater extent, primarily by painting/wallpapering the background of it. AS allows you to select a background colour for the entire signature, and/or a background image that can optionally tile. Normal images and text will appear over this background, so it takes up little room. As such, using the background allows you to legally break the existing 500x150 px limit on signature images. However, the current 50KiB cumulative filesize limit for images remains in effect.
AS allows for 3 "layers", instead of the existing 1. The deepest layer is a basic solid colour. The middle layer is a background image. The final, upper-most layer is where the majority of content goes, and acts the same as signatures have done in the past. Any transparent parts of one layer will reveal the layer(s) beneath it.
The code for taking advantage of AS, while long, is fairly straightforward. The code itself must be placed BEFORE any other signature content (tags, messages, etc). The code's options can be placed in any order, so long as a comma is used at the end of each option, and no spaces are in the code (except for options that contain spaces, like "top left"). Furthermore, each option is optional...you do not need to include every setting in your code (although you can, if you want to)...missing/unset options will go to a default (listed below amongst the options).
The basic structure of the code is as follows:
There can be as many or as few options as are needed. Simply add more slots in the same pattern. The current script recognizes up to ~20 options, but as there are not 20 different options TO set, it'll be fine for now. This number can and will be extended in the unlikely event that more than 20 options are available for use.
Here are the options (remember, they can be in any order, and you do not need to use them all).
so, for instance,
It is something to play with. Hopefully people can come up with good, interesting setups that would not have been possible before this. If you need help, or have questions, reply in this thread; same goes if you want to share any codes you find particularly interesting.
Remember, Advanced Signatures is completely optional; if you do not add any of this code to your signature, your signature's behaviour will not change at all. Furthermore, all rules still apply to these signatures, with the exception of the 500x150 resolution limit for background images only. Normal images (with the IMG tag) still must be within 500x150, and ALL images+bg images COMBINED must be within 50KiB.
As of TF v1.05, certain values contain support for multiple entries:
(1) - Supports multiple values for as many URLs. Each subsequent URL will be behind the previous ones. The first positioning/repeat will correspond with the first URL; the second, second; etc.
(2) - Supports up to 4 values. If 1 value, represents all 4 sides. If 2, top-bottom then right-left. If 3, top, then right-left, then bottom. If 4, top, then right, then bottom, then left.
AS allows for 3 "layers", instead of the existing 1. The deepest layer is a basic solid colour. The middle layer is a background image. The final, upper-most layer is where the majority of content goes, and acts the same as signatures have done in the past. Any transparent parts of one layer will reveal the layer(s) beneath it.
The code for taking advantage of AS, while long, is fairly straightforward. The code itself must be placed BEFORE any other signature content (tags, messages, etc). The code's options can be placed in any order, so long as a comma is used at the end of each option, and no spaces are in the code (except for options that contain spaces, like "top left"). Furthermore, each option is optional...you do not need to include every setting in your code (although you can, if you want to)...missing/unset options will go to a default (listed below amongst the options).
The basic structure of the code is as follows:
[code]BG;opt1;opt2;opt3;etc[/code]
There can be as many or as few options as are needed. Simply add more slots in the same pattern. The current script recognizes up to ~20 options, but as there are not 20 different options TO set, it'll be fine for now. This number can and will be extended in the unlikely event that more than 20 options are available for use.
Here are the options (remember, they can be in any order, and you do not need to use them all).
Background-Clip & -Origin¹ (new to v1.08)
(Mostly useful for borders that have transparent bits)
(Please note the HTML/CSS box model: Margin-Border-Padding-Content-Padding-Border-Margin)
| Main Code | Aliases | Description/Effect |
| cbbox | clip border box clip-border-box | Background is painted from border, inward. This is the default. |
| cpbox | clip padding box clip-padding-box | Background is painted from padding inward. |
| ccbox | clip content box clip-content-box | Background is painted only in the content box. |
| obbox | origin border box origin-border-box | Background is aligned as if it started in the border. This is the default. |
| opbox | origin padding box origin-padding-box | Background is aligned as if it started in the padding. |
| ocbox | origin content box origin-content-box | Background is aligned as if it started in the content box. |
Background Colour
| Main Code | Aliases | Description/Effect |
| Transparent/no colour. This is the default. | ||
| #XXXXXX | Standard 6-digit hex colour. Order is RRGGBB. #000000 is pure black, #FFFFFF is pure white, etc. | |
| #XXX | Standard 3-digit hex colour. Order is RGB. #000 is pure black, #FFF is pure white. #123 is the same as #112233 in the more usual 6-digit notation. |
Background Image¹
| Main Code | Aliases | Description/Effect |
| Transparent/no image. This is the default. | ||
| http://www.example.com/image.png | URL to an image. Acceptable extensions are JPEG, JPG, GIF, PNG, and APNG. |
Background Positioning¹
| Main Code | Aliases | Description/Effect |
| tl | top left | Top-Left Positioning. This is the default. |
| tc | top top center | Top-Centre Positioning |
| tr | top right | Top-Right Positioning |
| cl | center left left | Centre-Left Positioning |
| cc | center center center | Centre-Centre Positioning |
| cr | center right right | Centre-Right Positioning |
| bl | bottom left | Bottom-Left Positioning |
| bc | bottom bottom center | Bottom-Centre Positioning |
| br | bottom right | Bottom-Right Positioning |
Background Tiling/Repeating¹
| Main Code | Aliases | Description/Effect |
| no-repeat | Background does not tile/repeat. This is the default. | |
| x | repeat-x | Background only tiles/repeats horizontally. |
| y | repeat-y | Background only tiles/repeats vertically. |
| xy | repeat | Background tiles/repeats both horizontally and vertically. |
Border Colour² (new to v1.05)
| Main Code | Aliases | Description/Effect |
| Black, if enabled with Border Style first. This is the default. | ||
| b#XXXXXX | 6-digit colour. Works identical to Background Colour. | |
| b#XXX | 3--digit colour. Works identical to Background Colour. |
Border Image (new to v1.08)
(This one is complicated because it's poorly supported everywhere. It'll be redone later.)
bimg|IMAGE-URL|TOP-WIDTH|RIGHT-WIDTH|BOTTOM-WIDTH|LEFT-WIDTH|HORIZONTAL-BORDER-REPEAT|VERTICAL-BORDER-REPEAT
| Part | Example Values | Description/Effect |
| IMAGE-URL | example.org/image.png h:im/image.png | Border image location. Internal URL shortening permitted. |
| TOP-WIDTH, RIGHT-WIDTH, BOTTOM-WIDTH, LEFT-WIDTH | 10 | Width (from edge of image to inside edge of border) of respective border side in image, in pixels. |
| HORIZONTAL-BORDER-REPEAT, VERTICAL-BORDER-REPEAT | repeat round space stretch | Defines how the border sides fill a given side. |
Border Size² (new to v1.05)
| Main Code | Aliases | Description/Effect |
| CSS 'medium', if enabled with Border Style first. This is the default. | ||
| bnone | No border. | |
| 1 | 1px wide border. This is the 'lowest' setting. | |
| (...) | (...range of numbers...) | |
| 10 | 10px wide border. This is the highest setting. |
Border Style² (new to v1.05)
(Must be set before 'Border Colour' and 'Border Size')
| Main Code | Aliases | Description/Effect |
| b0 | None. This is the default. | |
| b1 | solid | Solid Border |
| b2 | dotted | Dotted Border |
| b3 | dashed | Dashed Border |
| b4 | double | Double Solid Border |
| b5 | groove | 3D Groove Border (border inward, contents outward) |
| b6 | ridge | 3D Ridge Border (border outward, contents inward) |
| b7 | inset | 3D Inset Border (border inward, contents inward) |
| b8 | outset | 3D Outset Border (border outward, contents outward) |
Flipping/Mirroring (new to v1.07)
| Main Code | Aliases | Description/Effect |
| Block is orientated normally. This is the default. | ||
| fx | flipx | Horizontally flips entire signature block and contents. (left side is now right, right is now left) |
| fy | flipy | Vertically flips entire signature block and contents. (top is now bottom, bottom is now top) |
| fxy | flipxy | Horizontally AND vertically flips entire signature block and contents. (similar to rotating 180deg) |
| frand | Randomly flips signature each instance of it. |
Skin Detection
Useful to having skin-specific colouring on images
| Main Code | Aliases | Description/Effect |
| {skin} | String is replaced with 'v2', 'v3', 'v4', or 'mg' based on viewer's skin setting. | |
| {base} | (Coming TF v1.08) String is replaced with 'pf', 'p1', or 'p2' based on if viewed from profile, odd # posts, or even # posts, respectively. | |
| {balt} | (Coming TF v1.08) Similar to {base}, but profile views become 'p1' too (profiles and odd posts have same colour; this makes it simpler) |
Signature Vertical Size
| Main Code | Aliases | Description/Effect |
| Signature stretches to contents (classic behaviour). This is the default. | ||
| 20 | Signature is locked to 20px high. Overflow will be hidden. (this is the smallest you can set). | |
| (...) | (...range of numbers...) | |
| 180 | Signature is locked to 180px high. Overflow will be hidden. (this is the biggest you can set). |
URL Shortening¹ (new to v1.05)
| Main Code | Aliases | Description/Effect |
| h:bi/ | BayImg. Replaces image.bayimg.com/ portion. (saves 19 chars) | |
| h:im/ | Imgur. Replaces i.imgur.com/ portion. (saves 15 chars) | |
| h:mj/ | MajHost. Replaces www.majhost.com/gallery/ portion. (saves 26 chars) | |
| h:pb/ | Photobucket. Replaces img.photobucket.com/albums/ portion. (saves 29 chars) | |
| h:yf/ | Imageshack & Yfrog. Replaces img000.imageshack.us/ or a.yfrog.com/ portion. (saves 23 or 14 chars) |
so, for instance,
[code]BG;120;#AA0000[/code]
will result in a 120px high signature that is painted a dark red. [code]BG;http://i.imgur.com/OJSjn.png;77;tc;x[/code]
results in a signature that is 77px high, is wallpapered with i.imgur.com/OJSjn.png (which is top-centred), and tiles horizontally depending on how wide the browser is. [code]BG;x;#0a0;bc;http://i.imgur.com/AjjAZ.png[/code]
results in a signature that is a forest green, and has an image of a to-white gradient bottom-centre positioned and repeated horizontally.It is something to play with. Hopefully people can come up with good, interesting setups that would not have been possible before this. If you need help, or have questions, reply in this thread; same goes if you want to share any codes you find particularly interesting.
Remember, Advanced Signatures is completely optional; if you do not add any of this code to your signature, your signature's behaviour will not change at all. Furthermore, all rules still apply to these signatures, with the exception of the 500x150 resolution limit for background images only. Normal images (with the IMG tag) still must be within 500x150, and ALL images+bg images COMBINED must be within 50KiB.
As of TF v1.05, certain values contain support for multiple entries:
(1) - Supports multiple values for as many URLs. Each subsequent URL will be behind the previous ones. The first positioning/repeat will correspond with the first URL; the second, second; etc.
(2) - Supports up to 4 values. If 1 value, represents all 4 sides. If 2, top-bottom then right-left. If 3, top, then right-left, then bottom. If 4, top, then right, then bottom, then left.