Dashboards & Visualizations

Where can I find CSS for Link List Selected Item?

Brausepaule
Path Finder

Hi All,

i love link lists, however i cannot find the apropriate pseude type to manipulate the appearance of the selected Item.

on this site:

https://www.mediaevent.de/css/css-selektor-pseudo.html

there are examples of pseudo types and "hover" and "selected" work like a charme, however the link list loses the ccs styles once something else is selected in the dashboard.
Can anyone help?

Kind regards,

Michael

Labels (3)
0 Karma
1 Solution

danspav
SplunkTrust
SplunkTrust

Hi @Brausepaule,

I like to play around with the link list items so they look more like buttons. Here's one example from a Social Media dashboard:

2023-03-06 17_53_25-CSS - Linked List _ Splunk 9.0.2205.1.png

 

Here's the Input code:

  <input type="link" token="platform" searchWhenChanged="true" id="platform">
      <label>Platform</label>
      <choice value="*">All</choice>
      <choice value="Google Play Store">Google</choice>
      <choice value="Facebook">Facebook</choice>
      <choice value="Apple App Store">Apple</choice>
      <choice value="Instagram">Instagram</choice>
      <choice value="Twitter">Twitter</choice>
      <default>*</default>
      <initialValue>*</initialValue>
      <change>
        <condition label="All">
          <set token="platform_name">All Platforms</set>
        </condition>
        <condition>
          <set token="platform_name">$label$</set>
        </condition>
      </change>
    </input>

With the exception of the images, here's the CSS:

 

div#platform button{height: 38px!important;
    padding-left: 36px!important;
    border: 1px solid #cccccc; 
    min-width: 100px;
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-color:#ffffff;
    width: auto;
    padding: 10px;
    margin-right: 8px;
    color: #333333;
    height: 55px;
    border-radius:7px;
    font-size: 16px;
}

div#platform  button[aria-checked="true"]{
    border:3px solid #6b7785!important;
}

The last bit of CSS sets the border of the selected button to be bold, even when you click away to something else.

I'm also setting the ID on the input, so the CSS will only apply to that list in particular.

 

Hopefully that helps you out.

 

-Spav

View solution in original post

Tags (1)

danspav
SplunkTrust
SplunkTrust

Hi @Brausepaule,

I like to play around with the link list items so they look more like buttons. Here's one example from a Social Media dashboard:

2023-03-06 17_53_25-CSS - Linked List _ Splunk 9.0.2205.1.png

 

Here's the Input code:

  <input type="link" token="platform" searchWhenChanged="true" id="platform">
      <label>Platform</label>
      <choice value="*">All</choice>
      <choice value="Google Play Store">Google</choice>
      <choice value="Facebook">Facebook</choice>
      <choice value="Apple App Store">Apple</choice>
      <choice value="Instagram">Instagram</choice>
      <choice value="Twitter">Twitter</choice>
      <default>*</default>
      <initialValue>*</initialValue>
      <change>
        <condition label="All">
          <set token="platform_name">All Platforms</set>
        </condition>
        <condition>
          <set token="platform_name">$label$</set>
        </condition>
      </change>
    </input>

With the exception of the images, here's the CSS:

 

div#platform button{height: 38px!important;
    padding-left: 36px!important;
    border: 1px solid #cccccc; 
    min-width: 100px;
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-color:#ffffff;
    width: auto;
    padding: 10px;
    margin-right: 8px;
    color: #333333;
    height: 55px;
    border-radius:7px;
    font-size: 16px;
}

div#platform  button[aria-checked="true"]{
    border:3px solid #6b7785!important;
}

The last bit of CSS sets the border of the selected button to be bold, even when you click away to something else.

I'm also setting the ID on the input, so the CSS will only apply to that list in particular.

 

Hopefully that helps you out.

 

-Spav

Tags (1)

Brausepaule
Path Finder

Hi danspav,

the part for aria-checked would be the one i am looking for:

 

div#platform  button[aria-checked="true"]{
    border:3px solid #6b7785!important;
}

However as soon as i click somewhere else after selecting the button, the border disappears again.

Does it really stay with a thick border after clicking in a chart or something?

 

Kind regards,

Michael

0 Karma

Tom_Lundie
Contributor

