scprivate / cyoa-template Goto Github PK

This shows how to create a CYOA using HTML and CSS.

Advantages:

• Layout is done automatically.
• Images are cropped automatically.
• Editing/rearranging/restyling is trivial.

###HOW-TO:

Download the files to your computer and edit cyoa.html. Everything can be done using copy-paste. To add a new choice, copy-paste this inside "choices-container" tags:

<div class="third-size"><div class="choice">
    <img class="choice-image" src="lena.jpg">
    <div class="choice-title">
        choice 1
    </div>
    <div class="choice-text">
        Hello friends! This is choice 1.
    </div>
</div></div>

• lena.jpg = Image file (can be URL or path to your computer).
• third-size = Width of choice box. style.css contains a list of possibilities.

###Saving to image

Once your CYOA is complete you can save it as an image using a browser extension.

• Chrome: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=en-US
• Firefox: https://addons.mozilla.org/en-US/firefox/addon/fireshot/

###Row Edition

Check out the row_edition folder for a row-based style.