3.4. CSS selectors for custom themes

Contents

In this tutorial are listed some most important selectors for your theme CSS files, which are referring to the class and to some id properties of the HTML tags, which Allmice CMS Classic Edition prepares as output.

Many of these selectors are more beneficial, if used in combination with some HTML tag identifiers.
To better understand, how to use these selectors, it is suggested to check out also:
1) The CSS files of themes, which are provided with Classic Edition.
2) The class/id properties of HTML tags in source code in browser, while displaying various pages of a website, which uses Allmice CMS.

Some of the following selectors may have changed in the last versions of the Classic Edition. Check out also the CSS files in themes directory to find such changes.

Selectors for form related content

input[type="text"].wide
select.single
select.multiple
select.pagin-select
option.pagin-option
select.wide-element
.radio-set
.radio-set2
.check-set
.radio-button
.radio-button2
.checkbox

.form-field
.label-text
.label-password
.label-textarea
.label-select
.label-checkboxes
.label-radio-buttons
.guide

Selectors for region areas (block content)

Search block
.search-set-wrap
.search-phrase
.search-button

User and language blocks
.lang-label,
.user-label
.lang-space-wrap,
.user-space-wrap
.lang-block-space
.user-block-space
.user-block
#lang-option
#lang-option-button
.login-form-area
.language-form-area
.window-title
.close-button
.language-block-header
.user-block-header
.language-block-content
.user-block-content
.lang-list-text

Navi block
.navi-area
.navi

Menu block
.menu-area
.menu
.menu-ap /*menu active parent item*/
.menu-ac /*menu active child item*/
.menu-pp /*menu passive parent item*/
.menu-pc /*menu passive child item*/
.menu-title
.menu-content

Global Core module output for GDPR purposes
.consent-area
.consent-text
.consent-button
.consent-signal

Post/comment area for Page module entries
.post-wrap
.post-creator-name
.post-creating-time
.post-editor-name
.post-editing-time

Various

Message areas
.message-area
.error-messages
.green
.success-note
.red
.problem-note
.blue
.help-area

Other
.avatar-image /*Profile module specific*/
.context /*Theme module specific*/
.wrap
.left
.right
.container
.link-area

Layout selectors

The layout selectors are more customizable, not referring so much to the output content of Allmice CMS, identifiers can be used and changed inside a particular theme.

Header area layout selectors
.header-area
.site-name-logo-set
.logo-wrap
.logo-link
.site-name
.site-name-img-wrap
.site-name-img-link

Other layout selectors
.header-bar
.middle-area
.content-area
.content-cell
.content
.content-body
.content-cell
.footer-area-set
.footer-area
.footer-cell
.gap