Steffy's Magic Shop

Started by Steffy, July 04, 2018, 09:49:44 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Al Terego

If anyone notices something in my previous post not working, give me a shout and I'll fix
                    

Steffy

[Floatleft]
Chillaxin Blonde Witch[/Floatleft]
Swing that Link Award
over to that brilliant one who goes by the name of Al.

Careful!  We don’t want to drop that on his noodle!
Bravo Al!  Again!

Link Award




Daena

#427
peeks inside

Hello!

I was wondering if someone could help.

I've seen a bit of code around on E that I can not figure out for the life of me. I've attempted to look it up on google -- but goggle-fu is failing so I turn to all of you magicians!

I hope I explain this right...

So basically you have your written word, but if you put your mouse over it, it pops up with a small box with other words in it?

I can't figure out how to do that...any help would be adored!



---- edit

Never mind I figured it out

Text goes here

or

Quote[acronym=Hover goes here]Text goes here[/acronym]
Currently Not Seeking New Rp Partners.

Al Terego

Hi Daena,
Welcome to the magic shop!

You can also use [abbr] instead of [acronym].  It has the same effect but is shorter to write.
                    

Steffy

[Floatleft]
The Blonde Naked Witch
Caught Unawares!
Oh my!
[/Floatleft]

Welcome Daena

We will ‘never mind’ because you DID figure it out all by yourself.
When one displays mastery and such élan, total control as it were, such a quizzical witch deserves a . . .
Total Control Award which is right here and is yours!  Brilliant!



Courtney

My brain is still hurting from Al's post that was longer than some short stories I've read, *giggles*, but I digress.

I'm kind of curious if anyone knows how to make the hover text appear when you're using a tablet or a mobile device?

Al Terego

#431
It's been a while since I have flexed my magic muscles, but a question drew me back in.

Reproducing it here fore your intellectual amusement:

Y'all remember the borders spell?  A simplified version works with images:





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:

[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://i.imgur.com/1AQATRw.jpg[/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 [float=left] and [float=right] tags,  and wrapping it all in a [table]:










Like this:

[table][tr][td]
[img height=10 width=248]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[float=left][img height=291 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=291 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=228]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[float=left][img height=271 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=271 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=208]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=251 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img][img]https://i.imgur.com/vqG9pD3.png[/img][img height=251 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=208]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=228]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[img height=10 width=248]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[/td][/tr][/table]



Have fun,
-- Al
                    

The Green One

This is true magic, Al. Amazing.

Not available for new stories

Steffy

[Floatleft]
’Framed’
Blonde Witch
[/Floatleft]
Awarded to Al:
The Great Framer Award




Truly an Artiste!  Bravo Al!!! Smoooochhhhhh!!!!!

Al Terego

A word of advice:






Be careful when posting on a slope
Lest you slip and tumble off a cliff!


Explanation

The [rotate] tag accepts an optional parameter, specifying degrees of rotation.

For example:
[rotate=20][size=24pt]Be careful when posting on a slope
Lest you slip and tumble off a cliff![/size][/rotate]


Have fun,
-- Al
                    

Al Terego

#435
Quote from: Liam Dale on February 24, 2021, 08:41:41 AM
This is true magic, Al. Amazing.

Ugh!  I didn't notice that Jaclyn's image was resized, and it messed up the table.  Fixed now.

For the record, the actual image is 188(W)x251(H) pixels, which makes the vertical bar heights 251, 271, and 291; and the horizontal bars widths 208, 228, and 248 respectively.

I also copied Steffy's and Jaclyn's avatars to imgur so if they decide to change them it won't kill the spell.
                    

Al Terego

#436
The canonical way of showing BBCode code is by using the [code] tag.  For example:
[code] some code here [⁠/code]



However, it has several limitations:
1. It cannot be used inline
2. It messes up tables
2. It cannot contain embedded [/code] closing tags

Wait a minute, you exclaim indignantly, how can you claim that a code section cannot contain [⁠/code] closing tags when you just showed an example above?!

The answer to that is simple: I cheated.  More on that later.  First things first.


