How to add Code to your website:
- Start by editing a page and clicking into the blue bordered editable area where you want to add in your HTML code.
- Then click on the black "Add Block" icon to the left with the white "+" in it. Select the "HTML" block from the Block menu.
It looks like this.
- Click inside of the the new (larger) box and paste the code.
- Change the text to suit your needs.
- Check the pasted code for any website addresses starting with "http://" (this will not work) and change it to "https://" (hopefully this will allow it to work)
- Click the blue "Submit" button.
- Publish the page.
Here is some Pre-Built HTML codes you can add to your website right now:
Sunset Times:
Pull the sunset time from your calendar and display it on a page. Here is what the sunset time will look like:
Sunset next Friday: 6:32 PM
Sunset next Sabbath: 6:33 PM
Sunset next Sabbath: 6:33 PM
Here is the code for you to copy:
{% set dayOfWeekIndex = date()|date("N") %}
{% if dayOfWeekIndex == 5 %}
Sunset tonight: {{ su.calendar.sunsetTime|date( "g:i A" ) }}<br>
Sunset tomorrow: {{ su.calendar.sunsetTime( '+1 day' )|date( "g:i A" ) }}<br>
{% elseif dayOfWeekIndex == 6 %}
Sunset tonight: {{ su.calendar.sunsetTime|date( "g:i A" ) }}<br>
Sunset next Friday: {{ su.calendar.sunsetTime( 'next friday' )|date( "g:i A" ) }}<br>
Sunset next Sabbath: {{ su.calendar.sunsetTime( 'next saturday' )|date( "g:i A" ) }}<br>
{% else %}
Sunset next Friday: {{ su.calendar.sunsetTime( 'next friday' )|date( "g:i A" ) }}<br>
Sunset next Sabbath: {{ su.calendar.sunsetTime( 'next saturday' )|date( "g:i A" ) }}<br>
{% endif %}
Center Text:
To add truly centered text to your page you can add in the following code. Here is what it looks like:
YOUR TEXT HERE
Here is the code for you to copy:
<style>
div#CenterText {
text-align: center;
}
</style>
<div id="CenterText">
YOUR TEXT HERE
</div>
Add an icon (Font-Awesome icons)
Font Awesome is a vast library of fonts that you can use in your website. Visit: https://fontawesome.com/icons to see the many choices. Here are some icons in action:
, , , , , , , , ,
Here is the code for you to copy:
{{ getIcon( "fa-NAME" ) }}
Replace "NAME" with the appropriate Font Awesome icon name (see: https://fontawesome.com/icons).
Custom HTML Buttons
Add custom built buttons to your site using Web-Design Assistants website to create custom buttons.
Sabbath School Lessons
Add an attractive set of links to the various daily lesson studies for each age group.
<style>
.su_bootstrap_safe .row {
margin-left: 0px;
margin-right: 0px;
}
#ss .studyguides {
margin-left: -5%;
overflow: hidden;
padding: 0 0 40px;
}
@media all and (min-width: 680px) {
#ss studyguides {
margin-left: 0;
}
}
#ss .studyguides {
display: block;
float: left;
font: 700 1.1em/1em "Montserrat",sans-serif;
margin: 0;
padding: 10px 2.5% 20px;
text-align: center;
/* width: 45%; */
}
#ss .studyguides a {
font-weight: 300;
}
#ss ul.studyguides li strong {
color: #00467f;
display: inline-block;
font: 400 1.2em/1em "Merriweather",serif;
margin-bottom: 0.3em;
}
#ss .studyguides .cover, #ss .studyguides .coverA {
background-position: center center;
background-repeat: no-repeat;
background-size: 120% auto;
/* border: 3px solid #d8e3ee; */
/* border-radius: 55px; */
display: block;
height: 100px;
margin: 0 auto 10px;
position: relative;
width: 100px;
transform: scale(.9);
transition: all .25s ease-in-out;
}
#ss .studyguides .cover:hover, #ss .studyguides .coverA:hover {
transform: scale(1.1);
}
@media all and (min-width: 1280px) {
#ss .studyguides .cover, #ss .studyguides .coverA{
border-radius: 7px;
height: 120px;
width: 120px;
}
}
#ss hr {
border-style: dotted none none;
border-top: 1px dotted #d8e3ee;
margin: 2em 0 1em !important;
}
</style>
<div class="row" id="ss">
<h2>Adult</h2>
<div class="col-md-4 studyguides">
{#% set thismonth = "now"|date_modify("+62 day")|date("n") %#}
{% set thisyear = "now"|date("Y") %}
{% set thismonth = "now"|date("n") %}
{% set quarter = "" %}
{% if thismonth == 1 or thismonth == 2 or thismonth == 3 %}
{% set quarter = "1Q" %}
{% elseif thismonth == 4 or thismonth == 5 or thismonth == 6 %}
{% set quarter = "2Q" %}
{% elseif thismonth == 7 or thismonth == 8 or thismonth == 9 %}
{% set quarter = "3Q" %}
{% elseif thismonth == 10 or thismonth == 11 or thismonth == 12 %}
{% set quarter = "4Q" %}
{% endif %}
<a data-cke-saved-href='http://ssnet.org/lessons/current.html' target='_blank' href='http://ssnet.org/lessons/current.html' target='_blank'><span style='background-image: url(https://absg.adventist.org/assets/public/files/lessons/{{ thisyear }}/{{ quarter }}/cover.jpg)' class='coverA'></span><strong>Adult</strong><br>
Read</a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="https://www.hopechannel.com/listen/shows/sabbath-school-podcast" target="_blank" href="https://www.hopechannel.com/listen/shows/sabbath-school-podcast" target="_blank"><span style="background-image: url(https://www.adventistchurchconnect.com/file/19/Listen_A.png)" class="coverA"></span><strong>Adult</strong><br>
Listen</a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://hopess.hopetv.org/" target="_blank" href="http://hopess.hopetv.org/" target="_blank"><span style="background-image: url(https://www.adventistchurchconnect.com/file/21/Watch_A.png)" class="coverA"></span><strong>Adult</strong><br>
Watch</a>
</div>
</div>
<hr>
<div class="row" id="ss">
<h2>Children</h2>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.gracelink.net/beginner" target="_blank" href="http://www.gracelink.net/beginner" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/beginner.jpg)" class="cover"></span><strong>Beginner</strong><br>
Ages Birth–2 </a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.gracelink.net/kindergarten" target="_blank" href="http://www.gracelink.net/kindergarten" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/kindergarten.jpg)" class="cover"></span><strong>Kindergarten</strong><br>
Ages 3–4 </a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.gracelink.net/primary" target="_blank" href="http://www.gracelink.net/primary" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/primary.jpg)" class="cover"></span><strong>Primary</strong><br>
Ages 5–9 </a>
</div>
</div>
<hr>
<div class="row" id="ss">
<h2>Youth</h2>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.juniorpowerpoints.org/article.php?id=3" target="_blank" href="http://www.juniorpowerpoints.org/article.php?id=3" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/powerpoints.jpg)" class="cover"></span><strong>Junior PowerPoints</strong><br>
Ages 10–14 </a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.realtimefaith.net/article.php?id=3" target="_blank" href="http://www.realtimefaith.net/article.php?id=3" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/realtimefaith.jpg)" class="cover"></span><strong>Real Time Faith</strong><br>
Ages 13–14 </a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="http://www.cornerstoneconnections.net/article/7" target="_blank" href="http://www.cornerstoneconnections.net/article/7" target="_blank"><span style="background-image: url(http://www.sabbathschoolpersonalministries.org/assets/sspm/images/covers/cornerstone.jpg)" class="cover"></span><strong>Cornerstone Connections</strong><br>
Ages 15–18 </a>
</div>
</div>
<hr>
<div class="row" id="ss">
<h2>Young Adult (Collegiate)</h2>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="https://www.inversebible.org/inverse-bible-study-guide" target="_blank" href="https://www.inversebible.org/inverse-bible-study-guide" target="_blank"><span style="background-image: url(https://www.adventistchurchconnect.com/file/24/YoungAdult.png)" class="coverA"></span><strong>Young Adult</strong><br>
Read</a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="https://www.inversebible.org/podcasts" target="_blank" href="https://www.inversebible.org/podcasts" target="_blank"><span style="background-image: url(https://www.adventistchurchconnect.com/file/20/Listen_B.png)" class="coverA"></span><strong>Young Adult</strong><br>
Listen</a>
</div>
<div class="col-md-4 studyguides">
<a data-cke-saved-href="https://www.inversebible.org/videos" target="_blank" href="https://www.inversebible.org/videos" target="_blank"><span style="background-image: url(https://www.adventistchurchconnect.com/file/22/Watch_B.png)" class="coverA"></span><strong>Young Adult</strong><br>
Watch</a>
</div>
</div>