Hover color change for column headings in DataPage tables

[Smart-Plex]

I'm a new Caspio client so I may have missed it. Is there a way to specify a \"hover color\" for individual column headings? It appears that there is not. The only thing I have found is a hover color for the entire header bar at the top of a datapage in table format.

A hover color for individual column headings would be very useful (more so than having the entire header bar light up).

If this is not available, how does a Caspio client make a request for a new feature/function such as this, and how do I hear if/when it will be available?

Thanks, Eric

[sdi126]

As of the current build for Caspio Bridge this is not an option as you have speculated.

[davep]

I'm pretty sure it can be done in JavaScript. Any JS experts out there?

[sdi126]

Yes of course anything is possible!

In order to do something like this in javascript you would need to grab the table then the specific row and then the loop through all td tags in that row. Once your inside this loop you can set the background/hover color as you wish.

The script to write something like this is quite involved.

[AtayBalunbalunan]

One workaround for this is modifying the Style of your DataPage. You can add in the User-Defined Styles something like this: 

.cbResultSetHeaderCell:hover
{
	background: red;
}

This won't highlight the entire header bar.

 

As for requesting a new feature, you can visit their Ideabox (http://ideabox.caspio.com) to communicate with their product team and for others to vote.

[Kronos]

Hi,  just to add to this thread.  If you have configured your rows to have a dark color when hovered, you may use this solution from another forum thread to change the font color of the texts inside the hovered row:

 

[autonumber]

Hi! Just to update this post, if you want to add a background color to individual column headings of your report when hovered, you can paste the CSS code below to the header of your DataPage. 

<style>
.cbResultSetHeaderCell:nth-child(1):hover{
background: red !important; 
}
.cbResultSetHeaderCell:nth-child(2):hover{
background: green !important; 
}
.cbResultSetHeaderCell:nth-child(3):hover{
background: yellow !important; 
}
.cbResultSetHeaderCell:nth-child(4):hover{
background: violet !important; 
}
</style>

If you have a lot of columns, just copy the same class .cbResultSetHeaderCell:nth-child(1):hover and change the nth-child number based on the order number of the column.