How to customize the forest widget with CSS
This only applies to the forest widget. For the other widgets you can just insert the CSS.
Our Forest widget offers flexible styling options through two key attributes: data-inline-css for quick, inline CSS tweaks, and data-css-url for linking to an external CSS file when you need more comprehensive customizations.
For swift, minor adjustments, the data-inline-css attribute is your go-to solution. It allows you to specify CSS rules directly within the HTML tag.
In this example, the widget's title will be bold and colored hot pink.
When you need to apply more complex or extensive styling, the data-css-url attribute lets you link to an external CSS file.
Here, the widget will load and apply styles from the specified custom-styles.css file.
For maximum flexibility, you can use both attributes together:
- `data-inline-css`: Apply CSS rules directly. Perfect for quick tweaks.
- Example: data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
- `data-css-url`: Link to an external CSS file. Ideal for comprehensive styling.
- Example: data-css-url="https://your-website.com/path/to/custom-styles.css"
Ensure the external CSS file path is correct and accessible from your HTML file location.
The widget content is encapsulated within a Shadow DOM, so custom styles applied via these attributes will only affect the widget itself.
When using data-css-url, make sure your server allows Cross-Origin Resource Sharing (CORS) if the CSS file is hosted on a different domain.
For complex layouts or responsive designs, we recommend using the external CSS file approach.
By utilizing these attributes, you can tailor the appearance of your widget to seamlessly integrate with your website's design and meet your specific style requirements.
Need further assistance? Don't hesitate to reach out to our support team!
Our Forest widget offers flexible styling options through two key attributes: data-inline-css for quick, inline CSS tweaks, and data-css-url for linking to an external CSS file when you need more comprehensive customizations.
Using Inline CSS
For swift, minor adjustments, the data-inline-css attribute is your go-to solution. It allows you to specify CSS rules directly within the HTML tag.
Example
<div
class="reviewforest-app-xxxyyyxxx"
data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
></div>
In this example, the widget's title will be bold and colored hot pink.
Leveraging an External CSS File
When you need to apply more complex or extensive styling, the data-css-url attribute lets you link to an external CSS file.
Example
<div
class="reviewforest-app-xxxyyyxxx"
data-css-url="https://your-website.com/path/to/custom-styles.css"
></div>
Here, the widget will load and apply styles from the specified custom-styles.css file.
Combining Both Approaches
For maximum flexibility, you can use both attributes together:
<script src="https://widgets.reviewforest.org/main.js" defer></script>
<!-- Inline CSS customization -->
<div
class="reviewforest-app-xxxyyyxxx"
data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
></div>
<!-- External CSS file customization -->
<div
class="reviewforest-app-xxxyyyxxx"
data-css-url="https://your-website.com/path/to/custom-styles.css"
></div>
<!-- Combined customization -->
<div
class="reviewforest-app-xxxyyyxxx"
data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
data-css-url="https://your-website.com/path/to/custom-styles.css"
></div>
Attribute Details
- `data-inline-css`: Apply CSS rules directly. Perfect for quick tweaks.
- Example: data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
- `data-css-url`: Link to an external CSS file. Ideal for comprehensive styling.
- Example: data-css-url="https://your-website.com/path/to/custom-styles.css"
Important Notes
Ensure the external CSS file path is correct and accessible from your HTML file location.
The widget content is encapsulated within a Shadow DOM, so custom styles applied via these attributes will only affect the widget itself.
When using data-css-url, make sure your server allows Cross-Origin Resource Sharing (CORS) if the CSS file is hosted on a different domain.
For complex layouts or responsive designs, we recommend using the external CSS file approach.
By utilizing these attributes, you can tailor the appearance of your widget to seamlessly integrate with your website's design and meet your specific style requirements.
Need further assistance? Don't hesitate to reach out to our support team!
Updated on: 27/06/2024
Thank you!