An alternative to using [code] tags is surrounding your code with [nobbc] and [⁠/nobbc] tags.  For example:
[nobbc] some code here [/nobbc]



1. It can be used inline, as shown above.
2. It can be put inside a table without messing it up
2. You can use [/code] closing tags inside a [nobbc] section (but you cannot use [⁠/nobbc] closing tags)

Yes Virginia, I cheated again.  Have patience, I promise all will be revealed in a moment.

You can also get more fancy, by wrapping the [nobbc] part in [tt] tags to use a proportional "teletype" font, like this:
[color=orangered][tt][nobbc] some code here [/nobbc][/tt][/color]



Or make it bold, colourful, etc.  Just remember to put all formatting outside the [nobbc] part.


Another alternative, which has a different trade-off of benefits and drawbacks, is to cheat.

An opening tag consists of an opening bracket, the code of the tag, and the closing bracket, with no other characters (or spaces) between those elements.
Similarly, a closing tag consists of an opening bracket, a slash, the code of the tag, and the closing bracket, with no other characters (or spaces) between those elements.
If we insert other characters between the elements, the result is no longer interpreted as a tag.  For example, [ /code], [/ code], and [/code ] are not valid tags and are treated as plain text.

That's all well, except that when we want something that looks like a tag but does not behave like one, the extra spaces spoil the illusion.  Moreover, the browser may insert line breaks where the spaces appear when it re-flows the text.  Bleh!

Now what if we had an invisible space character, that takes no space (pun fully intended) and also would not break across lines?  Turns out, we do!

Enter the word joiner, an invisible, zero-width, non-breaking Unicode character that will do exactly what we want if we insert it after the opening bracket, or the slash, or the code, or before the closing bracket (I personally prefer the 1st option).  The only question is, how to do it.

There are several options.  Those that can can enter arbitrary Unicode characters from the keyboard, can use the hexadecimal 2060 code.

Otherwise, it can be copied to the clipboard from here, here, or here, and then pasted into your post.  Note that you will not see any visual indication that it worked, but you can verify by using the arrow keys to move the caret: when going over the WJ character, it will appear to stay in place.

My personal favourite is to use the Elliquiy improver script and add it once as a snippet.

Easy peasy.

However, be aware that there is a bug that will mess up any and all Unicode characters in your post if you try to edit it using the inline modify button () below the post, so make sure to only use the Modify button above the post in such cases.

That's all for now.
/sign off
                    

Steffy

[Floatleft]
’Framed’
Blonde Witch
sending assistant
[/Floatleft]




[Floatleft]
’Framed’
Blonde Witch’s
assistant
[/Floatleft]


Looking at Magic Shop Mistress Witch, hesitantly, hoping for encouragement (getting none), ‘Hi Al.  Let me get this straight, if you . . . then you . . . well, yes, Al, err Bravo!!!!!!

Pssst.  Jaclyn is spelled J-a-c-l-y-n, no ‘k’.  Anywhere.’


Al Terego

Quote from: Steffy on March 13, 2021, 04:00:03 PM
Pssst.  Jaclyn is spelled J-a-c-l-y-n, no ‘k’.  Anywhere.

*Makes a "these are not the droids you're looking for" gesture with his hand while muttering an incantation under his breath...*

Indeed.  There is no ‘k’.  Anywhere.
                    

Jaclyn

#439
“Nope, no k anywhere! Why would anyone abuse poor k? And how did my picture get so big?”

Al Terego

                    

Jaclyn

#441
  “This isn’t bragging about the size of fish, is it?”

Al Terego

Specifying image size in BBCode does not work well with borders since clicking on it will re-size it back to the original size but leave the borders intact.

Also, JPEGs don't support transparency, you may want to use a PNG, GIF (non animated) or WEBP
                    

Steffy

[Floatleft]
Steffy
Good Witch - Glinda
For a moment only!
[/Floatleft]


Steffy just loves and always happily acknowledges our Ph.D. witches, warlocks, and wizards as they explain and display their talent.  With great appreciation, she simply is in awe of many code tricks, knowing she is not in the league of her friends.

