Compass color change

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
May 1, 2016 at 10:38 am #182991
Joy
Buyer

Post count: 1076
Hello, how do I change the default compass color when GeoLocation is enabled? Currently if NOT enabled it’s gray, once it’s allowed, the compass icon turns blue(by default). I would like to know how to change the blue color. I found this code but it changes the compass color without any differentiating between active/inactive GeoLocation.
```
.fa-compass {color: green !important}
```
Thank you.
May 2, 2016 at 6:15 am #183502
Kor
Moderator

Post count: 16516
Hi Joy,

You can change the color and hover color of the compass using the custom CSS below.
```
.near-compass i.fa.fa-compass {
    color:#000;
}

.near-compass i.fa.fa-compass:hover {
    color:#ffa500;
}
```
Let us know if it works.
May 2, 2016 at 8:01 am #183542

Joy
Buyer

Post count: 1076

Thank you for your response but that doesn’t work. That changes the compass color but i am only trying to change the color of an active compass. You can see this in action on your Demo. I’m also attaching pictures of it.

Currently, the active color compass is set to : color: rgb(8, 124, 201); I need to know how to alter that color.

Thank you.

May 2, 2016 at 8:28 am #183547
Kor
Moderator

Post count: 16516
Hi Joy,

The custom CSS below should work. It changes the color of the compass if it’s active. Let us know if it works.
```
.near-compass.dropdown-open i.fa.fa-compass {
    color:pink;
}
```
Thanks!
May 2, 2016 at 8:31 am #183551

Joy
Buyer

Post count: 1076

Thank you, but I’m getting inconsistent results with that. The default color(color: rgb(8, 124, 201)) is still coming through every now and again. I’ll send my site credentials in the next message. Thank you.

May 2, 2016 at 8:31 am #183553

Joy
Buyer

Post count: 1076

This reply has been marked as private.

May 2, 2016 at 8:40 am #183554

Kor
Moderator

Post count: 16516

This reply has been marked as private.

May 2, 2016 at 8:53 am #183571

Joy
Buyer

Post count: 1076

Have you tried to uncheck and recheck the “near me” box? By default the color change is seamless and turns off or on each time. However, with this css change sometimes the blue comes back…sometimes the pink. I’ve cross-checked with a few browsers and on my mobile device.

May 2, 2016 at 9:12 am #183589
Kor
Moderator

Post count: 16516
Hi Joy,

I’m able to replicate this on firefox browser. Inserting an !important should fix it.
```
.near-compass.dropdown-open i.fa.fa-compass {
    color: pink !important;
}
```
Thanks!
May 2, 2016 at 9:19 am #183593

Joy
Buyer

Post count: 1076

Thank you. I’m still getting the same results….can you please tell me where I can hardcode the change instead?

May 2, 2016 at 10:44 am #183630

Stiofan O’Connor
Site Admin

Post count: 22956

Hi Joy,

This is done via JS so it’s hard to overwrite it effectively, i have made it easier to change in the next version of advanced search via a hook. If you would like me to implement this on your site early please provide wp-admin and FTP details.

Thanks,

Stiofan

May 2, 2016 at 7:35 pm #183954

Joy
Buyer

Post count: 1076

Hi Stiofan, thank you for your help. I will send you the credentials in the following post.

May 2, 2016 at 7:36 pm #183956

Joy
Buyer

Post count: 1076

This reply has been marked as private.

May 7, 2016 at 1:05 am #186132

Joy
Buyer

Post count: 1076

Hi Stiofan, were you able to add the change? Thank you.

May 13, 2016 at 3:03 am #189745

Joy
Buyer

Post count: 1076

@stiofan
Author

Posts