Login | Help

Using Unify

Unify has been designed to be simple to implement and simple to use. After you have installed Unify, you can get started by going your yoursite.com/unify, and logging in with your user info (which should have been emailed to you when you registered).

Once you are logged in, you should see your home page, along with Unify edit icons indicating areas of your site that are editable through Unify. Click any of these icons to begin editing your content.

The Unify Editor

The Unify editor is built on TinyMCE and allows you to edit your site’s content inline, using the styles defined in your CSS. This gives you the ability to see how your edits will look before you publish them to your live site.

Depending on what kind of content you are editing, you will get different options for editing, based on what is valid for the HTML.

For basic text elements (paragraphs, headers, etc.), you get:

  • bold or italic text
  • link · create links to other content on the web, or files on your server. To link to a file or image, use the Unify file browser by clicking the magnifier icon in the link creation box.
  • images · upload, resize and edit attributes for your images, and link them to other content.

For layout elements (divs, list-items, etc.), you get all of the options above, plus:

  • video · you can embed and resize videos in your content using the Unify video wizard.
  • file · you can upload files to your site up to 100MB.
  • bulleted list or numeric lists
  • definition list · you can create lists grouped by terms and their definitions.

Image Editing

Unify allows you to easily upload, link and resize images through the image editing wizard. First, make sure you give an image the “unify” class, or make sure that the image is in a Unify editable area.

If the image is in a Unify editable area, click the icon to edit that area, then click on the image you want to edit. You should see the “image” button in the toolbar highlighted. Click the “image” button to edit the image. If the image is outside of an editable area, just click the icon next to it.

Through the image editing wizard, you can manipulate the following:

  • image source · you can upload a new image or add the URL of an image that already exists on the web.
  • height and width · you can force an image to the size of an image you are replacing by leaving the “Resize image to fit” checked. You can keep the proportions of an image (preventing any distortion) by checking “keep proportions”. Or by unchecking both of these, you can size the image however you want.
  • alt text · add any image description here to allow for better accessibility and SEO.
  • class · you can add CSS classes for specially styled images.
  • link URL · you can link your image to another page, image or file. For images and files, use the Unify file browser by clicking the magnifier icon.
  • rel · if you have entered a link URL you can also add a rel which can be used with many different javascripts, including Lightbox 2.

Video Embeds

You can also edit and embed videos using the Unify video wizard. This behaves much the same way as the image editing wizard, but with less options.

With the video embed wizard, you can edit:

  • video embed code · you can embed a new video or edit the embed code to display a different video.
  • You may not use <iframe> embed code. Be sure to only use the embeds that begin with the <object> tag. In YouTube, this means you'll have to check the "use old embed code" option in the sharing mechanism.
  • height and width · you can force an video to the size of an image you are replacing by leaving the “Resize image to fit” checked. You can keep the proportions of a video (preventing any distortion) by checking “keep proportions”. Or by unchecking both of these, you can size the video however you want.

Definition Lists

Definition lists consist of terms paired with their definitions. Because definition lists require a specific HTML markup in order to be valid, Unify provides specific tools for creating and modifying definition list elements.

To create a definition list:

  • Place your cursor where you want to begin the definition list
  • Select the definition list icon in the elements menu along the top of the editing interface (next to “table”)
  • Notice that the dropdown menu on the left reads, “Definition term.”
  • Type your term and press your enter key
  • Now, click the dropdown menu and select “Definition description” and type your definition.
  • Repeat as necessary for terms and definitions

Please note: Please be sure that you always pair a term with a definition in your list.