3. Change the layout

One of the easiest ways to customize an HTML dashboard is to change the layout. Start by moving the pie chart, which doesn't take much space, next to the form inputs at the top of the page. You'll then put them in a Splunk dashboard-row layout with cells.

  1. In the HTML file, find this code that creates the layout for the panels:
  2. <div class="fieldset">
        <div class="input input-dropdown" id="input1">
            <label>Number of Results</label>
        </div>
        <div class="input input-radio" id="input2">
            <label>Source Types</label>
        </div>
        <div class="form-submit" id="search_btn">
            <button class="btn btn-primary submit">Submit</button>
        </div>
    </div>
    
    
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                
                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-head">
                            <h3>index=_internal sourcetype=$sourcetype$ | head $headcount$</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel2" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                
                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Count by sourcetype</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  3. Reverse the order of the two dashboard rows (and update the dashboard row and panel numbers) to move the result table (id="element1") to the bottom dashboard row―replace the code above with this:
  4. <!-- The fieldset lays out form inputs -->
    <div class="fieldset">
        <div class="input input-dropdown" id="input1">
            <label>Number of Results</label>
        </div>
        <div class="input input-radio" id="input2">
            <label>Source Types</label>
        </div>
        <div class="form-submit" id="search_btn">
            <button class="btn btn-primary submit">Submit</button>
        </div>
    </div>
    
    <!-- The pie chart is now in row 1 -->
    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                
                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Count by sourcetype</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- The result table is now in row 2 -->
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel2" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
                
                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-head">
                            <h3>index=_internal sourcetype=$sourcetype$ | head $headcount$</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  5. Consolidate the dropdown list, radio buttons, and pie chart to one row. You do that by adding a couple of cells to the first dashboard row for the two inputs. Replace the code above with this:
  6. <!-- Replace the fieldset with this row with 3 cells -->
    <div id="row1" class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel clearfix">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Number of Results</h3>
                    </div>
                    <div class="panel-body" id="input1">
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel clearfix">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Source types</h3>
                    </div>
                    <div class="panel-body" id="input2">
                    </div>
                </div>
            </div>
        </div>
        <!-- The pie chart is now in row 1, cell 3 -->
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
    
                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-head">
                            <h3>Count by sourcetype</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- The result table is now in row 2 -->
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panel2" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">
    
                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-head">
                            <h3>index=_internal sourcetype=$sourcetype$ | head $headcount$</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    This code also includes these changes:

    • The form input IDs and labels have been moved to the cells.
    • <label> has been replaced by <h3>.
    • The cell width has been updated to distribute the cells better.
    • The <div class="fieldset"> is gone, and so is the Submit button.

    After you save the page, here's the result:

    HTML dashboard layout

This is one way that you can modify the dashboard grid styles, but you aren't limited to this― if you want, you can even recreate your layout from scratch.

Continue to 4. Modify visualizations.