I have tried changing the background colour of the default theme with:
[quote]body {
background-color: blue;
}
but when I loaded the game nothing had changed. I have tried with some other examples of css but to no avail. Is there a special way to get css working? Also, are there any premade formats available? There's a url link input to enter new ones in the format dialogue.
Thanks, happy twining.
Comments
There is a known bug/limitation in both the story formats that came with in Twine 2.0, these have been fixed and released with the new Twine 2.0.1
If you are using the online version of Twine 2 at twinery.org/2/ then you may need to "Refresh your browser cache using Force Refresh" to start using the new version, each browser / OS has its own way of doing this but this article should help you.
If you are using the local version of Twine 2 then you will need to download the latest copy using the link on the Twine site
Otherwise what you have written should work if/when using Twine 2.0.1+
Safari iOS has loaded 2.0.1 it says but I can't scrub my work to be sure, I've no way to load it back in.
Edit:
I've tried this on desktop now and it's fine for setting story wide CSS. It looks like either Safari iOS isn't displaying CSS or it's not loaded all the 2.0.1 files.
We got around this issue at work by adding "?version=versionNumber" to the end of our javascript import urls. It ensured we never had to worry about telling children how to clear their cache on all sorts of random browsers.
In Twine 1 you could assign a tag to a passage (eg. forest) then use a CSS selector based on that tag to change things.
In Sugarcane the tag was added to the <body>'s data-tags property when the passage was display, and the css needed looked like the following: Harlowe does not current appear to use a passage's tags when displaying said passage (but I could be wrong)
In theory you should also be able to use a <script> and some javascript inside your passage to add a class to the <body> yourself which you could access using CSS (eg. body.forest) but this also does not seem to work. But maybe someone else might know a solution.
I have tried copying my workable CSS from my 1.4.2 files and that doesn't translate into 2.0.1.
This is the CSS that I am using right now in 2.0.1.
ONLY the background color (blue) works when I play the file. The rest does not work. Does anyone have any tips for how to make the font attributes work?
body {
background-color: blue;
font-size: 1.9em;
font-family: "nunito-light";
font color: #FFFFFF;
}
Thank you!
The following CSS should work: note: Assuming your browser can find the nunito-light font. Mine couldn't because it is not a standard font, so you may want to add other options to your font-family list.
eg. font-family: "font 1", "font 2", "font 3"
PS: I added a new funky font to my font folder (I am working from my downloaded Twine 2.0.1 folder) and that font works just fine, browser recognizes it.
The issue is not that you cant see your new funky font in action, the issue is that the readers of your story wont see the font because it is unlikely to be installed on their machines. *smile*
1. Your body selector ends with a colon which is invalid, remove the colon fixes its problem: 2. I am assuming that you want your a based selectors to change the colour of the passage links. Harlowe does not use HTML a tags for passage links, it instead uses custom tags like tw-link and tw-hook.
Change your CSS as follows: (note: I don't believe they support visited)
I want to justify all the text in my twine story. Is it possible ? I tried in the Story Stylesheet : And it didn't work.
You need to state which story format you are using as answers can be different for each one. Assuming your using Harlowe.
If you use your browse's Inspect Element feature you will find that Harlowe changes the default value of the white-space property of the tw-passage tag, and this is effecting how your text-align: justify behaves.
Try the following CSS:
This solution has issues:
If I have any text inside a hook that I want to change with (click-replace:) then all of the text inside the hook that appears will have the styling of tw-hook.
How do I style the link for a hook? Styling the hook element is not the correct solution.
You maybe able to use that in your CSS instead. note: the tw-enchantment.link:hover wont work if the hook is also associated with a (mouseover:) macro.