How to customize your VBS website template

(1)

How to customize your VBS website template

Table on Contents

 About the template – my version of a disclaimer and other info

 How to reach me – my contact info

 Template upgrades – here you can find out what changes were made to last year’s template.

 The basic – This is a “Websites 101” class. A basic understanding of the template. If you a web designer/master you can skip this section.

 Step by Step – The step by step instructions on how to customize the site for your church.

 Online Photo Gallery – General instructions on how the photo gallery works and some suggestions on how to manage it.

 Advanced Setup – This is for the “techies” who know what they are doing and want to play around with the site. There are some cool tips and tricks in here.

DISCLAIMER: I did not check for grammar or punctuation in this document so you just have to live with it! ;‐)

About the template…

Anyone is welcome to download and customize the template as needed. It is provided for FREE.

I do not provide any warranty for the template. It is to be used AS IS and you have the sole responsibility to customize it accordingly.

I am a full time Children’s Pastor and do web design in my “free time”. Hence the name of my business, FreeTime Web Design. As of November of 2010 (the time of this writing) I am not doing any web design as I have been too busy at work. My work as a pastor always comes first.

The only thing I ask is you do not remove the (FreeTime Web Design) link which is located on the footer of each page of the template.

These instructions are written to help just about anyone with average computer skills customize this template… HOWEVER… If you are not skilled with computers … It is HIGHLY SUGGESTED that you get the “tech person” in your church, preferably the one who already takes care of your church website, and have them handle this for you.

(2)

How to reach me…

If you have any questions regarding the template you can post in the Gospel Light Forums or email me at:

Chad Pace

[email protected]

Or

[email protected] (although I don’t check this one too often)

Template upgrades…

If you used last year’s template you will find a few minor changes but nothing major.

Instructions on how to take advantage of these changes will be in the “Step by Step” section of this document.

Multiple Bible Versions… Although you “technically” had this ability last year I will give

instructions on how to change the version of the bible you want to display when someone clicks on the scripture links on the fun4kids.html webpage. I also created images in NIV, NLT, KJV and NKJV for the scrolling banner on the index.html webpage. You can choose which version of the VBS theme bible verse to display.

All updates from last year… As I began to share the template with everyone a couple of minor issues cropped up which I addressed with updates in the gospel light forums. All of those updates are in this year’s version of the template.

The basics…

This section will give you a basic overview of what it needed to edit the site and how the site is structured. If you are a web designer you can probably skip this section. If you have never worked with websites… READ THIS SECTION…

HTML EDITOR… You will need and HTML editing program to customize the site. I personally use Microsoft Expression Web. The site was design so that you can edit with any HTML editor. If you don’t have one you could try one from CoffeeCup.com. I think there is a 30 day trial period and you can purchase it for $49. I have never used this software so I would definitely try before you buy!

Here is the link.

(3)

http://www.coffeecup.com/html‐editor/

IMAGE EDITOR… You will also need an image editing program, most computer come with a basic image editing program. Photoshop would be an example of an image editing software.

This year’s template has a blank image which you can add your church logo to. This will add your church logo to every page in the website. More on this in the “Step by Step” section.

FILE TYPES – The following file types can be found in this website.

 HTML – These are the web pages of the site. These are the pages your visitors see when visiting the site. These files end with “.html” tag at the end of the filename.

 PHP – There are files that contain a programming language called PHP. These PHP files tell the forms, such as online registration, what to do with the information once someone clicks the “submit” button. You will be editing an email address and

information about your church in these files. More on that in the “Step by Step” section.

These files end with “.php” tag at the end of the filename.

 XML – There is only one XML file in the website which has to do with the music player.

You will not need to do anything with this file. It is set up ready to go. These files end with “.xml” tag at the end of the filename.

 JS – These are JavaScript files… another programming language. You will not need to do anything with these files. They are set up ready to go. However, I will be talking about some changes you can make to these file in the “Advanced Setup” section. These files end with “.js” tag at the end of the filename.

 SWF – There is only one SWF file in the website which also has to do with the music player. You will not need to do anything with this file. It is set up ready to go. These files end with “.swf” tag at the end of the filename.

 PDF – These are files which can be opened by just about any type of computer in the world. A computer must have Adobe Acrobat Reader (most computers already have it and if they don’t it is a free program that can be downloaded at www.adobe.com) These is file type for the coloring pages and lyrics pages. These files end with “.pdf” tag at the end of the filename.

 JPG or GIF – These are image files. The pictures in the website. All of these types of files should be located in the “images” folder. These files end with “.jpg” or “.gif” tag at the end of the filename.

