Content Skip to content.
San Diego State University

COE Web Content Management System

Basic User Guide

The Basic User Guide covers the following topics:

How to Log In & Access a Web Page

How to Log InGo to YouTube videoYouTube Video

  1. Go to:
  2. Type in username and password (note: your username will begin with "tbx.").
  3. Click "Login."
Need a Toolbox account? If you are College of Education faculty/staff, contact Manny Uribe for a Toolbox account. If not, Giselle Domdom is the University-wide contact for all Toolbox accounts.

Toolbox CMS Log In Page

Log In Window

Access Your Department/Program

  1. Click on the "+" icon to the left of the College of Education folder.
  2. Click on the "+" icon to the left of the Programs folder.
  3. Click on the "+" icon to the left of your Department or Program folder.
User Guide - Program

Tip: Navigating Toolbox

The folders in the right-side navigation tree tend to collapse once you navigate to a different area in Toolbox. It's helpful to right-click (or Ctrl + click for single-button mouse) on a page link you would like to work on and open it in a new tab.


Editing a Web Page

Edit a Web Page

  1. Click on the "+" icon to expand the category of the page you want.
  2. Click on the name of the page you would like to edit (this will take you to
    the Edit Page).
User Guide - Program

The Page Content Area

At the bottom of the Edit Page is the PAGE CONTENT area where you can edit free text modules.

User Guide - Page Content

Editing a Free Text Module

  1. To edit a module, click on the pencil icon.
User Guide - Edit Free Text
Note: Clicking on the trash can icon will delete the module. You will get a prompt box to confirm your selection. At this time there is no way to restore a deleted module. Always keep a backup copy of your web page text.
  1. You will be brought to the Content Editor where you can edit the page much like you would in a Microsoft Word document.
    Make use of the Format Styles to keep content styled consistently throughout.
User Guide - Format Styles
  • Paragraph: Body text should be formatted with this style.
  • Heading 2: Should always be used as the format style of a free text module title and should be used for no other reason.
  • Headings 3 - 6: For subtitles & other subordinate titles. The larger the number, the smaller the font size.

View sample styled text

Note: NEVER COPY TEXT from Word or the Web directly into Toolbox. Copy from a program free of formatting like Notepad for Windows or TextEdit for Mac.

Adding Titles to Free Text Modules

In the Free Text module page, there is a second tab next to the Content editor tab called “Settings.” Go to this tab and give your module a title. As your page has more and more text modules it will be easier to get to the module you want if it has a short descriptive title.

User Guide - Free Text Title

Other kinds of modules will use this option to apply a title to the module on the live web page. In that case you can give the title a link URL. That is not case for free text modules, so just click “submit” to add your descriptive title.

Sample Styled Text

Paragraph Text Sample

Heading 1 Sample

IMPORTANT: Heading 1 (H1) is reserverd for the page header at the top of each web page. Do not use H1 in any of your content.

Heading 2 Sample

IMPORTANT: It is recommended that Heading 2 be used once per page for the page title that appears in the content area. The page title will most likely be the same or very similar to the link text used to get to the page.

Heading 3 Sample

Heading 3 will be your main header style after the page title both in the left and right columns. 

Heading 4 Sample

Headings 4 -6 can be used after heading 3s. 

Heading 5 Sample
Heading 6 Sample

Adding and Editing Hyperlinks (Links)

Adding a Hyperlink

  1. Highlight the text you would like linked.
Adding a Link
  1. Click Insert/edit Link icon
  2. In the Insert/edit Link window enter a Link URL (this could be a link to a website or to a document) and a title for the link. Leave the Link Target as default "Open in This Window" (target="_self").
  3. Click Insert. You will be taken back to the Content Editor.
  4. Click Submit to save your changes.

Use Descriptive Link Text

The link text should always describe what the user will see when they click on it. It should never be "Click Here", "Here", or the URL itself. For example:



Edit Link

  1. Click anywhere on your linked text.
  2. Click on the Insert/edit Link icon.
  3. Edit the link URL or title in the Insert/edit Link window and then click on Insert. You will be taken back to the Content Editor.
  4. Click Submit to save your changes.

