Using CSS to Stylize Spotfire Elements?

[Edward DiNunzio]

Hi All,

Can we use CSS to adjust the style of Spotfire elements? For example to give each of the page navigation tabs a different color?

Thanks,

Ed

[Fredrik Rosell]

Hello,

You can do a lot of nice styling with CSS in Text Areas specifically (e.g. see https://community.spotfire.com/s/article/Using-Spotfire-Text-Areas-to-Increase-Usability-of-Analytics-through-HTML-Javascript-and-CSS).

However, that is not applicable to the entire Spotfire application. For such styling, what you can use are the properties exposed in the custom themes (https://docs.tibco.com/pub/sfire-analyst/14.0.0/doc/html/en-US/TIB_sfire-analyst_UsersGuide/index.htm#t=layout%2FWhat_are_Visual_Themes_.htm&rhsearch=custom%20theme&rhsyns=%20).

[Edward DiNunzio]

Hi Fredrik,

Thanks for sharing those links. I'm looking to provide a unique background color for the page navigation tabs in Spotfire. As you probably already know this is pretty easy to do in Excel and folks can use tab coloring for sheets with similar data.

Excel Example:

 

I was hoping to do something similar in Spotfire. Looking at the Custom themes panel, we can provide the active tab a unique color which is super helpful but I didn't see any further options for styling the tabs. I was thinking we could use some CSS to provide additional styling the tabs with something like this :

.sf-element-page-tab:nth-of-type(1) { background:#FFFF00 !important;}

but since that doesn't work I must be missing something.

[Fredrik Rosell]

Hello Edward,

While it may be tempting (e.g. after inspecting the Spotfire application/visuals styling using the Developer tools) to attempt to style in this way, as e.g. stated by Spotfire product management in Idea https://ideas.tibco.com/ideas/TS-I-7843, "it is not intended that you should change the CSS of Spotfire visuals. There is a Styling editor that you can access in Visualizations-Canvas styling->Edit custom theme. Let us know if you are missing any styling options there."

So, it's a very valid enhancement and I'm afraid that there is no supported way to do this today. Just to make sure, I have consulted the developers of the Spotfire styling framework who confirmed that.   

Please create/vote for ideas in the Ideas Portal for what you are trying to achieve so this feature is prioritized by Spotfire product management. 

[Edward DiNunzio]

Thanks! I guess that answers that. I'll be sure check out the ideas post on this.

[Tyler Kendle]

Hey Edward,

Check out this Dr. Spotfire video about using CSS to control Tab color. Skip ahead to 9:20.

Link: Dr. Spotfire - Improving the Appearance of Text Areas with HTML and CSS

Not sure if you've already tried this solution or not but I remembered you asking the question a few weeks ago and I was watching the video tonight and saw how Julie was able to change the colors of tabs with CSS.  I haven't tested this myself yet, but thought I'd pass it along.