How To Change Moonrise Moonset icon

There are no options for this but it can be accomplished with custom css. Each html section has unique classes assigned which allow some tweaking via css. The browser’s builtin code inspector shows these classes. Please update to version 5.0.6 before you try below solution.

At your weather page, click on the “Layout” tab and scroll down to the “Custom CSS” box. Copy and paste the following 3 lines into the custom css box and save:

.climacon.climacon-moonrise, .climacon.climacon-moonset { display:none; }
.owmw-moonrise::before { content: “\00a0Moonrise\00a0”; }
.owmw-moonset::before { content: “\00a0Moonset\00a0”; }

This will hide the moonrise/set icons and print the text instead. (“\00a0” is a non-breaking space to separate the labels from the time value.)

as you tell me for pasting below code in custom css box in layout option. after paste this code hide icon but not showing properly you can see in image link below

(10:09 PM10:17 AM) after code paste

Moonrise time – 10:09 PM and Moonset time – 10:17 ( i want to show like this) so please resolve this issue asap.

moonrise and moonset time

.climacon.climacon-moonrise, .climacon.climacon-moonset { display:none; }
.owmw-moonrise::before { content: “\00a0Moonrise\00a0”; }
.owmw-moonset::before { content: “\00a0Moonset\00a0”; }

It took me a while to figure this one out since I had tested it on my end before posting it. The solution was simple once I realized the issue.

When you copy and paste from the support forum, the apostrophes around the two content options have changed. Please type over the 4 apostrophes and change them back to the normal representation, and save the weather. After that the CSS solution will work.

I done as you tell but its not working same problem and not added ‘moonrise and moonset text before timing i enabled only moonrise time option from plugin so please tell me how to show timing in best format like this – Moonrise time – 10:09 PM and Moonset time – 10:17 AM – i want to show timing and text please give me code So that i wil do add in css or coding. Please Please.

• This reply was modified 3 years, 1 month ago by Solutions.

I created a new weather for my location and checked off only “Moonrise + moonset?” under the display tab. Under the Layout tab, I put the above CSS (and set a background image). The result is the output you are looking for, see https://imgur.com/tAqSe6r