Frankly, Steffy is more the scrambler and borrower.  Like this suggestion.  So here’s an example of what can be done (yes, Steffy is the model):




On checking it out, it looked innocent and safe but that may be the spirit of Glinda thinking. 

Everyone is welcome to report back on anything they find out about this.

/s/ Steffy the Witch, usually not ever Glinda


Courtney

#444

Apprentice Courtney
Keeper of the Index

Fantastic tips one and all! You keep a poor girl busy! *Fake Pout* I did notice one thing worth mentioning when I was updating the index though.

On the angled text, it would appear that you have to increase your font size on the rotated bit, by a factor of 1.5. So for this post, I'm using 12pt, and as you can see above, with no modifications, the font size is different. Here is the same line again, with an increased font size of 18pt (12 x 1.5 = 18):

On the angled text, it would appear that you have to increase your font size on the rotated bit.

Example 1:
On the angled text, [rotate=2]it would appear that[/rotate] you have to increase your font size on the rotated bit

Example 2:
On the angled text bit, [rotate=2][size=18pt]it would appear that[/size][/rotate] you have to increase your font size on the rotated bit

Let's do a test on other font sizes, to see if the 1.5 scale factor holds:

8pt ~ 14: This is only a test.

10pt = 15 This is only a test.

14pt = 21: This is only a test.

So it does appear that a scale factor of 1.5 makes the rotated text just slightly bigger than the rest, but it gives you a starting point. If we add just one more step though, we get really really close: Current Font size x 1.5 - 1.

8pt ~ 13: This is only a test.

10pt = 14 This is only a test.

14pt = 20: This is only a test.

No,  I didn't get out my micrometer to measure, but that looks about right.

Al Terego

Hi Courtney!.

Quote from: Courtney on March 30, 2021, 03:46:36 PM
Fantastic tips one and all! You keep a poor girl busy! *Fake Pout* I did notice one thing worth mentioning when I was updating the index though.

On the angled text, it would appear that you have to increase your font size on the rotated bit, by a factor of 1.5. So for this post, I'm using 12pt, and as you can see above, with no modifications, the font size is different. Here is the same line again, with an increased font size of 18pt (12 x 1.5 = 18):

On the angled text, it would appear that you have to increase your font size on the rotated bit.

Unfortunately, the situation is more complicated.

Here is what I see in both Firefox and Chrome on the desktop:



As you can see, the rotated font looks proportionally sized without any scaling.


But  wait, this is what I see on my phone, using IceRaven (a Firefox fork):



The 1.5 factor is not nearly enough and the text looks tiny.


Obviously this "feature" is finicky and depends on the the viewer's browser, screen settings, etc.

The HTML code it generates looks like this:


Code (HTML from BBCode) Select

<span class="rotate" style="-moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);">


I don't know enough HTML to say why the font size varies so greatly.

I hereby declare this spell to be unpredictable wild magic, not to be used by aspiring witches and warlocks.

                    

Al Terego

And yet, my "cliff" post looks OK to me both on mobile and on the desktop.

Maybe changing the size of the surrounding text breaks it?
                    

Courtney


Apprentice Courtney
Keeper of the Index

Hmmm, I hadn't considered other browsers, but yes that does complicate things. The good news is, the likelihood of rotated text being used mid-sentence like that is probably pretty low. Even when it is used as such, it's obviously for some visual purpose, so visually speaking, the size difference might not be a big deal in that context anyway.

Maybe this is magic best suited for trickster magicians like perhaps ... devious genies?

Thanks for the feedback!

Al Terego

Why to you tease me so with alluring Zatanna imagery, Courtney?
                    

Courtney


Apprentice Courtney
Keeper of the Index

All teasing is purely incidental, due to my overall cuteness, alleged (by others) pyschic abilities, sense of fashion (raiding Steffy's wardrobe), bubbliness, sometimes sharp wit, other times dim wit, surprising intelligence, adorable ignorance, remarkable memory and ummm ... I forgot the rest.