Prepare the Clip Art Instructions
You first will need to upload the clip art that the code uses, this will be uploaded to the file manager for your site. You will not upload it to the page directly. This image then is also available on any page in your site that you want to use this code.
- Find a copyright free or legally usable icon that you wish to use for your on-air message. Save it to your local computer hard drive in a name you want to share on the web. The file name will be seen in the HTML of your page, so it should be something benign like on-air-clipart.png etc.
- Access the administrative functions of FinalWeb using your administration username and password.
- With the admin tools, click into the Site Manager option.
- Click on Tools and then File Manager in the left hand menu.
- The first level of your file manager will open in the main pane to the right, click then on images to open into the images folder.
- Click Upload Files to begin the upload process. You will be walked thru the process and it should end with a successful green check mark.
- The page will refresh and the file does not appear on that page when it does. You will need to click on File Manager on the left and then again on images on the right. This time you will find that you file does appear in the list.
- Click on the Preview File button that is associated with your file name you uploaded. A new tab in your browser will open and you will see the image you uploaded. You will need this URL later, so take note of the enter URL now by copying it to your notepad or keep the tab open.
- Access your content block and get into the text editing mode. Don't use the double click method, use the configure section or edit column function.
- Click on the Source button in the upper right hand corner.
- Find in the HTML code the place that you want to insert your icon and message. The exact point in the code is where this script is going to insert your text.
- Copy and paste from the code block below to the editor where you want to insert your block.
- Make changes to the code to include the URL you noted in the setup of the clip art above. Change the message also if you wish your own phrase. Change the getHours and getDay to match what you want to match in your logic.
- Click Save Changes to save your website and test. You may need to use artificial day of weeks and time.
The provided is between 7AM and 12PM Sunday and 6PM to 9PM on Wednesday. getDay starts at 0 for Sunday and goes through 6 for Saturday. Since this runs on your computer browser side, not server side, then the timezone and date of the local computer is already considered. Replace the XXXXXXXXXXXXXXX in the block below with the URL you created in the clip art section above.
<!-- -- insert live streaming details here on Sunday & Wednesday service times ---->
if (((today.getHours() >= 7 && today.getHours() < 12) && (today.getDay() == 0)) ||
((today.getHours() >= 18 && today.getHours() < 21) && (today.getDay() == 3)))
document.write('<DIV style="text-align: center;"><IMG SRC="XXXXXXXXXXXXXXX"><P></DIV><DIV style="text-align: center;"><A HREF="/stream">Live video streaming</A> available from each of our worship services.</DIV>');