Sample CSS

Twine’s Default CSS stylesheets are linked here: https://www.motoslave.net/sugarcube/2/docs/#css

Use their elements in the stylesheet to override defaults, including passages, ui-dialogs, etc.

Drawn from No World 4 Tomorrow. Sugarcube 2.

@import url('[https://fonts.googleapis.com/css?family=Aldrich|Audiowide|Bungee+Shade|Coda|Codystar|Dosis|Exo|Gugi|Iceland|K2D|Kanit|Monofett|Play|Quantico|Rationale|Wallpoet|ZCOOL+QingKe+HuangYou');](https://fonts.googleapis.com/css?family=Aldrich|Audiowide|Bungee+Shade|Coda|Codystar|Dosis|Exo|Gugi|Iceland|K2D|Kanit|Monofett|Play|Quantico|Rationale|Wallpoet|ZCOOL+QingKe+HuangYou%27);)

/* Set default background, font, and link style in all passages */ body {   background: no-repeat url(“bg.jpg”);   background-attachment: fixed;   background-color: black;   font-family: ‘Quantico’, sans-serif;   font-size: 120%; }

/* Set background and image styles for passages tagged “com” */ body.com {     background-image: url(“bg-blur.png”);     background-color: black; }

img.com {   display: block;   margin-left: auto;   margin-right: auto;   max-width: 60%;   height: auto; }

a { color: #ff9933; }

a:hover { color: #ff6600; text-decoration: none; border-bottom: 1px solid #ff6600; }

/* Set style for buttons */ #passages button {   background-color: #011968;   font-family: ‘Quantico’, sans-serif;   border: 1px solid white; }

/* Hide or show the sidebar */ #ui-bar { display: none; }

/* Set story alignment on passages */ #story { margin-left: 3em;   margin-right:5em; }

/* Set background for the dialog/pop-up passages */ #ui-dialog-body {   background-image: url(“space.jpg”);   background-color: black; }

/* Set background for the dialog/pop-up passages tagged nobg*/ .nobg #ui-dialog-body {   background-image: none;   background-color: black; }

/* Set title font / h1 {   font-family: ‘Monofett’, sans-serif;   font-size: 500%;   color: #d4d6f9;   text-shadow: 5px 5px #213d99/292fa5/;   margin-top:  -30px;   margin-bottom: -60px; } / Set style for div class “popup” */ .popup {   color: white; }

#popup a { color: #ff9933; }

#popup a:hover { color: #ff6600; text-decoration: none; border-bottom: 1px solid #ff6600; }

.popup a.link-external:after {     content: normal; }

.ctrimg {   display: block;   margin-left: auto;   margin-right: auto;   max-width:90%;   height:auto; }

/* Set container holding image and text for passages tagged “com” / .container {   position: relative;   text-align: center;   color: white; } / Set style of names in messages for passages tagged “com” and “compu” */ .n1 { color: rgb(1, 101, 158, 0.6); font-weight: bold; font-style: italic; }

/* Style received messages on passages tagged “com” */ .msg {   position: absolute;   top: 35%;   left: 51%;   right: 6%;   transform: translate(-50%, -50%);   text-align: left;   color: rgb(128, 204, 247, 0.7);   font-size: 2.3vw;   font-family: ‘Aldrich’; }

/* Style sent messages on passages tagged “coms” */ .reply {   position: relative;   text-align: right;   right: 8%; }

/* Set image style for passages tagged “compu” */ img.compu {   display: block;   margin-left: auto;   margin-right: auto;   max-width: 60%;   height: auto; }

/* Set container holding image and text on passages tagged “compu” */ .containerD {   position: relative;   text-align: center;   color: white; }

/* Style received messages on passages tagged “compu” */ .msgD {   position: absolute;   top: 5%;   left: 30%;   right: 28%;   text-align: left;   color: rgb(128, 204, 247, 0.7);   font-size: 2.3vw;   font-family: ‘Aldrich’; }

/* Style sent messages on passages tagged “compu” */ .replyD {   position: relative;   text-align: right;   right: 5%;   margin-bottom: -50px;   display: block; }

/* Set background, image, and link styles for passages tagged “title” */ body.title {   background-image: url(“title-bg.png”);   background-size: 100% auto;   color: #918e92; }

img.title {   width: 60%;   height: auto;   display: block;   margin-left: auto;   margin-right: auto;   vertical-align: middle; }

.title a {   color: #d4d6f9; }

.title a:hover {   color: white;   text-decoration: none;   border-bottom: 1px solid white; }

/* Set the external links to not have that pointy box icon on them */ #passages a.link-external:after {     content: normal; }

/* Set styles for the logos on the HomePg (title passage). Note: in the HTML, do NOT break a line between column divs! It adds an extra line break that staggers the next column down one line. */

.column {   float: left;   width: 25%; }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {   .column {     width: 100%;   } }

/* Clear floats after image containers */

.row::after {   content: “”;   clear: both;   display: table; }

/* Set styles for cycling links */ .cyclingLink {   color: #2967a1; }

.cyclingLink:hover {   color: #74b5f2;   text-decoration: none;   border-bottom: 1px solid #74b5f2; }

/* fade passages in/out */ .fivesectrans.passage { transition: opacity 5s ease-in; }

/Then give incoming passage this tag: fivesectrans/

/* Bottom left text */ .bottom-left {   position: absolute;   bottom: 8px;   left: 16px; }

/* Top left text */ .top-left {   position: absolute;   top: 8px;   left: 16px;   color: rgb(247, 101, 71, 0.9);   font-size: 2.5vw;   font-family: ‘Aldrich’; }

/* Top right text */ .top-right {   position: absolute;   top: 8px;   right: 16px; }

/* Bottom right text */ .bottom-right {   position: absolute;   bottom: 8px;   right: 16px; }