Note: This article assumes you have a basic understanding of HTML and CSS.


Airstrip gives you many options to style and design your page. In case you hit limitations with the Airstrip editor, adding custom CSS to your page might be the solution. There is also an option to upload your assets and use them in your CSS.

Adding custom CSS to your pages 

To add custom CSS, go to any page in your Airstrip project, open the Design settings and click on "Advanced Settings" at the bottom. This will allow you to add custom CSS to your page. Here you can add any custom CSS just as you're used to when writing CSS. 

Note that any code you add will get applied to all pages in your current variant. 

Using custom assets

If you want to bring your custom assets (such as fonts or background images). you can do that as well. Follow the instructions you see next to the custom CSS field.

This will take you to the Assets section where you can upload your own assets. We support any kind of file-type.


Once uploaded, simply copy the file path that Airstrip generates for you. You can now use that asset in your custom CSS. 

For quick access you can also get the file paths of your assets next to the CSS editor:

Examples


Using a custom font
This article shows you how to add a custom font via CSS. Use the Assets section in Airstrip to upload your fonts. The filepath that gets generated can be used as the URL when setting the font.
https://www.balbooa.com/knowledgebase/32-documentation-faq-joomla/176-how-to-add-custom-font-to-website-through-fontface

Changing the border radius of all buttons

.btn {
  border-radius: 99px;
}


Color variables
Use the following variables to access the main- and accent-color that you set in the design settings. Here's an example to change the text color of the headlines 

h1 {
  color: var(--primary);
}

h2 {
  color: var(--accent);
}


Did this answer your question?