Aesthetics

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 Aesthetics folder (css_includes on the original Ibex Farm).

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 .settings.before and .settings.after commands). Each node receives specific CSS class names.

When you use [js]newText(“dots”, “…”).print()[/js], this is what gets added to the page:

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

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

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 [css]font-size: 2em;[/css] on a Text element’s node, any text added with .settings.before or .settings.after would remain unaffected.

Say you want to underline this specific Text element:

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

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