topic Re: Where can I find CSS for Link List Selected Item? in Dashboards & Visualizations

Where can I find CSS for Link List Selected Item?

Brausepaule — Fri, 03 Mar 2023 20:58:28 GMT

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

Re: Where can I find CSS for Link List Selected Item?

danspav — Mon, 06 Mar 2023 07:03:21 GMT

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:

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

Re: Where can I find CSS for Link List Selected Item?

Brausepaule — Mon, 06 Mar 2023 07:37:41 GMT

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

Re: Where can I find CSS for Link List Selected Item?

Tom_Lundie — Mon, 06 Mar 2023 12:41:13 GMT

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."

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?

Re: Where can I find CSS for Link List Selected Item?

Brausepaule — Mon, 06 Mar 2023 12:51:18 GMT

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:

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 <-> Kosten</choice> <choice value="cost_vs_budget">Kosten <-> 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:

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

Re: Where can I find CSS for Link List Selected Item?

Tom_Lundie — Mon, 06 Mar 2023 13:14:32 GMT

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

Re: Where can I find CSS for Link List Selected Item?

Brausepaule — Mon, 06 Mar 2023 13:24:04 GMT

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...

Thanks mates...karma incoming 😉