Howdy, Stranger!

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

How to change stylesheets 2.x

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

  • It generally helps if you state which story format you are using when asking questions about macros, CSS, or javascript because the answer can be different for each one but in this case the answer is the same for both Harlowe and Snowman 2.

    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+
  • Is there a way to change the colour on a page by page basis?
  • I tried the CSS code above and it still doesn't work.

    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.
  • chromebookbob wrote:

    Is there a way to change the colour on a page by page basis?


    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:

    body[data-tags="forest"] {
    background-color: green;
    }
    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.

    <script>$('body').addClass('forest');</script>
    But maybe someone else might know a solution.
  • chromebookbob wrote:

    I have tried changing the background colour of the default theme with:
    [quote]body {
    background-color: blue;
    }


    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!
  • If you use the browser's Inspect Element feature you will see the basic HTML structure of the story in regards to your issue is:

    <html>
    <body>
    <tw-story>
    <tw-passage>
    If you at the CSS for each of these elements you will notice that the default font-size is set on the tw-story element and not on the body, which is one of the reasons why your CSS was not working. The other reason is that font color is an invalid attribute, try just color instead.

    The following CSS should work:

    body {
    background-color: blue;
    }
    tw-story {
    font-size: 1.9em;
    font-family: "nunito-light";
    color: #FFFFFF;
    }
    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"
  • Thank you so much! Works great! :-)

    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.
  • kookidooki wrote:

    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*
  • Ok then, will add the font family property -thanks! Added some extra fonts in there.
  • Corrections to your CSS.

    1. Your body selector ends with a colon which is invalid, remove the colon fixes its problem:

    body {
    background-color:#000;
    color: #aaa;
    }
    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:

    tw-link, tw-hook {color:#d00}
    tw-link:hover, tw-hook:hover {color: #f00}
    (note: I don't believe they support visited)
  • Hi,

    I want to justify all the text in my twine story. Is it possible ? I tried in the Story Stylesheet :
    tw-story {
    text-align: justify;
    }

    And I also tried

    body {
    text-align: justify
    }
    And it didn't work.
  • Dinovorus wrote:

    I want to justify all the text in my twine story. Is it possible ? I tried in the Story Stylesheet :

    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:

    tw-passage {
    white-space: normal;
    text-align: justify;
    }
  • greyelf wrote:

    tw-link, tw-hook {color:#d00}
    tw-link:hover, tw-hook:hover {color: #f00}


    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.
  • If you have associated a (click:) macro to the hook then when you use your browser's Inspect Element feature you will see that the <tw-hook> is now wrapped within a <tw-enchantment class="link enchantment-link"> tag.
    You maybe able to use that in your CSS instead.

    tw-link, tw-enchantment.link {color:red;}
    tw-link:hover, tw-enchantment.link:hover {color: green;}
    note: the tw-enchantment.link:hover wont work if the hook is also associated with a (mouseover:) macro.
Sign In or Register to comment.