CSI Web Guide

WebTrain basics

CSI uses an old content managment system (CMS), WebTrain, to run its main website. While it follows many CMS conventions, because of its age, functionality is limited. Pages are either really basic (most regular webpages fall into this category) or highly customized (like the job postings and school directory sections).

Authorized CSI WebTrain users access the site at: https://christianschools.mytrainsite.com/Admin/Login.aspx.

WebTrain may work differently in different web browsers. For instance, on a Mac, Firefox works best. If you run into issues using WebTrain, try a different browser.

Note: As a general rule, WebTrain is a very unforgiving CMS. There are no undos to correct mistakes or easily accessible past versions that you can revert to. Be very careful when editing.

Editing pages

WebTrain pages screenOnce in WebTrain, most editing is done through the pages tab. "How to" videos for most basic page actions are available to view on the left-hand side.

The pages tab will initially open to the top level of the website. To edit a page, click in the middle of the page icon you want to edit. To view subpages, click on the three lines in the bottom left of the page icon. Additional actions are shown when hovering over a page icon—move page in the upper left corner (drag to move page); edit, about, move, and delete page actions on the left.

Once the page opens to edit, click on the page part (area surrounded by green outline) to edit. Ususally this is the "Main Page Parts" area. Click on the green edit icon. Important: sometimes there are two edit options—always choose "Edit content on this page only." Next is the "Manage Content" screen. This screen shows all of the page parts. To edit a page part, click somewhere over the content (area highlighted in pale yellow). That opens the editing window—make edits in the WYSIWYG view or the HTML code view. Click the "Save" button on the bottom to save your progress and keep editing. Click the "Save & Close" button when done editing. Note: once you have saved and closed, there is no undo option.

Page parts

Most page parts are the "Custom Content" page part type. To add a page part, click on the "Add Page Part" button on the left and then select the radio button for the desired page part. When ready, choose "Save page part." New page parts will appear at the bottom of the manage content screen. To begin editing content, choose the desired layout—most content will use the basic layout. Page parts may be rearranged by clicking on the "Reorder" button at the top of the page. That opens a special reorder screen. Drag the page parts around and click "Done Reordering" when done.

Files and Links

WebTrain files screenFiles—images, documents, PDFs—are stored in a folder system under the "Files" tab. To add a file, click on "Upload File" on the left. Then, on the upload a file screen, click on "Browse" to choose a single file to upload or click on "Multiple File Upload Tool" for uploading several files. Either way, select the proper folder location to upload the file into. If unsure about the folder location, or if the desired folder doesn't exsist, contact CSI's creative design specialist.

To place an image, locate the correct page and open the editing screen for the correct page part. In editing window, place the cursor where the image should go and use the "insert/edit image" button in the WYSIWYG tools. Click on the magnifying glass icon to browse and locate the image from the file management screen. Select insert on the desired image. Back in the insert/edit image screen make any other necessary updates (for example: image description under the general tab and alignment under appearance tab).

To add a link, select the text or image in the WYSIWYG view of the editor and click on the "insert/edit link" tool. If the link is to an external URL, copy and paste the URL into the "Link URL" box. If an internal link, email address, or file, click on the magnifying glass icon to open the "Select Link Type" window. In the dropdown menu choose the type of link and choose or input the link. For an internal link, choose the page from the dropdown list of pages. For an email address, type the email in the "Email Address" box (optionally, add a subject line and/or body text). And, for a file, navigate through the file management screen to select the document or image (usually also select "Open in new window" for the target and add title text).

Questions?

The above instructions for WebTrain just scratch the surface. If you have any question about working with WebTrain contact the creative design specialist.

Back to top

 


 

Formatting text

Basic text styles

h1 page title

h2 top page headline

h3 1st level subhead

h4 2nd level subhead

h5 3rd level subhead

Regular paragraph of text. It could go on and on as long as needed. I’m just adding this text so there’s enough to see the spacing.

Inline text styles

Due to issues with WebTrain on certain web browsers/devices the default styles for bold, italic, and bulleted lists do not always work. Not all areas of WebTrain are affected, but if those default styles are not working, use the following inline styles:

Bold text – add style="font-family:arial,helvetica,sans-serif; font-weight:bold;" to strong tag – Bold text with inline style

Italic text – add style="font-family:arial,helvetica,sans-serif; font-style:italic;" to em tag – Italic text with inline style

 

Bulleted list

  • item one
  • item two
  • item three

Bulleted list with inline styles. Add style="list-item-style: disc; list-item-position: outside;" to li tag. Depending on spacing, you may also need to add some margin space to the left, if so add margin-left:20px; to the style.

  • item one
  • item two
  • item three

Back to top

 


 

Layout styles

Columns

Most pages/layouts on WebTrain are set up to be one column wide. To make multiple columns use div tags around your content set with different floats and widths. The top/outer div must have class="row" in it. Inside that div each column will be its own div with float="left" (or right) and a width="#%" # being equal to the width.

For example, to make a two column format on a regular WebTrain page us the following code:

HTML code for 2-column format

Which displays as:

Left column content

Right column content

 

Horizontal line/divider

Use the following code for horizontal line divider on the CSI website:

HTML code for CSI horizontal rule

It displays as:

 


 

Back to top

 


 

Image sizes

695x390 placeholder image

Images on csionline.org usually are not restrained to a certain size. That being said, the width is usually limited by the width of the content area (usually the main page part width). When possible, image placement and size should be consistent and follow existing common sizes. Below are some recommended sizes that are currently in use throughout the website.

CSI common image sizes

Page banner – 1600px x 300px (like home page slider)

Page content full width image – 695px x 390px (16:9 ratio – example above)

Page content square image – 300px x 300px

Headshot – 200px x 300px

Home page half width column image – 453px x 255px (16:9 ratio)

Back to top