# 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 %}

#### 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:

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](https://docs.pixiebrix.com/enterprise-it-setup/custom-branding-and-themes "mention") for information on how to change the logo for your team.