Greetings - and welcome to this, your Franklin Furnace Independent Baptist Church tutorial section. 

If you're viewing this, then you have been entrusted with getting into the real guts of the FFIBC website - scary, right?    Well, don't be intimidated.  This tutorial will teach you everything you need to know to update the FFIBC Event Calendar AND the "News Ticker" located on the left of the page.  So, what say we get started, shall we?

Ok, a couple of quick points here:

First off, this tutorial will be very elementary and simple, so please bear with me if it comes across as a little "grade-school".  Certainly, the intent is not to make the viewer feel inadequate or less than capable.  I've just found that it's much easier for me to write these tutorials in such a way that the kid in me can understand it.

Secondly (and probably more importantly), you already have the tools that you'll need in order to perform these updates!  So, no fancy software or extremely complicated tasks are involved.  If you have Internet Explorer 6.x and Notepad (both of which are native to Windows XP), then you're all set.  So, open 2 instances of Internet Explorer, one instance of Notepad and go ahead and open the "My Documents" folder as well, since we'll be working in there as well.

Third (and DEFINITELY more important than ANY other piece of information in this tutorial) - as I mentioned before, don't be intimidated when working with your site.  There's nothing you can do to the site that I can't fix (and subsequently explain what the error was and how it was corrected).  Getting into a site and tinkering around with it is the easiest way to learn - it's how I learned and, by golly, if I can learn it, anybody can.    If you think you messed something up and don't know how to fix it, just shoot an email over to me at s.king@dustyduck.com and I'll be more than happy to help out.

Ok, here we go...


To start off, let's work with the "News Ticker".  A little information about the "News Ticker" before we get going:  the ticker is a very small Java applet that "calls" the displayed information from a similarly small text file located on the website's server.  If the viewer doesn't have the necessary Java file installed on their computer that allows them to see the ticker, a message will appear in its place directing them to where they can download and install this small and safe software.  It only takes a few minutes, but it opens up a whole world of interactivity for the viewer on the FFIBC site and beyond.  The ticker itself is very easy to update because you don't have to actually mess with the Java applet itself - all you have to do is update the information in the text file.  There's very little in the way of actual HTML, and what there is, will be explained here.

Of course, in order to update the text file, you'll need to download it from the server... easy enough.    Ok, in Internet Explorer's address bar, type "ftp://www.ffibc.org" (without the quotes) and hit ENTER.  Note the ftp instead of http - ftp stands for File Transfer Protocol - this protocol allows you to download and upload files directly to the server.  A dialog box will pop up asking you to log in with your username and password.  For security purposes, your username and password are not posted here in the tutorial, rather, they will be provided to you separately.  Click "OK" or hit ENTER to continue.  Once inside, you'll see the root contents of the FFIBC server in a familiar Windows Explorer format...

Your working folder is "public_html", so double-click on that and let's go find that text file.  Once inside, locate the "ffibc_scroller.txt" file...

Right-click on the "ffibc_scroller.txt" file, then click "COPY".  Now, go to your "My Documents" folder and right-click on any empty space - when the menu pops up, click "PASTE".  GREAT JOB!  You've just downloaded a file from the FFIBC web server!    Locate the ffibc_scroller.txt file in your "My Documents" folder and double-click to open it in Notepad.  For easier viewing in Notepad, go to "Format" and de-select "Word-wrap", allowing the end of the text lines to flow beyond the right margin of the page.

Ok, so, if you've never worked with HTML before, this might look a little intimidating - never fear, though... you'll be surprised at how easy this is to work with.

First off, I've highlighted the key areas that you'll need to know.  You'll notice things like <PAUSE>, <CENTER>, </CENTER>, <FONT>, etc.  These are called "tags".  The information contained within the tags tells the viewer's browser how to display the text.  Each "tag", with few exceptions, requires an opening and closing... also known as "opening tags" and "closing tags".  In our little text file here, the following "tags" are used:

OPENING TAG

DESCRIPTION

CLOSING TAG

