Powered by Jitbit .Net Forum free trial version.

HomeStoryNexus » StoryNexus: Advice and Discussion

How to build things with StoryNexus

Custom Icon Fix CSS Template Messages in this topic - RSS

Estelle Knoht
Estelle Knoht
Posts: 1751

1/17/2017
So here's an alternative that should work right out of the box if you plop it on your own story. Of course, you still have to do image replacement for each of your own icons, unless you want to use my vague blobs of colours.

There are probably better solutions - do share! Since, er, I am not actually working on my own world as of now and isn't really qualified to talk about css. But this might help with any aspiring authors who like their custom icons.

First, a universal selector that target all broken images and make them invisible, and hide the alt text.

img[alt*="http://i.imgur.com/"]{
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:42px;
height:55px;
padding-left: 42px;
color: transparent;
text-indent: 10000px;}

In my case, I am using imgur - so SN will load up a bugged link of
http://images.storynexus.failbettergames.com.s3.amazonaws.com/icons/http://i.imgur.com/5FoMcNt.pngsmall.png
and display http://i.imgur.com/5FoMcNt.pngsmall.png on top of a unsightly broken image box.



You might notice that if you use imgur, all your QLD images are going to contain i.imugr.com in its alt texts, so that's what we are using. Of course, you may need to change it if you are on another image host! The nice thing is, this only have to be done once to turn all future broken images invisible.

text-indent is used to hide the unsightly broken image icon on Chrome. Color: transparent is used for hiding the alt text. Display: block, er, block the image from showing up.

Things are all dandy if you don't use text-indent in Firefox, but for other browsers, this might happen:


So do it anyway.

Secondly, you have to add a background for each individual broken image. This has to be done multiple times for each custom icon you link to.


