Versions Compared

Old Version 1

changes.mady.by.user Documenter

Saved on

compared with

New Version Current

changes.mady.by.user Documenter

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Yes in themes created in

For theme layouts created from 2022 onwards, you have access to .css variables to use in the Scripts & Styles .css editor.  

Using .css variables cuts down human

in error

errors, especially if you

are

're trying to remember

exactly what

the specific colour value

is for

of your Primary / Secondary / Alternate style guide colour scheme or font stack

in use

.

How to use


Here's a guide to using .css variables:

https://www.w3schools.com/css/css3_variables.asp


Example of .css variable usage

.class-name {
    background: var(--color-primary);
    color: var(--color-default);
    font-family: var(--font-stack-bold);
}


Standard Variables Available:

.css Variable

Purpose

.css Variable

Purpose

--color-default:
Default style guide colour
--color-default-light:
Default style guide colour (light variation)
--color-default-dark:
Default style guide colour (dark variation)
--color-primary:
Primary style guide colour
--color-primary-light:
Primary style guide colour (light variation)
--color-primary-dark:
Primary style guide colour (dark variation)
--color-secondary:
Secondary style guide colour
--color-secondary-light:
Secondary style guide colour (light variation)
--color-secondary-dark:
Secondary style guide colour (dark variation)
--color-alternate:
Alternate style guide colour
--color-alternate-light:
Alternate style guide colour (light variation)
--color-alternate-dark:
Alternate style guide colour (dark variation)
--color-black:
Black style guide colour
--color-black-light:
Black style guide colour (light variation)
--color-black-dark:
Black  style guide colour (dark variation)
--color-grey:
Grey generic colour
--color-grey-light:
Grey generic colour (light version)
--color-grey-dark:
Grey generic colour (dark version)
--font-stack-system:
Framework default font stack
--font-stack:
Your font stack in use
--font-stack-bold:
Bold Font Family
--font-stack-headings:
Heading Font Family
--font-size-core:
Default core font size of theme
--font-stack-alternate:
Alternate Font Family
--mobile-first-breakpoint-small:
Mobile First responsive breakpoint small
--mobile-first-breakpoint-medium:
Mobile First responsive breakpoint medium
--mobile-first-breakpoint-regular:
Mobile First responsive breakpoint regular
--mobile-first-breakpoint-large:
Mobile First responsive breakpoint large
--mobile-first-breakpoint-xlarge:
Mobile First responsive breakpoint xlarge
--mobile-first-breakpoint-xxlarge:
Mobile First responsive breakpoint xxlarge
--mobile-first-breakpoint-xxxlarge:
Mobile First responsive breakpoint xxxlarge
--mobile-first-breakpoint-full:
Mobile First responsive breakpoint Full Width
Using

With your

browsers

browser's Dev Tools, you can see them displayed for your site theme

, for

. Here's an example:

Image Removed

Image Added

Panel

On this page:

Table of Contents





Additional Information

Minimum Version Requirements
Multiexcerpt
MultiExcerptNameMinimum Version Requirements

4.13.02

Prerequisites
Multiexcerpt
MultiExcerptNamePre reqs

Upgrade to version 4.13.02

Self Configurable
Multiexcerpt
MultiExcerptNameSelf Configurable

Yes

Business Function
Multiexcerpt
MultiExcerptNameBusiness Function

Content

BPD Only?
Multiexcerpt
MultiExcerptNameBPD Only

Yes

B2B/B2C/Both
Multiexcerpt
MultiExcerptNameB2B/B2C/Both

Both

Third Party Costs
Multiexcerpt
MultiExcerptNameThird Party Costs

N/A

Multiexcerpt
hiddentrue
MultiExcerptNameFeatures List Headers

Macro Instructions for carrying Article Information through to Feature List

Minimum

Version

Requirements

BPD

ONLY

Business Function

CMS Category

B2B
B2C

BOTH

Feature

Feature Description

(Written for our customers and can be pasted into comms sent to them)

Additional info

Pre-Reqs/
Gotchas

Self Configurable

Ballpark Hours
From CV

(if opting for CV to complete self config component)

Ballpark Hours
From CV

(in addition to any self config required)

Third Party Costs

Instructions for carrying Excerpts through from this page to the Feature List

Article Page:

Add macro  / Multiexcerpt (or copy and existing excerpt and edit) or (Copy existing page and place content into existing excerpt macros)

On Features List page:

Click in the Cell to be populated  / add macro /  Multiexcerpt Include / Select the Article page and the excerpt (or copy another feature line and edit the 'Article page' source.

Related help


Related help

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
excludeCurrenttrue
cqllabel = "scripts-styles" and type = "page" and space = "KB"
labelsnew ver41302 how-to

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
titleSite Design
typepage
excludeCurrenttrue
cqllabel = "scriptssite-stylesdesign" and type = "page" and space = "KB"
labelsnew ver41302 how-to cms banners