File size: 2,629 Bytes
e459aae 80a2c0d e459aae 9dbe470 80a2c0d 425e02a 42aa4be 9dbe470 4db6d5e 9dbe470 e459aae 9dbe470 41eca1e e459aae 9dbe470 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
---
title: "Theming"
groupTitle: "Introduction"
sort: 5
---
You can customize the look and feel of the driver by adding custom class to popover or applying CSS to different classes used by driver.js.
## Styling Popover
You can set the `popoverClass` option globally in the driver configuration or at the step level to apply custom class to the popover and then use CSS to apply styles.
```js
const driverObj = driver({
popoverClass: 'my-custom-popover-class'
});
// or you can also have different classes for different steps
const driverObj2 = driver({
steps: [
{
element: '#some-element',
popover: {
title: 'Title',
description: 'Description',
popoverClass: 'my-custom-popover-class'
}
}
],
})
```
Here is the list of classes applied to the popover which you can use in conjunction with `popoverClass` option to apply custom styles on the popover.
```css
/* Class assigned to popover wrapper */
.driver-popover {}
/* Arrow pointing towards the highlighted element */
.driver-popover-arrow {}
/* Title and description */
.driver-popover-title {}
.driver-popover-description {}
/* Close button displayed on the top right corner */
.driver-popover-close-btn {}
/* Footer of the popover displaying progress and navigation buttons */
.driver-popover-footer {}
.driver-popover-progress-text {}
.driver-popover-prev-btn {}
.driver-popover-next-btn {}
```
Visit the [example page](/docs/styling-popover) for an example that modifies the popover styles.
## Modifying Popover DOM
Alternatively, you can also use the `onPopoverRender` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.
```typescript
type PopoverDOM = {
wrapper: HTMLElement;
arrow: HTMLElement;
title: HTMLElement;
description: HTMLElement;
footer: HTMLElement;
progress: HTMLElement;
previousButton: HTMLElement;
nextButton: HTMLElement;
closeButton: HTMLElement;
footerButtons: HTMLElement;
};
onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
```
## Styling Page
Following classes are applied to the page when the driver is active.
```css
/* Applied to the `body` when the driver: */
.driver-active {} /* is active */
.driver-fade {} /* is animated */
.driver-simple {} /* is not animated */
```
Following classes are applied to the overlay i.e. the lightbox displayed over the page.
```css
.driver-overlay {}
```
## Styling Highlighted Element
Whenever an element is highlighted, the following classes are applied to it.
```css
.driver-active-element {}
``` |