Create a Button Style with HTML & CSS

  • Do you want your Spotfire buttons to look stylish and clean throughout the entire analysis?
  • Do you absolutely hate formatting each and every button in Spotfire?

Of course, you do! Those were trick questions.  Fortunately, Spotfire integrates with HTML and CSS, and you can use code to create a button style. Your style will be applied throughout the analysis, which means no more formatting each and every button.  Yay!!

Button Style Code

The code below came from one of my coworkers — Lucas Woods — who is a rock star with HTML and CSS.  I honestly don’t know how this guy writes and work in so many languages.  He’s fantastic, and this code made my life a lot easier.  Now, it doesn’t copy and paste very well.  I’ve tried to mimic the indentations (which isn’t required), but a screenshot is also included.  Just pop this into the Spotfire text area HTML editor.  Obviously, you’ll want to update the font, font-size, colors, and other properties for your own preferences, but it’s super simple.  Create your own style button!

Button Style

<style>
@import url(‘https://fonts.googleapis.com/css?family=Roboto’);
.text {
margin:10px;
font-family: ‘Roboto’, sans-serif;
}

.sfc-action-button {
color: #ffffff !important;
font-size: 14px !important;
font-family: ‘Roboto’, sans-serif !important;
padding-left: 16px !important;
padding-right: 16px !important;
height: 36px !important;
background-color: #2196F3 !important;
background-image: none !important;
border: 0px #fff solid !important;
border-radius: 2px !important;
}
</style>

Buttons

Of course, I have to include a picture of what this code generates, so here are the buttons.

Caveats

Now, I have a few warnings for those who either a) aren’t super familiar with HTML/CSS or b) those just starting to use HTML/CSS in Spotfire.

  1. In order for the <style> tag to be recognized, turn off HTML sanitation.  I wrote a blog post on how to do that. You will need admin privileges.
  2. Many people are used to right-clicking and selecting ‘Edit Text Area’.  You cannot use this option after you add the HTML.  If you do, it will wipe out the code you just added.  You will need to make any subsequent updates to the text area via the HTML editor.  This sounds horrible, but Spotfire provides all the same controls, you can use Ctrl F, and your HTML will get a lot better!

Other References

In order to create a beautiful button style, you may also want to check out….

This is only the tip of the iceberg in terms of what you can do with HTML and CSS in Spotfire text areas.  More posts forthcoming!

5 thoughts on “Create a Button Style with HTML & CSS

  1. Hello Julie:

    Fisrt of all, congratulations for your support and advices. The tricks you share are really lightening for Spotfire beginner users like me! 🙂
    Although I´ve followed the instructions you provide (I already created “go to” button, and modified text area administration manager settings) an error message shows in my HTML editor that reads: “the element is not supported”. Have you got any clue of what I´m doing wrong?

    Thanks in advance, have a great weekend!

    1. Thanks so much for reading! I always hope it helps someone out when I post things. I believe this is because HTML Sanitation (a preference that the administrator sets) is turned on and needs to be set to false. There is a link to a post about HTML sanitation in the caveats section of this post.

      1. Thanks for your response, Julie.
        Last week I made the changes you pointed out avobe, but it didn´t work. Today I´ve tried again, and now there is and amazing purple buttom in front of me! 🙂
        What I had to do after setting the value to “false” (in the text area sanitation) was just close and start Spotfire again. Looks like it didn´t save the new settings but today it did it! 🙂

  2. It makes sense that you would have to restart the application after changing a setting. Glad you got it working!

Leave a Comment

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