Phonemos User Guide

CSS Classes

The following CSS classes are globally available and can be targeted in your custom CSS.

Default Layout

When you don't customize the layout (HTML) then the following will be used. If you use a custom HTML then this does not apply.

Classname

Element

Description

phonemos_root

div

The root div of the page

phonemos_content

div

The content section of the page

phonemos_navigation

aside

Content to the left that contains the navigation tree

phonemos_pageTitle

h1

Title of the Phonemos Page

phonemos_titleContainer

div

Container of the phonemos_pageTitle if this is a page with an image

phonemos_titleImage

div (containing img)

Title image for the page (inside phonemos_titleContainer)

phonemos_pageContent

article

Content of the Phonemos Page (the rendered wiki content)

phonemos_language_switch

div

Language switcher dropdown (only visible if topic has multiple languages)

phonemos_search

div

Container for the search box and result

phonemos_search_query

div (contains input)

The input field (search query)

phonemos_search_loading_spinner

div (with i)

Spinner shown when results are loaded/updated

phonemos_search_result

div (contains ul)

Container for the search result

Default Stylesheets

To make styling easier, the following default CSS files can be included:

Path

Description

/_assets/default.wikipage.css

Default styling of the wikipage content.

/_assets/default.layout.css

CSS for the default layout structure.

/_assets/themes.css

Themes for the default layout. Use by applying a class to html, e.g. <html class="red-theme">