Skip to main content
Version: 17+

Custom CSS

Igloo 17 lets you add your own CSS without editing Igloo's own stylesheets, whether for project-specific styles or to override the theme. It all lives in a single file: wwwroot/css/site.css.

About the "Custom CSS tab" in block settings

The Custom CSS Classes setting on each block has help text telling you to open a "Custom CSS tab" on the theme page. There is no such tab in Igloo, so that text is incorrect. To add custom CSS, use the site.css file described below.

The site.css file​

Add your custom CSS to:

wwwroot/css/site.css

This file is yours to edit. Anything you put here is served on the front end as part of Igloo's stylesheet bundle.

/* wwwroot/css/site.css */
.test-class {
  color: yellow;
}

How it loads​

Igloo combines its stylesheets into a single bundle, in this order:

  1. igloo-base.css — Igloo's base and component styles.
  2. igloo-variants.css — the design, palette and button-variant variables generated from your Design nodes.
  3. site.css — your custom CSS.
  4. Phosphor/style.css — the icon font.

Because site.css is loaded after the base and variant styles, your rules override the theme without needing !important (assuming equal selector specificity).

The same bundle is used for the Block Grid preview in the back office, so changes you make in site.css show up when editors preview content, not just on the live site.

Use the design variables

Where you can, reference Igloo's generated CSS variables (for example var(--palette-text-color) or var(--container-width)) in your custom CSS. Styles written this way stay in step with whatever palette an editor selects, exactly like the built-in blocks.

Styling a specific block​

Every block has a Custom CSS Classes setting (see common settings). Enter a class name there, then target it from site.css:

/* wwwroot/css/site.css */
.promo-pod {
  border: 2px solid var(--palette-highlight-background-color);
}

With promo-pod entered in the block's Custom CSS Classes field, the rule above applies to just that block.

Adding more stylesheets (for developers)​

If you'd rather split your styles across several files (or a package needs to add its own), register extra stylesheets with AssetBundleRegistry from a composer. They're added to the same bundle:

using Igloo;
using Igloo.Composers;
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;

namespace MyProject.Composers;

[ComposeBefore(typeof(IglooAssetComposer))]
public class CustomCssComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        AssetBundleRegistry.AddCssPath("/css/my-extra-styles.css");
    }
}

Use AssetBundleRegistry.RemoveCssPath("/css/site.css") to drop a stylesheet from the bundle.