FOLDERS IN THE WEBSITE… the following folders can be found in the website template along with a basic description of their purpose.

 _private – you should not need to do anything with this folder. It was automatically added by my HTML editor. You will not need to do any work in this folder.

 formstogo_sourcefiles – I use a program called “Forms To Go” which creates the PHP files used in the website, such as “register.php” (more on editing PHP files later). Inside this folder you can find the Forms To Go source files I used to create the PHP files. If you

(4)

use Forms To Go you will know what to do if you want to make changes. If you don’t…

no worries you don’t need it. This folder is mainly for techies in your organization.

 fun4kids – This folder contains all of the files related to the Fun 4 Kids webpage. Here you will find PDF coloring pages and JPG images for wallpaper.

 js – is short for “javascript” which contains most of the javascript files. You know those scrolling images on the homepage? That all works because of the files in this folder.

Step by Step…

This section will give you step by step instructions on how to customize the site for your church.

If you need ideas on what to put in your site you can visit my site at www.ccfhaz.com/vbs.

NOTE: These steps are limited to the minimum steps needed to get the site customized for your use. Depending on your skill level feel free to customize any portion of the site to fit your needs.

1. Download the website template from www.ccfhaz.com/download/vbs‐2011‐sonsurf.zip

2. Extract/Unzip the vbs‐2011.zip file onto your computer.

3. Open the website using your HTML editor.

(5)

4. This step is not required but definitely enhances the site. Edit the logo.jpg file located in the “images” folder using an image editing software. This image is a blank background which you can add your church logo and name. When you add your logo and name to this image it will show up on every page of the website on the left hand side of the menu bar. (see www.ccfhaz.com/vbs for an example) NOTE: Do Not change the dimensions of the file as it will look distorted in the website.

a. Add you church logo and name

b. SAVE file as a JPG and overwrite the existing file.

5. Edit the index.html webpage and do the following.

a. Edit the text in Green Banner section with your information.

b. Edit the text “VBS Details” section with your information. You will need to hyperlink your email address in this section.

c. Edit the text in the light blue “footer” section with your church name.

d. SAVE file.

e. This next step is optional: The scrolling banner now scrolls the main verse for this year’s VBS. The website is currently set to display the NIV version. However, the NLT, KJV and NKJV are available. If you would like to change the image to one of these versions then please follow the steps below.

i. Find the following line of code in the index.html page. It should be around line 69.

ii. Change the highlighted portion of the code “niv” to the version you want.

nlt, kjv or nkjv. THE CHANGE MUST BE IN LOWERCASE LETTERS.

iii. For example if I want change to the KJV it would look like this.

f. SAVE file.

6. Edit the register.html webpage and do the following. NOTE: Unless you are a web designer DO NOT add or remove any of the fields on the form.

a. Edit the text in the “Get In Touch” section. You will need to hyperlink your email address in this section.

b. If needed, edit the choices in the “How Did You Hear About Us?” drop down box.

c. Edit the choices in the “Dates Attending” drop down box.

d. If needed, edit the choices in the “Last Grade Completed” drop down box.

e. Edit the choices in the “Home Church” drop down box.

f. Edit the text in the light blue “footer” section with your church name.

g. SAVE file.

(6)

7. Edit the volunteer.html webpage and do the following. NOTE: Unless you are a web designer DO NOT add or remove any of the fields on the form.

a. Edit the text in the “Questions” section. You will need to hyperlink your email address in this section.

b. Edit the choices in the “When Are You Available” drop down box.

c. If needed, edit the choices in the “Position” combo box.

d. Edit any of the job titles and descriptions as needed.

e. Edit the text in the light blue “footer” section with your church name.

f. SAVE file.

8. Edit the fun4kids.html webpage and do the following.

a. Edit the text “Questions” section with your information. You will need to hyperlink your email address in this section.

b. Edit the text in the light blue “footer” section with your church name.

c. SAVE file.

d. This next step is optional: The clickable scripture on this webpage is currently set to display the NIV version from www.biblegateway.com. However, you can change it to display any version of the bible that Bible Gateway supports. If you would like to change the version displayed by Bible Gateway then you will need to make some changes in the code.

i. Find the following lines of code in the fun4kids.html page. It should be begin around line 62.

Day 1 ‐ Who is Jesus?

(<a href="http://www.biblegateway.com/passage/?search=Luke%202:1‐20&version=NIV" target="_blank">Luke 2:1‐20</a>;

<a href="http://www.biblegateway.com/passage/?search=Luke%202:39‐52&version=NIV" target="_blank">Luke 2: 39‐52</a>)

