CSS template

IFforClassroom
25 May 2022, 05:10

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; 
  }

Bluevoss
25 May 2022, 19:02

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!