---
title: "Styling"
manual: "Academic StudyPlan"
version: "main"
permalink: "https://docs.typo3.org/permalink/fgtclb/academic-study-plan:styling-markup@main"
source: "Styling/Index.rst"
rendered: "2026-10-17T08:48:10+00:00"
---

# Styling {#styling-markup}

The study plan renders its markup with the class system of the academic
extensions and ships no styling for it. The system, the classes of Bootstrap it
keeps and how a site package styles the markup are described once, in the
chapter [Styling of academic_base](https://docs.typo3.org/p/fgtclb/academic-base/main/en-us/Styling/Index.html#styling).
This chapter shows how the markup of the study plan is built up, and which
classes its script writes. The `data-study-plan-*` attributes the script works
with are described in [Templates](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:templates@main), the example stylesheet to start from
and the rules the element cannot do without in [Style the element](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:styling@main).

-   [The outermost element](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:the-outermost-element@main)
-   [The study plan](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:the-study-plan@main)
-   [What the script writes](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:what-the-script-writes@main)
-   [The script](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:the-script@main)
-   [An example](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:an-example@main)

## The outermost element {#styling-outermost-element}

| Content element | Content element type | Outermost element |
| --- | --- | --- |
| Study plan | `academic_study_plan` | `academic-study-plan` |

The element is rendered inside the layout `Default` of
**fluid_styled_content**, with the frame and the header every content
element has. The study plan is a content element without plugins, so its
outermost class has no plugin part, unlike the pattern
`academic-<extension>-<plugin>` of the plugins of the other extensions.

## The study plan {#styling-plan}

```html
<div class="academic-study-plan" data-study-plan="…" data-filter-label="…">
    <nav class="ace-filter" role="navigation" aria-label="…">
        <ul class="ace-list" data-study-plan-filter>
            <li class="ace-list-item">
                <button class="ace-control" data-category-id="…" style="--category-color: #…;">Category</button>
            </li>
        </ul>
    </nav>
    <div class="ace-semesters">
        <div role="list" class="row">
            <div role="listitem" class="ace-semester col" data-study-plan-semester>
                <div class="ace-semester-header" data-study-plan-semester-header …>
                    <div class="ace-semester-content">
                        <div class="ace-semester-heading">
                            <span class="ace-title"><b>1st semester</b></span>
                            <span class="ace-semester-credits">30 CP</span>
                        </div>
                        <span class="ace-actions"><!-- the expand and collapse icons --></span>
                    </div>
                    <span class="ace-semester-note">…</span>
                </div>
                <ul class="ace-list ace-modules">
                    <li class="ace-list-item ace-module ace-interactive" data-study-plan-module …>…</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="ce-bodytext"><!-- the footer note --></div>
</div>
```

-   The filter list is filled by the script, one `ace-list-item` with a button
    `ace-control` per category of the rendered modules. Each button carries the
    colour of its category as the custom property `--category-color`, for the
    site stylesheet to use.
-   Every semester is a grid column `col` of the `row` with the role
    `list`, so the semesters share the width of the plan.
-   The `ace-actions` of a semester header hold the icons
    `tx-academicbase-action-expand` and `tx-academicbase-action-collapse`. The
    site stylesheet shows one of them, by the classes
    `icon-tx-academicbase-action-expand` and
    `icon-tx-academicbase-action-collapse`, see [The glyphs of a semester header](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:templates-glyphs@main).
-   The footer note is a rich text field and therefore a `ce-bodytext`. It is
    only rendered when the content element has one.

### A module and its dialog {#styling-module}

```html
<li class="ace-list-item ace-module ace-interactive" data-study-plan-module data-categories="…">
    <span class="ace-title">Module title</span>
    <span class="ace-module-credits">5 CP</span>
    <span class="ace-module-note">…</span>
    <button class="ace-module-trigger" data-study-plan-dialog-trigger …>
        <span class="visually-hidden">…</span>
    </button>
    <dialog class="ace-dialog" data-study-plan-dialog …>
        <header class="ace-header">
            <span class="ace-title" aria-hidden="true"><b>Module title</b></span>
            <span class="ace-dialog-credits" aria-hidden="true">5 CP</span>
            <button class="ace-close" aria-label="…"><!-- the icon tx-academicbase-action-close --></button>
        </header>
        <span class="ace-dialog-note" aria-hidden="true">…</span>
        <p class="ace-dialog-description">…</p>
        <audio class="ace-dialog-audio" controls …>…</audio>
    </dialog>
</li>
```

-   Only a module with a description or an audio file has a dialog. It carries
    `ace-interactive`, the trigger and the dialog. A module without one renders
    title, credits and note only.
-   The trigger holds no visible text, its label for a screen reader is
    `visually-hidden`. A site stylesheet usually stretches it over the whole
    module, so the module opens its dialog wherever it is clicked.

## What the script writes {#styling-script-classes}

| Class or attribute | Written on |
| --- | --- |
| `highlighted` | The plan, the modules of the categories chosen in the filter, the semesters holding them, and the chosen filter buttons. |
| `open` | A semester opened in the accordion of a narrow viewport, and a semester holding a highlighted module. |
| `ace-toggle` | The button the script inserts in front of the filter list when the filter is collapsible, see [Collapse the category filter](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:collapsible-filter@main). |
| `hidden` | The filter list while the collapsible filter is closed. |
| `--highlight-color` | The plan, as a custom property, when a category is chosen in the filter: the colour of the category at a quarter of its opacity, for the site stylesheet to colour the highlighted modules and semesters with. |

The attribute `hidden` only hides the list as long as no rule of the site
gives the list a `display`. A site stylesheet that lays out the filter
list keeps it hidden with a rule of its own, as in the example below.

## The script {#styling-script-switch}

`plugin.tx_academicstudyplan.assets.js` switches the script off per site, see
[Skip the script](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:asset-switches@main). The markup stays the same, but the filter, the
accordion of the semesters and the dialogs need a script, see
[What a page without the script shows](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:templates-no-script@main). A script of the project drives them through the
`data-study-plan-*` attributes.

## An example {#styling-example}

Rules in the stylesheet of the site package, scoped by the outermost element:

```css
.academic-study-plan .ace-filter .ace-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding-left: 0;
}

.academic-study-plan .ace-filter .ace-list[hidden] {
    display: none;
}

.academic-study-plan .ace-filter .ace-control.highlighted {
    background: var(--category-color);
}

.academic-study-plan .ace-module {
    position: relative;
}

.academic-study-plan .ace-module-trigger {
    position: absolute;
    inset: 0;
    background: none;
    border: 0;
}

.academic-study-plan .ace-module.highlighted {
    outline: 2px solid currentColor;
}
```

The complete stylesheet of the development instances is linked in
[Style the element](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:styling@main).

To change the markup itself, override the partials as described in
[Templates](https://docs.typo3.org/permalink/fgtclb/academic-study-plan:templates@main). The script keeps working with other elements and classes as
long as the `data-study-plan-*` attributes stay where that chapter puts them.