CSS and CMS or CSS and $w Input

Ask the community
, , , ,
1

Question:
Does Wix currently enable you to communicate between the CSS and CMS or CSS and $w Input to send over button color or background color from a CMS Database?

Product:
Wix Studio with Velo

What are you trying to achieve:
For the color for a button background to be pulled from an input element or Wix Data to then send to CSS.

What have you already tried:

// Import wix elements
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

// This function runs when the page is loaded
$w.onReady(function () {
    // Event handler for the button click
    $w('#changeColorButton').onClick(() => {
        // Get the color value from the input element
        let color = $w('#colorInput').value;

        // Apply the color to all buttons with the class 'custom-button'
        $w('.custom-button').forEach(button => {
            button.style.backgroundColor = color;
        });
    });
});

The above code tossed an error with $w(‘.custom-button’).f not being defined… then the following also did not work…

$w.onReady(function () {
    // Event handler for the button click
    $w('#changeColorButton').onClick(() => {
        // Get the color value from the input element
        let color = $w('#colorInput').value;
        
        // Apply the color to all buttons with the 'custom-button' class
        $w('Button').forEach(button => {
            if (button.hasClass('custom-button')) {
                button.style.backgroundColor = color;
            }
        });
    });
});
2

Use the following to add a CSS class to an item:

$w(‘#box102’).customClassList.add(‘scrollcontainerorange’);

I’m sure this could be modified to take a variable from the CMS.
Will be interesting to see the final code when you get it to work.