You have the power to create custom content for the DirectScale Admins (Web Office Admin, Corporate Admin, and eCommerce Admin), Web Office (sometimes called Back Office), and eCommerce Shop (also known as the Retail Shop). This can include:

📘Note

If you need answers, ideas, or consulting from an expert, see the DirectScale Marketplace.

⚠Important

When you develop custom content, DirectScale’s storage of your content is not a source control system. There is no way to roll back or undo custom content changes made within DirectScale’s system. You may want to consider storing and developing your content in your source control system. Using a source control system lets you track changes and versions.

HTML Editor

For more advanced pages and widgets, where the HTML needs to be written by hand, you have an HTML editor. All of the features available in the Rich Text view are available here. The only difference is that three code-aware editors (provided by the open-source project CodeMirror) are provided instead of a rich text editor.

The editors allow you to write HTML, JavaScript and CSS separately, delivered together when the widget/page is loaded.

Razor Syntax Integration

Razor is a view engine supported in ASP.NET Model View Controller that allows you to mix HTML with server-side code using C#. DirectScale has integrated this syntax into the Custom Content Editor to create custom pages and widgets for the Web Office and eCommerce Shop.

CSS Editor

CSS can be entered either as regular CSS or SASS.

DirectScale automatically includes the following SASS variables you can use. The benefit of using these over using hard-coded color values is that if your site colors ever change, the CSS will automatically reflect those changes.

$color-one (Main Color)
$color-primary (Accent Color #1)
$color-accent (Accent Color #2)
$color-four (Accent Color #3)

You should limit the scope of your CSS not to break other parts of the site.

It's a good idea to wrap your widget or page HTML with a CSS class and then use that class for all your styles.

<div class="my-custom-widget">    
    <p class="welcome-text">Welcome!</p>
</div>

.mycustomwidget .welcome-text {color: red;}

Learn how to link to a custom CSS stylesheet

JavaScript Editor

Write your custom JavaScript using AngularJS (version 1). The DirectScale platform is written as a Single-Page App using AngularJS.

Rich Text Editor

Using the Rich Text Editor is appropriate for simple pages that consist of static or per-user data, static or translated strings, images, hyperlinks, video, and rich text.

The interface consists of an editor provided by the open-source project TinyMCE.

You may want to convert the results to Plain HTML and check for markup that may interfere with Razor syntax's proper parsing.

The Rich Text Editor is not available in the eCommerce Admin.