Change the colour of a single Limelight button?

Big White Duck
1

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.

2

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;
}
3

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.

4

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
5

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

I’m getting it pretty rough at the monent!

1 Like
6

Just trying to develop a theme here…

3 Likes
7

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.

4 Likes
8

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

3 Likes