You are either not logged in or not registered with our community. Click here to register.
 
April 23, 2021, 04:15:30 am

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Platinum Send us your theme!

Wiki Blogs Dicebot

Author Topic: Image Borders  (Read 324 times)

0 Members and 1 Guest are viewing this topic.

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 1
Image Borders
« on: January 29, 2021, 02:48:49 pm »
Hey everyone!

I know how to pad the edge of images and how to float them to the right or left of text, but how do you add a coloured border to an image?

Thanks in advance!

Offline Amaris

  • [Legate][They/Them][Extramaris][Saturday][WooderWoman][Stinky Pete]["The Mayo"][Calypso][BBF][Moon Moon]
  • Oracle
  • Addict
  • *
  • Join Date: Aug 2017
  • The moon and I are too much in love.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 7
Re: Image Borders
« Reply #1 on: January 29, 2021, 03:57:37 pm »
I don't think you can with coding, but if you ever need to send me something for a border, I can do that!

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 1
Re: Image Borders
« Reply #2 on: January 29, 2021, 04:29:20 pm »
Thank you! I'll PM now.

Offline Endorphin

  • I solemnly swear that I am up to no good.
  • Knight
  • Enchanter
  • *
  • Join Date: Jul 2010
  • Location: Down Under
  • Gender: Male
  • Heyyyy... that's not the Wallet Inspector!
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 0
Re: Image Borders
« Reply #3 on: January 30, 2021, 04:13:26 am »
I had a play around with the BBCode and also with some CSS and couldn't see a way to add borders or border-like style effects to images or tables containing images - without some kind of mod being installed on the server.

Looks like Amaris might have the best option for you.

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 1
Re: Image Borders
« Reply #4 on: January 30, 2021, 09:14:54 am »
All sorted. Thanks, all!

Offline Al Terego

Re: Image Borders
« Reply #5 on: February 23, 2021, 08:23:32 pm »
I don't think you can with coding

Hold my beer, Ama



Offline Amaris

  • [Legate][They/Them][Extramaris][Saturday][WooderWoman][Stinky Pete]["The Mayo"][Calypso][BBF][Moon Moon]
  • Oracle
  • Addict
  • *
  • Join Date: Aug 2017
  • The moon and I are too much in love.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 7
Re: Image Borders
« Reply #6 on: February 23, 2021, 08:51:46 pm »
You made a border with images, not using any kind of border code or something. :) That is very cool.

Offline Al Terego

Re: Image Borders
« Reply #7 on: February 23, 2021, 10:33:53 pm »
You made a border with images, not using any kind of border code or something. :)

The BBCode on this site is limited but you can make interesting effects with a bit of hacking.

Here's an explanation and a guide:

First, go to the Solid Backgrounds and search for a colour.   Once you find one you like, right click on it and select "copy image location", then paste it somewhere to be used as a border.  For example, the one that I used was Safety Orange Blaze (remember kids, Safety is important!)

Now, find the image and do the same.  It is best to find the image of the right size without specifying the height/width dimensions in BBCode, since a click on the resized image will display it in it's normal size which will mess up the borders.  To find the dimensions of the image, right click on it and choose "inspect".

Now you need to do a little arithmetic and lay the images out like this:
1. As the top border, the solid colour, resized to the desired border width by the image width plus twice the border width.  So for a 150Wx200H avatar, and a 10 pixels wide border, you would choose height=10 and width =180
2. On the next line beneath it, the solid colour resized to the desired border width by the image height (height=200 and width =10) as the left border
3. To the right of it, the image
4. To the right of it, the same solid colour as the left border in #2, to act as the right border
5. On the next line beneath it, the same solid colour as the top border in #1, to act as the bottom border

All of it together:
Code: [Select]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img][img]https://elliquiy.com/avatars/avatar_66170_1610681780.gif[/img][img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]

You can even go completely bonkers if you want to, by using blinkenlights instead of solid images, adding some [floatleft] and [floatright] tags,  and wrapping it all in a [table]:









Like this:
Code: [Select]
[table][tr][td]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[floatleft][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/floatleft]
[floatright][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/floatright]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[floatleft][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/floatleft]
[floatright][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/floatright]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img][img]https://elliquiy.com/avatars/avatar_62435_1611807943.png[/img][img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[/td][/tr][/table]


