# Look and feel

Using the [Cornerstone theme](https://support.bigcommerce.com/s/article/Cornerstone-Theme-Manual?language=en_US), you can style the look and feel of the elements within the [Drop-in](https://docs.digitalriver.com/digital-river-api/payments/payment-integrations-1/drop-in) component using [Page Builder](https://support.bigcommerce.com/s/article/Page-Builder?language=en_US).

 You can change the following body text and link attributes:

* Body text font family
* Link font family
* Link color
* Link hover color

Form Checklist 

* Form Background 
* Form header text color 
* Form border color

##  Styling the Pay button 

To style the Pay button within the Digital River drop-in component:

1. Click **Store Setup** in the app menu on the left and then click **Themes**.
2. Under **Current Theme**, click **Advanced**, and select **Make a Copy** from the drop-down list.\
   ![](https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FoFqZoENsg5YssfGo8lAX%2FThemes.png?alt=media\&token=be2f1959-d084-4ecd-8ba9-3504aa296f9d)
3. Enter a name for the theme in the **Theme Name** field and click **Save a Copy**. \
   ![](https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FLuqa7miXCmKVbsaSvykH%2FMake-a-Copy.png?alt=media\&token=2c50f72e-da9f-4adf-a3a4-43f767bdbbd3)<br>
4. Under **Themes**, click more options on your created theme and select **Edit Theme Files**.\
   ![](https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FJRNxBjP9xRbXmkdjgWxI%2FMore-options-Themes.png?alt=media\&token=14d4a672-5906-4610-ab11-c9b9d5bbd3e5)
5. Click the **Do not show me again** checkbox and click **Edit theme files**. ![](https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FmN4cNDPnqHHgvnWo6h9Q%2FEdit-your-theme-files.png?alt=media\&token=421469ec-7da8-4bf7-a64e-40f22a878f6d)
6. From your browser's **Stencil File Editor** tab, click **assets**, click **scss**, and then click **optimized-checkout.scss**.\
   &#x20;![](https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FfUmZrVjqA0irkizHTGdI%2Foptimized-checkout-css.png?alt=media\&token=ab32937b-0eb5-4c28-af3c-257c84b59a4a)
7. Copy the following text and paste it at the bottom of the optimized-checkout.scss file.\
   \
   `.DR-pay-button{`\
   &#x20;   `background-color: BLACK !important;`\
   `}`\
   `.DR-button-text{`\
   &#x20;   `color: RED !important;`\
   `}`\
   **Important**: You must add the `!important` rule to the CSS line.
8. Click **Save File**. The results will look like this:

<div align="left"><img src="https://385943888-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYQsO02eKz9DuHs39Wm-694727794%2Fuploads%2FTiP1kPQc3xYf7d0UAo5k%2FPayment-final-example.png?alt=media&#x26;token=a46832e6-62e4-4292-84ac-81f76798891f" alt=""></div>