Custom images and CSS

StoryNexus
1

Hi there folks,[li]

We’ve just introduced two new features: Custom images and Custom CSS.


These have been features people have been asking about for a long time, and we hope this opens up a world of opportunities for you with StoryNexus. Here is some guidance on how to use each of these new features.

Custom images

  • You can now add custom artwork for Quality icons, Storylet icons, Branch Icons, Deck backgrounds and Area headers. You can of course still use the library icons.[/li][li]You can add images hosted externally from StoryNexus using the new input field in the icon selection screen (please remember to include the http:// in your addresses).[/li][li]Icon Images should be a minimum of 130px tall by 100px wide. They can be .png, .jpg or .gif.[/li][li]Area header Images should be 130px tall by 650px wide. They can be .png, .jpg or .gif.[/li][li]Branch and storylet icons will be a fixed aspect ratio (to match the aspect ratio of the cards), but quality icons can be any aspect ratio you like, they will be resized so that the width matches the layout of the StoryNexus theme you are using.[/li][li]WARNING: linking to a lot of large images will reduce the speed with which your StoryNexus world loads, so it is advised that you use adequate compression on your images and keep the dimensions of the artwork as small as possible.

Custom CSS

[ul][li]On the Edit World page, you will now find a field that will allow you to enter custom CSS for your StoryNexus World.[/li][li]WARNING: once you enter your CSS and hit Update, it will be live. It is strongly advised that you test your CSS thoroughly before saving, as incorrectly formatted CSS can cause serious layout issues to arise.[/li][li]For testing your CSS on your world before applying it, we recommend using a plugin for the Chrome browser called Live CSS Editor. This plugin will allow you to test your new CSS classes on your page in real-time, then copy and paste them into the Custom CSS field on the Edit World page.[/li][li]A new theme has been added called Canvas. This simple theme has no styling and can act as a clean slate onto which you can add your own custom CSS.[/li][li]Please be aware that you are not permitted to hide elements of the core StoryNexus UI that would constitute a breach of the Creator Guideloines, which have been updated here: http://www.storynexus.com/sh/creatorguidelines[/li][/ul]We hope you enjoy these newly implemented features, and if you have any questions about them, feel free to post them in this thread.

Have Fun!

Liam[/li][li]
edited by challis on 10/22/2013

2

Really excellent stuff, much better than expected. Thank you.

3

Question. I’m well dim and the like, but how would one, hypothetically speaking, load images that aren’t icons? (Banners/Area headings. {Your above thing only mentions how to do icons.}) And is something weird 'appening in the back end (ooh er) as the drop down for area headings appears to be not dropping down?

I’d be more clear, but I’m passing on the query for someone who ain’t on the forum, like.

Edited, as it was even more incoherent than I intended.

Edit 2: &quotOr is that through the custom CSS bit?&quot Could this entire post be answered with ‘Yes’? (Apart from the drop down area banner thing bit?)
edited by babelfishwars on 11/5/2013
edited by babelfishwars on 11/5/2013

4

CSS. Check out CSS background-image property

Use it to make something like (My apologies, FB folks, I can only hope the subject matter ameliorates the sin a little):

1100×385 131 KB

5

Indeed, it’s done by setting background images using custom CSS. You can use that to alter pretty much any part of the SN interface (within the limits of the ToS) of course. I’ve already gone to town with it on the game I’m developing.

Of course, you can’t alter the page’s HTML in any way, so you’ll have to be a bit of a CSS guru to achieve anything but very simple changes.
[li]

6

cyberpunkdreams is quite right, you would want to alter the CSS for anything other than icons.

For the area headings, these have now become autocomplete forms. If you start typing it will give you the option to use one of the default headers starting with the same name.

Many thanks,

Liam

7

I’ve been using the custom icon upload facility a lot; it works really well. I’ve just found one small bug though. What’s the best place to report it?

8

Question. That’s this bit, right: &quotHeader image (add externally hosted image URL or start start typing to show library options)&quot? (Yes)

In which case, is there a list of the possible header images, so one wouldn’t have to go through the alphabet just to see what was available (atm you type a, see what’s there, delete, type b and so on.)? And, er … might it correlate to pictures, so we wouldn’t have to test each one individually to see what it looks like? (A header image equivalent to the icon image page, perhaps, where you can see them all at once.)

I feel a little ungrateful for asking. I’m grateful. I just want more. MOAR. (Please)
edited by babelfishwars on 11/12/2013