Howdy, Stranger!

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

Removing certain parts of the Sugarcane sidebar

Hi! Just made an account today as I'm getting back into Twine and as expected, have run into a multitude of problems.

I looked around and googled to see if anyone else had asked about this and I couldn't find anything -- apologies if this is old news!

What I'd like to do is remove only certain parts of the Sugarcane sidebar, basically everything except the bookmark function. I'm just wondering if there's a way to take out the title/rewind/restart/"This Story Was..." bit and just keep the bookmark. I've tried a few things (including editing the HTML file which does nothing) and I'm tugging my hair out!

Thank you in advance for your help :)

Comments

  • You can use CSS to hide the parts you don't want to see using a display: none; rule but the trick is working out which CSS selector(s) to uses.

    One way to determine this is by using the Inspect Element feature built in to modern browser like Firefox and Chrome, there are many articles on the web explaining how to do this.

    An example using Firefox on Windows to determine Title selector:
    1. Open your story/game using Firefox
    2. Place mouse cursor over the Title of your story, click the right mouse button and select Inspect Element option.

    3. Look for the selector bread crumb within the new area that appears at bottom of browser.
    It looks similar to: html  >  body  >  ul#sidebar  >  li#title.storyElement  >  span#storyTitle.storyElement

    4. Determine which selector that best define the thing you want to change using the id's (things that start with #) within the bread cumb.
    In this case it is: #sidebar #title

    5. Add a new rule to your stylesheet.

    #sidebar #title {
    display: none;
    }
    After a bit of work you would end up with a set of rules like the following:

    #sidebar #title {
    display: none;
    }
    #sidebar #restart {
    display: none;
    }
    #sidebar #credits {
    display: none;
    }
  • That did it! Thank you so much :D
Sign In or Register to comment.