How to modify BTCPay CSS Checkout Page?

question

#1

How can I modify BTCPay checkout page?
What do I put into “link to a custom CSS Stylesheet”?
Is there a template I can use?


#2

Answered by @stufftech on Slack. Paraphrasing.

Here is a sample template you can use (credit goes to https://coincards.ca/btcpay.css):

.top-header {background-color: #fff;}
.top-header .timer-row__progress-bar {background:#ef8022;}
.top-header .timer-row {background: #ffc313;}
.payment-tabs__slider {background: #ef8022;	}
.separatorGem {background: #ef8022;}
.action-button {color: #fff; background-color: #ef8022;border-color: #ef8022;}
.action-button:hover {background-color: #ffc313;}
.action-button:focus, .action-button.focus {color: #fff;background-color: #ef8022;
    border-color: #ef8022;}
.action-button:active, .action-button.active, .open>.action-button.dropdown-toggle {    color: #fff;    background-color: #ef8022;    border-color: #ef8022;}
.action-button:active:hover, .action-button:active:focus, .action-button:active.focus, .action-button.active:hover, .action-button.active:focus, .action-button.active.focus, .open>.action-button.dropdown-toggle:hover, .open>.action-button.dropdown-toggle:focus, .open>.action-button.dropdown-toggle.focus {    color: #fff;    background-color: #ef8022;    border-color: #ef8022;}

You will need to make a “yourdomain.css” similar to the one I linked on your local site, then add that link to your BTCPay settings.