CSS template

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!


This topic is now closed. Topics are closed after 180 days of inactivity.

Support

Forums