Skip to main content

Site Customization

You can tailor how Booga Enterprise looks for everyone in your organization. This guide explains how to adjust backgrounds for light and dark themes, set brand colors and your logo, and use optional custom CSS—while understanding when platform-wide settings may override your choices.

For broader product documentation, see Booga Enterprise Docs.

Overview​

Site Customization lets you personalize the visual appearance of your Booga Enterprise tenant. The experience is organized into three areas: Background, Colors, and Advanced. Together, they control page backgrounds (including images and gradients), primary and secondary brand colors, your logo, and optional global CSS when you need finer control than the standard controls provide.

You apply changes explicitly: after you edit settings, use Save Changes to persist them. While the save is in progress, the button reflects a loading state so you know the request is still running.

Prerequisites​

Before you customize the site, confirm the following:

  • You have the Admin or SuperUser role. Without one of these roles, you cannot access site customization.
  • You have brand assets ready: a Logo URL (publicly reachable image), and ideally hex values from your style guide for primary and secondary colors.
  • You know whether your organization relies on light mode, dark mode, or both—so you can verify backgrounds in each theme.

Security Considerations​

Important: Customization changes affect the visual experience for all users in your tenant. Anyone who signs in will see the backgrounds, colors, logo, and (if you add it) custom CSS you configure. Treat logo URLs and CSS as part of your tenant’s public presentation layer: use trusted sources and review custom rules before saving.

Background Settings​

Open the Background tab. You configure theme-aware settings: light and dark modes each have their own options, so you can keep both themes readable and on-brand.

Light theme​

For the light theme, you can set:

  • Background Type: Choose how the background is rendered—typically a solid color, an image, or a gradient, depending on what your layout needs.
  • Background Color: The default solid color is #f8fafc. Adjust it to match your brand or contrast requirements.
  • Background Image: Provide an image URL. You can enable parallax so the background moves subtly as users scroll, when that option is available for your configuration.
  • Gradient: When you use a gradient, configure the start and end colors so the transition fits your brand.

Dark theme​

Dark mode offers the same kinds of controls as light mode, with defaults suited to dark UI surfaces. The default background color is #232730. For gradients, typical defaults use #1a1e26 and #232730 as start and end colors—tune these to match your dark-theme palette.

After you adjust either theme, click Save Changes to apply your updates.

Brand Colors​

Switch to the Colors tab to control accents and identity:

  • Primary Color: This is the main accent used across the interface. The default is #0891b2. Click the color swatch to open the color picker, then choose a hue or enter a hex value that matches your brand.
  • Secondary Color: A supporting accent for secondary actions and subtle emphasis. The default is #6b7280. Use the same picker workflow as for the primary color.
  • Logo URL: Enter a URL that points to your company logo image. The application loads the image from that address, so the URL must be reachable by users’ browsers (HTTPS recommended).

Click Save Changes when you are satisfied with your color and logo settings.

Advanced CSS​

The Advanced tab exposes a CSS editor—a multiline text field using a monospace font so rules are easy to read and edit. Use it when you need rules that go beyond the built-in background and color controls.

  • Enter custom CSS that applies broadly across the tenant experience (exact scope follows platform behavior).
  • The editor is designed for clarity; treat it as you would any code: small, testable changes beat large pasted stylesheets.

Important: Custom CSS overrides other style settings. Built-in theme colors, backgrounds, and component styles may be superseded by your rules. Use this tab sparingly and test in both light and dark themes after each change.

Global override system​

A SuperUser can activate a global customization that applies across tenants. When that global customization is active:

  • Your tenant-specific site customization may be locked: inputs are disabled so you cannot change local settings until the override changes or your tenant is handled differently.
  • A warning banner explains that a global override is in effect, so you understand why controls are unavailable.
  • If your tenant is excluded from the global override, your own settings continue to apply and you can edit them as usual.

If you need tenant-specific branding but see locked controls, contact your SuperUser or platform operator to confirm exclusion or policy.

Loading default settings​

If you want to discard local adjustments and return to the platform’s baseline appearance, click Load Default Settings. That action restores defaults in the UI; you still need to click Save Changes to persist those defaults (or any edits you make afterward). Until you save, other users may not see the reset.

Best practices​

  • Align with your style guide: Enter primary and secondary colors from approved brand documentation rather than guessing from screen samples.
  • Test both themes: Switch your OS or application theme between light and dark and confirm backgrounds, contrast, and readability.
  • Keep logos lightweight: Prefer optimized images (for example under about 200KB) so pages load quickly on slower networks.
  • Limit custom CSS: Prefer the standard tabs for colors and backgrounds. Reserve the Advanced tab for targeted fixes; complex or global selectors can break layouts when the product updates.

Troubleshooting​

  • Settings are locked: A global override is likely active. Contact your SuperUser to confirm whether your tenant can be excluded or when restrictions will lift.
  • Colors not applying: Click Save Changes, wait for the operation to finish (watch the loading state on the button), then refresh or reload the page if the UI does not update immediately.
  • Logo not showing: Confirm the Logo URL is publicly accessible without authentication, uses HTTPS where possible, and points directly to an image format browsers support (for example PNG or SVG). Test the URL in a new browser tab.

⏱️ Read time: 10 minutes | 📊 Difficulty: intermediate