How to change GRADIENT with code?

Ask the community
, , ,
1

Hello respected members.

I have 2 repeaters, and 2 layout switch buttons respectively. When one layout button is pressed, they should switch styles.

Video:

As seen in the video, Layout 1 (left button) style is not changed, that is because it is a gradient and not a color. I was not able to find reference to gradients in Velo code. How can I swap the button styles onClick? The other option is to have 4 buttons that hide/display with code, but I would prefer not to do that, and change design with code.

My current code (style only) is below.

$w("#layout1").onClick(layout1Switch);
$w("#layout2").onClick(layout2Switch);

function layout1Switch () {
    $w("#layout2").style.backgroundColor = "#14161C";
    $w("#layout1").style.backgroundColor = "#046CFC";
}

function layout2Switch () {
    $w("#layout1").style.backgroundColor = "#14161C";
    $w("#layout2").style.backgroundColor = "#046CFC";
}

Thanks for your attention and help!

2

Despite the video, I don’t understand what you’re trying to change.
Can you elaborate? (maybe post a screenshot and put an arrow pointing to the element you’d like to change) + explain what type of element you wish to change, is it a button? a vector element? a box? an image?

3

I’m basically trying to swap the button designs. The issue is that the selected button has a gradient, so I am not sure how to change gradient with Velo.

4

Unfortunately, the Velo API does not support assigning gradient background to buttons.
But there’re still some workaround you can do in order to achieve the same effect.

Option one - custom element:
Instead of using Wix Button, create a button of your own using custom element (only if the website is connected to your own domain)
This way is clean and simple but requires some basic knowledge in html and css (and custom components),

Option 2 - svg:
Instead of buttons, use boxes .
In each box put a vector element (i.e. decorative rectangle). Over the vector element put the mode icon (I mean the layout white squares).
Create an svg file/code with the gradient and assign it to the vector element src.
Now assign the on click event listeners to the parent box and change the vector src in the event handler block.

5

Tricky option-2!!! Tricky idea!!!
Happy new year my old friend :wink:

6

Hi again @J. D.

I designed a button in html that I want to use for my custom element, but I’m not sure how to add it.

I created a custom element called custom-button.html, then I selected the source file for the custom element, however it is blank.

Please note, I do have my domain connected.

Video:

https://streamable.com/voa24v

7

Hi,
First the code from the custom element must be in:
public/custom-elements/FILE_NAME.js’
Second, you can just paste html code their. You need to build it in a custom element class. See docs here:

https://support.wix.com/en/article/velo-about-custom-elements

https://www.wix.com/velo/reference/$w/customelement

8

Makes sense, thanks for your attentiveness.

Unfortunately I’m too stupid to convert the html/css code to JS. Do you know of any AI converter? Perhaps ChatGPT can get the job done? :joy:

<!doctype html>
<html>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    .btn {
      width: 150px;
      height: 40px;
      background-image: linear-gradient(to right, #00A6FF 0%, #046CFC  51%, #00A6FF  100%);
      transition: 0.5s;
      color: white;
      border: 0;
      border-radius: 25px;
      font-family: poppins;
      font-size: 16px;
      text-align: center;
      display: block;
      box-shadow: 0 0 20px #eee;
      background-size: 200% auto;
    }

    .btn:hover {
      background-position: right center;
      color: #fff;
      text-decoration: none;
    }
  </style>

  <button class="btn">Buy now</button>
</html>