# Custom Themes/CSS ### 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. {% hint style="info" %} PixieBrix only supports CSS stylesheets hosted from `https:` URLs. If you need assistance hosting your stylesheet, contact . {% endhint %}

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors): ```css .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](https://getbootstrap.com/docs/4.6/components/alerts/). See [#how-do-i-create-a-custom-color-scheme](#how-do-i-create-a-custom-color-scheme "mention") 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](https://ngrok.com/docs/http/#serve-directory-files) account. ngrok [supports serving directory files without running a local server](https://ngrok.com/docs/http/#serve-directory-files): {% hint style="warning" %} When serving a local CSS file with ngrok, any changes made might not appear immediately. See [#i-updated-my-stylesheet-content-but-the-changes-arent-showing](#i-updated-my-stylesheet-content-but-the-changes-arent-showing "mention") {% endhint %} **Windows** ```bash ngrok http "file://C:\Users\david\Directory Name" ``` **Mac/Linux** To serve a specific directory: ```bash ngrok http "file:///path/to/directory" ``` To serve your current working directory: ```bash ngrok http file://`pwd` ``` ### Example Layouts [Flexbox layouts are the modern](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) way to create row and column layouts on the web. PixieBrix's Bootstrap component system [includes utility classes for working with flexbox.](https://getbootstrap.com/docs/4.0/utilities/flex/) 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: ```css .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. ```css /* 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: ```javascript 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](https://getbootstrap.com/docs/4.6/components/alerts/). 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](https://bootstrap.build/app) #### 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](https://www.keycdn.com/support/what-is-cache-busting#3-query-strings) 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/manage-versioning-examples.html). 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: ```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](/enterprise-it-setup/custom-branding-and-themes.md) for information on how to change the logo for your team. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/custom-themes-css.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.