GuidedTrack Docs

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 !important;
			font-weight: bold !important;
			font-size: 96px !important;
		}
	</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.

Also note that, in some cases, you may need to add the !important rule to ensure that you override GuidedTrack's styles for the element whose look you need to alter, as in the example above.