Re: How to make Slideshow background transparent? (Sense Theme)

HBEE63 · ‎11-14-2023

Hi,

Im using the sense theme and looking to make the background transparent. See ref photos below. Any help would be much appreciated, thank you.

Website: https://www.forloveandfries.com/

Spac-es · ‎11-16-2023

We can try your alternative.

Add the following code inside your slideshow.liquid (at the end):

  <style>
    :root {
      --color-background: transparent;
      --gradient-background: transparent;
      --color-foreground: transparent;
      --color-background-contrast: transparent;
      --color-shadow: transparent;
      --color-button: transparent;
      --color-button-text: transparent;
      --color-secondary-button: transparent;
      --color-secondary-button-text: transparent;
      --color-link: transparent;
      --color-badge-foreground: transparent;
      --color-badge-background: transparent;
      --color-badge-border: transparent;
      --payment-terms-background-color: transparent;
    }
  </style>

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Spac-es · ‎11-14-2023

Add this code to your theme.liquid:

{% if template == 'slideshow' %}
  <style>
    :root {
      --color-background: transparent;
      --gradient-background: transparent;
      --color-foreground: transparent;
      --color-background-contrast: transparent;
      --color-shadow: transparent;
      --color-button: transparent;
      --color-button-text: transparent;
      --color-secondary-button: transparent;
      --color-secondary-button-text: transparent;
      --color-link: transparent;
      --color-badge-foreground: transparent;
      --color-badge-background: transparent;
      --color-badge-border: transparent;
      --payment-terms-background-color: transparent;
    }
    .slider-counter {
      display: none;
    }
  </style>
{% endif %}

Result:

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

HBEE63 · ‎11-15-2023

Thank you so much for reply - do I add to the end of theme.liquid? after </html>? or before that?

Spac-es · ‎11-15-2023

inside the <body> container

At the end of the code there should be no problem.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

HBEE63 · ‎11-16-2023

I tried but I don't see any changes. I did it under the "theme.liquid" should it have been in the "slideshow.liquid"?

Spac-es · ‎11-16-2023

We can try your alternative.

Add the following code inside your slideshow.liquid (at the end):

  <style>
    :root {
      --color-background: transparent;
      --gradient-background: transparent;
      --color-foreground: transparent;
      --color-background-contrast: transparent;
      --color-shadow: transparent;
      --color-button: transparent;
      --color-button-text: transparent;
      --color-secondary-button: transparent;
      --color-secondary-button-text: transparent;
      --color-link: transparent;
      --color-badge-foreground: transparent;
      --color-badge-background: transparent;
      --color-badge-border: transparent;
      --payment-terms-background-color: transparent;
    }
  </style>

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!