Eblasoft
EspoCRM Ebla Theme Branding Tutorial

How to Customize EspoCRM with Ebla Theme

Eymen Elkum headshot Eymen Elkum
Professional EspoCRM interface customization represented by theme controls and color palettes

Configure professional EspoCRM branding, colors, border radius, and scoped custom CSS with Ebla Theme and Look and Feel profiles.

Ebla Theme centralizes EspoCRM branding and interface styling in the administration area. It lets administrators create theme-specific visual profiles instead of repeatedly editing application files.

Requirements

Install a release of Ebla Theme compatible with your EspoCRM version and sign in as an administrator. Test branding and custom CSS in a non-production environment before applying it to all users.

Choose the correct settings level

Ebla Theme provides two levels of customization:

  • Look and Feel profiles for colors and CSS that should apply to selected themes;
  • Ebla Theme settings for global values that should apply across themes.

Use Look and Feel profiles for most visual work. Leave global color fields empty unless the same override should affect every theme.

Step 1: Create a Look and Feel profile

  1. Open Administration.
  2. Under Ebla Extensions, select Look And Feel.
  3. Click Create Look And Feel and give the profile a descriptive name.
  4. Select the theme or themes that should use it.
  5. Configure the required colors and save.

A profile with no assigned theme applies to all themes. On a fresh installation, Ebla Theme can create starter profiles when no Look and Feel records exist; existing profiles are not overwritten.

Step 2: Set the default profile

Open Administration → Ebla Theme. On the Ebla Theme Settings tab, use Default Look And Feel By Theme to select the default profile for each active theme, then save.

EspoCRM Ebla Theme settings mapping each active theme to its default Look and Feel profile

Default Look And Feel By Theme is configured in Ebla Theme Settings.

When more than one profile is available for the active theme, users can switch profiles from the palette control in the navbar. When only one profile is available, the switcher stays hidden.

Step 3: Configure the visual palette

Use the profile to set only the colors required by your brand. Available controls include:

  • navbar, menu, and page backgrounds;
  • primary, success, warning, danger, and information colors;
  • text and neutral colors;
  • panel, border, button, popover, and login surfaces.

Ebla Theme derives related interface variables from its driver colors. Review list views, dropdowns, modals, calendars, and both light and dark content before adding extra CSS overrides.

Step 4: Set the border radius

Use Border Radius to control the roundness of buttons, panels, dropdowns, and other common components:

  • use 0 for square corners;
  • use a small positive value for a restrained appearance;
  • use a larger value only after checking compact tables, menus, and mobile layouts.

One shared setting produces a more consistent result than separate selectors for every component.

EspoCRM Ebla Theme Look and Feel profile showing brand colors, interface colors, and Border Radius

A Look and Feel profile keeps palette values and Border Radius together.

Step 5: Add scoped custom CSS

Open the profile’s Custom CSS tab for theme-specific adjustments. Use Administration → Ebla Theme → Custom CSS only when a rule must affect every theme.

EspoCRM Look and Feel profile Custom CSS tab with the available root-variable reference

Profile Custom CSS is appended when that Look and Feel profile is active.

For example, these current EspoCRM CSS variables remove the standard panel and top-bar shadows:

:root {
    --default-box-shadow: none;
    --top-bar-box-shadow: none;
}

Keep custom rules short and scoped. Prefer a stable class or EspoCRM CSS variable over selectors that depend on a page’s temporary DOM structure.

Portal styling

Open Administration → Portals, edit the target portal, and put portal-only rules in its Custom CSS field. Do not add portal selectors to the main application CSS unless the same rule is intentionally shared.

Step 6: Configure branding assets

Ebla Theme can also configure:

  • the login background, side image, overlay, and welcome message;
  • navbar logos and browser favicons;
  • active themes and languages shown in navbar switchers;
  • the navigation style and available icon set.

Use correctly sized source images and verify contrast against the actual overlay and form background. Font Awesome Pro requires a separate Font Awesome license.

Test the result

  1. Save the profile and reload EspoCRM.
  2. Test the assigned theme and any fallback theme.
  3. Check the login page while signed out.
  4. Test list, detail, edit, modal, dropdown, and calendar views.
  5. Test desktop, tablet, and mobile widths.
  6. Confirm that text, focus indicators, buttons, and status colors remain readable.
  7. Switch between available profiles and confirm that global settings do not override them unexpectedly.

Common problems

A profile does not appear in the switcher

Confirm that it applies to the active theme. The switcher is intentionally hidden when only one profile is available.

Colors do not match the profile

Check whether the same color is also set globally under Ebla Theme. Clear the global value when the profile should control that theme.

Custom CSS affects a portal unexpectedly

Move portal-specific rules to the portal CSS setting and narrow selectors that are shared between the main application and portal.

Back to Insights