White labeling gives you full control over SeekTable reports visual appearance. White-labeling settings are available only for dedicated SeekTable instances (self-hosted version or dedicated managed-by-SeekTable instance) with an active "white-label mode" subscription. If you want to evaluate these capabilities before purchase you can request a free 14-day trial.
With white label mode you can re-brand SeekTable app and make it a seamless part of your own internal systems (this might be especially important if you embed SeekTable reports):
White label SeekTable can be used for organizing a portal with reports/analytics for your clients or customers.
By default SeekTable uses dark-green color for main-action buttons, left and top menu. You can change this color to match your company's logo or brand color by adding this CSS rule into Custom App CSS:
:root { --st-color: #0d8f6a; }
Note that published reports use separate CSS, so you might want to add it into Custom Public Report CSS too ("Public Report Page" tab).
SeekTable renders charts as SVG images with ChartistJS and it is possible to customize styles for charts with just CSS rules. Most typical customization is a change of colors; you can do that globally (for a whole app) in the following way:
-a
, -b
, -c
, -d
, -e
, -f
, -g
, -h
,
-i
, -j
, -k
, -l
, -m
, -n
, -o
.
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { stroke: #c23531 !important; } .ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area { fill: #c23531 !important; } .pvtChartLegend.pvtChart-series-a { background-color: #c23531; }
In the following places:
In the same manner you can re-define any of 15 colors (or all of them).
By default left menu width is 200px - this is a good trade-off between items readability and page space used for the report itself. However, if you use long names for cubes/reports you might want to increase the left-menu width (at least for large-enough screens). To do that add an additional width value to the default width in these CSS rules and place them into Custom App CSS:
@media (min-width: 1200px) { #sidebar { width: 220px; } #mainViewContainer { margin-left: 235px; } .navbar-top-menu .navbar-brand { min-width: 250px; } .on-premise-version { min-width: 220px; } }
For example, if you want to add +50px the width of the #sidebar
should be 270px.
In addition to the logo/brand you might want to add a generation date (or a timestamp) to PDF exports. This can be achieved with special tokens in the Custom PDF export footer HTML ("PDF Export" tab):
<span class="date-year"></span>-<span class="date-month"></span>-<span class="date-day"></span> <span class="date-hours"></span>:<span class="date-minutes"></span>
It is possible to translate UI labels to non-English language by specifying JSON config at Admin → UI localization. This capability also can be used for customization of English labels. For now the following ready-to-use translations are available:
Looking for translation to other languages (German, Spanish, French, Italian etc)? Feel free to contribute your variant on github.