Caboose is a powerful Content Management System (CMS) created by The Nine and designed for ease of use and flexibility of features. Your site was built on Caboose to allow you, the site administrator, to easily edit your site. By logging into the Caboose admin interface, you can add and edit pages, news posts, calendar events, and more. Any content changes you make in the admin interface will be visible on the public site.
The admin interface can be accessed through any web browser by appending “/admin” to your site’s URL. Your site’s admin interface is located at
http://<your-website-domain>/admin
Note that Caboose is optimized for newer Internet browsers, such as Google Chrome or Firefox (both free downloads). You may experience issues if using an outdated browser.
If you are not yet logged in, a login window will appear asking you to do so:
Once you have successfully logged into the admin interface, you will not be required to login again for 30 days as long as you use the same Internet browser and do not manually logout.
After logging in, you will be redirected to the admin landing page, which lists the main menu.
The Main Menu can also be accessed by clicking the “Menu” button in the top right of the screen. The “Back to Site” button will take you to the homepage of your site, as visible to the public.
Under the Main Menu, you will find options to logout, edit your account settings, edit site settings, and edit site content. Each of these options will be explained further in the sections to follow.
Your site is made up of a collection of pages, structured hierarchically and available at different URLs. All subpages are nested underneath the homepage.
To view your site’s pages and make changes, login to the admin interface and click “Pages” beneath “Content.” A list of all pages on your site will appear:
Page settings include the title of the page, the URL the page is accessible at, SEO tags, and other information. To edit page settings, click the name of the page you wish to edit from the main pages menu. The page will open and look identical to the page that is visible to the public, with the exception of the admin menu bar in the top right of the screen:
Click “Settings” in the admin menu bar. The Page Settings screen will appear:
Page settings can be changed here. Note, there is no “Save” button. The settings are updated as soon as the field is updated. See below for a brief explanation of the available settings:
This is the page title as it appears on the admin side of the page, in the title bar of the browser, and on the page itself. If no Menu Title is provided, this will also be the text displayed in any navigation menus.
This is an optional field that will override the Title when the page is displayed in a navigation menu. This field is useful for long page titles - you can easily show a shortened version of the title in the navigation menu.
This is a required field that defaults to the homepage. Use this field to structure the hierarchy of your site’s pages. Note that changing the parent page will also change the URL the page is accessed by, which could break existing links to this page.
This field is a URL-friendly version of the Title. It defaults to a lowercase version of the Title, with spaces and special characters replaced by hyphens. The slug is the last portion of the URL that represents this page. Note that changing the slug will also change the URL the page is accessed by, which could break existing links to this page.
This field is similar to the slug, but starts the domain over at the beginning.
If this field is set, the page will automatically redirect to this URL instead of showing the page itself. This can be used to add external links to the navigation menu, or to point several links in the navigation menu to a single page on your site.
This field defaults to checked, which means the page is hidden from the navigation menu. Note that hidden pages can still be accessed directly by URL. Uncheck this field when the page is ready to go live on the site, and it will display in the navigation menu.
Use this field to custom sort the children of this page, as they appear in any navigation menus. First, check the box to tell the page to custom sort its children. Next, click the “custom” link and drag the pages into the order you would like. The sort order will be saved automatically; there is no save button.
This is an advanced field that should not be changed unless the raw page code is being manipulated.
Page tags can be used for several purposes, depending on your site. Add tags here, separated by commas.
The following settings are accessible from the left sidebar:
These settings allow you to hide a page from the public. If you have user accounts setup on your site, you can restrict access to certain pages to specific users.
This tab is used to edit the content of the page. See the next section for instructions on editing page content.
If your page requires custom CSS code, it can be added here. This code will only be applied to this page and is deleted if this page is deleted.
If your page requires custom Javascript code, it can be added here. This code will only be applied to this page and is deleted if this page is deleted.
SEO (Search Engine Optimization) settings can be used to help Google and other search engines better index this page. The fields used on this page (SEO Title, Meta Keywords, Meta Description) will not be visible to the public, but search engines will see them in the code and have a better idea of what this page is all about.
The sitemap shows your site’s current page hierarchy, with quick links to edit other pages.
Click this link to delete your page permanently. You will be shown a warning message before the page is actually deleted.
To edit page content, click the name of the page you wish to edit from the main pages menu. The page will open and look identical to the page that is visible to the public, with the exception of the admin menu bar in the top right of the screen.
All page content is structured in blocks. A block can be an image, text area, map, slider, or one of many other options. Blocks are structured hierarchically, with the top-level block of each page being the page layout. For more information on blocks, see sections 5 and 6.
To edit the content of the page, simply click the content you would like to edit. A dialog box will appear, with editable fields corresponding to the page content fields you can edit for that block:
Notice the hierarchy of blocks at the top of the edit window. You can use these links to move up and down the hierarchy to get to the block you wish to edit. Any fields you edit in the dialog box will be automatically saved, and visible on the public site. There are no save or undo buttons.
The “Move Up” and “Move Down” buttons at the bottom of the dialog box can be used to sort the blocks on the page. The “Delete Block” button will delete this block AND all its children blocks that are structured hierarchically beneath it. A warning message will appear if the “Delete Block” button is clicked before the block is actually deleted, but there is no way to restore a block that is permanently deleted.
After closing the dialog box, changes can be seen in real time on the page, just as they appears on the public site.
Blocks can be reordered and bulk deleted, directly from the page without opening the dialog box. Hover over the block you wish to move or delete and look for the move/delete icons in the top right of the block:
To delete the block, click the X. To move the block up or down, click the corresponding up or down arrow. To bulk delete multiple blocks, click the check mark on each block to delete, then click the X on any of the blocks. All checked blocks will be deleted.
To add a new block, hover over the space between two blocks near the middle of the screen and look for the “New Block” link. This link will appear when hovered over, wherever a new block is able to be added.
Click the “New Block” link to create a new block in that space. The new block dialog box will appear, asking you to select the type of block you wish to add.
Scroll through the list and click the type of block you wish to add. For more information on available block types, see section 6 of this guide. After selecting a block type, the available fields for that block will appear.
Here, you can add or modify the fields that dictate how this block will appear to the user. Any changes you make will be automatically reflected on the public site; there is no save button.
Some blocks allow children blocks to be added beneath them. Look for the “Add a child block!” link to add a child block if this block type allows children.
Child blocks are either of a predetermined type or allowed to be any block type.
Rich text fields make up the majority of text content on any given page. A rich text field can hold large amounts of text and be easily formatted in rich text editor:
The rich text editor can be used to format text with color, lists, alignment, italic and bold fonts, and more. Hyperlinks can be added by clicking the link icon in the menu bar (second from the right). To view the HTML source code, click Tools, then Source Code. This can be useful for adding embed codes or tweaking HTML code.
Note that images and videos should not be used in the rich text editor and should be created as separate blocks.
Make sure to click the “Save” button in the top left when you are finished editing, otherwise your edits will be discarded.
When you are finished editing your page, click the Back button in the admin menu to return to the admin pages view.
A page’s layout determines the design and location of the header and footer, if a sidebar is shown, and the layout of the content on the page. Your site may have one or more layouts available to choose from, based on the initial design.
To edit a page’s layout, click the page from the main page list, then click “Page Layout” in the admin menu bar. You can then select the desired layout and update it.
WARNING: Updating your page layout will cause the content of the page to be deleted, as the layout dictates the block structure of the page. Only change the layout if you are certain of the new layout.
To add a new page, click the “New Page” link from the main page list.
Type in a title for the page, and select a layout. Usually, the layout will be “Subpage.” After clicking “Add Page,” you will be redirected to the page settings view. See above for instructions on editing page settings and content. Note that the new page is hidden by default and will not be shown in the navigation menu until the “Hide” option is unchecked.
To delete a page, click the name of the page from the main page list. Click “Page Settings” in the admin menu bar, then “Delete Page” in the left sidebar. A warning message will be shown before the page is deleted. Note that all the content on the page will also be deleted, and there is no way to restore the deleted page or content. The page will be removed from the site’s navigation menus, but all other links to this page will break.
If you have external links to this page that you don’t want to break, use a redirect URL instead of deleting the page. The redirect URL will simply redirect to the given URL instead of displaying this page. For instructions on adding a redirect URL, see “Edit Page Settings” above.
All images and files on your website are uploaded to and stored in the Media Browser, accessible under the main menu under Content -> Media. Within the Media Browser you can mass-upload files, sort them into categories, delete them, and edit the titles. Media files can be embedded into block types that accept image or file attachments.
To upload new media, go to the Media Browser (Main Menu -> Content -> Media) and click Upload. The upload box will appear:
Click “Add Files” to select files from your computer, or drag files from your Desktop into the upload box. You can select multiple files by holding the Control or Command key on your keyboard while clicking each file individually. As you select files, they will show in the upload box. Once all files are selected for upload, click Start Upload. You will see a status bar show the status of your uploads and they will appear below the upload box as they are uploaded. Images may take up to a couple minutes to process before you see the image thumbnail.
To categorize media, first create a new category by clicking New Category on the left sidebar of the Media Browser.
Type in a name for the category and click Add. The new category will show under the main Media tab on the left. Categories can be structured hierarchically, just as pages are. To make a category a subcategory of another category, drag it to the category it should be nested beneath. For example, you can create a new category Trees and drag it beneath the Plants category, and add images to each separately.
To move Media files to a category, select all the files you wish to move by clicking on them (they will turn from gray to blue), and drag them to the category they should belong to.
To delete Media files, select them individually by clicking on them (they will turn from gray to blue), and drag them to the Delete option on the left sidebar.
To sort Media images or files, click the blue “Sort” link at the top of the media browser. Drag the images into the desired order, then click “Done Sorting.”
The filename of the uploaded file cannot be changed since it represents where the file is saved on the server. However, the file or image description can be changed by clicking the text on the Media file beneath the image thumbnail. The description is used as the filename when the file is embedded into a block.
When editing a block that allows an image or file to be embedded, a link will appear to add a Media object. For an image, the default 300x300 blank gray image will appear if there is not an image set. Click the default image to select an image that has been previously uploaded through the Media Browser.
Blocks are the core structure that make up the content of any given page. A block can be an image, text area, map, slider, or one of many other options. Blocks are structured hierarchically, with the top-level block of each page being the page layout.
Each block is assigned to a specific page and is of a certain type. A block can be a container element, such as a slider, or a simple data field, such as a snippet of text or an image. Container blocks contain one or many child blocks, each of which has its own type and potentially its own child blocks. Some block types allow for an unlimited number of child blocks, and others allow none. Sometimes child blocks are restricted to a certain type (i.e. a slider block’s children can only be of type ‘slide’), and other times the user can select the type of each child block.
Each page has a top-level layout block, which contains child blocks for the header, content area, footer, and potentially a sidebar, depending on the layout. When a block is deleted or moved, all its child blocks are also deleted or moved along with it.
For more information on how to use blocks to edit the content of a page, see the “Edit Page Content” section above.
Your site can have an unlimited number of blocks, each assigned to a page and having a certain block type. The block type defines how the block is displayed to the user on the site. Some common block types include: Slider, Banner, Image, Map, Contact Form, Rich Text, and Calendar.
Your site may have custom block types created specifically to match your site’s design. When a new block is added to a page, a list of all available block types will be shown to choose from. Below is a list of common block types, and the settings used to configure them:
The banner block is a full-width area for featured content, usually consisting of a background image and a text overlay. The color of the font can be changed in the Rich Text editor for the text overlay, and the size of the font can be changed under Advanced Options. Also under Advanced Options are fields to add a button, a color overlay on top of the background image, an image overlay, and text alignment. You can also change the Image Sizing option which controls how the background image is positioned. The Padding field is in the format “150px 0” with the first number being vertical spacing and the second number being horizontal spacing.
A button block renders a clickable button to the user, which links to either a URL or an uploaded file. If a file is selected, it will override any URL provided. You can also set the color of the button and if it opens in the same window or a new tab.
A calendar block renders a month-view calendar which pulls events from Caboose Calendar and displays the details in a popup window:
To add or edit events, see the section below on Calendars.
A contact form block renders a basic contact form with fields for name, email, subject, and message. In the block options, you can also optionally add a Captcha to prevent SPAM messages. Be sure to set the “Default Notification Email” field to an admin email address which will receive a notification email when the contact form is submitted. Multiple departments can be added, each with a separate notification email address, and will display as a dropdown for the user to select one.
There are several block types available that display recent posts from your social media accounts (pictured is a Social Media Grid). These include Facebook Feed, Instagram Feed, Twitter Feed, Single Tweet Banner, and Social Media Grid. Posts from Facebook, Twitter, Instagram, and YouTube are automatically cached on your website server and refreshed every 10 minutes. To set your social media usernames, go to Settings -> Social Media under the admin main menu.
There are three block types available for different size rows: Two Column Row, Three Column Row, and Four Column Row. Each Row has options to constrain the row (whether it should be full-width of the page or centered horizontally) and a height option. The Height Option defaults to Auto, which means each column will expand based on its content. This can be changed to Fixed, which allows for a set height in pixels for each column; or Expand, which auto-sizes the smaller columns to be the same height as the largest column.
Each Column works as a container block and can hold any number of child blocks of any type (for example, you could add a Map or Slider as a child block to the Left Column). Under “Column Options,” you can adjust the background image, background color, text alignment, and padding for each column. Note that when editing a page, a dashed line will appear around each column in a row; on the live version of the site, this line is not visible.
An image block allows you to add an image to a page and adjust its settings, such as its width, height, and margins. You can also add a URL that the image should link to if clicked. You can set the “Alt Text” to a few words describing the image; this is used by search engines as well as users who cannot view images due to accessibility.
The map block renders a Google map that is centered on an address and optionally shows an info box with text in it. You must provide a latitude and longitude for the map to center on. To get coordinates from an address, use this link. You can set the zoom level and height of the map in the block options.
The News List block renders a list of all your site’s published Posts with their corresponding images and links to the full Post. You can edit the number of posts to show and the section title in the block settings. To add or edit actual Posts, see the Posts section below.
The Photo Gallery block renders a grid of images, each of which can be clicked to view a larger version of the image. To add images to a photo gallery, first create a new category under Admin -> Media and upload the photos there. Then create the Photo Gallery block and select the name of the desired Media category to display the corresponding photos.
A Rich Text block is a block of text that can contain any HTML code. For more information, see section 4.3.1 above.
The Slider block is similar to the Banner block, but is a container for multiple slides which rotate in and out. The Slider has several options that can be set, such as height, autoslide duration, transition animation, and arrow color. A Slider can contain an unlimited number of slides, each of which can have a background image, text overlay, button, and image overlay. The title for a slide is usually only visible on the admin site to distinguish one slide from another. Slides can be rearranged by moving the slide block up or down in the edit window.
A Text Area block is a container for other blocks that has options for background color, font color, font size, text alignment, and width.
A video block renders an embedded video into the page, which can be pulled from either YouTube or Vimeo. Just put the video URL (example “https://www.youtube.com/watch?v=MzSvdOpH4Gc”) in the URL field for the block. You can also set the width and margins of the video, its alignment, and whether it plays automatically or not.
Posts are integrated into Caboose to allow your site to have a blog or news section. Each post consists of a title, subtitle, author, featured image, text preview, content area, and optional categories. Posts can be accessed from the admin interface by going to the Main Menu and clicking Content, then Posts.
To add a post, click the “New Post” button from the admin post landing page.
On the New Post screen, type in a title for the post and click “Add Post.” You will then be redirected to the post editing page. Note that the post will not be published on the site until the “Published” checkbox is checked on the edit post page.
To edit a post, click the name of the post from the admin post landing page. The edit post page will appear.
On the General tab, the post slug, title, subtitle, author, and featured image can be edited, along with the “Published” option. Only posts with the “Published” option checked will be visible to users on the site.
The post slug is representative of the post title and determines the URL the post will be accessed by. Changing the slug will automatically update the URL, but changing the title does not automatically update the slug.
The Preview tab allows you to edit the text visible on the post index page. This should be a few sentences that previews the content of the post. Be sure to click the “Save” button in the top left of the text editor, otherwise your changes will be discarded.
The Content tab allows you to edit the main content area of the post. This works very similar to editing page content. Any type of block can be added to the content of the post and will be rendered appropriately. For more details on editing post content, see the section above regarding editing page content.
If your site has multiple post categories set up, these can be edited from the Categories tab in the left sidebar.
To delete a post, click the name of the post from the admin post landing page. The edit post page will appear. Click “Delete Post” in the left sidebar. A warning message will appear before deleting the post. Note that deleted posts cannot be restored.
Your site may have been initially set up with a News or Posts page, on which all the published posts will automatically appear. If your site does not have a News page and you wish to add one, simply create a page, add a new block, and select “News List” as the block type.
Forms can be added to pages on your site as any other block is. Depending on the setup of your site, different forms may be available to add. When forms are submitted, a notification email is sent to the email address specified in the block under “To Address.” To edit the email address the form sends a notification to, click the form block when on the edit page content screen and change the “To Address.” For more information on how to edit blocks, see the section “Edit Page Content” above.
Notification emails are sent FROM the email address specified in the site’s SMTP settings. If forms are not being sent successfully, check your site’s SMTP settings to ensure the site is communicating with your email server.
Your site can be configured with multiple event calendars. To access your site’s calendars, use the Main Menu to navigate to Content -> Calendars. Click the name of the calendar you wish to edit, or add a new calendar by clicking “New Calendar.”
From the edit calendar page, you can change the name or description of the calendar or delete the calendar. Note that if the calendar is deleted, all its events will also be deleted.
To add a new event to the calendar, click the date of the event on which you want to add an event, and fill in the details of the event.
Your site may have been initially set up with a Events or Calendar page, on which all events for the main calendar will automatically appear. If your site does not have a Events page and you wish to add one, simply create a page, add a new block, and select “Calendar” as the block type.
SMTP is the protocol used to send emails from your website. This is used for contact forms, newsletter sign-up forms, and other features. In order for you, the administrator, to receive notification emails when forms are submitted on your site, SMTP must be configured to correctly communicate with your email server. SMTP can be configured from Caboose by going to the Main Menu -> Settings -> SMTP (Mail). If you need assistance with setting up or changing SMTP settings, please contact us at support@nine.is.
You can customize the fonts on your site by going to the admin main menu -> Settings -> Fonts.
Caboose utilizes Google Fonts to provide free access to over 700 fonts. You can browse through the available fonts by clicking the Next and Previous buttons at the top of the font browser to switch pages. When you select a font, a preview will appear in the preview window below. You can see how the font looks as a heading, in a paragraph, and in a button. You can also select different font variants in the select box above the preview. Variants of a font can make it bolder, lighter, or italic. After selecting a font and variant and previewing it, you can save it to your site for use in Headings, Body text, or Buttons. Click the button corresponding to the content type (heading, body, or button) you would like to save the font for. You can select the same font for all content types if you wish. To set the bold, italic, and bold italic fonts, change the font variant for your selected body font and apply it. Once you click a “Set as...” button for the font, it will be saved to the site automatically. There is not an undo button, so be sure to keep a note of the current font if you want to change it back.
Permanent redirects can be used to fix old links to your site, such as when a search engine is using links that are invalid on the new site. To add a new redirect, go to the admin main menu -> Settings -> Permanent Redirects, and click New Redirect. Insert the old URL and new URL, and click Add Redirect. You can also use regular expressions. For example, your old URL might be “/news” and the new URL “/posts.” With this redirect in place, anyone that goes to “/news” will be redirected to the new URL, “/posts” - which will prevent error messages being shown on search engines until the search engine re-indexes the new site.
Social media URLs and usernames can be added or edited from the social media configuration page. To access this page, go to the admin main menu -> Settings -> Social Media. When a URL or username is added to any social media platform, the corresponding icon for that platform will appear on your site in the designated place for social media icons. Note that some social media platforms call for a username, and others the full URL. For Facebook, Twitter, Instagram, and YouTube, the username is used to cache your posts on your web server to display them in social feed blocks. For Facebook, you will need to get your Facebook page’s unique ID using the link on the Caboose social media configuration page.
Caboose is a work in progress, constantly being updated with new features, better security, and improved design. As such, you may occasionally notice something not working properly. If this happens, please let us know by contacting us at support@nine.is and we will assist you.