Aesthetics

The standard and specific Element settings commands provide you with basic ways to play with the aesthetics of a given element within a trial’s script. If you want to customize your experiment’s visual rendering though, it is a good idea to consider defining general aesthetics for your experiment.

Each element type comes with its own CSS classes, so you can upload a file named PennController.css under css_includes in your Ibex project and define your own aesthetics.

When an element is printed, it is included in a container element along with two siblings: a before and an after node. As an illustration, here is what the structure of a Text element that you add with [js]newText(“dots”, “…”).print()[/js] looks like:

So if you wanted to add 10px above and below each Text element on the page, you could write this in your PennController.css file (remember that Ibex automatically adds the controller’s prefix):

[css]
.Text-container {
margin: 10px auto;
}
[/css]

Say you want to underline this specific Text element:

[css]
.dots {
text-decoration: underline;
}
[/css]

Or in this case, you could also use the css settings command directly on the Text element:
[js highlight=”2″]
newText(“dots”, “…”)
.settings.css(“text-decoration”,”underline”)
.print()
[/js]