Adding the Sabbath sunset times to your calendar can add value and traffic to your website. The Sunset times are based on your physical location.
The address can be adjusted in the Name & Contact option of your website Settings (accessible as the last option in the dark gray admin bar).
For addresses in the USA, It is best to ensure that your listed ZIP is only five digits (remove the dash and extra ending four digits if they are included.
Add Sunset Times to your Calendar
To add sunset times to your website Calendar follow these easy steps:
- Go to Events in the dark gray admin bar on the left side of your website.
- Next, select Settings.
- Select the General settings option.
- Click Yes for the "Show weekend sunset times" option.
- Click the blue Save button
Add Sunset Times to Any Page:
Only after the Calendar setting are set to show sunset times can you add them to other areas of your website. This is done by making use of the HTML Block:
How to add an HTML Block:
- Start by editing a page and clicking into the blue bordered editable area where you want to add the Sunset Times.
- Then click on the black "Add Block" icon directly to the left with the white "+" in it. It looks like this:
- Select the "HTML" block from the blocks menu.
- Click inside of the the new (larger) box and paste the code from bellow.
- Click the blue "Submit" button.
- Finally, Publish the page.
Sunset Times Code:
Here is the code for you to copy:
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap');
:root {
--gradient: linear-gradient( 135deg, #6500468c 20%, #e4f272 100%);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.25em;
}
.clear {
clear: both;
}
.zoom-outer-container {
font: 300 11pt/1.375em Lato,sans-serif;
margin: 0;
width: 100%;
//height: 100vh;
font-family: 'Montserrat', sans-serif;
//background-color: #343d4b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-shadow: 1px 1px 3px rgba(0,0,0,1);
}
.zoom-container {
border-radius: 25px;
-webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
background-color: #222831;
color: #ffffff;
height: 175px;
}
.zoom-shape {
position: relative;
height: 100%;
border-radius: 25px;
background-image: url("https://picsum.photos/300/175?random");
width: 300px;
-webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
-webkit-transform: translateZ(0) scale(1.02) perspective(1000px);
transform: translateZ(0) scale(1.02) perspective(1000px);
float: left;
}
.zoom-shape:hover {
-webkit-transform: scale(1.1) perspective(1500px) rotateY(10deg);
transform: scale(1.1) perspective(1500px) rotateY(10deg);
}
.zoom-gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: var(--gradient);
border-radius: 25px;
opacity: 0.8;
}
.zoom-next-container {
position: absolute;
top: 15px;
left: 10px;
padding-right: 10px;
}
.zoom-next-head {
margin: 0;
}
.title {
font-weight: 700;
}
h2.zoom-next-head {
color: #FFFFFF !important;
margin: 0px !important;
}
</style>
<div class="zoom-outer-container">
<div class="zoom-container">
<div class="zoom-shape">
<div class="zoom-gradient"></div>
<div class="zoom-next-container">
<h2 class="zoom-next-head">Sunset Times</h2>
<hr>
{% set dayOfWeekIndex = date()|date("N") %}
{% if dayOfWeekIndex == 5 %}
<span class="title">Sunset tonight:</span> {{ su.calendar.sunsetTime|date( "g:i A", "America/Chicago" ) }}<br>
<span class="title">Sunset tomorrow:</span> {{ su.calendar.sunsetTime( '+1 day' )|date( "g:i A", "America/Chicago" ) }}<br>
{% elseif dayOfWeekIndex == 6 %}
<span class="title">Sunset tonight:</span> {{ su.calendar.sunsetTime|date( "g:i A", "America/Chicago" ) }}<br>
<span class="title">Sunset next Friday:</span> {{ su.calendar.sunsetTime( 'next friday' )|date( "g:i A", "America/Chicago" ) }}<br>
<span class="title">Sunset next Sabbath:</span> {{ su.calendar.sunsetTime( 'next saturday' )|date( "g:i A", "America/Chicago" ) }}<br>
{% else %}
<span class="title">Sunset next Friday:</span> {{ su.calendar.sunsetTime( 'next friday' )|date( "g:i A", "America/Chicago" ) }}<br>
<span class="title">Sunset next Sabbath:</span> {{ su.calendar.sunsetTime( 'next saturday' )|date( "g:i A", "America/Chicago" ) }}<br>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Getting Time Errors?
Change all seven "g:i A", "America/Chicago" to one of the other time zones:
-05, -04 America/Detroit
-05, -04 America/New_York
-06, -05 America/Chicago
-07, -06 America/Boise
-07, -06 America/Denver
-07, -07 America/Phoenix
-08, -07 America/Los_Angeles
-09, -08 America/Juneau
-10, -10 Pacific/Honolulu
+10, +10 Pacific/Guam
+11, +11 Pacific/Pohnpei
For more Time Zones see: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-->