Use Splunk dashboard styles

You can lay out and format the pages in a Splunk app any way you want using HTML and CSS. But you can also use the same CSS that Splunk uses by including a link to the dashboard.css style sheet, which is included automatically for converted HTML dashboards. When you use Splunk dashboard styles, your apps will have a similar look and feel as Splunk Web apps and some of the formatting work will be taken care of for you.

The Splunk dashboard styles use a grid layout system that is similar to Bootstrap, with rows that contain cells that contain panels, which contain your visualizations:

Dashboard grid

This layout is represented by a pattern of nested <div> tags that represent the dashboard container and its elements:

dashboard-body
    dashboard-row
        dashboard-cell
            dashboard-panel
                panel-head
                panel-body

Your layout can have multiple rows, and each row can have one or more cells. Views are placed within panels, and you can have multiple views in a single panel.

When using JavaScript and HTML, place the layout in the <body> section of the page.
Use the panel element IDs from the layout <div> tags as the el property in the view's constructor.

Example

Here's an example of a layout that has one row with one cell:

<div class="dashboard-body container-fluid main-section-body">

    <div class="row">
        <div class="dashboard-header clearfix">
            <h2>Page Title</h2>
        </div>
    </div>


    <!-- A row with one cell -->
    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel">
                <div class="panel-head">
                    <h3>Panel Title</h3>
                </div>
                <div class="panel-body">
                    <!-- Panel contents here -->
                    <p>Text</p>

                    <!-- Django template tag -->
                    <!-- {% view id="viewid" %} -->

                    <!-- JavaScript -->
                    <!-- <div id="viewid"></div>  -->
                </div>
            </div>
        </div>
    </div>

    <!-- Place the next row here -->

</div>

You can add another row by adding another <div class="dashboard-row"> section. For example, you could add the following two-celled row to the table above, under the comment "Place the next row here":

    <!-- A row with two cells -->
    <div class="dashboard-row">

        <!-- First cell -->
        <div class="dashboard-cell" style="width: 30%;">
            <div class="dashboard-panel">
                <div class="panel-head">
                    <h3>Panel Title</h3>
                </div>
                <div class="panel-body">
                    <!-- Place panel contents here -->
                </div>
            </div>
        </div>

        <!-- Second cell -->
        <div class="dashboard-cell" style="width: 70%;">
            <div class="dashboard-panel">
                <div class="panel-head">
                    <h3>Panel Title</h3>
                </div>
                <div class="panel-body">
                    <!-- Place panel contents here -->
                </div>
            </div>
        </div>

    </div>

To use the Splunk dashboard styles, start with this basic layout and expand and modify it as needed.

Splunk dashboard styles with HTML Dashboards

HTML dashboards (ones that have been converted from Simple XML) already have an autogenerated layout based on the Splunk dashboard styles. This layout differs slightly from the layout described above―it includes a header with the title and the appbar. The auto-generated HTML dashboard styles also use additional <div> tag classes for the Simple XML form inputs and elements. Here's an example layout for a radio button group and a submit button:

    <div class="fieldset">
        <div class="element input-radio" id="field1">
            <label>Label</label>
        </div>
        <div class="input form-submit" id="search_btn">
            <button class="btn btn-primary submit">Search</button>
        </div>
    </div>

For elements, the layout also uses "panel-element-row" and "dashboard-element" <div> tag classes. Typically, the elements are wrappers around the corresponding SplunkJS Stack view with a panel implementation. Because the panel implementations use the entire container, only one visualization is displayed per panel and the view's ID is placed in the "dashboard-element" class. Here's an example:

    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                <div class="panel-element-row">
                    <div class="dashboard-element table" id="elementid" style="width: 100%">
                        <div class="panel-head">
                            <h3>Panel Title</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

You can modify this layout as needed, for example by placing form inputs in "dashboard-row" <div> tags, or using the layout described for Web Framework apps.

    Note  When editing HTML dashboard layout in Splunk Enterprise versions 6.1.x, a known issue causes width settings to be ignored. To work around this issue, use the !important declaration as follows:
    style="width: 30% !important;"