img[alt*="http://i.imgur.com/dVjgDIT.png"]{
background-image: url(http://i.imgur.com/dVjgDIT.png);
background-size:42px 55px;}

(Remember to replace said image with your actual images!)


Result:


Should be fairly obvious. Each broken image get swapped with its actual counterpart. The background-size is there If your image is bigger than 42x55. If you don't set it, you are going to have a tiny box zooming into a large image:



There are, of course, further hijinks you can do if you mess around with the size - displaying a huge image above your QLD, and some such - so keep tweaking if you feel like it!


===================================================================
tl;dr

img[alt*=" -=Image Host Domain Name=-"]{
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:42px;
height:55px;
padding-left: 42px;
color: transparent;
text-indent: 10000px;}

img[alt*="SPECIFIC IMAGE LINK HERE WITH QUOTES"]{
background-image: url(SPECIFIC IMAGE LINK HERE WITH NO QUOTES);
background-size:42px 55px;}



Remember don't copy the below into your CSS!
edited by Estelle Knoht on 1/17/2017

--
Estelle Knoht, a juvenile, unreliable and respectable lady.
I currently do not accept any catbox, cider, suppers, calling cards or proteges.
+5 link
Ancient
Ancient
Posts: 4

8/12/2017
Thank you very much, Estelle Knoht, for this guide. It did work for me out of the box!
And many thanks also to cyberpunkdreams, for suggesting me to look for this thread.
+1 link
telyni
telyni
Posts: 25

7/26/2018
I couldn't get this to work, but I can't get any custom CSS to save in the main world options.
0 link
telyni
telyni
Posts: 25

8/15/2018
I can update CSS now, but I still can't get this to work. I've updated one of my qualities with a custom icon from my Google Drive (with a public shared link). But the image does not show up correctly anywhere, neither in the quality editor, nor in the story. When I check the image link, it's incorrect because it's prefixed by the StoryNexus address:
http://images.storynexus.failbettergames.com.s3.amazonaws.com/icons/https://drive.google.com/open?id=1oQw7yyzBv6p1Krbu3gr2fyej59PkwHxSsmall.png

I used "https://drive.google.com/" in the universal selector bit of CSS, and I added these lines for that specific image:

img[alt*="https://drive.google.com/open?id=1oQw7yyzBv6p1Krbu3gr2fyej59PkwHxS"]{
background-image: url(https://drive.google.com/open?id=1oQw7yyzBv6p1Krbu3gr2fyej59PkwHxS);
background-size:42px 55px;}

What am I doing wrong? (And do you have to have a copy of those three lines for every single image? I'm surely going to hit the character limit for the custom CSS field pretty quickly at that rate.)
0 link
cyberpunkdreams
cyberpunkdreams
Posts: 534

8/16/2018
Yes, you have to include those lines for ever image. You can just use a CSS import command to put them all in your own file and get around the length restriction though. I'm not sure what's wrong with the CSS as I do it slightly differently. Maybe a problem specifically with using Google Drive? It might be worth using a different host just in case.

--
cyberpunkdreams storynexus alpha
0 link
telyni
telyni
Posts: 25

8/16/2018
Okay, so I tried Imgur, since that's what the original example used. At first I thought it was going to work because the specific quality page initially loaded the image after I gave it the link, which it didn't do with the Google Drive link. But then when I looked back at the main quality list, or reloaded the specific quality page, or looked at it in the live story, it didn't work. It did the same thing with prefixing the StoryNexus address (and suffixing a "small.png" for the menu thumbnail, which is also not helpful):
http://images.storynexus.failbettergames.com.s3.amazonaws.com/icons/https://i.imgur.com/ENOEpGM.pngsmall.png

You said you do it differently; what's your method? Could I try that? This method clearly isn't working right because I can't get StoryNexus to entirely replace the image link.
0 link
cyberpunkdreams
cyberpunkdreams
Posts: 534

8/16/2018
My method's similar - it's in the other threat about it on this board. All this is only meant to work on the quality change area of storylets though. It won't work at all in the editor and I don't think there's anywhere else where the images are broken on the front end.

--
cyberpunkdreams storynexus alpha
0 link
telyni
telyni
Posts: 25

8/17/2018
So the custom images only show up when the quality changes? Never in the quality sidebar? Or am I misunderstanding you? If not, then it seems rather pointless to have shiny custom images only when the quality changes, if the sidebar is going to look half-broken the rest of the time. Maybe the solution is to use a default image for the general image that appears in the sidebar, and a custom image for the "level image"? No, that doesn't work either; the sidebar image is still broken, although the quality change message is appearing correctly. I can deal with the images not appearing in the editor, but if the sidebar only works with default images, then from a UI perspective, custom images are nearly useless.
0 link
cyberpunkdreams
cyberpunkdreams
Posts: 534

8/17/2018
I think you've misunderstood something -- custom images work fine everywhere apart from the quality change area. They're broken there due to a bug. So this fix is only to get around the bug in that one place.

--
cyberpunkdreams storynexus alpha
0 link
telyni
telyni
Posts: 25

8/17/2018
Oh. Well, my experience now is that custom images are broken *everywhere except* the quality change area, and I've given specific examples. I still need to get custom images working in the sidebar, in particular. You say they should work, but they're not. What else can I try?
0 link
cyberpunkdreams
cyberpunkdreams
Posts: 534

8/17/2018
Is that with or without the CSS fix?

--
cyberpunkdreams storynexus alpha
0 link
telyni
telyni
Posts: 25

8/19/2018
That's with the CSS fix. Actually, after some more testing, I determined that it's with or without the CSS fix. In other words, I'm seeing exactly the opposite of what you said. Even without the fix, my custom image is working in the quality change area, but it's not working in the sidebar. That's very strange, yes?
edited by telyni on 8/19/2018
0 link
telyni
telyni
Posts: 25

8/19/2018
To clarify, it's without the CSS fix, and with the custom image used for the "level image" at level 1, and not for the general image. It seems that a level image takes precedence over a general image.

I was trying to embed images showing my quality change area and sidebar, but I couldn't get my reply to post when I copied my images in here. I tried embedding them using the image button and linking to imgur, but then the images wouldn't appear in the preview box. I'm really having trouble with images these days. :/
0 link
telyni
telyni
Posts: 25

8/19/2018
In other news, custom banner images are doing the same wrong thing. I tried to use a custom image for one area, and the link is borked in the same way: "//images.storynexus.failbettergames.com.s3.amazonaws.com/headers/https://i.imgur.com/vdKjtMX.png.png" What's going on? Do banner images work for you?
0 link
cyberpunkdreams
cyberpunkdreams
Posts: 534

8/19/2018
Yes, custom banner images have always been broken when you move area or open the game for the first time in a session; you need to refresh the page to get them to work.

As for the general image stuff, I'd be happy to have a look at your world if you want to give me access.

--
cyberpunkdreams storynexus alpha
0 link
telyni
telyni
Posts: 25

8/19/2018
Hm, custom banner images aren't working for me at all, even after a refresh.

Thanks for offering to take a look! That'd be great. I think I'm going nuts and would love another set of eyes. I'll PM you.
0 link




Powered by Jitbit Forum 8.0.2.0 © 2006-2013 Jitbit Software