Change the look & feel of your reporting tool simply and quickly with our predefined CSS themes.
function setTheme(cssUrl) { var prevThemeTags = getPrevTheme(); var link = document.createElement('link'); link.href = cssUrl; link.rel = "stylesheet"; link.type = "text/css"; link["onload"] = function() { if (prevThemeTags != null) { for (var i = 0; i < prevThemeTags.length; i++) { if (window.ActiveXObject || "ActiveXObject" in window) { prevThemeTags[i].removeNode(true); } else { prevThemeTags[i].remove(); } } } }; document.body.appendChild(link); } function getPrevTheme() { var linkTags = document.head.getElementsByTagName("link"); var prevThemeTags = []; for (var i = 0; i < linkTags.length; i++) { if (linkTags[i].href.indexOf("flexmonster.min.css") > -1 || linkTags[i].href.indexOf("flexmonster.css") > -1) { prevThemeTags.push(linkTags[i]); } } linkTags = document.body.getElementsByTagName("link"); for (var i = 0; i < linkTags.length; i++) { if (linkTags[i].href.indexOf("flexmonster.min.css") > -1 || linkTags[i].href.indexOf("flexmonster.css") > -1) { prevThemeTags.push(linkTags[i]); } } return prevThemeTags; } var pivot = new Flexmonster({ container: "#pivot-container", componentFolder: "https://cdn.flexmonster.com/", report: { dataSource: { filename: "data/sales.csv" }, "slice": { "rows": [{ "uniqueName": "Salesperson" }, { "uniqueName": "Payment Method" } ], "columns": [{ "uniqueName": "Month", "filter": { "members": [ "month.[june]", "month.[july]", "month.[august]" ] } }, { "uniqueName": "[Measures]" } ], "measures": [{ "uniqueName": "Revenue", "aggregation": "sum" }], "sorting": { "column": { "type": "desc", "tuple": [], "measure": { "uniqueName": "Revenue", "aggregation": "sum" } } }, "expands": { "rows": [{ "tuple": [ "salesperson.[laszlo horvath]" ] }] } }, "formats": [{ "name": "", "thousandsSeparator": ",", "decimalSeparator": ".", "decimalPlaces": 2, "currencySymbol": "$", "positiveCurrencyFormat": "$1", "nullValue": "", "textAlign": "right", "isPercent": false }], }, width: "100%", height: 600, toolbar: true }); var header = document.getElementById("buttons-toolbar"); var btns = header.getElementsByClassName("btn-theme"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", buttonHandler); } function buttonHandler() { var current = document.getElementsByClassName("btn-active"); current[0].className = current[0].className.replace(" btn-active", ""); this.className += " btn-active"; }
<div class="demo-toolbar" id="buttons-toolbar"> <a class="btn-theme striped-lightblue btn-active" onclick="setTheme('https://cdn.flexmonster.com/theme/stripedblue/flexmonster.min.css')"> <span class="theme-name-short">Sb</span> <span class="theme-name">Striped-Blue</span> </a> <a class="btn-theme striped-teal" onclick="setTheme('https://cdn.flexmonster.com/theme/stripedteal/flexmonster.min.css')"> <span class="theme-name-short">ST</span> <span class="theme-name">Striped-Teal</span> </a> <a class="btn-theme purple" onclick="setTheme('https://cdn.flexmonster.com/theme/purple/flexmonster.min.css')"> <span class="theme-name-short">Pu</span> <span class="theme-name">Purple</span> </a> <a class="btn-theme black-orange" onclick="setTheme('https://cdn.flexmonster.com/theme/blackorange/flexmonster.min.css')"> <span class="theme-name-short">Bo</span> <span class="theme-name">Black-Orange</span> </a> <a class="btn-theme bright-orange" onclick="setTheme('https://cdn.flexmonster.com/theme/brightorange/flexmonster.min.css')"> <span class="theme-name-short">Or</span> <span class="theme-name">Bright-Orange</span> </a> <a class="btn-theme yellow" onclick="setTheme('https://cdn.flexmonster.com/theme/yellow/flexmonster.min.css')"> <span class="theme-name-short">Ye</span> <span class="theme-name">Yellow</span> </a> <a class="btn-theme green" onclick="setTheme('https://cdn.flexmonster.com/theme/green/flexmonster.min.css')"> <span class="theme-name-short">Ge</span> <span class="theme-name">Green</span> </a> <a class="btn-theme midnight" onclick="setTheme('https://cdn.flexmonster.com/theme/midnight/flexmonster.min.css')"> <span class="theme-name-short">MN</span> <span class="theme-name">Midnight</span> </a> <a class="btn-theme mac-os" onclick="setTheme('https://cdn.flexmonster.com/theme/macos/flexmonster.min.css')"> <span class="theme-name-short">Mo</span> <span class="theme-name">Mac OS</span> </a> <a class="btn-theme soft-default" onclick="setTheme('https://cdn.flexmonster.com/theme/softdefault/flexmonster.min.css')"> <span class="theme-name-short">SD</span> <span class="theme-name">Soft-Default</span> </a> </div> <div id="pivot-container"></div>
.demo-toolbar { padding: 7px; } .demo-toolbar .theme-name { margin-right: 7px; text-transform: none; display: none; color: #fff; } .demo-toolbar .btn-theme { width: 60px; margin: 7px 7px 7px 0px; border-radius: 5px; vertical-align: middle; padding: 7px; background-color: #F5F5F5; border: none; white-space: nowrap; text-transform: uppercase; cursor: pointer; display: inline-block; font-weight: normal; font-size: 14px; text-align: center; align-items: flex-start; box-sizing: border-box; } .demo-toolbar .btn-theme:hover { border: none; } .demo-toolbar .btn-theme.btn-active { width: 150px; position: relative; } .demo-toolbar .btn-theme.btn-active::after { content: ''; position: absolute; top: 100%; left: calc(50% - 7px); width: 15px; height: 7px; clip-path: polygon(0 0, 100% 0, 50% 100%); } .demo-toolbar .btn-theme.btn-active .theme-name { display: inline-block; } .demo-toolbar .btn-theme .theme-name-short { color: #fff; display: inline-block; padding: 7px; border-radius: 5px; } .demo-toolbar .striped-lightblue .theme-name-short, .demo-toolbar .striped-lightblue:hover, .demo-toolbar .striped-lightblue.btn-active, .demo-toolbar .striped-lightblue.btn-active::after { background: repeating-linear-gradient(to bottom, #0277BD, #0277BD 50%, #0090DE 50%, #0090DE); } .demo-toolbar .bright-orange .theme-name-short, .demo-toolbar .bright-orange:hover, .demo-toolbar .bright-orange.btn-active, .demo-toolbar .bright-orange.btn-active::after { background: #FB7841; } .demo-toolbar .yellow .theme-name-short, .demo-toolbar .yellow:hover, .demo-toolbar .yellow.btn-active, .demo-toolbar .yellow.btn-active::after { background: #FBC02D; } .demo-toolbar .green .theme-name-short, .demo-toolbar .green:hover, .demo-toolbar .green.btn-active, .demo-toolbar .green.btn-active::after { background: #69b01e; } .demo-toolbar .striped-teal .theme-name-short, .demo-toolbar .striped-teal:hover, .demo-toolbar .striped-teal.btn-active, .demo-toolbar .striped-teal.btn-active::after { background: repeating-linear-gradient(to bottom, #007A6E, #007A6E 50%, #009688 50%, #009688); } .demo-toolbar .purple .theme-name-short, .demo-toolbar .purple:hover, .demo-toolbar .purple.btn-active, .demo-toolbar .purple.btn-active::after { background: #7E57C2; } .demo-toolbar .mac-os .theme-name-short, .demo-toolbar .mac-os:hover, .demo-toolbar .mac-os.btn-active, .demo-toolbar .mac-os.btn-active::after { background: #AAAEB5; } .demo-toolbar .soft-default .theme-name-short, .demo-toolbar .soft-default:hover, .demo-toolbar .soft-default.btn-active, .demo-toolbar .soft-default.btn-active::after { background: #CDCDCF; } .demo-toolbar .midnight .theme-name-short, .demo-toolbar .midnight:hover, .demo-toolbar .midnight.btn-active, .demo-toolbar .midnight.btn-active::after { background: #111111; } .demo-toolbar .black-orange .theme-name-short, .demo-toolbar .black-orange:hover, .demo-toolbar .black-orange.btn-active, .demo-toolbar .black-orange.btn-active::after { background: linear-gradient(to left, #F56B30 50%, #222 50%); } .demo-toolbar .btn-theme.black-orange:hover .theme-name-short, .demo-toolbar .btn-theme.black-orange.btn-active .theme-name-short, .demo-toolbar .btn-theme.striped-teal:hover .theme-name-short, .demo-toolbar .btn-theme.striped-teal.btn-active .theme-name-short, .demo-toolbar .btn-theme.striped-lightblue:hover .theme-name-short, .demo-toolbar .btn-theme.striped-lightblue.btn-active .theme-name-short { background: transparent; }
Choose between available color schemes that come with Flexmonster Pivot Table & Charts. It takes only one line of code to change the style of the component.
We offer a variety of predefined skins, ten of which are presented above. See the full list of available themes: Built-in themes.
You can pick one of these themes or create a custom report theme in corporate branding colors and apply it to the web reporting tool.
Refer to the Customizing appearance guide to learn how to apply a built-in theme, add custom CSS over it, or create a new one from scratch.
To make it easy for you to create a custom theme for Flexmonster, we added a custom theme builder app. Use it to build themes in no time and keep Flexmonster styles in one place.