Kalispell Montana FSC Template Guide

(This page is a work in progress, come back weekly for more updates!)

Updating family history center (FHC) pages are done infrequently and can be time consuming. Styling them can be even more difficult, especially for those just learning how to edit. I have put together a set of templates that can help other contributors organize and style their own FHC pages with (hopefully) minimal effort. This page contains an exhaustive list of all the templates with descriptions their intended use and how to use them on your own FHC page.

For an example of a completed FHC page using the following templates, visit the Kalispell Montana Family History Center's page.

When used properly, all of these templates will adjust to the screen size of the current viewer. So people on phones can read everything just as well as someone visiting on a desktop computer.

In this guide I have the following sections:


 * Tutorial section that takes you step by step through creating a complete example FHC page.
 * Advanced Template Options section that shows you some of the advanced options for the templates. This section is in no particular order.
 * Other Resources section that gives you links to some of the sources I used to create the templates, as well as a complete list of photos that I've already submitted to FamilySearch wiki.

Before You Start

 * All edits must be done in the "Edit source" tab.
 * It may be easier to print these instructions out before you start the tutorial. You will be bouncing between two different browser tabs once you begin if you do not print the tutorial. To print go to "File" in the top left side of your browser and click "Print" in the menu, or hit CMD + P or CTRL + P. This should bring up the print dialogue box that you are familiar with. NOTE: I provide lot's of examples of how the page should look as you go through the tutorial. The examples will not look the same when printed, so be careful when comparing what you see on your screen and the completed examples in the print version.
 * These are templates, so I may make improvements on them. Do not be surprised if you see the boxes behaving or looking different.
 * Plan out your pages - a little planning goes a long way. Figure out how you would like to organized the information by answering the following questions:
 * What information should stand out?
 * What information should be grouped together?
 * What levels of information do I have? Think sections and subsections. Create a hierarchy of information that makes sense to the information you have.

= Tutorial =

Here I will walk you through a simple tutorial where we create a page with a couple of announcements, two different lists of resources, and an article written about my FHC. This should give you a good idea of how to use the templates for creating your own FHC page. For reference, here is what you should have at the end of this tutorial.

A good place to practice without messing with your FHC page is to click on "Sandbox" up next to your name on any wiki page. This will take you to your own page where you can try things out and practice before you edit the real thing. I would recommend going through the following tutorial on your "Sandbox" page.

1. Decide what sections you need
Everything on a page should be organized into sections. Think of a section like a chapter in a book - its purpose is to group like content together. When you are planning out your page you may have one section or many sections depending on how much information you are displaying.

In our example we have a couple of announcements, two different lists of resources and an article written about my FHC. Let's make three sections, "Announcements" where all of the FHC announcements are located, "Resources" where you can find a list of various resources for doing research in my area, and "Articles" for the published articles about my FHC.

Of course, when you are planning out your FHC page, you may have different sections. Do what makes most sense for your FHC when deciding what sections to create.

2. Order your sections
Now that we have our sections, we need to put them in order from most important to least important. This will determine what order the sections show up on your page. For our example, I want "Articles" first because I want people to see the article written about my FHC, then "Announcements" because we have several events hosted at our FHC, and I want visitors to know what is going on, and finally "Resources" where people who are doing research in our area can go to to find local links.

3. Create your sections using Kalispell FHC Section template
Now we will use the "Kalispell FHC Section" template to create each of our sections. This template allows you to type in the name and the content for each of your sections and then takes care of all the formatting.

For now we are just going to create sections with titles and no content.

3A. Open up the page you would like to edit and click "Edit source" at the top. You will probably see a lot of text on the page. If you are planning on replacing everything, you can delete it all and start with a blank page.

3B. Figure out where on the page you would like to create your first section. If you just deleted everything, this will just be at the very top.

3C. Copy everything in the box below.

3D. Go back to "Edit source" and paste everything you just copied into where you would like your first section.

3E. Where it says "Section Title" type in your title for your first section after the equals sign. Our first section is "Articles," so we will type that in after the equals sign next to "Section Title." Below is an example of what it should look like.

3F. At the bottom of the "Edit Source" page click the button that says "Show Preview." This button allows you to see the changes you made without saving the page. You should see something similar to the section below. As you can see, each section has the title with an underline at the top, and a link "Back to Top" at the bottom. All of our content, that we will add in later, will end up between the title and the "Back to Top" link. If you don't see something like below, go to step 3G.

3G. Notice the brackets at the beginning of the text in step 3C. These brackets are very important because they mark the beginning and end of the section. If you miss the brackets, then you will see a whole bunch of random text on the screen instead of the section, like below, instead of the section in step 3F.

