Make sure you've set up at least one server and at least one teacher before you get to this step.
Understanding the way Proclaim! works
In Proclaim! we use the Twitter Bootstrap CSS to create a grid for each study/sermon listed on a page. Bootstrap is a grid system 12 columns wide. In your List view you can use one or all 12 columns and six rows of information for EACH sermon. It can show links to media, a photo, description, date, Scripture reference - all sorts of things.
The way you power this is through the Template tab. Click there and then click on the default template. That's what you'll probably use. Once you get more expert in Proclaim! you might create more templates. When you get really good you can even create custom template files where your PHP and CSS skills will provide a real customized look and feel.
You'll see a series of tabs - these correspond with the different views you can create using Proclaim!
Choosing a view
The first thing to notice are the General Items. If you use a custom template file, here is where you choose that one to show on the view. If you use the download popup feature you can set what shows in that popup on this menu.
Click on the Study List View tab. There you'll see fields of information to enter and sub-tabs along the left side of the screen. There's a lot there - I know - but Proclaim! is pretty powerful. You don't have to use all of these - but at least you need to set up a basic view, so we'll walk you throught that.
Verses | Dates | CSS
I'm not going to over these - especially the css part. If you have a styesheet outside of Proclaim (and outside of your site template) you can point to it here. I don't recommend this unless you are an advanced user. Choose whether or not to show chapters and verses in your list, and how the date should be formatted. If you want to get fancy, you can use the PHP function for date/time by entering in the code in the field.
List Items
This tab contains some miscelaneous items for your list. The list of fields is fairly self explanatory. The default date of ascending or descending affects the first list page. Then if a user clicks to a secondary page you can set the default date setting to something different. You'll set the front page image in the Administrative tab and then decide whether you want to have header elements (the labels for the columns) show or not. Finally you have the ability to create a description to show at the top of your listing page. This is a text editor field so you can do anything you want here.
At this point, make sure that your editor is set to not strip html. Here's a helpful article on how to check that.
Filters
The filters are very powerful and let you select only certain things to show on the list. But be aware that if you restrict things too much you might end up with nothing on your list. Normally you would just keep the Show All and let the user sift and sort based on the drop downs presented on the list.
Display Items
Next we have several different tabs with all of the possible items you can display per row on your listing page. Simply choose whether to show or hide an element, how wide the element should be in the grid of 12, what order it should come in, and what html element you will use (the styling of the element comes from your template CSS). We allow you to add a custom css class using style= before, or use any valid class. Finally you determine if the element is a link and to what.
If you have a thumbnail that you want to use, you can choose to span certain rows of the grid and determine what Bootstrap styling you will use for the image.
How does it all work?
It will take lots of experimentation to get this right for you. Below is a table that shows the 12x6 grid. You determine what goes in what part of that grid, and how many columns and rows are used.
Above is a screencapture of how the grid can be used. Notice there is a header (optional), then Scripture, Title, and Media on one line taking up 12 columns total, then the description taking up the entire row below. Scripture was set to Row 1, Order 1, 3 Columns. Media was set to Row 1, Order 3, Columns 5 (with no HTML element). Finally, Description was set to Row 2 with 12 columns so it spanned the entire row. See how it works?
No doubt you'll want to do plenty of experimenting until you get the settings just as you want them.