File size: 1,993 Bytes
4fb4c20 1f05ebf 4fb4c20 0889e01 4fb4c20 0889e01 4fb4c20 0889e01 4fb4c20 0889e01 |
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 |
---
title: "Styling Overlay"
groupTitle: "Examples"
sort: 5
---
import { CodeSample } from "../../components/CodeSample.tsx";
You can customize the overlay opacity and color using `overlayOpacity` and `overlayColor` options to change the look of the overlay.
> **Note:** In the examples below we have used `highlight` method to highlight the elements. The same configuration applies to the tour steps as well.
## Overlay Color
Here are some driver.js examples with different overlay colors.
```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
overlayColor: 'red'
});
driverObj.highlight({
popover: {
title: 'Pass any RGB Color',
description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.'
}
});
```
<div className='flex flex-col gap-1 -mt-5'>
<CodeSample
buttonText={"Red Color"}
config={{
overlayColor: 'red',
overlayOpacity: 0.3
}}
highlight={{
popover: {
title: 'Pass any RGB Color',
description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.',
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Blue Color"}
config={{
overlayColor: 'blue',
overlayOpacity: 0.3
}}
highlight={{
popover: {
title: 'Pass any RGB Color',
description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Yellow Color"}
config={{
overlayColor: 'yellow',
overlayOpacity: 0.3
}}
highlight={{
popover: {
title: 'Pass any RGB Color',
description: 'Here we have set the overlay color to be yellow. You can pass any RGB color to overlayColor option.',
}
}}
id={"left-start"}
client:load
/>
</div>
|