Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Here's a few style-sheets for SugarCube 2 (menu bar at the top and some other changes)

This is a CSS stylesheet for SugarCube 2.x; it should work with most versions of SugarCube 2, but you'll likely have far better luck on more recent versions. It features a slightly more mobile friendly UI than SugarCube 2's base CSS and replaces all the styles associated with SugarCube 2's left-frame UI bar and remakes it as a header bar/top menu. It also features a different-colored theme.

Note that having a top bar means that screen real-estate is at a premium. In particular, having more than six (shortish) menu items can cause problems on mobile. You can fit a fair bit more on tablets/desktops. Menu items are no longer even in width, which can make things look a bit sketchy if you pair some long options with some short options, though there are solutions, like setting static widths for them according to the largest one you need. See below for notes/guidance about editing the stylesheet. Finally, as the viewport gets smaller, elements are hidden (not removed--see note below) from the UI bar to make more space (try changing your browser window size while viewing the attached demos). The StoryBanner, StorySubtitle, and StoryCaption are the first to go. The StoryAuthor is the last to go. The StoryTitle and menu options always remain visible. You'll also need to consider the shape and size of your StoryBanner image carefully to fit in the allotted space. It's (by default) set to appear on the top left of the UI bar, but can be moved or manipulated via the "#story-banner" selector.

Note: Any code placed inside of the hidden elements will still function as normal, it just won't display anything. This means that StoryCaption, et al is still a safe place for running some silent code.

To install:

Step 1:

You need to put the following script in your story's JavaScript (if using Twine 1, any script-tagged passage) to use the new styles:
$(document.head).find('#style-ui-bar').remove();

Note: Without the above JavaScript, the new styles will look god-awful.

Step 2:

The styles can be accessed from the Pastebin links below. Copy the whole thing and paste it into a stylesheet-tagged passage (Twine 1) or in your story's stylesheet (Twine 2). Only grab one.
  • Pressure: New styles/theme/color scheme as well as the new UI organization. Nothing too crazy; it still looks like SugarCube.
  • Pressure Dark: Only (or at least mostly) adjusts the UI bar's position and behavior. SugarCube's default colors and symbols are retained for everything else.
  • Pressure Mix: As Pressure, but allows you to switch to a dark theme by using the passage tag "dark" in any passage. The dark theme used in this version is similar in most ways to Pressure Dark.
Demos and images of all versions are attached.

Some last minute notes on compatibility:
  • SugarCube 2's public documentation states that its CSS was updated in a handful of versions. If you're using an older version of SugarCube 2 and having trouble, try updating your install of SugarCube 2 and leave a note here so others will know.
  • This stylesheet will not work for SugarCube 1.x, Twine 1's Sugarcane format, or Harlowe (Twine 2's default story format), so make sure you've got the right format before trying to use it.
  • This stylesheet is compatible with both major versions (1.x and 2.x) of Twine.

Some guidance on editing the styles:

Making minor edits:

Here's a quick crash course on CSS precedence for those who need it:
    1. Style rules occurring later in the document have precedence over style rules further up in the document.
    2. More specific style rules have precedence over less specific style rules regardless of their location.
So to make minor edits, just insert the rules you want to change at the bottom of your stylesheet, and make them as specific as possible. For instance, if you want to change the way the menu buttons appear, be as specific as you possibly can:

For example, something like
#menu li a {
    background-color: pink;
    border-color: purple;
 }

is far more likely to work the way you intend than the less specific
#menu {
    background-color: pink;
    border-color: purple;
 }

The latter code will not make a meaningful visual change because the more specific "#menu li a" selector earlier in the stylesheet will have precedence over it.

Making major edits:

If you want to make major edits, you might be better off editing the CSS I've provided instead of adding new style rules. This will reduce bloat in your code and help alleviate any weird precedence issues that major edits may experience. If you aren't super confident in your CSS chops, it may be a good idea to avoid changing anything listed in an "@media"; statement, since I did a really bad job with those. If I have time, I'll make a better organized version at some point.

Note: Do not delete any selectors expecting them to return to SugarCube's defaults. This stylesheet is a bit different from a few others you might have used in that, in many cases, it doesn't just replace the default styles, but actually removes them (through the above script) and completely rewrites them from the ground up.

Other notes:

Since there's no change to SugarCube 2's HTML structure, you can use that as a resource to guide any changes you wish to make.

That's everything; let me know if you have any questions/problems. And definitely let me know if I messed anything up!

/novel

Comments

  • Oh, this looks lovely. I'm going to use it for my personal projects.
  • Chapel wrote: »
    […] It features a slightly more mobile friendly UI than SugarCube 2's base CSS […]
    In what way?
  • edited February 2017
    Chapel wrote: »
    […] It features a slightly more mobile friendly UI than SugarCube 2's base CSS […]
    In what way?
    In the way of poor wording. Can't edit it now, though.

    I personally find it easier to manipulate on a phone. That's obviously just me, I don't know if anyone at all will share in that. I didn't really mean to imply it was some kind of improvement. Again, not much I can do about that now.
  • Step 2:

    The styles can be accessed from the Pastebin links below. Copy the whole thing and paste it into a stylesheet-tagged passage (Twine 1) or in your story's stylesheet (Twine 2). Only grab one.

    Any chance you can reupload the codes? pastebin says deleted. :(
  • edited July 2017
    Olzme wrote: »
    Any chance you can reupload the codes? pastebin says deleted. :(

    Huh.

    Fortunately I still have them. I just threw them on GitHub, so you should be able to grab them from there.

    I have no idea how long that's been like that, so...sorry to anyone who came here expecting stylesheets. That said, I am much, much better at CSS than when I wrote that--I need to get around to updating it anyway, and that'll be easier to do on GitHub.

    Install pressure-base.css as per the above instructions, then copy and paste options/pressure-dark.css or options/pressure-mix.css below it in your stylesheet if you want either of them.

    Thanks for the heads-up, @Olzme .
Sign In or Register to comment.