cre8magic – Magic Context

The Magic Context adds a bunch of classes to the <body> or a wrapper <div> tag which contain information about the current state.

This allows you to then write CSS rules, which change the look / feel of the page based on certain aspects.

Example

The wrapper <div> could look like this:

<div id="cre8magic-root" class="page-35 page-root-29 page-parent-33 site-1 nav-level-3 theme-mainnav-variation-right theme-variation-centered">
  <!-- the contents of the page-->
</div>

This tells you a bunch of things such as:

This is page #35 - allows you to do things like special colors for exactly this page
The page is in the tree of the root #29 - so you could use special colors for all the pages in this branch
The pages parent is #33 - again letting you write custom CSS
We are on site #1 - in case you have different styles based on the site number
We are currently on the nav-level 3 - this could affect your breadcrumb or something
We are in a specific layout type and navigation type

How this Works

Basically all this happens automatically, if your json configuration has magicContext of something like this:

{
  "magicContext": [
    "page-[Page.Id]",
    "page-root-[Page.RootId]",
    "page-parent-[Page.ParentId]",
    "site-[Site.Id]",
    "nav-level-[Menu.Level]",
    "theme-mainnav-variation-right",
    "theme-variation-[Layout.Variation]"
  ]
}

You can of course add your own rules with other placeholders to make this happen.

Configuration

You can determine if this will be added to a <div> or the <body> using the setting magicContextInBody
- If it’s on the body, it will be put there using JavaScript, so there may be a minimal flash-of-unexpected-styling
- if you put it in the div, it will always be there
You can also change the id of the <div> tag if you want to change how your CSS behaves. The id can be set on the magicContextTagId

Missing Features

As of 2022-10 there are no magic context classes for languages yet, as Oqtane doesn’t fully support Multi-Language. We’ll add it as soon as possible.

History

Added in v0.0.1 2022-10