Brand Icon ScaffolderJS

← Back to Documentation

Customizing Design and Settings

Audience: Site owners (end users)

ScaffolderJS employs a robust theming capability that applies consistent colors and typography globally across every page on your site.

Global Color Palettes

You don't need to manually define the shade of every single button. Instead, you declare a global theme using the intuitive Color Editor.

  1. In the Floating Builder Panel, locate the Palette (Paintbrush) icon in the top header controls.
  2. Clicking it opens the comprehensive color settings modal for the whole site.
  3. Your theme is constructed logically via primary, secondary, text, and background mappings.
  4. If you adjust the Primary Color, you instantly see all matching brand buttons and notification accents update across the live preview.

The Media Library

Whenever you click to edit an image, whether via the live preview panel or through the specific Form Editor, you summon the Media Library.

The Media Library seamlessly organizes imagery intended only for your current site. You have several choices:

  1. Upload: Drag and drop professional photos from your computer or utilize the file picker.
  2. Select: Reuse a picture you've already uploaded to your library from previous editing sessions.
  3. Clear Image / None: If an image is completely optional (such as a generic hero section background pattern), the Media Library allows you to select None, which totally unsets the value.
  4. AI Generation (Coming soon): Generate fresh contextual images on the fly via AI directly from within the Media Library picker.

Modifying Site Settings (Global Options)

In addition to individual page properties, ScaffolderJS properties apply everywhere on the website. To see and change them:

  1. Click the Site Settings (Gear) icon in the Floating Builder Panel.
  2. Site Name: Changes the formal global title displayed in your visitor's browser tab.
  3. Logo: Upload your brand logo to be utilized in your website's primary Navigation Header and Footer.
  4. Social Links: Quickly drop in URLs linking to your Facebook, Twitter, Instagram, or LinkedIn profiles. ScaffolderJS handles appropriately placing those links natively as icons across the site design.

Reversing Mistakes with Version History

If you realize a new global design theme is less effective than you hoped, use your dashboard to immediately reverse the changes!

  1. Close the Site Builder utilizing the Home icon.
  2. On your site card in the dashboard, open the More actions (...) menu.
  3. Select Version History.
  4. You can review all past deployed configuration saves for this individual site, instantly reverting to a previously functional layout.