Howdy, Stranger!

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

CSS in Sugarcane has me tearing my hair out!

I'm trying to do ONE SIMPLE THING, and even using Firefox's HTML Inspector and adding the exact style items that are controlling the page into my stylesheet, I can't get my story to override whatever the default Sugarcane styling is doing. (I went back to Sugarcane because Sugarcube wasn't working, per my other thread.)

All I want to do is make the sidebar wider and shift the main passage area over so they don't overlap. I can move and resize the text just fine, using a width value under #sidebar, but there's a 1 px gray border on the left edge of the passage that just won't move no matter what I do.  I determined that the margin-left width is controlling how far over it sits, with a default value of 18.2em. But I tried margin-left values of 20em, 25%, 200px, and numerous other things, and it won't budge a bit. Then I thought I'd just turn that border off so I could shift the text over and the border wouldn't be visible, using a border-left value of 0px. I tried all this both under #passage and .passage, but the border wouldn't shift a bit. How do you override the default CSS for this border??

Comments

  • If I want to make the the side bar 8em wider in Sugarcane I would add the following to my stylesheet passage:
    (note: I have included a commented copy of the original value for each property I changed)

    #sidebar {
    /* width: 12em; */
    width: 20em;
    }

    #passages {
    /* margin-left: 18.2em; */
    margin-left: 26.2em;
    }
    To do the same in SugarCube I would use the following CSS:

    body {
    /* margin: 3.5em 3.5em 3.5em 21em; */
    margin: 3.5em 3.5em 3.5em 29em;
    }
    #ui-bar {
    /* width: 14.5em; */
    width: 22.5em;
    }
  • Thank you! Could have sworn I tried that, but probably I had some syntax error or something.
  • Okay, what do you do if the !important tag doesn't even work? Now I'm trying to get all the text in the sidebar to be centered, both the regular story bits and the map table I added below them. Here's what I've got:

    #sidebar {
    width: 24em;
    left: 1em;
    text-align: center !important;
    }

    I've also got the text-align: center bit in the map table's CSS:

    .map table, .map th, .map td, .map tr, .map caption {
    padding: 0px;
    border-spacing: 0px;
    font-size: 1.5em;
    line-height: .5em;
    text-align: center;
    vertical-align: middle;
    }

    And it still doesn't work. The regular text is still right-aligned, and the map table is left-aligned. I just want everything centered.

    Why is Twine CSS so hard to override even for really simple things? Why doesn't my code take precedence? I don't understand this.
  • I don't think it's a matter of difficulty. Or rather, the difficulty is the lack of comprehensive documentation. I've been thinking of writing some, but I'm too self-absorbed for now. It's frustrating, but the way I've been dealing with it is using a browser console to look at the compiled html of my Twine project when I run into this kind of problem.

    Also, to save myself headaches, I make a complete copy of all of a header's default CSS - I open a new Twine, immediately build the story, copy all of the styling, and paste it into a project I'm working on. That way, I know exactly what I need to change to get the look I want.

    Anyway, I'm not sure about your map table, but for the sidebar:

    The issue is that the contents of the sidebar are wrapped in <li> elements, which happen to have "text-align: right". If you style #sidebar, the styling on the list elements will take precedence. Try:
    #sidebar li {
    text-align: center;
    }
  • You only need to reset the LI tags text-center attribute, and I suggest not using the !important flag on the #sidebar text-align.

    #sidebar {
    width: 24em;
    left: 1em;
    text-align: center;
    }
    #sidebar li {
    text-align: inherit;
    }
  • Thanks for the quick response. I'm not actually going to use the important tag for the final version; I was just illustrating how even that wasn't overriding the alignment. I agree, the documentation is terrible. Normally I can read the docs or do a search and figure stuff out, but not for this. I'm sort of looking at the base code when I use the Firefox inspector, but it's still really hard to tell what inherits from what. I'd thought the hierarchy went directly from body to sidebar. Modifying the li element worked great for the story items, but still doesn't for the table.
  • The problem with the built-in story formats is that there are three of them, so there would need to be three sets of CSS documentation. There is an assumption that either the person creating the story/game knows how CSS works and how to use a browser's CSS editor, or that they will use these forums.
  • Well, I've checked the documentation that I can find that's specifically about Sugarcane, and I still can't find a comprehensive list of what elements affect what. I still can't get the map table that's placed in the StoryMenu area to be centered in the sidebar, although I've fixed the rest of the text. I can get around this by making the sidebar barely wider than the map table, although that's not ideal. It's just weird that even if I try adding text-align: center; to a dozen different sections of the CSS affecting the sidebar, tables in general, and the map label in particular, none of it overrides whatever's forcing the map table to be left-aligned when the rest of the sidebar would be right-aligned by default if I hadn't specified center.
  • Can you provide an example? (by uploading an attached .html or .tws file)
  • This is a bit old but I thought I'd mention that the HTML structure of Sugarcane and Jonah's output is documented on the wiki: http://twinery.org/wiki/sugarcane_html http://twinery.org/wiki/jonah_html

    There isn't actually a page displaying what the default CSS code is, though. I guess that should probably be added.
Sign In or Register to comment.