Changing Text Color Via 'Admin Panel' Dashboard page

Ask the community
,
1

Hello,

Hope everyone is having a lovely day!

I’m basically trying to make it super easy for my client to update and use their site all from the dashboard page!

To dive right in, I figured out how to add a dynamic slideshow, link it to the database and then have the title, blurb, button label & button link all editable via the dashboard page! Hooray! (This was a great success lol)

My current little challenge is trying to make it so they can choose to have the text be black or white to make sure it’s contrasting with the background image.

Ideally I’d just have a simple dropdown menu with the color options on the dashboard with the default being white.

Incredibly rusty with coding and new to using velo, any help would be greatly appreciated!

Thank you :smiley:

2

What type of text elements are you using in the Slides? If you use a TextBox, you can set the color by setting the color property of the style property .

Another option would be to have two sets of text - one set with white text and another set with black text. You can then enable the one set with the better contrast, and disable the other.

3 
import wixData from 'wix-data';

$w.onReady(async function () {
    $w("#topLeftButton").target = "_self";
    $w("#topMiddleButton").target = "_self";
    $w("#topRightButton").target = "_self";
    $w("#bottomLeftButton").target = "_self";
    $w("#bottomMiddleButton").target = "_self";
    $w("#bottomRightButton").target = "_self";

    let slidesData = await getSlideshowDataFromDatabase();
    loadSlideshowData(slidesData);

});

function loadSlideshowData(slidesData) {
    const slideElements = $w("#dynamicSlideshow").slides;
    slideElements.forEach((slide, index) => {
        $w(`#${slide.id}`).background.src = slidesData[index].slideBackground;
        $w(`#slideTitle${index}`).text = slidesData[index].title;
        $w(`#slideDescription${index}`).text = slidesData[index].description;
        $w(`#slideButton${index}`).label = slidesData[index].buttonLabel;
        $w(`#slideButton${index}`).link = slidesData[index].buttonUrl;
        let color = $w(`#slideTitle${index}`).style.color;
        $w(`#slideTitle${index}`).style.color = slidesData[index].slideColor;
    })
    
}

function getSlideshowDataFromDatabase() {
    return wixData.query("HomePageSlideshow").find().then(results => {
        return results.items;
    })
}

I love the first solution and tried to add it to the loadSlideshowData function (added it to the dataset and named slideColor) but it’s not showing up and is giving me an error:
TypeError: Cannot read properties of undefined (reading ‘color’)

I’m not sure where else to try to add the line. Thank you for an arrow in the right direction !!! :slight_smile: