Change colour of input choice in dashboard

payl_chdhry · ‎06-02-2021

Hi all,

I am using linked list as input and have made it to look like tab by following one of the answer in the forum. Now i want to change the color colour of the input tab (each choice).

Is that possible, please help.

ITWhisperer · ‎06-02-2021

Can you share the SimpleXML you already have?

payl_chdhry · ‎06-02-2021

@ITWhisperer This is what we are using. My requirement is to only fill the box/tab with color (that is area within the border defined below) and not the whole input field set :

<form>
  <label>Data review test - payal</label>
  <fieldset submitButton="false">
    <input type="link" token="source_type" searchWhenChanged="true" id="source_tab1">
      <label>Type of Source</label>
      <choice value="source_type1" >Source1</choice>
      <choice value="source_type2" >Source2</choice>
      <choice value="source_type3" >Source3</choice>
      <choice value="source_type4" >Source4</choice>
      <change>
        <condition value="source_type1">
          <unset token="home_token"></unset>
          <set token="source_type1_token"></set>
          <unset token="source_type2_token"></unset>
          <unset token="source_type3_token"></unset>
          <unset token="source_type4_token"></unset>
        </condition>
        <condition value="source_type2">
          <unset token="home_token"></unset>
          <unset token="source_type1_token"></unset>
          <set token="source_type2_token"></set>
          <unset token="source_type3_token"></unset>
          <unset token="source_type4_token"></unset>
        </condition>
        <condition value="source_type3">
          <unset token="home_token"></unset>
          <unset token="source_type1_token"></unset>
          <unset token="source_type2_token"></unset>
          <set token="source_type3_token"></set>
          <unset token="source_type4_token"></unset>
        </condition>
        <condition value="source_type4">
          <unset token="home_token"></unset>
          <unset token="source_type1_token"></unset>
          <unset token="source_type2_token"></unset>
          <unset token="source_type3_token"></unset>
          <set token="source_type4_token"></set>
        </condition>
        <condition>
          <set token="tokLabel">$label$</set>
          <set token="home_token"></set>
        </condition>
      </change>
    </input>
    <html>
        <style>
          /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */
          #panel_layout .fieldset{
            padding: 10px 12px 0px 12px !important;          
          }
          /* Increase width of Link input to have options in Single Line */
          #source_tab1.input-link{
            width:100%;
          }
          /* Change from flex to -webkit-box for side by side layout */
          #input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            display: -webkit-box !important;
          }
          /* Create Button Border to make them appear as Tabs */
          #source_tab1.input-link busplutton{
            /*width: 120px !important;*/
            border-top-color: rgb(255, 255, 255);
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: rgb(255, 255, 255);
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: rgb(255, 255, 255);
            border-left-style: solid;
            border-left-width: 1px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
          /* Hide link input bottom message section to merge with Horizontal line */
          .dashboard-panel #input_link_split_by label,
          #source_tab1 .splunk-choice-input-message{
            display: none !important;
          }
          /* Remove padding from horizontal line */
          #panel_layout .panel-body.html{
            padding: 0px !important;
          }
        </style>
        <hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/>
      </html>
  </fieldset>
    <row>
    <panel depends="$initial_token$" id="initial_panel">
      <title>Click on input values to view results</title>
        <html>
        <style>
   /*       #initial_panel .dashboard-panel{
             background-color:#F0F0F0 !important;
            }*/
          .dashboard-row #initial_panel .dashboard-panel h2.panel-title {
             font-size: 20px !important;
             color:#1A237E !important;
             allign: center;
             }
         </style>
      </html>
    </panel>
  </row>
 </form>

ITWhisperer · ‎06-03-2021

Thanks. Can you share the simpleXML for your inputs too?

payl_chdhry · ‎06-03-2021

@ITWhisperer I have updated my response.

ITWhisperer · ‎06-03-2021

          #source_tab1.input-link div[role="radiogroup"] button:nth-child(3n+1){
            background-color: green !important;
            color: yellow !important;
          }
          #source_tab1.input-link div[role="radiogroup"] button:nth-child(3n+2){
            background-color: blue !important;
            color: yellow !important;
          }
          #source_tab1.input-link div[role="radiogroup"] button:nth-child(3n+0){
            background-color: red !important;
            color: yellow !important;
          }

Change colour of input choice in dashboard

CSS

token

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!