Change styling on page based on user input

I have a table showing thumbnail images of properties for rent. My client maintains a spreadsheet showing availability. Red indicates occupied and availability date not known, yellow means occupied, but availability date known. Green means unoccupied and available on a known date.

I would like to use the data in their spreadsheet/form to set the background color on the thumbnails to red, yellow or green and to show the availability date on hover.

What is the best method to use? I would like to use their existing spreadsheet and link to an adobe form to collect the data that is then used to change the styling on the css elements.

  • aristath
    • Recruit

    Hello there @iwritten and welcome to the WPMUDEV Community!

    I’m afraid this will not be possible simply using the colors on the spreadsheet tables.

    It could be done if there was a separate column in the spreadsheet with the availability in there, but again this would require a lot of custom coding!

    You’d basically havw to write a custom plugin that will import the spreadsheets, read the columns and fill-in the appropriate custom fields in your listings post type.

    A custom field should exist for the availability of the listing, and based on that field’s value, a class should be added to the div of that entry that will contain it.

    After all that, some custom CSS will change the color based on the div’s class.

    As you understand, this is a lot of work… you might want to hire a developer to do build that plugin for you. My suggestion would be posting a new job listing in our Jobs Board on so that a skilled developer can do that for you.

    I hope that helps!



Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.