That is very cool.

Thanks!  Can I have my beer back now?

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 1
Re: Image Borders
« Reply #8 on: February 23, 2021, 10:38:10 pm »
Wow, thanks! :D

Offline Amaris

  • [Legate][They/Them][Extramaris][Saturday][WooderWoman][Stinky Pete]["The Mayo"][Calypso][BBF][Moon Moon]
  • Oracle
  • Addict
  • *
  • Join Date: Aug 2017
  • The moon and I are too much in love.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 7
Re: Image Borders
« Reply #9 on: February 23, 2021, 10:38:41 pm »
Nope. It's mine now ;)

Yea I understood how you did it! But there is no bordering code specifically. I did already help her with borders via photoshop. Very cool tricks!

Offline Al Terego

Re: Image Borders
« Reply #10 on: February 23, 2021, 11:00:39 pm »
Nope. It's mine now ;)

Careful Ama, if you claim unfamiliar liquids, you might end up like Alice.

Offline Endorphin

  • I solemnly swear that I am up to no good.
  • Knight
  • Enchanter
  • *
  • Join Date: Jul 2010
  • Location: Down Under
  • Gender: Male
  • Heyyyy... that's not the Wallet Inspector!
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 0
Re: Image Borders
« Reply #11 on: February 24, 2021, 08:58:14 pm »
The BBCode on this site is limited but you can make interesting effects with a bit of hacking.

Here's an explanation and a guide:

First, go to the Solid Backgrounds and search for a colour.   Once you find one you like, right click on it and select "copy image location", then paste it somewhere to be used as a border.  For example, the one that I used was Safety Orange Blaze (remember kids, Safety is important!)

Now, find the image and do the same.  It is best to find the image of the right size without specifying the height/width dimensions in BBCode, since a click on the resized image will display it in it's normal size which will mess up the borders.  To find the dimensions of the image, right click on it and choose "inspect".

Now you need to do a little arithmetic and lay the images out like this:
1. As the top border, the solid colour, resized to the desired border width by the image width plus twice the border width.  So for a 150Wx200H avatar, and a 10 pixels wide border, you would choose height=10 and width =180
2. On the next line beneath it, the solid colour resized to the desired border width by the image height (height=200 and width =10) as the left border
3. To the right of it, the image
4. To the right of it, the same solid colour as the left border in #2, to act as the right border
5. On the next line beneath it, the same solid colour as the top border in #1, to act as the bottom border

All of it together:
Code: [Select]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img][img]https://elliquiy.com/avatars/avatar_66170_1610681780.gif[/img][img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]

You can even go completely bonkers if you want to, by using blinkenlights instead of solid images, adding some [floatleft] and [floatright] tags,  and wrapping it all in a [table]:









Like this:
Code: [Select]
[table][tr][td]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[floatleft][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/floatleft]
[floatright][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/floatright]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[floatleft][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/floatleft]
[floatright][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/floatright]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img][img]https://elliquiy.com/avatars/avatar_62435_1611807943.png[/img][img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[/td][/tr][/table]


Thanks!  Can I have my beer back now?


Nice workaround Al.

Offline Al Terego

Re: Image Borders
« Reply #12 on: February 24, 2021, 09:18:49 pm »
Nice workaround Al.

Not sure it was worth having my beer stolen.


Offline Endorphin

  • I solemnly swear that I am up to no good.
  • Knight
  • Enchanter
  • *
  • Join Date: Jul 2010
  • Location: Down Under
  • Gender: Male
  • Heyyyy... that's not the Wallet Inspector!
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 0
Re: Image Borders
« Reply #13 on: February 24, 2021, 09:27:04 pm »
Some people... no respect! :P

Offline Amaris

  • [Legate][They/Them][Extramaris][Saturday][WooderWoman][Stinky Pete]["The Mayo"][Calypso][BBF][Moon Moon]
  • Oracle
  • Addict
  • *
  • Join Date: Aug 2017
  • The moon and I are too much in love.
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 7
Re: Image Borders
« Reply #14 on: February 24, 2021, 09:32:29 pm »
It was given to me. :P

Offline Al Terego

Re: Image Borders
« Reply #15 on: February 24, 2021, 09:34:18 pm »
Anyway, old-school tinkering can be fun, check Steffy's Magic Shop for more BBCode fun