Style#

class alfred3.element.misc.Style(code: Optional[str] = None, url: Optional[str] = None, path: Optional[str] = None, priority: int = 10)[source]#

Bases: alfred3.element.core.Element

Adds CSS code to a page.

CSS styling can be used to change the appearance of page or individual elements.

Parameters

code – CSS code.
url – Url to CSS code.
path – Path to a .css file.
priority – Controls the order in which CSS files are placed on a page. Lower numbers are included first. Can be useful, if you have trouble with overriding rules. In everyday use, it’s fine to stick with the default.

Notes

A style is added to a specific page, and thus only affects the layout of that page. To change the appearance of the whole experiment, you can define your styles in a .css file in your experiment directory and reference it in the config.conf in the option style of the section layout.

See also

How to reference a CSS file in the config.conf
See Element.css_class_element and Element.css_class_container for information on element CSS classes and IDs.
The method Element.add_css() can be used to add CSS to a specific element.

Examples

Minimal example, turning the color of a specific text element red. The element is selected by its id:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):
        self += al.Text("Element 1", name="test_el")
        self += al.Style(code="#test_el {color: red;}")

Minimal example, turning the color of all text elements on a specific page red. The elements are selected by their class:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):
        self += al.Style(code=".Text-element {color: red;}")

        self += al.Text("Element 1", name="test_el1")
        self += al.Text("Element 2", name="test_el2")

Methods

`add_css`	Adds CSS to the element.
`add_js`	Adds Javascript to the element.
`added_to_experiment`	Tells the element that it was added to an experiment.
`added_to_page`	Tells the element that it was added to a page.
`prepare_web_widget`	Hook for computations for preparing an element's web widget.
`render_inner_html`	Renders the element template `element_template`.

Attributes

`base_template`	Base template for the element, which will be used to hold the rendered element template.
`converted_width`	List of bootstrap column widths at different screen sizes.
`css_class_container`	Returns the name the element container's CSS class.
`css_class_element`	Returns the name of the element's CSS class.
`css_code`	A list of tuples, which contain a priority and CSS code.
`css_urls`	A list of tuples, which contain a priority and an url pointing to CSS code.
`display_standalone`	If True (default), the element will be displayed as usual on its own.
`element_template`	The element's specific, inner template.
`element_width`	Returns a string of column width definitions.
`exp`	The experiment session to which this element belongs.
`experiment`	Alias for `exp`
`font_size`	Font size
`js_code`	A list of tuples, which contain a priority and Javascript.
`js_urls`	A list of tuples, which contain a priority and an url pointing to JavaScript.
`name`	Unique identifier for the element.
`page`	The page to which this element belongs.
`position`	Position of the whole element on the page.
`section`	The direct parent section of this element's page.
`short_tree`	String, giving the exact position in the experiment.
`should_be_shown`
`showif`	Conditions that have to be met for the element to be shown.
`template_data`	Dictionary of data to be passed on to jinja templates.
`tree`	String, giving the exact position in the experiment.
`web_widget`
`width`	Element width