Custom CSS

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.

The Branding page is where you set your four color variables.

Branding Colors

  • color: var(--color1); – Main Color
  • color: var(--color2); – Accent Color #1
  • color: var(--color3); – Accent Color #3
  • color: var(--color4); – Accent Color #2
.bgm-color2 {
    background-color: var(--color2)!important;
}

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;}