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. Just follow the instructions below.
How to Create a Shell¶
- Step 1
Go to Administration > Setup > Special Content > HTML Content click New HTML File button and name the file
The name is important; since, by convention, that is what the system will look for unless you specifically point to a different file.
- Step 2
- 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. Then enter that name in the HTML Shell textbox on the Registration > Registration tab of the organization.
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 organization. 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.