Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
SugarCube CSS problem ...
Well, as I said before, I'm a novice regarding HTML and CSS. What I wanted to do was to change SugarCube's default white text on black background to black text on white background. I hit a few obstacles along the way but all but one I could overcome (if in the intended, approved way is an entirely different question).
I set up my own stylesheet, copy'n'pasted the CheckVars css in that and put all my stuff after that.
This gave me the white background and black text. This did NOT work for the ui-bar or CheckVars, however. So I fiddled a bit and came up with:
This gave the wanted effect for the ui-bar - except for the words (and symbol) in the Saves and Resore fields being light gray and terribly hard to read. CheckVars decided to play silly buggers as well and offers black text over a dark gray background. So .. on with Checkvars:
This game me black text over a white background so that I could finally read what Checkvars could tell me.
I have not managed, though, to get the text (and eventually symbol) with Saves and Restart to be black. I assume it is because they are hyperlinks and when I put my mouse over them, they change their background to a darker gray so that things become readable - I'd rather have them readable without the mouse hovering over them as well.
Can someone tell me which property to change and how to set it up, so that the hierarchy is ok?
I set up my own stylesheet, copy'n'pasted the CheckVars css in that and put all my stuff after that.
body {
background-color: White;
color: Black;
}
This gave me the white background and black text. This did NOT work for the ui-bar or CheckVars, however. So I fiddled a bit and came up with:
#ui-bar { background-color: White; color: Black; }
This gave the wanted effect for the ui-bar - except for the words (and symbol) in the Saves and Resore fields being light gray and terribly hard to read. CheckVars decided to play silly buggers as well and offers black text over a dark gray background. So .. on with Checkvars:
#ui-dialog-body { background-color: White; }
This game me black text over a white background so that I could finally read what Checkvars could tell me.
I have not managed, though, to get the text (and eventually symbol) with Saves and Restart to be black. I assume it is because they are hyperlinks and when I put my mouse over them, they change their background to a darker gray so that things become readable - I'd rather have them readable without the mouse hovering over them as well.
Can someone tell me which property to change and how to set it up, so that the hierarchy is ok?
Comments
Ponders ... I guess there were a few reasons ...
First I looked into the CheckVars css and that one came out as one single big line (might be an editor thing or a Linux/Unix vs. Windows thing). I tried to insert linebreaks to make it more readable but, as I said, I am not experienced with CSS and so that was a bit of a bad start.
I think at some point I tried the bleached stylesheet. It was, er, pretty complex (for my untutored eye) and it left way too much of a margin at the left side for my liking and I had no clue where and how to fix that.
In the end I left the CheckVars (but probably the non-bleached version, silly me) CSS in the Stylesheet and used a Stylesheet I found somehwhere else (not for SugarCube, most likely) that got rid of that left margin for me. I then built my own stuff from that basis.
So ... I'll have a look at both stylesheets provided with SugarCube and look up the relevant setting (after putting a chainsaw to the CheckVars CSS).
/* The contents of the Bleached css file. */ blah blah blah /* The contents of the CheckVars css file */ more blah blah blah /* My customizations of the two above themes. */ body { color: #111; background-color: some-other-off-white-colour-code; }The advantage of this method is that you can easily update either of the inserted themes with changes from the original developer.I've brushed up my knowledge a bit since then and I know that I can get rid of that left space by declaring #passages and setting margin to 0 as well as setting a decent max-width. This may not be ideal but it serves its purpose. Even with the ui-bar visible I have enough space fo the story + images and things do not looked crammed and things flow nicely when the browser is not at full screen and I decrease the width of it.
So I am currently adding my own stuff at the back of the CSS again and I try to get a few entries in as "late declarations" to overwrite things declared previously which I don't like with Bleached as a basis (both Bleached + Bleached Checkvars).
Still a few issues with colours in some places but I think I know how to fix those.
The Bleached stylesheet for SugarCube itself does not alter the basic layout of the page at all (in either version), it only alters colors. Are you sure you used correct version (i.e. download the one for the version of SugarCube you're using)?
It was pretty early - more or less right after I discovered Twine - and I went through Twine 1 and Twine 2, with a mini version of the page layout how I wanted it, and played with the various Formats to see how that would be displayed.
So it might well be that I had the same issue with Sugarcane ... can't remember, really. All I remember is that there was a lof of empty space to the right of the ui-bar before the passage text started and also a lot of unused space from the right end of the text to the end of the screen which didn't agree with my idea of using 512 pixel wide images for portraits located at the left side. You basically had like 5 words of text before a linebreak occured.
I then looked for CSSes für Twine and tried a few of those. Early stage of Twine usage, no clue really how things are related and suchlike (which, some critical person might obeserve, is not THAT far from my current state of knowledge).
I re-downloaded SugarCube and GetVars and, yes, those spaces exist again. But now I know how to fix them (or at least I know ONE way to fix them) which is by adding mods for #passages and .passage at the end of the CSS (mainly max-width, and padding-left and padding-right adjustements) and, yes, you're absolutely right - none of THAT is touched in the SugarCube CSS I downloaded so it's probably "a problem" (from my point of view how things should look like) that exists in the base CSS already.