Jesus is God’s Son and when I meet up with Him, I discover how much God loves me.

Day 2 ‐ Why can I trust Jesus?

(<a href="http://www.biblegateway.com/passage/?search=John%204:43‐54&version=NIV" target="_blank">John 4:43‐54</a>)

I can look up to Jesus and ask His help because He is trustworthy.

Day 3 ‐ Why do I need Jesus?

(<a href="http://www.biblegateway.com/passage/?search=John%2013:1‐17&version=NIV" target="_blank">John 13:1‐17</a>;

<a href="http://www.biblegateway.com/passage/?search=John%2019:1‐20&version=NIV" target="_blank">John 19:1‐20</a>)

Jesus’ death and resurrection make it possible for me to join up with Him and be part of God’s family.

Day 4 ‐ How can Jesus help me when I mess up?

When I open up to Jesus about my sin, He forgives me and helps me make a fresh start.

Day 5 ‐ What does Jesus want me to do?

(<a href="http://www.biblegateway.com/passage/?search=Matthew%2028:16‐20&version=NIV" target="_blank">Matthew 28:16‐

20</a>;

<a href="http://www.biblegateway.com/passage/?search=Acts%201:1‐11&version=NIV" target="_blank">Acts 1:1‐11</a>)

Jesus wants me to know and love Him and get fired up about sharing Him with others.

(7)

Change the highlighted portion of the code “NIV” to the version you want. NLT, KJV, NKJV or whatever version you prefer. THE CHANGE MUST BE IN UPPERCASE LETTERS.

e. Manually edit the text in the “VBS Theme Bible Verse” section of the webpage to the version you prefer.

f. SAVE file.

9. Edit the music.html webpage and do the following. NOTE: The music player is already configured to play all of the songs from the VBS. There is more information in the

“Advanced Setup” regarding the functions of the music player.

a. Edit the text in the light blue “footer” section with your church name.

b. SAVE file.

10. Edit the photos.html webpage and do the following. NOTE: A complete explanation of the Online Photo Galleries can be found in the “Advanced Setup” section.

a. Edit the text in the “Online Photo Galleries” section of this page. You just need to put in this section what your visitors can expect from your photo gallery section.

b. Depending on your needs, you may want to edit the “Choose Gallery” section.

d. SAVE file.

11. Edit the contact.html webpage and do the following. NOTE: Unless you are a web designer DO NOT add or remove any of the fields on the form.

a. Edit the text in the “Get In Touch” section. You will need to hyperlink your email address in this section.

b. Edit the text in the light blue “footer” section with your church name.

c. SAVE file.

12. Edit the contact_confirmation.html webpage and do the following. NOTE: This is the page which will be displayed once someone has successfully submitted the form on the

“contact.html” page.

a. Edit the text “Get In Touch” section with your information. You will need to hyperlink your email address in this section.

b. Depending on your needs, you may want to edit the “We have received your inquiry” section.

d. SAVE file.

(8)

13. Edit the register_confirmation.html webpage and do the following. NOTE: This is the page which will be displayed once someone has successfully submitted the form on the

“register.html” page.

a. Edit the text “Contact Us” section with your information. You will need to hyperlink your email address in this section.

b. Depending on your needs, you may want to edit the “Online Registration Successful” section.

d. d. SAVE file.

14. Edit the volunteer_confirmation.html webpage and do the following. NOTE: This is the page which will be displayed once someone has successfully submitted the form on the

“volunteer.html” page.

a. Edit the text “Questions” section with your information. You will need to hyperlink your email address in this section.

b. Depending on your needs, you may want to edit the “We have received your volunteer request.” section.

d. SAVE file.

15. Edit the contact.php file and do the following. NOTE: This is file contains the

programming language which tells the contact.html what to do with the information once someone clicks the “submit/send” button. In a nutshell, this file tells the form who to email the information to. You need to determine who’s email address should be receiving the information when someone submits information on the contact.html page.

a. Most HTML editors will number the lines of code. You should find the line of code which needs to edit around line number 192. You are looking for the following line of code:

$emailTo = '[email protected]';

You will need to change the [email protected] to the actual email address you want the information sent to. For example, for my church I would change this line of code to:

b. SAVE file.

(9)

16. Edit the register.php file and do the following. NOTE: This is file contains the

programming language which tells the register.html what to do with the information once someone clicks the “submit/send” button. This PHP file serves two main functions.

