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
(note: I have included a commented copy of the original value for each property I changed) To do the same in SugarCube I would use the following CSS:
#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.
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:
There isn't actually a page displaying what the default CSS code is, though. I guess that should probably be added.