Resizing Celestial Bodies

This will resize the celestial bodies on a calendar.

Utility

This can be helpful when you need to fit multiple celestial objects onto the calendar display, or when their placement clashes with the holiday display.

Manufacturing

by Kathrin Janowski

For reference, this is the moon's original size.

Resizing the Moon

The first step is to set the ".moon" element to a smaller size.

by Kathrin Janowski

.user-css .user-css-calendar .moon{
width:27px;
height:27px;
}

Adjusting positions

The button which brings up the pop-up with the moon's information can now be seen peeking out from behind it. So we need to adjust the positions to cover it again.

by Kathrin Janowski

.user-css .user-css-calendar .moon{
width:27px;
height:27px;
top:2px;
}

.user-css .user-css-calendar .celestial-object{
top:7px;
}

Finally, we need to move the icon back to the center.

by Kathrin Janowski

.user-css .user-css-calendar .moon .fas{
left:0px;
top:6px;
}

Table of Contents

Access & Availability

Journeyman

Complexity

CSS

Discovery

because the moon on one of my calendars was overlapping with the name of the date's holiday

Additional Tip

You can add a custom CSS class to the celestial body in the calendar editor. If your world has more than one moon, this will allow you to style them individually.