Howdy, Stranger!

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

Twine2 SugarCube Export question

edited April 2015 in Help! with 2.0
Hello everyone, Thanks for all the help. So far the pre-game stuff is going awesome. You are all terrific.

When I say pre-game, apparently one has to write up a ton of things BEFORE they even get to the game. It has been a great process so far and the company I am working with has been absolutely amazing.  I think I know why.

I just finished reading Chris Crawford's 2nd edition and it's a billion pages long. Anyway, one of the things he says in there is that this is such a new field, that there are a multitude of opportunities out there. So far, it seems like he is right.

Anyway on to my question, I am exporting my game file into an HTML and uploading it to a website to share with the developers. I am using Twine 2/SugarCube and in particular the Bookish format that TheMadExile and Pneuma put together... you can find it here:

http://twinery.org/forum/index.php/topic,2563.msg8120.html#msg8120

Anyway when I upload it, it still reverts the outer shell to being black and only the inner passage area is in the Bookish format.

It is probably an easy fix of the CSS.

Any suggestions?

Thank you in advance,
Sage.

Comments

  • I think you might have only included the top half of the CSS file that TheMadExile posted. You need the "Bleached" section of the CSS he created as well. I copied it here:
    /************************************************************
    * BLEACHED - A largely white style for SugarCube (v1.0.17+) *
    ************************************************************/
    body {
    color: #000;
    background-color: #fff;
    }
    a {
    color: #24f;
    }
    a:hover {
    color: #68f;
    }
    a:active {
    color: #f70;
    }
    hr {
    height: 1px;
    border: none;
    background-color: #000;
    }
    input, textarea {
    color: #000;
    background-color: #fff;
    border-color: #ccc;
    }
    input:hover, input:focus, textarea:hover, textarea:focus {
    background-color: #eee;
    border-color: #000;
    }
    #ui-bar, #ui-body {
    background-color: #eee;
    border-color: #ccc;
    }
    #credits, #version {
    color: #6f6f6f;
    }
    button, #ui-body-close,
    #ui-body.options a[id|="option-input"],
    #ui-body.options select[id|="option-input"] {
    border-color: #36c;
    }
    button:hover, #ui-body-close:hover,
    #ui-body.options a[id|="option-input"]:hover {
    border-color: #58e;
    }
    button:active, #ui-body-close:active {
    border-color: #f70;
    }
    #ui-body.options a[id|="option-input"].enabled {
    border-color: #292;
    }
    #ui-body.options a[id|="option-input"].enabled:hover {
    border-color: #4b4;
    }
    #ui-body.dialog-list li:nth-child(even) {
    background-color: rgba(0,0,0,0.07);
    }
    #ui-body.dialog-list li a {
    color: #222;
    }
    #ui-body.dialog-list li a:hover {
    color: #fff;
    background-color: #47b;
    }
    #ui-body.dialog-list li a:active {
    color: #fff;
    background-color: #f70;
    }
    #ui-body.saves tr:nth-child(even) {
    background-color: rgba(0,0,0,0.07);
    }
    #ui-body.saves .empty {
    color: #444;
    }
    #ui-body.saves > div:not(:first-child) {
    border-color: #ccc;
    }
  • Oh!
    Weird. 
    Let me check that now.
    Thank you, either way!
  • Nope. It's all there.  Strange, right?
  • That IS strange!

    And you definitely don't have any unclosed curly braces prior to the "Bleached" section? If you post the contents of your stylesheet here, I'd be happy to take a look. Have you made any modifications to it at all?
  • /************************************************************
    * BOOKISH                                                  *
    ************************************************************/
    .passage {
    position: relative;
    font: 16px/1.1em Georgia, "Bookman Old Style", serif;
    padding: 5em;
    border-left: 5px solid #7f7664;
    box-shadow: 5px 5px 0 0 rgba(127, 118, 100, 0.2);
    color: #000;
    background-color: #f5f4f2;
    text-align: justify;
    }
    .passage h3 {
    line-height: 2.5em;
    margin-bottom: 2em;
    border-style: solid none;
    border-width: 2px;
    text-align: center;
    }
    .passage p {
    display: block;
    margin: 0.25em 0;
    text-indent: 4.325em; /* aligns with the indent of leading paragraphs */
    }
    .passage p.leading {
    text-indent: 0;
    }
    .passage p.leading::first-letter {
    float: left;
    font-size: 4em;
    padding: 0.240em;
    margin-right: 0.15em;
    border-radius: 5px;
    color: #fff;
    background-color: #000;
    }


    /************************************************************
    * BLEACHED - A largely white style for SugarCube (v1.0.17+) *
    ************************************************************/
    body {
    color: #000;
    background-color: #fff;
    }
    a {
    color: #24f;
    }
    a:hover {
    color: #68f;
    }
    a:active {
    color: #f70;
    }
    hr {
    height: 1px;
    border: none;
    background-color: #000;
    }
    input, textarea {
    color: #000;
    background-color: #fff;
    border-color: #ccc;
    }
    input:hover, input:focus, textarea:hover, textarea:focus {
    background-color: #eee;
    border-color: #000;
    }
    #ui-bar, #ui-body {
    background-color: #eee;
    border-color: #ccc;
    }
    #credits, #version {
    color: #6f6f6f;
    }
    button, #ui-body-close,
    #ui-body.options a[id|="option-input"],
    #ui-body.options select[id|="option-input"] {
    border-color: #36c;
    }
    button:hover, #ui-body-close:hover,
    #ui-body.options a[id|="option-input"]:hover {
    border-color: #58e;
    }
    button:active, #ui-body-close:active {
    border-color: #f70;
    }
    #ui-body.options a[id|="option-input"].enabled {
    border-color: #292;
    }
    #ui-body.options a[id|="option-input"].enabled:hover {
    border-color: #4b4;
    }
    #ui-body.dialog-list li:nth-child(even) {
    background-color: rgba(0,0,0,0.07);
    }
    #ui-body.dialog-list li a {
    color: #222;
    }
    #ui-body.dialog-list li a:hover {
    color: #fff;
    background-color: #47b;
    }
    #ui-body.dialog-list li a:active {
    color: #fff;
    background-color: #f70;
    }
    #ui-body.saves tr:nth-child(even) {
    background-color: rgba(0,0,0,0.07);
    }
    #ui-body.saves .empty {
    color: #444;
    }
    #ui-body.saves > div:not(:first-child) {
    border-color: #ccc;
    }
  • Thank you Nicolem. I appreciate the look. I don't think it's there though.
  • Weird, when I copy that into a new story, it works just fine. If you start a new story, and do the same, does it still break?

    I should clarify though: it works for me in the latest version of Google Chrome on OSX.

    What web browser are you using? (If you don't know version offhand because they update all the time--thanks, IE and Google Chrome--try visiting this page: http://supportdetails.com/ )
  • Okay, actually... just to confirm, I've uploaded two screenshots, one with Bleached enabled, and one with Bleached disabled but Bookish working. And what you're seeing is the black one?
  • Yes!!  Perfect. I see the black one.
    So you think maybe it's just a cache issue?
  • Also I should say, locally... it all works fine. It is only when I upload it that it goes black.
  • Okay, in that case, I suspect it might be caching, yeah! When you reload your story, can you hold down shift?  That will just reload the current page without any horrible Twine-2.0-browser-memory-wiping side effects.
  • So perhaps a better question is this, once I export a document... which is to say I click the "publish to file" button... and then I take that resulting document and I upload it to my destination website... do the CSS mods that I pasted in earlier also go with the document itself? Or do I need to-----wait. I think I remember having a separate style.css file. Maybe this is the problem.
  • No need for separate css files, everything gets compiled into the one html file. My games work fine with their CSS modifications without any separate stylesheets.
  • Thank you, Claretta (and of course also Nicolem). I had for some reason a Style.css. I deleted it. Still getting the same problem, but I think I have an idea I can explore. I was using a local SugarCube version instead of the remote one. I will switch it back to the remote.

    That HAS to be it, because it's the only variable I have different than the two of you.

    It's not apples-to-apples yet.
  • If it is showing black, and clearing your cache didn't work, then your css must be telling it to display black somewhere. So if there is any doubling up of css occuring, you could just snip out the offending body and ui sections with a HTML editor.

    E.g. you might have something like:

    body{
    background-color: 000;
    }
    Then a bit later:

    body{
    background-color: fff;
    }

    Find the black body code and remove it so there's nothing else but white to revert to. If you do that, then there is absolutely no way it can display black anymore, because it won't have any instructions to.
  • Awesome. Dig it. Will check. (ps, just added a topic that might help you a bit--in return for the help you have given me).
  • Solved! Thank you both.
Sign In or Register to comment.