Change the colour of a single Limelight button?

Anyone know if it’s poss to change a single button colour in a Limelight button bar?

https://www.parts4motorhomes.co.uk/store/

Scroll down a bit, you’ll see the buttons, under the store, I want to change the KLARNA button to pink.

Ignore. Should have realised it’d be super easy if I bothered to actually check the css before posting the above.

For anyone finding this after looking for the same question: The button text becomes the button class, so just use custom css to change it. In this instance…

.KLARNA {
    cursor: pointer;
    background: #FF8AD8;
    border-color: #FF8AD8;
}

.KLARNA:hover {
    cursor: pointer;
    background: #424242;
    border-color: #424242;
}

Limelight launches from class names. The class name is NOT derived from the button text, it is the Limelight content unique ID - you just happen to have used the same name for the Limelight ID’s as you have put on the button text.

You should also be more specific with the class name so that you don’t start styling other launchers or the Limelight content

.spl-nav.KLARNA{......}

which of course also leads me to suggest that you use lower case class names as it looks less like you’ve just been dragged in off the street :)

2 Likes

So now I’m street whore AND I’ve been dragged inside?

I’m getting it pretty rough at the monent!

1 Like

Just trying to develop a theme here…

3 Likes

Interesting theme choice!

So for anyone finding this, this is the latest, no doubt soon to be corrected ;-)

First, in settings, set the buttons to “custom”, then use the following…

.spl-nav.limelight-unique-id {
cursor: pointer;
background: #FF8AD8 !important;
border-color: #FF8AD8 !important;
}

.spl-nav.limelight-unique-id:hover {
cursor: pointer;
background: #424242 !important;
border-color: #424242 !important;
}

.spl-nav.limelight-unique-id:active {
cursor: pointer;
background: #FF8AD8 !important;
border-color: #FF8AD8 !important;
border-radius: 0px;
}

Worth noting, if you set the button to default, or another built-in settings, no need for the !important bit.

3 Likes

Spot on - I’ve marked it as the solution.

3 Likes