Remove/Delete Link

  1. Click anywhere on your linked text.
  2. Click the Unlink icon Unlink Icon to break the link.
  3. Click Submit to save your changes.

Upload a Document and Copy Document Link

Uploading a Document

  1. Create a document and save as a PDF file (unless there's a particular reason you need an editable file, stick to PDF).
  2. Click the “+” icon to expand the Documents category in your department or program.
  3. Click on the documents page.
Uploading a Document

A special kind of module is used to upload documents. It is called the Downloadable Document List module.

Downloadable Document List
  1. Find the “Downloadable Document List” module in the PAGE CONTENT area.
  2. Click on the pencil icon.
  3. In the document module form, type a document title (that will help you find that document later in the document list).
  4. Click Choose File to attach your document.
  5. Click Submit to add your document to documents list (located below the form).
Upload Document Form

Copy Document Link

  1. Find your document in the document list.
  2. Right click (or Ctrl + click for single-button mouse) on the magnifying glass icon.
  3. Choose Copy Link Address to copy the location of your document (note: the option may read Copy Link Location or Copy Link depending on your browser).
Documents List

Adding Photos/Images

Preparing Images for Web

  • Make sure photos are good quality images. If they are not good quality, don’t use them.
  • Images should be saved at 72PPI (Pixels Per Inch).
  • Images should be cropped to the size needed to fit into the space on the page. Note: left column width is 550 pixels; right column width is 285 pixels.
  • Give your image a descriptive file name to make it easy to find later in the site’s stored images.
  • Only use underscores ( _ ), letters and numbers in filenames.
  • Dowload the CMS Dimensions (PDF) reference sheet to keep image and module sizes handy.

Adding an Image

  1. Click the “Insert/edit Image” icon User Guide - Insert Im-age Icon in the Content Editor menu (the “Insert/edit image” window will pop up).
  2. Click “Upload New Image” (the pop-up window will switch to the “Upload Image” page).
  3. Click “Choose File” (navigate to the image on your workstation).
  4. Click “Open.”
  5. Click “Upload” to upload your image (the pop-up window will switch back to the “Insert/edit image” page. At this point your image has been added to the sites stored images. One more step is required to add the image to your page).
  6. Select image from the “Uploaded Images” drop-down menu (listed by filename).
User Guide - Uploaded Im-ages Dropdown
  1. Important! Change the image description and title (it uses filename by default).
User Guide - Im-age Description
Note: the Image Title appears in web browsers when you mouse over it.
  1. You’ll notice that the “Insert/edit image” window has three tabs: General, Appearance, Advanced. Click on the Appearance tab.
  2. Select the alignment for your image to determine which way text will wrap around your image. Usually you will choose either left or right.
  3. Click “Insert” to insert the image into the Content Editor.
  4. Click “Submit” to save changes.

Editing Image Margins

Images have no margins by default. You can either add white or transparent margins to your image in your photo editor or add a margin with a little advanced styling.

Appearance Tab

Select your image and click on the “Insert/edit Image” icon User Guide - Insert Im-age Icon. In the “Insert/edit image” pop-up window, click on the “Appearance” tab.

  1. In the Style box add the following:
    • For a left aligned image: margin-right: 15px; margin-bottom: 15px;
    • For a right aligned image: margin-left: 15px; margin-bottom: 15px;
  2. Click “Update” to submit your image changes to the Content Editor.
  3. Click “Submit” to save changes.
User Guide - Add Im-age Margin

Adding Link to Image

You can add hyperlinks to images just like you would to text.

  1. Click image to select.
  2. Click “Insert/edit Link” icon User Guide - Insert Link and follow steps for adding a hyperlink.

Tips When Selecting Image: It can be a bit tricky selecting your image in the Toolbox Content Editor to edit its settings.

If you can’t click on the image, try clicking to the left or right of the image or make sure the text cursor is next to the image then do a Shift + Arrow Key (depending on which side of the image you’re on).

The image will be highlighted with a transparent blue color once it’s selected.