Jump to content
We've recently updated our Privacy Statement, available here. ×

Using CSS to Stylize Spotfire Elements?


Edward DiNunzio
Go to solution Solved by Fredrik Rosell,

Recommended Posts

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).

Link to comment
Share on other sites

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:

Excel_Tabs.PNG.0d20371ba464b01cea8b8406a164dfeb.PNG 

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.

Link to comment
Share on other sites

  • Solution

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. 

Link to comment
Share on other sites

  • 1 month later...

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.

image.thumb.png.5028098375feeedf1a86e9390d011671.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...