How to customize the forest widget with 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.

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"

Use cases

Hiding the widget menu

To hide the widget menu, the line data-inline-css=“.header {display: none}” can be inserted into the widget snippet.
Example:

</script>
<div 
  class="reviewforest-app-xxxx-yyyy-xxxx-yyyy"
  data-inline-css=".header {display: none;}"
></div>

``

Important Notes

1. Ensure the external CSS file path is correct and accessible from your HTML file location.
2. The widget content is encapsulated within a Shadow DOM, so custom styles applied via these attributes will only affect the widget itself.
3. 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.
4. 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: 13/11/2024