Docs

[Jeypolitan]

Hi there,

I have seen on many websites and blogs, that people have a widget of a grey map and a pin showing their “current location” based on country/city. (See example here and here).

I have searched everywhere for how to do this/what the widget is called, and I cannot find it anywhere 🙁
Please advise if you know which widget this is, or how I can recreate it in a similar style?

Best,
J

[Jeypolitan]

This reply has been marked as private.

[Jade]

Hi J,

As I have checked, those widgets are not detecting the location of a visitor and they are just text widgets width images in it.

Hope this helps.

[Nico]

Hi There,

Thanks for writing in.

I have tried to search that kind of plugin however it would be best to contact the blogger and ask for the plugin they used because I could not see any similar plugin.

Thank you so much for understanding.

[Jeypolitan]

Hi Nico and Jade,

Many thanks for your reply, and I completely understand. Thank you so much for researching.

I will manually post an image and edit the location pin based on my current location.
Just one question (because the formatting ruins the clarity of the text on the image), how can I change the font of an individual widget’s title or normal text?

For instance, for this “location widget” I want either the title or the text to be Helvetica and centered. How can I do this? 🙂

Many thanks!

Best,
J

[Friech]

Hi J,

You can wrap it on a span tag and style it.

e.g.
<span style="font-family: 'Helvetica Neue';text-align: center;">Current location: London, UK</span>

Hope it helps, Cheers!

[Jeypolitan]

Hi Friech,

Many thanks for your response.
This code helped the font style, but it did not center the text unfortunately.
How can I center the text so it is in the middle, and not to the left? 🙂

Best,
J

[Thai]

Please update the previous code to this:

<span style="font-family: 'Times New Roman';text-align: center;display: block;">Current location: London, UK</span>

Hope it helps 🙂

[Jeypolitan]

Hi Thai,

Thank you so much, that worked perfectly! 🙂

Just one last question: I removed a small code from my CSS section (thinking this was an unnecessary code), and little did I know that this was the code that removed some space/margin between each widget in my sidebar.

I would like to make the space between each widget (in my sidebar) smaller please. It was a very small CSS code.
Right now they are a little bit too far from each other, and I would like them to be a bit closer to each other.

Please advise 🙂

Many many thanks!

Best,
J

[Jade]

Hi J,

Please try this code:

.x-sidebar .widget {
    margin-top: 1em;
}

Hope this helps.

[Author]

Posts