<PAUSE> Causes the text to momentarily pause at the top of the ticker **NONE**
<center> Centers the text within the ticker box </center>
<font> Defines font attributes such as size, color and type (in our case, color="#000080" is blue, size="1" is the standard size (we're working on trying to get larger sizes, hence the "3" for the top lines) and face="Tahoma" defines the font - the same font we use for the rest of the page) </font>
<b> BOLDS the text </b>
<br> BREAK - like hitting the "RETURN" key on a typewriter.  To create vertical space between lines, simply add more <br> tags - in our case, we use <br><br> to separate information items displayed in the ticker. **NONE**
<a href="******"> The "A" in this tag stands for "Anchor" - which is a fancy way of saying "hyperlink".  This is how we put links in the ticker that the viewer can click on to access more specific information somewhere else on the page/site.  In our case, we have 2 links in the ticker - one to #staff and one to #calendar.  These links refer to specific places on the page - often referred to as "bookmarks".  We'll get into those at a later date. </a>

** Note that the <PAUSE> and <br> tags do not require closing tags.  For more in-depth explanations of what tags are acceptable in HTML (and, thusly, in this ticker file), there's a great website that teaches HTML at W3 Schools.

The areas shaded in gray is the actual information that is shown in the ticker itself (pretty easy, right?).  The very last line in the .txt file is the horizontal separator that you see in the ticker to indicate that the end of the file has been reached.  You'll also notice that all of the information items are pretty much formatted the same - which makes updating them REALLY easy.  As information expires or ages, you can simply go into the .txt file and change the information that you want to display.  If you want to add more information to the ticker, just copy and paste one of the information "blocks" (from the first <PAUSE> tag to the last <br> tag of the block) between the last line and the horizontal separator.

Ok, let's say that you're done updating the ticker and you want to post it for others to see.  First off, make sure that you save the file after you're done putting in the new information.  Now, go back to your "My Documents" folder, locate the ffibc_scroller.txt file and right-click on it, then click "Copy".  Go into your Internet Explorer and, right-clicking on any blank spot, click "Paste" to post it to the server.  A confirmation box will pop up asking if you want to overwrite the old file, which, of course, you do.  Now, in the other instance of Internet Explorer, open the FFIBC website and check the ticker... you should see your changes as soon as the ticker loads.  Once you've completed the update, it is EXTREMELY important that you CLOSE the Internet Explorer that you pasted the .txt file into.  Leaving this open leaves a huge security hole in the server.

FANTASTIC!  Great job!  You've successfully updated the News Ticker on the FFIBC website!  But, wait - have you????  Are you getting errors?  Goofy-looking text in the ticker?  All manner of "what in the world" stuff???  It's ok - don't panic.    If you think you've followed the instructions properly (or I wrote something wrong - which isn't necessarily beyond the realm of possibility) and you're getting weird-looking stuff in the ticker, just fire me an email (s.king@dustyduck.com) and I'll take a quick look at it.  When I figure out what, if anything, went wrong, I'll fix it real quick, then send you an email back explaining what I did.    And that, my friends, concludes the "Just how DO I update the News Ticker anyway??" portion of our tutorial... let's move on to the Events Calendar.

 

The Events Calendar is powered by a third-party website called "localendar".  It's extremely easy to work with and requires absolutely NO coding knowledge.  It has a very simple interface that makes updating the calendar a painless and quick process.

Ok, click HERE, and let's get started...

Initially, an opening page will appear - go ahead and log in to the account using your Sign On ID and password (again, for security purposes, your Sign On ID and password will be provided separately)...

Once you login, you'll be taken to the main calendar screen:

From here, you can edit existing events by clicking on them in the calendar or, as we're about to explain, you can add new events by clicking "Add Event" - which takes you to this screen:

The screen is pretty self-explanatory, but for grins and giggles, I'll go ahead and explain stuff...

1.  TITLE - This is what appears on the calendar on the FFIBC web page...

2.  DESCRIPTION - This information appears in the pop-up box that comes up when a viewer clicks on the event TITLE in the calendar...

3.  DATE - Sets the date of the event.  Clicking the blue and white down-arrow will bring up a handy little calendar to chose the date from...

4.  TIME - Sets the time and duration of the event... also allows you to simply select it as an All-Day Event instead of constraining the event to a particular time frame...

5.  OTHER OPTIONS - Allows you to add an image to the event, determine whether the event is recurring (and how often) and set reminders...

6.  When you're done, click SAVE, SAVE and ADD ANOTHER or PREVIEW to finish up.

A couple of other things that bear some explanation... BACKGROUND COLOR - this sets the background color of the event as it appears in the calendar, not for the calendar itself.  Click on the rainbow-colored down-arrow to bring up a color pallet and choose the color that you want.  This is nice for making special events stand out in the calendar.  Also - SHARING:  In order for an event to appear on the calendar for everyone to see, it must be set to PUBLIC.  Setting it to PRIVATE will keep it hidden from view unless the person is able to actually sign in to the calendar account - which, they can't, of course.

Ok, I think that about covers it.  Of course, when you're done, don't forget to click "Sign Off" to exit the calendar.  Also, I have to ask that the other options in the menu where you selected "Add Event" be left alone.  Changing anything in these other areas could have a very detrimental effect on how the calendar appears on the FFIBC site - which, of course, we want to avoid as much as possible. 

Alrighty - that'll pretty much do it, I guess.  Certainly, if you have any questions or what-have-you, feel free to send them to me at s.king@dustyduck.com.  We hope you've enjoyed your tutorial today... we now return you to your regularly scheduled program. 

- Sean