3: Change the layout

One of the easiest ways to customize an HTML dashboard is to change the layout. Let's start by moving the pie chart, which doesn't take much space, next to the form inputs at the top of the page. We'll 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. Now, let's consolidate the dropdown list, radio buttons, and pie chart to one row. We'll 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, refresh Splunk Web, and reload the dashboard, here's the result:

    HTML dashboard layout

That's just an idea of how you can modify the dashboard grid styles, but you aren't limited to that―you can recreate your layout from scratch, if you want.

Continue to 4: Modify visualizations.