{"id":1039,"date":"2016-04-17T22:47:44","date_gmt":"2016-04-18T03:47:44","guid":{"rendered":"http:\/\/www.klcameron.com\/cdm\/?p=1039"},"modified":"2016-04-17T22:47:44","modified_gmt":"2016-04-18T03:47:44","slug":"twine-how-to-change-background-color-multiple-times-throughout-game","status":"publish","type":"post","link":"https:\/\/www.klcameron.com\/cdm\/twine-how-to-change-background-color-multiple-times-throughout-game\/","title":{"rendered":"Twine- How to change background color multiple times throughout game"},"content":{"rendered":"<ol>\n<li>In each text box, give certain places a &#8220;tag.&#8221; For example, in my game I had several different rooms. Each room was tagged with particular name. \u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0 <img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1048\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.33.39-PM.png?resize=300%2C141\" alt=\"Screen Shot 2016-04-17 at 11.33.39 PM\" width=\"300\" height=\"141\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.33.39-PM.png?resize=300%2C141&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.33.39-PM.png?w=539&amp;ssl=1 539w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<li>When you finish tagging all of your text boxes, create a stylesheet for each tag.\u00a0<a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1051\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?resize=300%2C169\" alt=\"Screen Shot 2016-04-17 at 11.34.25 PM\" width=\"300\" height=\"169\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?resize=624%2C351&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.25-PM.png?w=1250 1250w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\n<li>Tag each stylesheet with the same name you placed in the text boxes.<img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1050\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.04-PM.png?resize=300%2C294\" alt=\"Screen Shot 2016-04-17 at 11.34.04 PM\" width=\"300\" height=\"294\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.04-PM.png?resize=300%2C294&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.04-PM.png?w=540&amp;ssl=1 540w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<li>Place the HTML code in under the &#8220;Body&#8221; section in the stylesheet.<\/li>\n<li>The HTML will look like this\n<ul>\n<li>\nbody {<br \/>\nbackground-color: blue;<br \/>\ncolor: black;<br \/>\n}<\/li>\n<li>For most basic colors, you can just write the name of the color. If you want a specific color you must find the HTML color code, which can be done through a quick google search or through a software like Adobe Photoshop<\/li>\n<\/ul>\n<\/li>\n<li>In the end, you should have multiple stylesheets that will automatically link to the tags in your text boxes. \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1052\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.39-PM.png?resize=300%2C151\" alt=\"Screen Shot 2016-04-17 at 11.34.39 PM\" width=\"300\" height=\"151\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.39-PM.png?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.34.39-PM.png?w=516&amp;ssl=1 516w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1045\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.32.58-PM.png?resize=300%2C120\" alt=\"Screen Shot 2016-04-17 at 11.32.58 PM\" width=\"300\" height=\"120\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.32.58-PM.png?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-17-at-11.32.58-PM.png?w=564&amp;ssl=1 564w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>In each text box, give certain places a &#8220;tag.&#8221; For example, in my game I had several different rooms. Each room was tagged with particular name. \u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0 When you finish tagging all of your text boxes, create a stylesheet for each tag.\u00a0 Tag each stylesheet with the same name you placed in the text [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1039","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/comments?post=1039"}],"version-history":[{"count":1,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1039\/revisions"}],"predecessor-version":[{"id":1053,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1039\/revisions\/1053"}],"wp:attachment":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/media?parent=1039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/categories?post=1039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/tags?post=1039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}