{{Kalispell FHC Section | Section Title = | Section Content = }

3H. Repeat steps 2B through 2E with the rest of the sections. Below is an example of what it should look like once you've created our three sections: "Articles," "Announcements," and "Resources," in that order.

3I. After you have created all of your sections, hit the "Show preview" button again. It should look something like the example below.

3J. Click the "Save changes" button at the bottom of your "Edit source" page. Good work! You have successfully created 3 new sections on your wiki page! This stuff isn't easy, so take a second to give yourself a pat on the back :)

4. Add an article to the "Articles" section using Kalispell FHC Article template
Now that we have our sections, we can start adding our content to each of the sections. We are going to start with our first section "Articles" and add an article. I created light blue boxes for displaying articles. These boxes draw people's attention, but aren't too distracting. Each article lets you add a title, a subtitle, an image for the article, and content that is either the article itself or includes a description and a link to the article. For now we will add in everything but an image.

For our example we have one article we want to add. The text for the article is below for reference. Remember, for this step we will not be adding an image to the article.

Family History Highlight: April Finding Your Roots

Need a break from your own family history? Or maybe some inspiration to get you going? This fun series by Ancestry on YouTube features 38 5-minute episodes featuring famous people's reaction to finding out about their ancestors.

Get inspired on YouTube. (the word YouTube will be a link to a YouTube video)

4A. Open up the page you would like to edit and click "Edit source" at the top.

4B. Copy everything in the box below.

4C. Paste what you copied in step 4B between the equals sign after "Section Content" and the curly brackets ( }} ) in the "Articles" section. It should look like the example below. Be careful with the curly brackets - if you don't have it exactly as it is below, it will not look correct.

4D. Now click the "Show Preview" button. You should see something similar to below, with a new article box appearing in the "Articles" section. The article doesn't have anything content in it yet, but you can see that there is a default image that appears if you don't include an image.

4E. We will now add in our content for the article. After "Article Title =" paste the following text: Family History Highlight: April

4F. We will now add in our content for the article. After "Article Subtitle =" paste the following text: Finding Your Roots

4G. We will now add in our content for the article. After "Article Content =" paste the text: "Family History Highlight: April" Need a break from your own family history? Or maybe some inspiration to get you going? This fun series by Ancestry on YouTube features 38 5-minute episodes featuring famous people's reaction to finding out about their ancestors.

Get inspired on YouTube. (the word YouTube will be a link to a YouTube video)

4G. When your done it should look like the text below:

4H. Click the "Show Preview" button again, and you should see that your article now has content.

4I. Click the "Save changes" button. You have now added an article to your page!

5. Add an image to your article
Now that we have our article set up, we would like to upload a new image that goes along with the content. FamilySearch Wiki has a special process for uploading images to verify that all images that are uploaded to the wiki follow FamilySearch guidelines.

I will not go through how to upload and get an image approved in this tutorial. Below are several links to other pages that can help you learn more about this process:


 * "Upload File" page to learn how to upload an image
 * '''"FamilySearch Wiki: Purpose, Policies and Procedures"
 * '''"Wiki University: Images"

Also take a look at the "Other Resources" section below for places to get free, high-quality images, and for a list of images I have already uploaded to the wiki.

For this part of the tutorial, we already have an image that has been approved and uploaded to the wiki.

5A. Open up the page you would like to edit and click "Edit source" at the top.

5B. First, we need to add in a new field to our article, so that the page knows to use our image instead of the default one. Place your cursor at the end of the "Article Subtitle" line and hit enter. Now copy and paste the following text into the space you just created.


 * Article Image URL =

5C Your code should now look like the code below.

5D. Now that we have told the page to use our image instead of the default one, we need to tell it which image we want to use. Below is the link to the image that we will be using for our article. Copy the link.

Family history argentina.jpeg

5E. Paste the link after "Article Image URL =". When you're done it should look like the example below.

5F. Click the "Show preview" button. You should see something like below. Notice how the picture has now changed to the image we picked.

3J. Click the "Save changes" button at the bottom of your "Edit source" page. Good work! Now you have your own image in the article.

6. Coming Soon
This tutorial is a work in progress. Below are the instructions that I plan to add next.


 * Add 3 new announcements to the announcement section
 * Add a resource card to the resources section

This tutorial is unfinished. Below this title are my notes...
Kalispell FHC Resources Template Kalispell FHC Announcement Template

= Advanced Template Options =

All Kalispell FHC Section options
Empty Section Template With All Available Fields

Section Template With All Available Fields Filled Out

= Other Sources =

Here are some other sources that I used to create these templates.


 * FamilySearch style guide. This is where I look up all of the official FamilySearch colors for the boxes.


 * Free Image Collections. The Church of Jesus Christ of Latter-day Saints has curated a set of free, high-quality images that are great to use on the wiki. I have already uploaded a few (listed below).