Closed Clickable Border Tags?

[FaithWynters]

Hello lovely humans!

I'm playing around with some BBCode for a project and I've run into a bit of a snag. I'm trying to make tiles that are clickable in a design that will link either to another post URL within RPN, to Youtube, etc. I can't seem to figure out how to accomplish this. Usually with HTML you'd just wrap your div tag in an anchor, do your styling, and call it a day, but the anchor tags don't seem to be working like that when I try.

For Example: Let's take a box.

Click Me!

[border=10px solid #5cbdb9; background:#ebf6f5;  Height: 150px; Width: 150px; border-radius:5px; text-align:center; margin: 15px auto; line-height:150px; Color:black;] Click Me![/border]

Let's try to wrap it in an anchor:
[a=[URL="https://www.rpnation.com/"]RpNation[/URL]]

Click Me!

[/a]

[a=https://www.rpnation.com/][border=10px solid #5cbdb9; background:#ebf6f5;  Height: 150px; Width: 150px; border-radius:5px; text-align:center; margin: 15px auto; line-height:150px; Color:black;] Click Me![/border][/a]

BBCode, please...

I'm just curious if this is just a limitation of BBCode, or if there's some way a magical BBCoder has gotten around this? I know I can probably just make the text clickable with a URL tag like it's trying to do itself, but I'd like the whole tile to be clickable if possible.

Thanks in advance for any suggestions you may be able to offer!

 

[Ambiloquous]

If you use the [URL] tag to wrap the tile, it does make the entire tile clickable. Unfortunately, it also adds an underline to any text inside.

Click Me!

[URL=https://www.rpnation.com/][border=10px solid #5cbdb9; background:#ebf6f5; height: 150px; Width: 150px; border-radius:5px; text-align:center; margin: 15px auto; line-height:150px; color:black;] Click Me![/border][/URL]

One way to remove it is to match the underline to the background colour, but that probably won't work for any non-solid colour backgrounds.

Click Me!

[URL=https://www.rpnation.com/][border=10px solid #5cbdb9; background:#ebf6f5; height: 150px; Width: 150px; border-radius:5px; text-align:center; margin: 15px auto; line-height:150px; color:black; text-decoration: underline #ebf6f5;] Click Me![/border][/URL]

Edit: The underline hack doesn't seem to work on Safari.

 

[FaithWynters]

This is exactly what I was looking for! Thank you, Ambiloquous ! I knew I was just missing something simple. I haven't gotten to the point of making my code fully mobile-friendly and I'm not sure I'll have the attention to make it fully compatible across other browsers, but that's something to think about! Your solution works well on Chrome and I'll give it a look-over in other places.

Click Me!

[URL=https://www.rpnation.com/][border=10px solid #5cbdb9; background:#ebf6f5; height: 150px; Width: 150px; border-radius:5px; text-align:center; margin: 15px auto; line-height:150px; color:black; text-decoration: underline #ebf6f5;] Click Me![/border][/URL]

Interestingly enough, when I apply it to the code I'm working on, it actually doesn't have any of the text-decoration. This is on Chrome that I see it. I'm new to more advanced BBCodes, but I'm wondering if that's because I've included the FA icon inside? No clue. This is a snippet that's a little cleaned up since I didn't want to pull everything over.

Easy

Spoiler: Snippet

[Comment]
fonts loaded:
[font="Sue Ellen Francisco"]Body[/font]
[/comment]
[URL=https://www.rpnation.com/][border=10px solid #5cbdb9; background: #ebf6f5;  Height: 145px; Width: 145px; border-radius:5px; text-align:center; line-height: 145px; margin: 15px auto; color:#0b3954][border=transparent;line-height: 1.5; display: inline-block; font-family:"Sue Ellen Francisco"; font-size: 30px;][fa]fal fa-baby fa-2x[/fa]
Easy[/border][/border][/URL]

Thank you so much for your help! I was worried I wouldn't be able to find something comparable.

 

[Ambiloquous]

Interestingly enough, when I apply it to the code I'm working on, it actually doesn't have any of the text-decoration. This is on Chrome that I see it. I'm new to more advanced BBCodes, but I'm wondering if that's because I've included the FA icon inside? No clue. This is a snippet that's a little cleaned up since I didn't want to pull everything over.

Okay, so I quickly did some testing, and I believe it's because you put display: inline-block. Once I commented it out, the underline appeared again. Don't quote me on this though.

 

[Novelight]

Interestingly enough, when I apply it to the code I'm working on, it actually doesn't have any of the text-decoration. This is on Chrome that I see it. I'm new to more advanced BBCodes, but I'm wondering if that's because I've included the FA icon inside? No clue. This is a snippet that's a little cleaned up since I didn't want to pull everything over.

If you want the underline to still exist I'd recommend border-bottom.

 

[FaithWynters]

I'll keep that in mind. In this instance, I don't want the underline, but it'll be useful later.

Thank you!