> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/bouncer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/bouncer/customize-bouncer/customize-bouncer-using-css.md).

# Customize Bouncer using CSS

By default, Bouncer inherits styles from your theme. Depending on how your theme is set up, these styles may not carry over in the best way possible.

However, the pop-up and the background image can be styled with CSS code.

A basic understanding of HTML and CSS code may be required to customize the pop-up and background image to your liking. If you can't seem to figure it out, we offer an Expert Install Service where we take care of the installation for you. [Check out this article for more information](https://docs.theshoppad.com/article/480-whats-included-with-the-bouncer-expert-install-service).

The \<div> element that contains the background image has the following ID:

```html
#bouncer_modal_bg
```

The pop-up itself has the following ID:

```html
#bouncer_modal
```

The various element IDs within the pop-up are as follows:

```css
#bouncer_modal_subheading
#bouncer_modal_datepicker select 
#bouncer_modal_submit
#bouncer_modal_exit
```

Be sure to use the ***!important*** flag with style declarations to override predefined attributes.