1. To email to you the registration information. 2. To send the person who registered a confirmation email of their registration. You need to determine who’s email address should be receiving the information when someone submits information on the register.html page.

b. Next you should find the next line of code which needs to edit around line

number 336. This is the email address that will show in the confirmation email to the person who registered. You are looking for the following line of code:

$confEmailHeader = "From: [email protected]\n"

c. Finally you should find the next line of code which needs to edit around line number 327. You will need to replace the information with your church info. This is a portion of the confirmation email that is sent when someone registers for VBS. You are looking for the following lines of code:

. "Insert Church Name Here\n"

. "c/o VBS Administrator\n"

. "Insert Street Address Here\n"

. "Insert City, State, Zip Here\n"

. "\n"

. "Insert Phone Here\n"

You will need to change this information to your churches information. For example, for my church I would change these lines of code to:

(10)

. "Christ’s Church of Fountain Hills\n"

. "15555 E Bainbridge Ave\n"

. "Fountain Hills, AZ 85268\n"

. "\n"

. "(480) 837‐3121\n"

d. SAVE file.

17. Edit the volunteer.php file and do the following. NOTE: This is file contains the

programming language which tells the volunteer.html what to do with the information once someone clicks the “submit/send” button. This file tells the form who to email the information to. You need to determine who’s email address should be receiving the information when someone submits information on the volunteer.html page.

b. SAVE file.

18. Next, pat yourself on the back. You just customized the website. WOO HOO!

19. Publish the website. (check with your tech person if you need help publishing. I don’t offer assistance in this area. Sorry… too many variables as every web hosting company is different)

20. Finally, test all the forms to make sure they are working properly and you are receiving the emails. NOTE: The forms will only work once they are posted to your web server and that is assuming your web server runs PHP files (almost all do). If you have having

problems with the forms doublecheck you completed the steps on the PHP files correctly and check with you web hosting company.

(11)

Online Photo Gallery…

OK… I’m not going to provide a step by step on how to do this because there are too many factors involved. I will give and overview of how it can be done along with some suggestions on how we do it.

I way simplified the online photo gallery because I noticed that most people never used the gallery on their site. I almost didn’t include it this year but since we do an online photo gallery each year and our families LOVE it. It generates a TON of interest in our church and church website. I am still using the one I have used in the past but for the template I created something that everyone should be able use.

RECOMMENDATION: If you decide to do an online photo gallery, I would highly suggest placing a username and password on the “week 1” folder (and the week2 if you plan on using it).

Otherwise anyone in the world can access the pictures in the photo gallery. How you secure the folder will be between you and your web hosting service. For me I just go into the Control Panel of our website and I have a feature where I can secure a folder. Then I just email the username and password to all the registered participants.

HOW WE DO IT… We have volunteer and their only job is to take photos during the day. They usually stop by at a different time each day and stay for about an hour and take about 200 photos. Within about an hour after VBS is over for the day (we do a daytime VBS) we post the pictures online and send out an email with some daily news… along with a link to the gallery and the username and password needed to access the gallery.

Here is what I did for your gallery. I set up a table on each webpage (day1.html, day2.html, etc…) that is 2 columns wide by 25 rows deep. (It will hold up to 50 pictures and you can always add more rows to the table. )

The table is set up so that each cell can hold an image up to 300 pixels wide (the height of the image doesn’t matter) without messing up the formatting of the page. I have set up a folder for each day (day1_images, day2_images, etc…) where you can store the pictures on the website.

TIP: I use a program called EasyImage Batch which is the simple way to resize all of your digital pictures to the size you want in just a few clicks.

You can download a trial from:

http://www.easyimagesoftware.com/EasyImageBatch.aspx

It cost about $10 bucks if you want to buy it.

(12)

Once you have resized all you pictures to 300 pixels wide or less and have saved them in the proper folder in the website then all you have to do is drag and drop the images into the cells using your HTML editor.

I hope that made sense but if you need further help or suggestions on the gallery please contact me.

Advanced Setup…

This section is ONLY for those folks who are technically savvy. Please DO NOT attempt to work on items in this section unless you feel very comfortable with editing HTML, PHP, XML, JPG, etc.

Most of the things I talk about in here deal working with working on the actual “code” of the website.

I am not going to go into great detail like I did in the Step by Step section. It may be a good idea to have a backup of your work before you actually make changes. I am assuming you will know what you are doing. So let’s get going.

Modifying the “scrolling” images on the banner on the index.html…

In the code view of the index.html page you will find the following code.