The :focus pseduo-class selector corresponds with the properties that will change when you click elsewhere within the dashboard, but @danspav ensures this is overridden within his solution using the !important property.

The CSS you're interested in will set a permanent cyan-blue border around the selected (aria-checked="true") buttons within the link list.

 

div#platform  button[aria-checked="true"]{
    border:3px solid #6b7785!important;
}

 

However, from a purely CSS perspective, this selector specifically selects all of the buttons within a div that is assigned to the "platform" id. In Splunk's link list, this corresponds with an input set with the id="platform."

 

 <input type="link" token="platform" searchWhenChanged="true" id="platform">

 

 

To make this work for you, specifically create an ID that corresponds with what you're trying to achieve and make sure that the CSS aligns. For a simple example:

Dashboard XML:

 

<input type="link" token="example_token" searchWhenChanged="true" id="exampleId">
      <label>Platform</label>
      <choice value="*">All</choice>
      <choice value="1">Value 1</choice>
      <choice value="2">Value 2</choice>
      <choice value="3">Value 3</choice>
      <default>*</default>
      <initialValue>*</initialValue>
</input>

 

Dashboard CSS:

 

div#exampleId button[aria-checked="true"]{
    border:3px solid #6b7785 !important;
}

 

You will then need to replace the "exampleID" and and the choices as appropriate for the context of your dashboard.

P.S. If this doesn't work for you, could you please share some (obfuscated as necessary) XML and CSS contents for us to help diagnose?

0 Karma

Brausepaule
Path Finder

Hi Tom,

no worries i have a working link list with ID and everything and as stated to begin with the CSS applies well until i select something else in the dashboard...here is what i have got:

Brausepaule_0-1678106461838.png

This is my linklist...sorry in german, but that does not impact anything anyhow 😉

Here is my simple XML for it:

      <input type="link" token="field2" id="link_list_finops">
        <label>...</label>
        <choice value="overview">FinOps Overview</choice>
        <choice value="util_vs_cost">Nutzung &lt;-&gt; Kosten</choice>
        <choice value="cost_vs_budget">Kosten &lt;-&gt; Budget</choice>
        <choice value="benefits">Mehrwerte</choice>
        <choice value="why_splunk">Warum Splunk?</choice>
        <default>FinOps Overview</default>
        <change>
          <condition value="overview">
            <set token="tok_overview"></set>
            <unset token="tok_util_vs_cost"></unset>
            <unset token="tok_benefits"></unset>
          </condition>
          <condition value="util_vs_cost">
            <unset token="tok_overview"></unset>
            <set token="tok_util_vs_cost"></set>
            <unset token="tok_benefits"></unset>
          </condition>
          <condition value="benefits">
            <unset token="tok_overview"></unset>
            <unset token="tok_util_vs_cost"></unset>
            <set token="tok_benefits"></set>
          </condition>
        </change>
      </input>


Here is my current CSS for the current style:

        #link_list_finops {
          width: 100% !important;
        }
        
        #link_list_finops.input-link label {
          font-size: 18px;
          font-weight: bold;
        }

        #link_list_finops.input-link button{
          border-bottom: 1px solid white;
          margin: 5px !important;
          color: white !important;
          font-family:Ink Free !important;
          font-weight: bold !important;
        }


As you can see in the screenshot the button is very well highlighted by the default css behavior, but when i click somewhere in my dashboard in goes to this:

Brausepaule_1-1678106872584.png

adding the aria-checked CSS does not change the behavior when i click on something else in the dashboard.

0 Karma

Tom_Lundie
Contributor

If you want to change the button so that it matches the focus pseduo-class exactly:

 

#link_list_finops button[aria-checked="true"] {
    color: rgb(0, 110, 170) !important;
    box-shadow: rgb(0, 110, 170) 0px 0px 1px 3px !important;
}

 

Also make sure that your browser is picking up these changes. You can force a cache reset using the _bump endpoint:
https://my.splunk:8000/en-US/_bump 

Brausepaule
Path Finder

Hi Tom,

 

actually the other css from @danspav worked already it was simply not visible due to my background...

the selection border is not my primary intend...i just wanted to know how to edit the style of the selcted button even when something else on the dashboard gets selected...

now i can do this...

Brausepaule_0-1678108931834.png

Thanks mates...karma incoming 😉

 

Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...