Edward DiNunzio Posted January 8 Share Posted January 8 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 Link to comment Share on other sites More sharing options...
Fredrik Rosell Posted January 9 Share Posted January 9 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 More sharing options...
Edward DiNunzio Posted January 9 Author Share Posted January 9 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. Link to comment Share on other sites More sharing options...
Solution Fredrik Rosell Posted January 10 Solution Share Posted January 10 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 More sharing options...
Edward DiNunzio Posted January 10 Author Share Posted January 10 Thanks! I guess that answers that. I'll be sure check out the ideas post on this. Link to comment Share on other sites More sharing options...
Tyler Kendle Posted February 27 Share Posted February 27 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now