div class="gallery">

<ul>

</ul>

</div>

Using the <li> tag you can add/remove images from the scrolling banner. I also provide an image called “simple_blank.jpg” in the images folder which can be used as a template to add more images to the banner. Just make sure all images for the banner are 309x195 pixels. An idea is to add pictures of kids from last year’s VBS.

You can also control certain aspects of the scrolling images (such as the speed of the images) by editing the “easySlider1.5.js” located in the “js” folder.

(13)

Modifying the PHP files…

In the Step by Step section I show how to modify the email addresses where the information will be sent to when someone submits a form. There are additional items you can edit such as content in the confirmation email that is sent once someone submits on the registration page.

I do use Forms To Go to create all the PHP files as I am not a PHP programmer. Great program that is simple to use and save a TON of time. In included the source files I used to create the PHP files. They are located in the “formstogo_sourcefiles” folder. You can by Forms To Go from

http://www.bebosoft.com/products/formstogo/overview

If you are really good at PHP do whatever you want with these files but if you are at least technically savvy you can make most of these changes without know any PHP.

register.php

Around line 317 you will see the following code. This is where you can edit what the

confirmation email says. I just put in a generic response but you could really go into detail and use any fields from the register.html form.

# Confirmation Email to User

$confEmailTo = FilterCChars($FTGEmail);

$confEmailSubject = FilterCChars("VBS Registration Confirmation!");

$confEmailBody = "Thank you for registering $FTGFirst_Name $FTGLast_Name for this years VBS.\n"

. "\n"

. "If you have any questions please feel free to reply to this email or contact us at:\n"

. "\n"

. "Insert Church Name Here\n"

. "Insert Street Address Here\n"

. "Insert City, State, Zip Here\n"

. "\n"

. "Insert Phone Here\n"

. "\n"

. " ";

. "MIME‐Version: 1.0\n"

. "Content‐type: text/plain; charset=\"UTF‐8\"\n"

. "Content‐transfer‐encoding: 8bit\n";

mail($confEmailTo, $confEmailSubject, $confEmailBody, $confEmailHeader);

Below is a sample of the code I use for my website. Some of the code is highlighted because in the actual PHP file the highlighted section is all on ONE SINGLE line of code. The string of code is too long to fit on a single line in this document.

# Confirmation Email to User

$confEmailTo = FilterCChars($FTGEmail);

(14)

$confEmailSubject = FilterCChars("VBS Registration Confirmation!");

$confEmailBody = "Thank you! Please keep this email for your records! \n"

. "\n"

. "This confirms $FTGFirst_Name $FTGLast_Name is registered for this year's VBS for the week of

$FTGDates_Attending. This year's VBS is Monday through Friday from 8:30 am to 12:00pm daily.\n"

. "\n"

. "The registration fee is $15.00 per person with a $30.00 maximum per family. Payment for registration is due on or before the first day of VBS. Payment can be brought the office Monday‐Thursday from 8:30 am to 5:00 pm.

Payment can also be made online by visiting www.ccfhaz.com and clicking the ‐Give Online‐ button located at the top of the screen. When paying online, please be sure to specify who the payment is for in the notes section. You can also mail payment to:\n"

. "\n"

. "Christ's Church of Fountain Hills\n"

. "15555 E Bainbridge Ave\n"

. "Fountain Hills, AZ 85268\n"

. "\n"

. "(480) 837‐3121\n"

. "\n"

. "When mailing payment be sure to include a copy of this email.\n"

. "\n"

. "If you have any questions or need assistance with the registration fee please feel free to reply to this email or call us.\n"

. "\n"

. " ";

. "MIME‐Version: 1.0\n"

. "Content‐type: text/plain; charset=\"UTF‐8\"\n"

. "Content‐transfer‐encoding: 8bit\n";

mail($confEmailTo, $confEmailSubject, $confEmailBody, $confEmailHeader);

You can also customize the emails that are sent to you by the register.php, volunteer.php and contact.php files if you want. You can look through the code and edit as needed.

The Music Player on the music.html webpage…

The following files are associated with the music player. “playerMultipleList.swf”, “playlist.xml”, and “swfobject.js”. The songs it plays are controlled by the playlist.xml. You can add files in the MP3 folder and then just add the tracks by editing the XML file. This is a free music player from:

http://www.premiumbeat.com/flash_music_players/original/multiple_menu/

They have several different versions of this music player and you can find all the documentation on how to customize the player

.

That’s all folks, let me know if you have any questions, comments, or just whatever.

How to customize your VBS website template