Table of Contents

cre8magic – Oqtane Theme System

services, components, and utilities for Oqtane Themes

Warning

These parts of cre8magic ♾️ are not ready yet.

We're writing docs as we develop, but you should not use it as of now.

Introduction

Creating awesome themes for any platform is a lot of work, and needs a lot of skill. There's Bootstrap to master, as well as HTML, CSS and JavaScript to conjure up. And then there's the platform-specific stuff to learn, such as Blazor and the intricacies of Oqtane itself.

The cre8magic library is a collection of services, components, utilities and documentations that help you create themes for Oqtane with less effort and more fun.

2sic, the inventors of cre8magic, have been creating themes for more than 1'000 websites since 1999. That's a lot of experience packed together. Our goal was to ensure that every theme we create is as good as it can be, and that we can create it as fast as possible.

Let's take a simple example: System-Menus. They usually show a bunch of links, some within the normal structure of the site, and some taken out of the normal navigation structure just for the footer. Typically these pages are officially "hidden" in the navigation, since we don't want them in the main menu, but still need to be accessible. This is how we would do it in cre8magic using the MagicMenu Oqtane Bootstrap5 component:

@using ToSic.Cre8magic.OqtaneBs5
<!--
In this case:
 - 1 is home
 - 5 is a hidden page in the navigation (hence the !), of which want to show the children
-->
<MagicMenu Settings='new() { Pick = "1, 5!/" }' />

Now let's assume you need to Tailor the menu a bit more using a Blueprint. We need to add 'sys-nav' to the class of the <ul>:

<MagicMenu Settings='new() { Pick = "1, 5!/" }' Blueprint='new() { Parts = new() { { "ul", new() { Classes = "sys-nav" }}}}' />

Then again, let's place all these settings in a central location called the Settings Book and just name this menu part "System-Menu":

<MagicMenu Name="System-Menu" />
  • By just having a name, and no parts...
  • Maybe rename the theme parts a PartMap or NameMap or Rename for the special cases
  • in this case we could always use name - for anything
  • and if there is a part-map, it would redirect, but normally you wouldn't do this.
  • would also simplify API to Name and possibly BlueprintName - but TBH that could be done with the Rename section...
    • which could then just have spell and blueprint as properties

explain

Planned structure

  1. Introduction (maybe inside overview? or before)

  2. Overview, explaining what's in the box - basically what things it can solve

  3. Get Started - step-by-step guide to get started and simple use case

  4. Acts

  5. Common Setup

  6. Razor Components

  7. Magic Themes

  8. Magic "Buttons" - needs better name

  9. Magic OqtaneBs5 Razor Components

  10. Foundation

  11. Magic Act

  12. Magic Blueprints

  13. Magic Tailors

  14. Magic Settings

  15. Magic Book

History

  1. Added in v0.0.1 2022-10 with 80% coverage of what DDR Menu had in DNN
Edit this page