›

Howdy, Stranger!

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

Sign In Register

Categories

SugarCube And Passage Tags (CSS)

EcnelOvelamEcnelOvelam
in Help! with 1.x
So I've tried reading the SugarCube documentation and searching the forum, and there is probably something I'm just to dumb to understand, but I can't for the life of me figure out the whole thing with CSS tags and SugarCube.

So this is what I want to do.
1 - Create a new StyleSheet Passage
2 - Add a new Tag to the new StyleSheet
3 - Tag one specific passage with the same tag used on the StyleSheet
4 - Have that passage only use the CSS of it's corresponding StyleSheet

So I've done this in SugarCube, and I hate to bring up another "How do I do what I did in SugarCane work with SugarCube." thread, but I'm just totally at a loss.

I'll just say thanks in advance TheMadExile, lol.

Comments

  • TheMadExileTheMadExile
    SugarCube does not support tagged stylesheets.  Personally, I think it's a misfeature, YMMV.

    To accomplish what you want to do in SugarCube, try this:
    [list type=decimal]
    Create a stylesheet tagged passage.  I generally recommend using only one.
    Add your styles to that stylesheet, prefixing the styles with classes matching the tags you want to use.
    Tag your passages with tags that match the classes used in the stylesheet.

    This works because:
    [quote="SugarCube documentation"]When displaying a passage, Twine/Twee tags on the passage are added to the active passage's container element and the page's <body> element as CSS classes. Special tag names such as "debug", "script", "stylesheet", and "widget" are excluded from this mapping (as an exception, the "bookmark" tag is not excluded).

    For example, let's assume that your project has a forest location and you've tagged several passages with the tag forest to note that they're part of that location.  The selectors for the forest styles might look something like this:

    body.forest {
    /* Forest style properties for the body element. Useful for full page backgrounds and the like. */
    }

    /* For most things, you'll probably want to do something like this, which targets the active passage container. */
    .forest.passage {
    /* Forest style properties for the passage container element. Useful for passage container backgrounds and the like. */
    }
    .forest.passage a {
    /* Forest style properties for all anchor elements within the passage container. */
    }
    .forest.passage a.link-internal {
    /* Forest style properties for all anchor elements within the passage container which are internal links. */
    /* It will not select anchor elements which are links to external resources or anchor elements not used as links. */
    }
    Hopefully, you get the idea.  Let me know if you have any questions.
  • EcnelOvelamEcnelOvelam
    TheMadExile wrote:

    SugarCube does not support tagged stylesheets.  Personally, I think it's a misfeature, YMMV.

    To accomplish what you want to do in SugarCube, try this:
    [list type=decimal]
    Create a stylesheet tagged passage.  I generally recommend using only one.
    Add your styles to that stylesheet, prefixing the styles with classes matching the tags you want to use.
    Tag your passages with tags that match the classes used in the stylesheet.

    This works because:
    [quote="SugarCube documentation"]When displaying a passage, Twine/Twee tags on the passage are added to the active passage's container element and the page's <body> element as CSS classes. Special tag names such as "debug", "script", "stylesheet", and "widget" are excluded from this mapping (as an exception, the "bookmark" tag is not excluded).


    For example, let's assume that your project has a forest location and you've tagged several passages with the tag forest to note that they're part of that location.  The selectors for the forest styles might look something like this:

    body.forest {
    /* Forest style properties for the body element. Useful for full page backgrounds and the like. */
    }

    /* For most things, you'll probably want to do something like this, which targets the active passage container. */
    .forest.passage {
    /* Forest style properties for the passage container element. Useful for passage container backgrounds and the like. */
    }
    .forest.passage a {
    /* Forest style properties for all anchor elements within the passage container. */
    }
    .forest.passage a.link-internal {
    /* Forest style properties for all anchor elements within the passage container which are internal links. */
    /* It will not select anchor elements which are links to external resources or anchor elements not used as links. */
    }
    Hopefully, you get the idea.  Let me know if you have any questions.

    Thanks for the quick reply. So what I've done is made a hand drawn map, and saved it as an image and imported it in Twine. What my plan is, is to have a link to a passage called "Map". The user goes to click it and the map opens up (it's fairly large in size), when you want to close the map, you click the map it'self (done with the [img[img1[passage]] syntax. But what I thought would look much better is to have the whole sidebar disappear whilst the map is opened, which I tried doing like so:
    body.Map {
    #ui-bar {
    display: none;
    }
    }
    But to no avail. The passage the map is opened up in is also tagged "Map". I'm probably doing something completely stupid, but so far the CSS type stuff is the only thing I really have problems with.
  • greyelfgreyelf
    EcnelOvelam wrote:

    But what I thought would look much better is to have the whole sidebar disappear whilst the map is opened, which I tried doing like so:
    body.Map {
    #ui-bar {
    display: none;
    }
    }

    The format of your CSS is wrong, you cant embed selectors like your have with the ui-bar selector within the body.map one.

    Try this instead

    body.Map #ui-bar {
    display: none;
    }
    NOTE: This assumes that your Map passage has a Map tag assigned to it, your description of the Map passage did not mention one.
Sign In or Register to comment.