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 newText("dots", "...").print() looks like:

.PennController-elementContainer
.PennController-Text-container
.PennController-dots-container

.PennController-before
.PennController-Text-before
.PennController-dots-before
.PennController-Text
.PennController-dots
"..."
.PennController-after
.PennController-Text-after
.PennController-dots-after

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):

.Text-container {
  margin: 10px auto;
}

Say you want to underline this specific Text element:

.dots {
  text-decoration: underline;
}

Or in this case, you could also use the css settings command directly on the Text element:

newText("dots", "...")
    .settings.css("text-decoration","underline")
    .print()