Custom Themes/CSS

Applying custom themes and CSS to your forms and interfaces

Applying Custom CSS Stylesheets

The PixieBrix Form and Document builder supports applying one or more hosted CSS Stylesheets to the document under the Advanced: Theme configuration group.

PixieBrix only supports CSS stylesheets hosted from https: URLs. If you need assistance hosting your stylesheet, contact [email protected].

Configuring a custom CSS Stylesheet

Adding CSS class names to elements

To add a CSS class name to an element in a document, add the class name to the Layout/Style field. Do not include the . prefix when setting the class name:

Setting the CSS class name on an element

In your CSS file, you can apply a style to the element using the CSS class selector:

.customComponentClassName {
   background-color: purple;
}

Disabling the default PixieBrix Theme and Styles

To disable PixieBrix's default theme, toggle on "Disable Parent Styling". PixieBrix uses the Bootstrap 4 component system.

See How do I create a custom color scheme? for instructions on creating a new base theme

Developing with Local Stylesheets

To use a CSS file hosted locally, you must serve it using HTTPS. The easiest way to serve a local file with HTTPS is with a free ngrok account. ngrok supports serving directory files without running a local server:

When serving a local CSS file with ngrok, any changes made might not appear immediately. See I updated my stylesheet content, but the changes aren't showing

Windows

ngrok http "file://C:\Users\david\Directory Name"

Mac/Linux

To serve a specific directory:

ngrok http "file:///path/to/directory"

To serve your current working directory:

ngrok http file://`pwd`

Example Layouts

Flexbox layouts are the modern way to create row and column layouts on the web. PixieBrix's Bootstrap component system includes utility classes for working with flexbox. However, there are some situations that require additional CSS.

Using flexbox to create horizontal form layout

PixieBrix's embedded forms by default are in a vertical orientation. To have field appear side by side, use flexbox to override the style of the form row class:

.rjsf {
    .form-group > div {
        display: flex;
        /* Optional, include a gap between the fields */
        gap: 1em;

        .row {
            display: block;
        }
    }
}

Using flexbox to create a scrollable container

To create a scrollable area, create a panel with two container elements attached to the root:

A panel with two containers attached to the root

In the Layout/Style field for each, assign each container a classname, e.g., scrollContainer and footerContainer.

In the CSS theme, apply a apply a column flex to the root, using display: flex and flex-direction: column.

For the scrollable container, use the property flex-grow: 1 to direct the container to grow to fill the available space.

To apply a scrollbar, assign an overflow: auto or overflow: scroll property.

/* Set document root style */
div:has(> .scrollContainer) {
    display: flex;
    flex-direction: column;

    /* Account for the fixed header/tab-strip at the top of the sidebar */
    height: calc(100vh - 95px);

    .scrollContainer {
        flex-grow: 1;
        overflow: auto;
    }

    .footerContainer {
        flex-grow: 0;
    }
}

Automatically scroll list elements

To automatically scroll list items, you can use a CSS trick: rendering the items in reverse order, and apply a column-reverse flex layout.

Reverse the elements using the Javascript Brick

Reverse the elements using the Javascript brick:

function (args) {
  const { elements = [] } = args;
  return elements.toReversed();
}

Add a container element with an empty spacer row and list of rows

The element tree should look like:

• Container: with classnames: d-flex flex-column-reverse overflow-auto

• Row: an empty row used as a spacer, with classname: flex-grow-1

• List: a list of rows, being passed the reversed element array

Layout for a auto-scrolling list of rows

Frequently Asked Questions

How do I create a custom color scheme?

PixieBrix uses the Bootstrap 4 component system. The easiest way to create a custom color scheme is to use a theme builder and export the minified CSS. We recommend the following online tools:

• Bootstrap Build

I updated my stylesheet content, but the changes aren't showing

Your browser might be caching the stylesheet. To force your browser to re-fetch the stylesheet, include a so-called "cache-busting" query parameter in the stylesheet URL. When you change/increment that value during development, your browser will re-fetch the stylesheet.

The query parameter name does not matter. For example, using ?v=:

https://example.com/styles.css?v=1

How do I version my stylesheet with my mod?

If you are using Amazon S3 to host your stylesheet, enable versioning on your S3 bucket. Then, find the URL for the version:

Viewing file versions on S3

The URL will include a versionId parameter. For example:

https://pixiebrix-public-stylesheets.s3.us-east-2.amazonaws.com/pixiebrix/writing-assist.css?versionId=ymEMzndbV1iLrrtR.fDAPJu6mzlAro21

How do I remove the padding from embedded Form elements in the Document Builder?

The easiest way to remove the padding is to override it in CSS:

/* Forms are rendered in a ShadowDOM. Target the form wrapper div. */
div:has(.rjsf) {
    /* Override the p-3 utility class on the embedded form */
    padding: 0 !important;
}

How do I change the PixieBrix logo in the sidebar?

Custom Branding is supported on Enterprise Plans. See Custom Branding and Themes for information on how to change the logo for your team.