Store Page
Nonlinear System Tools
All Discussions Screenshots Artwork Broadcasts Videos News Guides Reviews

Nonlinear System Tools

Store Page
Nonlinear System Tools > Guides > neelix64's Guides
Not enough ratings
Styles Guide (Advanced)
By neelix64
The simple styles guide but more advanced
   
Award
Favorite
Favorited
Unfavorite
Created by
neelix64
Offline
Category: Gameplay Basics
Languages: English
Posted
11 Dec, 2021 @ 6:20am
22 Unique Visitors
2 Current Favorites
Guide Index
Overview
Basics 
State Head 
Global Head 
Comments
Basics
To get you started please first view the Styles Guide (Simple)
State Head
You can treat every state you create as a separate page in a HTML project. That HTML page would have a <head></head> section where you define scripts and styles.

You can inject snippets in this area on every individual state using the State Head property available in each state. You can find this section in the Story Editor window.


The State Head is only valid for the currently active state. If you want story-wide styles scroll down to the next section.

You can edit this property by right-clicking on it and selecting your favorite editor from the list. Here you can write stuff like:

<script>// some JavaScript snippet</script> <style>/* some CSS style */</style> <link rel="something" src="some_file.ext"/>

For example, you can do stuff like:

<style> .customClass { color: black; margin:30px; padding:30px; box-shadow: 3px 3px 3px #CCC; border: 1px dashed #00F; background: #DCC; } </style>

Then, in the state's situation you can reference this style class as:

<p class="customClass">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> Duis lacus nisl, lobortis sed lacus quis, finibus consectetur metus.

Which would yield the same result as in the simple guide:

Global Head
The Global Head functions almost exactly as the State Head, but instead of injecting the snippet on one state, it injects it across the whole story.

The Global Head is located inside the Content Browser which you can open by clicking on Window -> Content Browser. Inside the Content Browser select the Global Head tab, and right-click on the Global Head section to select your favorite editing program.

In the Global Head you could write stuff like:

<style> button { background: linear-gradient(0deg, rgba(6,18,31,1) 16%, rgba(14,35,69,1) 44%); color:white; } button:hover { background: linear-gradient(0deg, rgba(17,50,85,1) 16%, rgba(28,69,136,1) 44%); } button:active { background: linear-gradient(180deg, rgba(6,18,31,1) 16%, rgba(14,35,69,1) 44%); } </style>

This will change the color of the buttons across the story: