Sugarcube: Artistic backgrounds, and custom fonts.

Jinx

Hey! It's me again. You've been a great deal of help - You can find my current work-in-progress over at the workshop but I'm still learning, so I'm still going to ask questions.

Now the black background can be so boring in Sugarcube. I wanna implement a bit of my own artwork or something nice in the background. Maybe a different font. Can you teach me how to replace the solid color background with something more aesthetically pleasing?

(By the way TheMadExile. You've been such a great help to me I included your name in the credits of my game, under Special Thanks. You're really rad.)

Sharpe

CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs

Jinx

Sharpe wrote:

CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs

[IMG]http://i.imgur.com/qkiBNp7.png[/img]

Sharpe

What's that face about? I just linked to a guide that explains, step-by-step, how to change the basic appearance of your game.

Did you look at the link?

Jinx

Yes I did. After looking through it all trying to figure out where the hell to start looking for what I want, Google answered it for me.
A simple "open up a stylesheet, go to body, and type in background: [img[background]]" would've worked out well.

No biggie, I guess. I'm not looking for any complicated answers. Just simplicity at it's finest.

Sharpe

Wow. You have a bad attitude.

Jinx

Blame family. But that's another topic for another day. Anyways, I've got what I needed. Thanks for the link though. _{Even though it's long and looks very complicated, stressful and intimidating.}

[IMG]http://i.imgur.com/DJKqpzm.png[/img]

TheMadExile

Jinx wrote:

Now the black background can be so boring in Sugarcube. I wanna implement a bit of my own artwork or something nice in the background. Maybe a different font.

It looks like you've largely already found what you need, however, I'll chime in anyway.

If you wanted a default full page background image, then you'd want to do something like this:


/* If using an external image. */
body { background-image: url(EXTERNAL_IMAGE_URL); }

/* If using an image passage. */
body { background-image: [img[IMAGE_PASSAGE_TITLE]]; }


If you wanted to be able to alter the background image with passage tags, then you'd simply add the tags as classes on the body element.  For example:


/* If using external images. Includes background's for: default, townhall, library. */
body { background-image: url(EXTERNAL_DEFAULT_IMAGE_URL); }
body.townhall { background-image: url(EXTERNAL_TOWNHALL_IMAGE_URL); }
body.library { background-image: url(EXTERNAL_LIBRARY_IMAGE_URL); }

/* If using image passages. Includes background's for: default, townhall, library. */
body { background-image: [img[DEFAULT_IMAGE_PASSAGE_TITLE]]; }
body.townhall { background-image: [img[TOWNHALL_IMAGE_PASSAGE_TITLE]]; }
body.library { background-image: [img[LIBRARY_IMAGE_PASSAGE_TITLE]]; }


Jinx wrote:

Maybe a different font.

For the font, you'd do something like this:


/* To affect the whole page (incl. the #ui-bar). */
body { font-family: "FONT_NAME_HERE"; }

/* To affect just the passage container. */
.passage { font-family: "FONT_NAME_HERE"; }


Depending on the font, you may also need to specify a font size.