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

October Community Champions: A Shoutout to Our Contributors!

Community Content Calendar, November Edition

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

Are you a member of the Splunk Community?

Change colour of input choice in dashboard

CSS

token

October Community Champions: A Shoutout to Our Contributors!

Community Content Calendar, November Edition

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!