Default Shell for Online Registrations¶
We use Bootstrap as our styling framework for online registrations. See note at bottom of page for more about Bootstrap.
We have included the HTML code for a sample shell that can be used as a starting point for creating a Bootstrap shell for your church. This should already be on your TouchPoint database, but if not, just follow the instructions below.
How to Create a Shell¶
- Step 1
- Go to Administration > Setup > Special Content > HTML Content.
- Step 2
- Click the New HTML File button and name the file
ShellDefaultBs. The name is important; since, by convention, that is what the system will look for unless you specifically point to a different file. Type
Shellin the Content KeyWords box. This is what allows it to show up as an option in the HTML Shell drop down menu on an Involvement.
- Step 3
- Click the Source button on the editor. Then copy the code below (See Sample Shell below) and paste it into the editor. Click Source again and then click Save.
You can click the view raw link in the bar below the code to make it easy to copy all the code.
The code below is just a sample. You will want to:
- Change the banner image (more below about the image).
- Change the footer text and links.
The image in our sample is quite large (1920 x 397). However, it is sized on-the-fly with a width of 100%, so that it fits whatever container it is in (like an iPhone). You will want to do the same with your image. Take note of our image size and shape as an example.
If you want to use a custom shell for just one registration, you can create that shell as you did the default shell, giving it a
different name. Be sure to add the ContentKeyword of
Shell in order for it to show up in the drop down list on the Involvement. Then
choose that name from the HTML Shell drop down on the Registration > Registration tab of the Involvement.
If you are experimenting with a shell, and already have existing registrations using that shell, you should copy it and refer to the copy in your test Involvement. Otherwise, you will be affecting live registrations every time you save.
Sample Shell for Bootstrap¶
A note about Bootstrap
Bootstrap is a very popular web page style framework. Not only does it have a nice clean look and can be customized, it is known for making your web page easy to use on a mobile device. We use this as our default for online registrations, not only because it looks great, but also because of the tremendous benefits for mobile users.
This is from the Bootstrap web site.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Add info about Shell ContentKeyword