Documentation » Configuration

This section contains information on configuring your website to work with Surreal CMS.

Finding Your Website Root

Your website root is the directory (“folder”) on your web server that contains the true homepage of your website. That is, the homepage that you see when you visit the top-level of your website.

Make sure you always select the folder that contains your true homepage so the CMS can properly map URLs. Selecting any other folder, including subfolders, will result in erroneous URLs when inserting documents, linking to files, and enabling webpages.

A Note About Subsites

Some users may find it easy to setup a “subsite” to test the service out. A subsite looks something like http://yourdomain.com/subsite/.

Note that subsites are not supported, and typically result in erroneous links being generated and/or invalid URLs when trying to preview webpages. For best results, use your true website root when configuring your website.

An excellent alternative to using a subsite is to use a subdomain (i.e. subdomain.yourdomain.com). This will allow you to separate your test site from your production site. It also gives you the opportunity to setup a separate FTP username and password, which significantly decreases the chance of production files being modified inadvertently.

Setting Custom Paths

When you add and configure a website, you can enter custom paths for Documents, Images, and/or Media. To do this, select the Advanced option in the Add/Configure website section.

All three fields are optional and left blank by default. If you enter a path to, for example, the images directory on your website, all of your editors will be restricted to that folder when inserting and uploading images. The same is true for Documents and Media.

Determining the Correct Path

All paths should be relative to the website root. If your website root is, for example, /sites/www/example.com/ and your images folder is located at /sites/www.example.com/images/ then you would simply enter images/.

If the CMS cannot find your custom path when the File Manager loads, you will receive a Custom path not found error. To fix this, simply correct the path in your website’s configuration.

Customizing Editor Styles

You can customize the stylesheet that the rich-text editor uses to make editable content look more like the styles you use on your website.

To do this, select a website and then choose Change Editor Styles. You can start by pasting the CSS directly from your website’s stylesheet into the text box and clicking Save. The CSS classes that appear in your stylesheet will now be available from the Styles dropdown in the webpage editor.

The CSS you use for the editor does not have any influence outside of the CMS, and vice versa. If you update styles in the CMS or on your website, make sure to update both locations.

Relative Links in Your Styles

Since the editor’s stylesheet will not be included from its corresponding website, relative links (such as those pointing to images) will not work properly. To avoid this, use absolute URLs instead: http://example.com/styles/images/image.png

Optimizing the Editor’s Stylesheet

In some cases, it may be necessary to modify the editor’s stylesheet for optimal appearance. This is most likely due to the way the editor recognizes content regions on your webpages. For example, if your page looks like this:

<html>
    <head>...</head>
    <body>
        <div id="content" class="editable">
            <p>Your content here</p>
        </div>
    </body>
</html>

The editor only recognizes the highlighted region. Thus, the CSS declaration

#content { font-size: 20px; }

will not have any affect on the p tag. In most cases, it is easier and more effective to set a global background color and adjust font size and appearance for structural elements and their associated classes.

Styling Hyperlinks in Firefox

Mozilla Firefox users will have to use the !important rule for each hyperlink property due to an issue with the browser’s design mode feature:

A { color: #900 !important; }

Customizing the Rich-text Editor

You can customize the options in the rich-text editor’s toolbar for each website editor. That is, each person that you add to the CMS can have settings based on their skill level.

To configure the options in the rich-text editor’s toolbar, select the Advanced option when adding or configuring an editor. You will then be able to enable or disable options by clicking on them.

Documents, Images, Media, and the File Manager

If you’ve set custom paths for documents, images, and/or media, your editors will only be able to modify files and folders in those assigned directories. This includes uploading, renaming, deleting, creating new folders, etc.

There is one exception to this, however. If the File Manager button is enabled, the editor will have access to modify files and folders throughout the entire website. We strongly recommend that this option be disabled for all editors unless they are very experienced.

Enabling Change Notifications

Pro users may choose to receive change notifications via email when their editors publish webpages. This feature can be enabled on a per-website basis under Websites > Configure > Advanced. To prevent inbox clutter, notification emails are sent out in digest-format once per hour. The default setting for this feature is off.

Accessing the CMS From Your Own Domain

Pro Account holders have the option of using the default edit-content.com domain or their own custom domain/subdomain.

To use a custom domain:

  1. Login to your web hosting account
  2. Navigate to the DNS (or Name Server) Management section
  3. Select a domain/sub-domain that you want your clients to use to access the CMS
  4. Create a CNAME record that points to edit-content.com

For detailed instructions on how to create a CNAME, please contact your hosting provider directly, as this information varies from host to host.

Oftentimes, the CMS will be accessible from your own domain within minutes. In some cases, however, DNS settings can take up to 24 hours to propogate throughout the Internet. If you can’t access the CMS after a reasonable amount of time, contact your hosting provider and verify that the CNAME record was created properly.

Creating a Custom Login Form

Logging In

You can create a custom login form to access the CMS from your own website. Simply create a form similar to the one below on your own website:

<form method="post" action="http://edit-content.com/login">
    <p>
        Email<br />
        <input type="text" name="email" />
    </p>
    <p>
        Password<br />
        <input type="password" name="password" />
    </p>
    <p>
        <input type="hidden" name="cmd" value="login" />
        <input type="submit" value="Login" />
    </p>
</form>

Don’t forget to include the cmd parameter and to append /login to the action attribute!

Now you and your clients will have an easy, customized way to access the CMS from your website.

Adding a Language Dropdown

If you have clients that might use the CMS in non-English languages, you can add a dropdown box to the login form that enables them to select their preferred language:

    <p>
        Language<br />
        <select name="lang">
            <option value="de">Deutsch</option>
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
            <option value="it">Italiano</option>
            <option value="nl">Nederlands</option>
            <option value="no">Norsk</option>
            <option value="pt">Português</option>
        </select>
    </p>

The form control doesn’t necessarily have to be a select element. If you were, for example, a French design firm who dealt exclusively with French-speaking clients, the following would ensure that they always login initially in French:

<input type="hidden" name="lang" value="fr" />

For other supported languages, simply replace the country code in the value element.

Log Out Redirection

By passing an additional hidden input element in your login form, you can make Surreal CMS redirect you back to your own website when you logout. To do this, add the following element to your custom login form:

<input type="hidden" name="logout_url" value="http://yourwebsite.com/" />

This will send users back to yourwebsite.com when they logout.

Integrating a CushyCMS Website

If your website is already using CushyCMS, you can easily transfer it to Surreal CMS without having to change anything on your website. Simply add your websites (S)FTP credentials to the CMS, and enable your webpages as you normally would. Surreal CMS supports all of the following CushyCMS classes:

  • cushycms
  • cushycms-text
  • cushycms-html
  • cushycms-wysiwyg
  • clienteditor
  • clienteditor-text
  • clienteditor-html
  • clienteditor-wysiwyg