Skip to content

★ HTML/CSS

The (css: ) macro

If you want to make some small adjustment to the design, you can use the (css: ) macro – you can combine it with the CSS language.

Example

(css: "background-color:indigo;font-size:40px;")[Plain text 1.]

(css: "border: 6px dotted red;padding:15px;")[Plain text 2.]

An editor view

CSS - editor

Result

CSS



Back and Repeat arrows

In the project, you need to enter the "Edit Story Stylesheet" tab and to add the CSS rule. In this way the back and repeat arrows will be unavailable for players.

tw-sidebar {
    display: none;
}

Edit Story Stylesheet



Background image

Example - more information

tw-story {
    background-image: url("https://cdn.pixabay.com/photo/2016/07/21/15/25/minecraft-1532775_1280.png");
    background-repeat: no-repeat;
    background-size: cover;
}

Result

Background image



Design of particular slips

By adding tags to the particular slips (fragments of the story), you can define the way in which a particular slip or a group of slips will look like. For example, the START slip will get red background, slips with questions will get green background and other slips will get blue background.

The START slip

Tag1

The QUESTION slip

Tag2

CSS - code

tw-story {
    background: blue;
}

tw-story[tags="start"] {
    background: red;
}

tw-story[tags="questions"] {
    background: green;
}



Style for mobile devices

If you want to set a particular style for smartphones, tablets, etc., you can use CSS and @media. To make it easier, let’s assume that mobile devices are those with up screens up to 1200 pixels of width and those with screens above that width are laptops, computer screens, etc.

You need to add the following to your CSS code:

@media only screen and (max-width: 1200px) {
    /* ENTER THE STYLE HERE */
}

Example

@media only screen and (max-width: 1200px){

    tw-story {
        padding: 5%;
        font-size: 1em;
    }

    tw-sidebar {
        display: none;
    }

    tw-passage {
        padding: 10px;
    }

}



HTML/CSS

As you have probably noticed, you can freely use HTML5/CSS3 in your project – it gives you a number of modification possibilities. In the “Tools” tab I have provided a lot of ready-made solutions – you are welcome to copy them or use them as an inspiration.

You can find more information at the following websites: