Creating Multiple Button Styles with CSS

  • Have you successfully implemented CSS in Spotfire projects but find it needs to be more flexible?
  • Are you looking to do more with CSS in Spotfire?
  • Do you need multiple formats of buttons and don’t know how to modify the CSS?

In a recent post, I explained how to create a button style with CSS.  Learning this code changed how I format buttons in Spotfire.  No more formatting each and every button.  MAGIC!!! Not really, just code, but it still felt that way.  But what if you want to create more than one button style???  Well, there is technically more than one way to solve this problem.  I have chosen to use class selectors.  If you don’t know what class selectors are, hit up this W3Schools page for information.  Before I explain the solution, here is a bit of a review on creating button styles.

Review

As discussed in the post I linked to above, you can create button styles using CSS inside the style tag.  The syntax “.sfc-action-button” is referencing the class associated with the button element.  This code will format all buttons in a given Spotfire page.  Here is an example.

Creating Multiple Button Styles

To create multiple button styles…

  1. Place the buttons inside a container of some type, such as <span>, <div>, or <p>, depending on how much space you want to take up.
  2. Create a class for each format.  This can be whatever you want it to be.  In the example shown below, I have created a format called “buttonS1” with a different background color.
    • Note:  I also created a format called “buttonS2”, but I deleted that from the <style> tag without updating the classes .  Thus, the text area uses the format for .sfc-action-button and “buttonS1”. Apologies if this is confusing.
  3. Reference both classes “.buttonS1 .sfc-action-button” and specify only what should be different.  In this case, I am only changing the background color.
    • For example, if I wanted “buttonS1” to have different dimensions, I would add in height and width attributes.

 

 

Key Requirements to Make this Work

  1. Each button needs to be part of a container (<div>, <p>, <span>).
    • <p> means they will all be on the same line.
    • <span> will put them on different lines and not take up a lot of space.
    • <div> will put them on different lines and take up the width of the text area (probably not what you want).
  2. Create a class for each style and reference the class in the container tag.
  3. Syntax
    • Class selectors begin with a period.
    • When referencing multiple classes, separate them with a space.

Once setup, it should be easy to format going forward!

 

Spotfire Version

Spotfire version 7.9.1 was used to develop this content.

 

 

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

9 thoughts on “Creating Multiple Button Styles with CSS

  1. Brian Hoogstra Reply

    This was great and very helpful. I did have a hard time reading the space between the class identifier and the “.sfc-action-button” identifier. I ended up with something like the below for a while until I investigated further.

    .buttonS1.sfc-action-button {}

    • Julie Sebby Post authorReply

      Thanks for the comment! I’m glad you were able to make it work.

  2. Michael Reply

    Hi Julie,

    My name is Michael, I’m Spotfire developer, my current version is 7.11.
    Thanks so much for the information.
    I’m starting to use style(CSS) in our dashboards.

    Could you refer me to some reference material that will give me different options to style a button?
    Also would you know of CSS or Java Script that would change the title on a button when click.

    Thank you in advance for help.
    Michael

    • Julie Sebby Post authorReply

      There isn’t any TIBCO documentation that I know of….just what you can find in Google searches from blogs. Your best bet is to learn a little bit more HTML and CSS to know what is possible. I recommend W3Schools. I don’t have a code snippet for that specific use case, but I’m sure it could be done.

  3. Michael Reply

    Hi Julie,

    Is there a rule to use when applying CSS code to a Spotfire action button, so the CSS function, Style etc.. is applied to the action button?

    Thank you in advance for help.
    Michael

    • Julie Sebby Post authorReply

      I have used W3Schools. They have great HTML, CSS, and JavaScript references.

    • Julie Sebby Post authorReply

      Specifying .sfc-action-button in the code will make sure it is applied to the action button. Is that what you meant?

  4. Pingback: Inspect HTML to Find Spotfire CSS Classes » The Analytics Corner

Leave a Reply

Your email address will not be published. Required fields are marked *