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:



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", "...")