In this example, we'll add a custom stylesheet to a mod.

1. Start with a blank mod

Create or clone a blank mod to get started.

2. Add some HTML markup

Add the following markup to your mod's HTML:

<div class="btn btn-primary">Submit</div>
1

Without any CSS, the result looks very basic:

3. Add a stylesheet

Click the gear (cog) in the header of the CSS panel to open the CSS settings. From there, you can either choose a stylesheet from the dropdown menu or paste a URL to other stylesheets.

TIP

In the dropdown shown below, the first few stylesheet options are "Namespaced". Using these stylesheets will only affect your mods, while styles you add from other external stylesheets will be applied to your entire page. See Namespaced CSS for more details.

Bootstrap 4 is listed in the dropdown, but let's say we want to use Bootstrap 3 instead. In that case, we can find a CDN that has Bootstrap 3 (or host our own). In this case, we can use the following URL from Bootstrap CDN:

https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Copy and paste this URL into the mod input that says Add external stylesheet, then click Add.

Now our mod has Bootstrap 3 styling applied to it:

4. Add stylesheet tags to your page (optional)

Your mod will automatically load any external stylesheets when you've added the mod tag to your page.

However, for improved performance, it is best to also add any external stylesheet tags to your page as described in Optimizing CSS & JS assets.

Last Updated: 9/18/2018, 10:29:38 PM