---
title: 'How to Override the Supplied Styles'
url: 'https://manuals.remository.com/payage/front-end-styles/how-to-override-the-supplied-styles'
markdown: 'https://manuals.remository.com/payage/front-end-styles/how-to-override-the-supplied-styles.md'
date: '2026-11-14'
description: 'The Payage administrative interface has a "Front End Styles" page that allows you to add your own CSS rules, while keeping them separate from updates to the supplied CSS file. The Custom CSS tab is a text editor for your rules. The "Default CSS" tab shows the contents of the supplied payage.css fi…'
taxonomy:
  category:
    - docs
---

[](#) [ edit this page](https://github.com/getgrav/grav-skeleton-rtfm-site/blob/develop/pages/13.front-end-styles/01.how-to-override-the-supplied-styles/docs.md) 

# How to Override the Supplied Styles

The Payage administrative interface has a "Front End Styles" page that allows you to add your own CSS rules, while keeping them separate from updates to the supplied CSS file.

![](https://manuals.remository.com/payage/user/pages/13.front-end-styles/01.how-to-override-the-supplied-styles/p-31_1.jpg)

The Custom CSS tab is a text editor for your rules. The "Default CSS" tab shows the contents of the supplied payage.css file, but does not allow it to be changed.

If you enter some CSS in the "Custom CSS" tab and click Save, your CSS is written to the file:

```
/media/com_payage/css/payage_custom.css
```

If you entered any text into the Custom CSS tab, this file is loaded ***after*** the default file, so any rules that you write will override the default rules. For example, let's say you want to change the buttons on the Invoice Request form to green. In the Default CSS tab you can find this rule:

```
button.pg-btn {background-color:#0079C1; ..... }
```

Copy and paste this rule into the Custom CSS tab, and change the colour to green:

```
button.pg-btn {background-color:#4c8d4f} 
```

When you click Save, your CSS is written to the payage\_custom.css file, which is loaded after the payage.css file, so your rule takes precedence, and you now have green buttons.

 [ ](https://manuals.remository.com/payage/front-end-styles) [](https://manuals.remository.com/payage/front-end-styles/payment-buttons)

---

## Navigation

- Parent: [Front End Styles](https://manuals.remository.com/payage/front-end-styles.md)
- Next: [Payment Buttons](https://manuals.remository.com/payage/front-end-styles/payment-buttons.md)