One of the things that I found very difficult when just getting started with Squiffy was the CSS file. Here are the notes I've made for myself and inserted directly into "C:\Program Files (x86)\Squiffy\resources\app\node_modules\squiffy\style.template.css". If you have any CSS notes or sections to add, please do!
/******************************You can put Google fonts and other web fonts here***************************/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');
@import url('http://fonts.cdnfonts.com/css/sweetie-pie');
@import url(//db.onlinewebfonts.com/c/6fcadbafe6e2c14076f22e3f71cadb5f?family=My+Kids+Handwritten-Basic);
/********You can even import stylesheets from games you've published in the past.**********/
/*** @import url('https://media.textadventures.co.uk/games/rP-I7PCmZE2wyGTbZiRD1w/Han%20Wang%20Kai%20Medium%20ChuIn/style.css'); ***/
a.squiffy-link /****This controls the appearance of all links, unless you change different kinds below.****/
{
text-decoration: solid; /***This controls the underline of the links.****/
color: blue;
cursor: pointer;
}
a[data-rotate] /****This controls the appearance of rotate links.****/
{
text-decoration: none;
color: pink;
cursor: pointer;
}
a[data-sequence] /****This controls the appearance of sequence links.****/
{
text-decoration: none;
color: pink;
cursor: pointer;
}
a.link-section /****This controls the appearance of section links.****/
{
text-decoration: none;
color: green;
cursor: pointer;
}
a.link-passage /****This controls the appearance of passage links.****/
{
text-decoration: none;
color: purple;
cursor: pointer;
}
a.squiffy-link.disabled
{
text-decoration: inherit;
color: inherit !important;
cursor: inherit;
}
a.squiffy-header-link /****This controls the appearance of the "Restart" link.****/
{
text-decoration: solid;
color: blue;
cursor: pointer;
}
div#squiffy-container
{
color: white;
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-family: sans-serif
}
div#squiffy-header /****This controls the size and position of the "Restart" link.****/
{
font-size: 14px;
text-align: right;
}
div#squiffy /****This controls the text color, size, and font of section and passage texts.****/
{
color: black;
font-size: 14px;
font-family: sans-serif
}
hr { /****This controls spacing and color of the border between sections and passages after clicking a link.****/
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 16px; margin-bottom: 16px;
}
body {
background-color: white; /****This controls the color of the larger background of the game.******/
}
input { /****This controls the appearance of <input/> boxes.****/
width: 40%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color:white;
border:none;
border-bottom: none;
color:black;
font-size: 14px;
font-family: sans-serif
}
input:focus {
background-color:transparent;
outline:none;
}
textarea { /****This controls the appearance of <textarea> boxes.****/
width: 40%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color:white;
border:none;
border-bottom: none;
color: black;
font-size: 14px;
font-family: sans-serif
}
input:focus {
background-color:white;
outline:none;
}
I didn't know where the template was - in earlier games, I'd change it before uploading it to get the background colors right. So thanks for that info!