Adding custom CSS

Multiple 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 to your PCIbex Farm project’s folder.

note

As explained in the original Ibex manual, every CSS class you define in PennController.css will be automatically prefixed with PennController-.

When an element is printed, it adds four HTML nodes to the page: one node, the container, which embeds three other nodes. One embedded node is the element itself, and the two other nodes come before and after the element’s node (see the standard .before and .after commands). Each node receives specific CSS class names.

For example, when you use newText("dots", "...").print(), this is what gets added to the page:

.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

If you want to add 10px above and below each Text element on the page, you can write this in your PennController.css file (remember Ibex’s automatic prefix policy—see note above):

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

It is important to understand and keep in mind that elements’ nodes are embedded in a container, along with a before and an after node. Most often, you will want to target the container rather than the element’s node itself. For example, if you defined a CSS rule font-size: 2em; on a Text element’s node, any text added with .before or .after would remain unaffected, but they would be affected if you applied that rule to the container instead.

As we said, the rule above targets any Text element. If you need to be more specific, you can target element names. For example, the following CSS rule will only underline the Text element named dots in your experiment:

.dots {
  text-decoration: underline;
}

Another option is to use the command .css directly on an element in your experiment instead of editing PennController.css:

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