Tutorial: How To Create A Devotional Journal
The following is a step-by-step detailed walkthrough of how to setup a devotion using the WEC Devotional Journal (WEC Devo) extension. When we say “devotion” or “devotional” we really mean any guided Bible study, teaching, and/or study that you might want to do. For this tutorial, we will refer to the content as a “Devo”.
This tutorial assumes that you can login and are somewhat familiar with the TYPO3 backend system. The screen examples are shown with the skin and layout of the default setup of Typo3 v3.7 and v3.8.
We first have to determine what kind of content we will have for our Devotional-Journal (what we will from now on call “Devo”), who will do this content, and the structure it will take to best categorize it. A very important consideration if you are to do a devotional is that you have someone who can provide and post the content on a weekly or daily basis. Of course, with Typo3 and the Devo system you could post a month or more of content ahead of time and let it schedule out – but you still need to post it!
Two important questions to ask and answer are:
1) “Why you are doing this?”
If you know
the purpose you are trying to achieve, then you can focus and refine
your Devo so it is marked to achieve the goal(s).
2) “Who is it for?”
If it is for a certain
audience, then design for that audience. A top graphic can help
establish it. If it is for a middle-aged audience, you may want
larger text, whereas a younger audience would find flashy and bold
colors more appealing.
These and other ones you may have are good questions to ask among your staff and unpaid servants as you design the Devo. The Devo can be a large undertaking and will require much effort and it's important to have the goal and purpose in mind and have your staff on-board.
If in talking with your pastor and/or staff, we decide we want to do something on the church website that encourages people to go deeper with the sermon. We want to challenge them to think about it and discuss it. We decide that what we want is to have an outline of the sermon that covers the main points, some questions about the sermon, some further Bible reading, and then a discussion about it. So, we breakup the Devo into the following sections:
#1 Sermon
This might include the whole sermon text, an outline, a video or audio. Whatever you have or determine to have. All of these can easily be added using Typo3.
#2 Questions
This is questions that we want them to think about. This will have the journal here where the user can write down their own thoughts. If the questions are short and the sermon is not too long (or it' just audio), then you could include the questions in with #1 and not have this section.
#3 Further Reading
What we want them to keep thinking about and exploring. Perhaps this could be additional Bible passages, or reference to useful books or websites that would be helpful on the given subject.
#4 Discussion
This is where the community of church attenders (or those who visit this website) can discuss the sermon, ask questions, or share their thoughts. To promote people going here, you can show a Preview on the #1 and #2 page.
This is our proposed sections for this tutorial. The goal is to have a good amount, but not too much, content in each section. You can experiment fairly easily with the setup of sections and put some content in there, and see how it flows. If you don't like it, it is fairly easy to change it initially. However, you will want to get the structure down before producing much content, because if you change it later, it will require a lot of effort to go through each content element and set up the section again.
With the above planning in mind, we can now start by creating a new page. Let's call it “Sermon Devotion”.
You must be logged in to the BackEnd(BE) to proceed. If not, please do that now. To login to the BE, you typically go to http://www.yoursite.com/typo3/
To create the page where this Devo will reside, go to the List view. First you want to select the home page of your site. Click on this page. Then, select “Create New Record” link or the Create New Record icon (seen in graphic).
Choose “Page (inside)” when you see the long list of Page types.
Now you will be entering the new Page record information. Fill in the Pagetitle with the name of the page -- “Sermon Devotion”. You will likely want to clear the “Hide Page” checkbox so your page can be seen. The new page record should look like below:
Once
you are done with this, click on the Save & Close button
at the upper left.
Then we need to create a Data Folder. Let's call it “Devo Storage”.
To create this Data Folder, go to the List view if you are already not there. Go to your Page you created IF you want to create the Data Folder under the page.
Then Select “Create New Record”. Choose Page (inside).
Then select the Type as SysFolder (near the bottom in the dropdown menu). A SysFolder is a storage folder where you can have any and all records that you want. It is just for storage – you cannot see it on your website as a page (try clicking the View after it is created and you will see nothing or an error message). You can store records on any page too, but if they are in a folder, it is easier to organize and find them and store many types of records there.
Label the Title: as “Devo Storage” (or your own preferred name). Then click on Save & Close.
Now, we need to create the sections. At the “Sermon Devotion” page, click on the Devo Storage folder if you are not already there. Go to Pages or List view. Then click on “Create New Record” or the Create New Record icon. Choose “Devo Section”. You will see something like below. Fill it in with the following fields:
Name of Section: Sermon
Position In Interface: 1
Start
At This Interface: default
Time Period For Content: weekly
The other fields do not need to be filled in now. If you read the documentation, you can see how they are used and if you want to use them.
Once
you have filled that in, click Save & Close button.
Create the other three sections by Create New Records and filling them in with:
Name of Section: Questions
Position In Interface:
2
Time Period For Content: weekly
Name of Section: Further Reading
Position In Interface:
3
Time Period For Content: weekly
Name of Section: Discussion
Position In Interface:
4
Time Period For Content: always
So now, the basic structure is setup.
We now need to setup the extension in your page...
Go the Sermon Devotion page if it's not already selected. You now will create the wec_devotional_journal extension on this page.
Depending on if you are using TemplaVoila or not, you will add the extension to the page in one of two ways:
USING TemplaVoila
To add the extension to the page click on the Page action (make sure it is the one with the Green icon to the left of Page) . You will click “Create New Record” icon in the Main Content section.
Select Regular Text Element as the Type of Content Element. Now a Pagecontent box comes up as you are adding the new extension. Change the Type: from Text to Insert Plugin. A window will popup that says “This change will affect which fields...” and you can click OK for this. Then choose WEC Devotional Journal under the “Plugin:” option. Another window will popup and you can click on OK for this.
NOT USING TemplaVoila
To add the extension to the page go to the List section. You will click “Create New Record” link. Select Pagecontent. Now a Pagecontent box comes up as you are adding the new extension. You will select Insert Plugin under Type:. A window will popup that says “This change will affect which fields...” and you can click OK for this. Then choose WEC Devotional Journal under the “Plugin:” option. Another window will popup and you can click on OK for this.
Now you can set the options in what we call a FlexForm. It is the form under Plugin Options/DEF: listed with tabs: Main – Options – Advanced. You can read about all the options in the WEC Devo User Manual.
The one option you need to set is the Startingpoint. You need to point to the Devo Storage Data Folder that you created before. Click on the File icon and choose the Devo Storage folder. You have now linked the Storage folder with the extension. If you do not link to this folder, the extension only know about data stored on its current page.
Then, go to the Options tab. For this section, let's just select Allow Journal by clicking on the checkbox to the right of it. If you want other options, you can go ahead and set them. One nice feature to have is the Paging and Text/Size controls – you can try it out and if you find that later you don't need it or want it, you can remove it by clearing this checkbox.
If you are doing your own template file, you can set that in the Main tab. The Advanced tab has features that you do not need right now, but you can read about them in the User Manual for the Devotional-Journal extension.
Once you are finished with setting options, you must save the extension. Click on the Save & Close button.
After you have setup the extension, you can now change the layout of the page. You could test the page and see how it looks, but because the layout and sections have not been setup, you will not see much. If you do want to test the page, you can click on the View action on the leftmost action buttons.
To change the layout of the page, we must edit the template file. The current layout supports a journal and questions on the right with the rest of the content on the left.
This seems like a good layout so we will keep it. However, if you did want to change it, you would go to the template file and edit it. You could put the journal on the left or at the bottom or top. The template file is HTML code and so you need to know how that works.
If you did want to change the template file, what we would recommend is to copy the wecdevo.tmpl file that is found in typo3conf/ext/pi1/wecdevo/pi1 and copy it to fileadmin/wecdevo. Then you can edit and change it there. You will then need to set in the constants the templateFile folder as pointing to the new location.
You can also change the width and placement of certain items by changing the constants (see below). You can learn about editing the template file or changing the Constants in the User Manual for the Devotional-Journal extension.
You can easily customize the colors for the Devo. To do so, the recommended way is to go to the Constant Editor for the template. We go to the Constant Editor by selecting the Template icon while we are on the Sermon Devotion Page. However, unless you have already setup a template for this page, you will need to do that first.
To setup a template, you do that by (while in the Template section) clicking the “Click here to create an extension template” link.
This will bring you to the Constant Editor. Note that you can go to Info/Modify (in upper right dropdown menu) and edit the template directly, but we just want to change the Constants. So select “PLUGIN.TX_WECDISCUSSION_PI1” from the Category. This will bring up the constants for the Devo extension.
Now, we can change the Color and Look constants. You need to choose which constants you want to change. You must click on which ones you want to change by clicking the checkbox next to each one. Then click on the Update button at the top or bottom. This just says to the Constant Editor that you want to change them, not that you are changing them.
For us, we will choose just to change the colors. So scroll down and go to the Color section. Then click on the checkboxes for the following and then click the Update button. Then enter the following values:
|
Constant Name |
Constant Value |
|---|---|
|
Right Column Background Color |
#C9E4F4 |
|
Navigation Bar#1 Color |
#7799AA |
|
Navigation Bar#2 Color |
#99AACC |
|
Navigation Background Color |
#99B4E4 |
|
Navigation Button Color |
#2020F0 |
After you enter in the values, make sure you hit Update or else they will not be saved. For the colors, you will see the new colors shown.
What you must do next is clear the cache. At the bottom of the Constant Editor is a link that says “Clear all cache”. Click on that.
Now that you have made changes, you can go ahead and preview this new look. You can do that by going to the View action button on the left and you will see the new look. You will see it is now in shades of blue instead of brown (the default).
[IMAGE: devotutorial-previewlook.jpg -- show how it looks]
You will notice that the tabs are still brown. That is because they are images. To change those, you would need to edit the GIF files and change the color. The GIF files are located in the typo3conf/ext/wecdevo/res/ folder. We would recommend to copy them out of there and put them in the fileadmin/wecdevo folder if you are going to change them. Then update the constants so navBtnTab1Img and navBtnTab1Img point to the new location.
If you want to change additional colors, you can go back to the Constant Editor. It's easy to play around with it and see how the changes look. You can always go back to the original settings by un-checking the box, clicking Update, and then the default value will be used.
It's all done and ready to go! Now we just need to test it and make sure it all works as we had planned. To test the extension, you just need to view the page. In TYPO3, you can do that in several ways:
a) Left-click on the Sermon Devotion page and choose “Show”. This will popup the page in a new window.
b) Select “View mode” (under Page, List, then View) on the action button list on the left. If the Sermon Devotion page is not selected, select that. You will see the page come up in the right frame.
If something did not work or you cannot see the extension, then go
back through the steps and make sure you did everything. Also refer
to the FAQ at the end of the User Manual.
The three major problems of not seeing content is either:
#1 the templateFile is not set correctly,
#2 you have
filled in the “Name Of Template” in the Section record
with an incorrect value,
#3 the content either has an
incorrect date or is not in the right location. It must be in the
Storage folder that is pointed to by the Page.
Now that the Sermon Devotion is setup on your page, now you just need to add content. You will add all content to the “Devo Storage” folder. Go there and click on the Create New Record link or icon for the given section.
For a Devotional, you will need the Devo Section created and Devo Content. The Devo User and Devo Topic are not required – Devo User is only needed if you have paid subscribers that you need to track and Devo Topic is if you have specific theme each week (or month) that you want them to be able to go to easily.
Here are some tips that may help you make a Devo and avoid common mistakes:
1) For weekly content, make sure the Start time is at the beginning of the week, and the End time goes till the beginning of the next week (i.e.,. Sunday to Sunday).
2) Make sure the width is set correctly for the Devo so it will fit in with your template. The navigation and total width both need to be set. The left column and right column width need to be set correctly too if they are fixed width (as opposed to percentages – i.e., 400px vs. 60%).