how to change the white background

Siddone

Hallo. How to change the white background with a picture instead? I got a lot of complains that the white background (or any other solid color) is too boring. Since I'm trying to use Squiffy to write interactive fiction with, if possible, a small profit, it would be paramount to not have an interface that is seen as "boring" by the readers.


thetruespin

you'll need to modify the corresponding .css file, which is outputted when you compile your game using the desktop editor. Alternatively you can modify the main Squiffy css template.


Siddone

So, it's difficult but theoretically possible, right?


Siddone

I'm in the style.CSS file. There are several values I can mess with, but I see nothing about background color.
Is it this one the thing to change? How do I insert the code of the picture I chose for background?

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px; margin-bottom: 16px;
}

Thanks


felixp7

Why are you looking at a random section of the CSS? You want to customize under div#squiffy-container, like you did for the width. Just add a background property with either a color name for the value (stick to this list for simplicity), or else an image reference like this: url("background.png"). Naturally, you'll have to put the image in the same folder as the CSS file, and package it with the rest of the game for distribution.


Siddone

So it's like this:
background: url("background.png");
inside div#squiffy-container, right? where background.png is the name of the picture file?


Siddone

I tried it, but the result is different than I thought. I wanted to have background the picture behind the game and on the side, but here the sides are still white and the background is in the middle, where I don't need it.


felixp7

To cover the area outside the game proper, add a new section to the CSS, like this:

body
{
    background: url("background.png") left repeat-y;
}

(Assuming that's what you want it to do -- tile vertically across the left-hand side of the page.)


Log in to post a reply.

Support

Forums