> For the complete documentation index, see [llms.txt](https://docs.productrentalspro.com/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.productrentalspro.com/user-guide/rental-widget/rental-widget-advanced-customization.md).
# Rental Widget - Custom Styling
If the configuration options of the PRP Rental Widget aren't enough for you to get the Rental Widget looking as you'd like, you can customize it with custom CSS.
All of the widget elements load natively as part of the page delivered to the user by Shopify. There are no iframes or HTML injected by external requests. That means you are virtually unlimited in how you can style the elements of the rental widget.
CSS to style the PRP Rental Widget can be done by:
1. Using the "Custom CSS" box within the [PRP Rental Widget configuration options](/user-guide/rental-widget/rental-widget-configuration-options.md)
2. Applying custom CSS via an external CSS file, targeting the Rental Widget's CSS selectors
## CSS Selectors
To work out the selectors to target different parts of the rental widget, you'll need to inspect the rental widget elements using your browser developer tools. From there you can determine the most appropriate selector to target.
This should be straight-forward for a web designer or developer. If you don't have a designer or developer and need further guidance, please [contact our support team](https://tally.so/r/mVlWGy) and we'll be happy to assist. Just provide the details along with a screenshot highlighting the specific things you're wanting to adjust.
## Other Elements
To apply CSS adjustments to more specific parts of the calendar, or Rental Widget, determine the appropriate CSS selectors via browser Developer Tools.
## Applying Different Styles when Dates have been Selected
When a customer selects dates in the Rental Widget, an additional CSS class is applied to the Rental Widget container.
The Rental Widget container always has a class of `.rw-container` applied to it.
When dates have been selected an additional class gets added of `.rw-dates-selected`
Below is an example of how you might use this is to make content appear, or become more prominent once dates have been selected.
### Example - Highlighting the Insurance Option
If you're using the [Insurance Add-On](/user-guide/settings/add-ons-insurance.md) feature of Product Rentals Pro, you might realise that by default, it doesn't really stand out much, so customers may not notice it or pay a lot of attention to it. This means potential lost revenue for your business.
This can be helped by changing the appearance with custom CSS. At the same time, you may not want to make your product page look too busy, distracting, or just ugly.
Because an additional class is added to the Rental Widget container once dates have been selected, you can have the insurance option appear plain and simple to begin with (or even have it hidden), but then make it really stand out as soon as the customer has selected dates, so that it's almost impossible to miss before they click the **Rent Now** button (or whatever you have labelled in the PRP settings.
Before dates have been selected:
After dates have been selected:
Notice that there is a 'shine' effect that appears every few seconds. This might be considered too much to always be there, but is fine to apply only once someone has selected variant options and rental dates. The CSS even injects some extra text into the box ("Protect yourself from accidents for a low fee").
Below is the custom CSS that was applied to achieve the appearance above.
```css
.rw-container.rw-date-selected .rw-insurance {
padding: 5px 10px;
background-color: #ffe3e7;
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
letter-spacing: 0;
border: 1px solid #000;
border-radius: 4px;
}
.rw-container.rw-date-selected .rw-insurance .rw-extra-input {
margin-right: 8px;
width: 18px;
height: 18px;
margin-left: 0;
accent-color: #000000;
margin-top: 4px;
}
.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
flex: 1 1 60%;
}
.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
font-size: 15px;
font-weight: 600;
}
.rw-container.rw-date-selected .rw-insurance .rw-insurance-price {
flex: 0 0 auto;
font-weight: bold;
text-align: right;
margin-left: auto;
}
.rw-container.rw-date-selected .rw-insurance::after {
content: 'Protect yourself from accidents for a low fee';
display: inline-block;
font-size: 13px;
margin-right: auto;
order: 1;
}
.rw-container.rw-date-selected .rw-insurance .modal-open-button {
margin-left: auto;
text-decoration: underline;
white-space: nowrap;
order: 2;
}
.rw-container.rw-date-selected .rw-insurance::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 30%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 100%);
transform: skewX(-30deg);
animation: shine 4s infinite ease-in-out;
}
@keyframes shine {
0% {
left: -100%;
}
20% {
left: 110%;
}
100% {
left: 110%;
}
}
```