Ｄｉｇｉｔａｌｌｙ Ｄｉｓｔｉｎｃｔ: BBCoding Tutorial/Help Thread

[Keir;]

It's difficult to explain what the problem is, but basically you're currently using 2 left columns, the second of which has 2 right columns within it. You just need to use 3 separate left columns instead. Or, alternatively, you could keep the 2 left columns, but only use 1 right one within the second one. There is no reason for both sections in the second left column to both also be in right ones within it, and that is what's causing the gap. Gonna add some images to help explain since that might be easier lol

This is what you have right now:
the section in the red box is left column 1. the blue box is left column 2
then within the second (blue) left column, you have 2 right columns which are in the yellow and purple boxes + the last image which isn't in either of the right ones


the section in purple, the left most half of the second column, does not need to also be in a right column. only the right half needs to be in one.
so take that part out of a right column, and leave it in just the blue left one, like this:
the section in the red box is left column 1. the blue box is left column 2
then within the second (blue) left column, you have one right column which is in yellow

code:


Code: Select all

[left][img]https://i.imgur.com/t2unqeO.gif[/img]
[size=150][color=#000000]─[/color][color=#80BF00]𝐋𝐈𝐊𝐄[/color][color=#000000]─────────────[/color][url=https://www.chickensmoothie.com/Forum/memberlist.php?mode=viewprofile&u=986717][color=#000000]❥❥❥[/color][/url][color=#000000]-──[/color][/size]
[img]https://i.imgur.com/uvLBlI0.png[/img]
[img]https://i.imgur.com/XplLhGm.png[/img][right][center][color=#80BF00][i][b]hey, the name's kai![/b][/i][/color][color=#000000] i love ac/dc,
the angels, mcr, ghost, waterparks,
ben 10, jujutsu kaisen, bungo stray
dogs, helluva boss & attack on titan[/color]
[url=https://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=3989914&p=123233347#p122775312][color=#80BF00][b]★[/b][/color][/url] - [url=https://thanksforthememories.carrd.co][color=#000000][i]carrd[/i][/color][/url] -  [url=https://www.last.fm/user/TH4NKS4THEVEN0M][color=#000000][i]last.fm[/i][/color][/url] - [url=https://toyhou.se/TH4NKS4THEVEN0M][color=#000000][i]toyhouse[/i][/color][/url] - [url=https://youtu.be/YxGS6-48pR8?si=0M2p00xzjiGhMmYi][color=#80BF00][b]✧[/b][/color][/url]
[/center][/right]
[img]https://i.imgur.com/M9rBfex.png[/img][/left][left][right]x
[b][i][u]sig in progress!![/u][/i][/b]
seeing motley crue &
def leppard tomorrow!
[img]https://sig.grumpybumpers.com/host/FENT0NMENACE.gif[/img]
[size=150][color=#80BF00]𝐇𝐄𝐀𝐑𝐓 𝐖𝐀𝐒[/color][color=#000000]─────[/color][/size]
[img]https://im3.ezgif.com/tmp/ezgif-3-88a8fe649f.png[/img][/right][img]https://i.imgur.com/P1maCsM.jpg[/img]
[size=150][color=#000000]───-[/color][color=#80BF00]'𝐂𝐀𝐔𝐒𝐄[/color][color=#000000]───[/color][/size]
[img]https://i.imgur.com/dsIdbf3.png[/img][center]xxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxx[/center]
[img]https://im3.ezgif.com/tmp/ezgif-3-46a5516b64.jpg[/img][/left]



however, that still over complicates the code more than needed. you can simplify it even more by getting rid of right columns entirely, just separate the second blue left column into two separate left columns instead, for a total of 3 left columns. like this
red is a left column, blue is a left column, and yellow is a left column

code:


Code: Select all

[left][img]https://i.imgur.com/t2unqeO.gif[/img]
[size=150][color=#000000]─[/color][color=#80BF00]𝐋𝐈𝐊𝐄[/color][color=#000000]─────────────[/color][url=https://www.chickensmoothie.com/Forum/memberlist.php?mode=viewprofile&u=986717][color=#000000]❥❥❥[/color][/url][color=#000000]-──[/color][/size]
[img]https://i.imgur.com/uvLBlI0.png[/img]
[img]https://i.imgur.com/XplLhGm.png[/img][right][center][color=#80BF00][i][b]hey, the name's kai![/b][/i][/color][color=#000000] i love ac/dc,
the angels, mcr, ghost, waterparks,
ben 10, jujutsu kaisen, bungo stray
dogs, helluva boss & attack on titan[/color]
[url=https://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=3989914&p=123233347#p122775312][color=#80BF00][b]★[/b][/color][/url] - [url=https://thanksforthememories.carrd.co][color=#000000][i]carrd[/i][/color][/url] -  [url=https://www.last.fm/user/TH4NKS4THEVEN0M][color=#000000][i]last.fm[/i][/color][/url] - [url=https://toyhou.se/TH4NKS4THEVEN0M][color=#000000][i]toyhouse[/i][/color][/url] - [url=https://youtu.be/YxGS6-48pR8?si=0M2p00xzjiGhMmYi][color=#80BF00][b]✧[/b][/color][/url]
[/center][/right]
[img]https://i.imgur.com/M9rBfex.png[/img][/left][left][img]https://i.imgur.com/P1maCsM.jpg[/img]
[size=150][color=#000000]───-[/color][color=#80BF00]'𝐂𝐀𝐔𝐒𝐄[/color][color=#000000]───[/color][/size]
[img]https://i.imgur.com/dsIdbf3.png[/img][center]xxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxx[/center]
[img]https://im3.ezgif.com/tmp/ezgif-3-46a5516b64.jpg[/img][/left][left]x
[b][i][u]sig in progress!![/u][/i][/b]
seeing motley crue &
def leppard tomorrow!
[img]https://sig.grumpybumpers.com/host/FENT0NMENACE.gif[/img]
[size=150][color=#80BF00]𝐇𝐄𝐀𝐑𝐓 𝐖𝐀𝐒[/color][color=#000000]─────[/color][/size]
[img]https://im3.ezgif.com/tmp/ezgif-3-88a8fe649f.png[/img][/left]



note that i didn't mention the right column within the first (red) left column, that's because it is done correctly and is not part of the issue ^^

Also if the two broken gifs aren't actually where they're meant to be, feel free to fix the links and post again. Kinda just had to guess where they were meant to line up

Edit: @Falls sorry for sniping you with the answer, looks like we were both working on it at the same time ^^''

[The Ghost Of You]

okay, so i just finished up the sig itself and this is how i was trying to have the layout to work:

Code: Select all

[left][img]https://i.imgur.com/t2unqeO.gif[/img]
[size=150][color=#000000]─[/color][color=#80BF00]𝐋𝐈𝐊𝐄[/color][color=#000000]─────────────[/color][url=https://www.chickensmoothie.com/Forum/memberlist.php?mode=viewprofile&u=986717][color=#000000]❥❥❥[/color][/url][color=#000000]-──[/color][/size]
[img]https://i.imgur.com/uvLBlI0.png[/img]
[img]https://i.imgur.com/XplLhGm.png[/img][right][center][color=#80BF00][i][b]hey, the name's kai![/b][/i][/color][color=#000000] i love ac/dc,
the angels, mcr, ghost, waterparks,
ben 10, jujutsu kaisen, bungo stray
dogs, helluva boss & attack on titan[/color]
[url=https://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=3989914&p=123233347#p122775312][color=#80BF00][b]★[/b][/color][/url] - [url=https://thanksforthememories.carrd.co][color=#000000][i]carrd[/i][/color][/url] -  [url=https://www.last.fm/user/TH4NKS4THEVEN0M][color=#000000][i]last.fm[/i][/color][/url] - [url=https://toyhou.se/TH4NKS4THEVEN0M][color=#000000][i]toyhouse[/i][/color][/url] - [url=https://youtu.be/YxGS6-48pR8?si=0M2p00xzjiGhMmYi][color=#80BF00][b]✧[/b][/color][/url]
[/center][/right]
[img]https://i.imgur.com/M9rBfex.png[/img][/left][left][right][img]https://i.imgur.com/LySW8No.jpg[/img]
[img]https://i.imgur.com/EbBYZsC.jpg[/img] [img]https://sig.grumpybumpers.com/host/FENT0NMENACE.gif[/img]
[size=150][color=#80BF00]𝐇𝐄𝐀𝐑𝐓 𝐖𝐀𝐒[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/aZ3BONM.png[/img][/right][right][img]https://i.imgur.com/P1maCsM.jpg[/img]
[size=150][color=#000000]─-[/color][color=#80BF00]'𝐂𝐀𝐔𝐒𝐄[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/dsIdbf3.png[/img]
[img]https://i.imgur.com/A52nMoa.jpg[/img][/right]
[img]https://i.imgur.com/TGCv8e0.jpg[/img][/left]

essentially the outcome i'd like is that the two columns still work together as well as having the image underneath the two columns (which is this image). i feel like what @keir; explained helps a fair bit, but doesn't really allow for the bottom image to work with the rest of the code.

[Keir;]

unfortunately that isn't really possible as-is, because it would require a right column within a right column, which CS does not support ^^''

basically this is what needs to be done, but can't be:
red is a left column, blue is a left column
yellow is a right column, and then purple is another right column within the other right one - that's the issue here preventing this from working


The two options are either:
1. leave it as it is
2. combine the image in the purple box with the one next to it using a photo editing website/program. it would take a bit more work since it's a rotating image, meaning you would have to combine the green image with each of the rotating ones, and then create a new rotating link with those, but it could definitely be done if you're willing to spend the time doing it! or just pick one of the images instead, if you're willing to forego the rotating aspect. having those two as separate images is not possible with what you're hoping to achieve (unless you're willing to leave it as it currently is)

[The Ghost Of You]

ah okay, thanks for your help! :)

might give editing the rotating images with the other one a try and see if that works better

[Keir;]

omg wait, i was over complicating things, the second right column isn't needed since the images are the same height. so sorry lol. you literally just need to remove the right column that's around the column that says "cause no one's"

the gap between the last 2 columns is now just caused by the line ─ next to "cause" being longer than the images. if you mess around with the size of the line to get it to line up better, that gap will also be gone. same with the little gap between the first and second column, now it's just the line ─ being too long. make it shorter and it'll work



Code: Select all

[left][img]https://i.imgur.com/t2unqeO.gif[/img]
[size=150][color=#000000]─[/color][color=#80BF00]𝐋𝐈𝐊𝐄[/color][color=#000000]─────────────[/color][url=https://www.chickensmoothie.com/Forum/memberlist.php?mode=viewprofile&u=986717][color=#000000]❥❥❥[/color][/url][color=#000000]-──[/color][/size]
[img]https://i.imgur.com/uvLBlI0.png[/img]
[img]https://i.imgur.com/XplLhGm.png[/img][right][center][color=#80BF00][i][b]hey, the name's kai![/b][/i][/color][color=#000000] i love ac/dc,
the angels, mcr, ghost, waterparks,
ben 10, jujutsu kaisen, bungo stray
dogs, helluva boss & attack on titan[/color]
[url=https://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=3989914&p=123233347#p122775312][color=#80BF00][b]★[/b][/color][/url] - [url=https://thanksforthememories.carrd.co][color=#000000][i]carrd[/i][/color][/url] -  [url=https://www.last.fm/user/TH4NKS4THEVEN0M][color=#000000][i]last.fm[/i][/color][/url] - [url=https://toyhou.se/TH4NKS4THEVEN0M][color=#000000][i]toyhouse[/i][/color][/url] - [url=https://youtu.be/YxGS6-48pR8?si=0M2p00xzjiGhMmYi][color=#80BF00][b]✧[/b][/color][/url]
[/center][/right]
[img]https://i.imgur.com/M9rBfex.png[/img][/left][left][right][img]https://i.imgur.com/LySW8No.jpg[/img]
[img]https://i.imgur.com/EbBYZsC.jpg[/img] [img]https://sig.grumpybumpers.com/host/FENT0NMENACE.gif[/img]
[size=150][color=#80BF00]𝐇𝐄𝐀𝐑𝐓 𝐖𝐀𝐒[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/aZ3BONM.png[/img][/right][img]https://i.imgur.com/P1maCsM.jpg[/img]
[size=150][color=#000000]─-[/color][color=#80BF00]'𝐂𝐀𝐔𝐒𝐄[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/dsIdbf3.png[/img]
[img]https://i.imgur.com/A52nMoa.jpg[/img]
[img]https://i.imgur.com/SCbsXpP.jpg[/img][/left]



Edit: Here's a version with the lines shorted a little, though they might be a little too short now. Just mess around to get them to the length that you'd like, where they line up with the images but aren't longer, since being longer will push the next section over and create a larger gap



Code: Select all

[left][img]https://i.imgur.com/t2unqeO.gif[/img]
[size=150][color=#000000]─[/color][color=#80BF00]𝐋𝐈𝐊𝐄[/color][color=#000000]─────────────[/color][url=https://www.chickensmoothie.com/Forum/memberlist.php?mode=viewprofile&u=986717][color=#000000]❥❥❥[/color][/url][color=#000000]──[/color][/size]
[img]https://i.imgur.com/uvLBlI0.png[/img]
[img]https://i.imgur.com/XplLhGm.png[/img][right][center][color=#80BF00][i][b]hey, the name's kai![/b][/i][/color][color=#000000] i love ac/dc,
the angels, mcr, ghost, waterparks,
ben 10, jujutsu kaisen, bungo stray
dogs, helluva boss & attack on titan[/color]
[url=https://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=3989914&p=123233347#p122775312][color=#80BF00][b]★[/b][/color][/url] - [url=https://thanksforthememories.carrd.co][color=#000000][i]carrd[/i][/color][/url] -  [url=https://www.last.fm/user/TH4NKS4THEVEN0M][color=#000000][i]last.fm[/i][/color][/url] - [url=https://toyhou.se/TH4NKS4THEVEN0M][color=#000000][i]toyhouse[/i][/color][/url] - [url=https://youtu.be/YxGS6-48pR8?si=0M2p00xzjiGhMmYi][color=#80BF00][b]✧[/b][/color][/url]
[/center][/right]
[img]https://i.imgur.com/M9rBfex.png[/img][/left][left][right][img]https://i.imgur.com/LySW8No.jpg[/img]
[img]https://i.imgur.com/EbBYZsC.jpg[/img] [img]https://sig.grumpybumpers.com/host/FENT0NMENACE.gif[/img]
[size=150][color=#80BF00]𝐇𝐄𝐀𝐑𝐓 𝐖𝐀𝐒[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/aZ3BONM.png[/img][/right][img]https://i.imgur.com/P1maCsM.jpg[/img]
[size=150][color=#000000]─[/color][color=#80BF00]'𝐂𝐀𝐔𝐒𝐄[/color][color=#000000]─────[/color][/size]
[img]https://i.imgur.com/dsIdbf3.png[/img]
[img]https://i.imgur.com/A52nMoa.jpg[/img]
[img]https://i.imgur.com/SCbsXpP.jpg[/img][/left]

[The Ghost Of You]

oh!! all good! i managed to fix it with the first method you said so thanks either way! i really appreciate your help with this :)

[oakhearted]

Hello there!

I'm trying to update my trade thread with the new rarity change, and previously, I had it laid out like this:

"Date Seeking"

(or whatever other rarity the pets I'm ISO are)

The code I used to get the image of the rarity bar:

Code: Select all

[img]https://www.chickensmoothie.com/img/rarity/uncommon.png[/img]

Previously I got the image link a long while ago by doing "open image in new tab" and copying that link, which I noticed maybe about a year ago that no longer worked. It would open up into "blank". So I just changed the word "uncommon" to any other rarity like "common" in the image link and that worked for all other rarities.

With the new bars, that doesn't seem to be the case. Anyone know how to properly code in the image of the new rarity bars? Preferably in the style of "Bar with single star"? I know I could just screenshot and upload but I've had issues in the past with those upload links "expiring" after a certain period of time and showing some basic image for "image not found" or "image no longer exists" after a few months. Also, I'm OCD about the sizing and having screenshots would change what my brain considers the "official" size since it was a CS link I originally used.

I made a imgur gallery with a version of the rarities seperated into their own images, hope this helps!
Also if anyone wants me to do this but with the other alternative versions, let me know in a pm!
https://imgur.com/a/dvrtiQy

Example usage of the images seperately:

I also made some for the single star rarities!

https://imgur.com/a/FDeXERE







I'll do the other types next, next one would be the thermometer (notched) like one.

[sky,]

Bumping this thread so people can find it c:

[Falls]

Bumping this thread so people can find it c:

Isn’t it pinned already though?

[The Ghost Of You]

might be a situation of people going straight to coders for help rather than here? not entirely sure but that could be it?