Customizing the Look of Your Program (for CSS Smarties) 🔗
CSS smarties can add custom
*classes
beneath individual elements of GuidedTrack, or beneath the
*settings
keyword.
If you are embedding a GuidedTrack program on your website, you
can use the classes that you already have. If you cannot modify
the stylesheets of your site, or if you are sharing the "Run"
link of your program, you can use
*html
to define the style inside the program.
Either way, once the classes are defined, you can do something like:
*header: Hello, Person!
*classes: my-fancy-header-class
In the above example, "my-fancy-header-class" is a CSS class defined in a linked stylesheet when embedding this program in an HTML page.
By indenting
*classes
under just about any individual elements (buttons, questions,
headers, even text) and adding the CSS code, you can snazzify
your program so that specific elements look just the way you
want them. The classes you create will appear in the HTML that
GuidedTrack generates. Then, you can include rules for these
classes inside the CSS of your website.
If you want to change something globally in your program, you
can indent some options beneath the
*settings
keyword. For example, if you want to right-align all the text in
your program, you can write something like the following:
*settings
*classes: text-right
Of course, you can also override all of GuidedTrack's CSS on
your website. But, if you want to override elements using the
*settings
menu, or just have one individual element like a single button
be rebelliously unique,
*classes
has got you covered.
While it's probably most common to write your own CSS in contexts where you're embedding your program in an HTML page, it is also possible to write custom CSS in programs that aren't embedded. For example:
------------
-- PAGE 1 --
------------
*html
<style>
.my-fancy-header-class {
color: purple;
font-weight: bold;
font-size: 96px;
}
</style>
*header: Hello, Person!
*classes: my-fancy-header-class
*question: How are you today?
------------
-- PAGE 2 --
------------
*header: All done!
*classes: my-fancy-header-class
Goodbye!
The only drawback to this approach is that the custom
<style></style>
tags written above in the
*html
block will be erased when the page changes (e.g., after the user
answers the "How are you today?" question and the program moves
from PAGE 1 to PAGE 2). So, even though the header "All done!"
will have the "my-fancy-header-class" applied to it, the CSS
definition for that class will already have been erased; so the
header will appear as a normal header without any custom
styling. However, writing styles inside your program this way
can still be useful if you only need them every once in a while
instead of on every page.
Next: Sharing a run URL with custom-loaded variables