Surreal CMS • A Simple, Cloud-based CMS

Sites

Sites are the heart of Surreal CMS. Because of our unique platform, you can manage multiple sites on various web hosts all from one place. We support both FTP and SFTP, so if it’s on the web, you can probably edit it with Surreal.

Configuring

Overview

Sites can be configured as regular sites, subsites, or subdomains. A subsite looks like this:

http://example.com/something/

Whereas a subdomain looks like this:

something.example.com

A subsite is essentially a folder inside of a regular site. Surreal V4 supports subsites, but each one you create will count as its own site in terms of billing. Subdomains also count as their own site.

Connection Issues

If you have trouble connecting to your site, try the following:

If all else fails, try connecting with the exact same credentials using an FTP client. If the connection fails, chances are there’s a problem with your username, password, or FTP configuration. If it succeeds, your host may be blocking access to the CMS. At this point, you should contact your hosting company and ask them to whitelist our IP address.

Finding Your Home Folder

Your home folder is the folder that contains the homepage of your site, subsite, or subdomain. When you visit the URL you typed in the URL field, the resulting page should exist at the top level of your home folder. Common examples of home folders are /www/, /httpdocs/, and /public_html/.

It is critical that your home folder maps correctly to your site’s URL, otherwise the CMS won’t be able to generate paths to pages and other resources properly.

Documents, Images, and Media Paths

You can set custom paths for documents, images and media using the Advanced tab in the Sites dialog. When a custom path is set, clients will be restricted to these folders when uploading files. This prevents novice users from uploading files into the root of the site and helps keep things organized.

Page Templates

Clients can be given the ability to add new pages through the use of templates. In Surreal, a template is nothing more than the HTML code of a page that contains content regions. You can create as many templates as you like for each site.

Once your site has been added to the CMS, you can create a template by selecting Manage Page Templates from the sidebar. Every template needs a name, a file extension, and some HTML code. The template’s name is what clients will see when they create new pages. The file extension will be appended to each page that gets created using the template. The HTML code should be a full page including a DOCTYPE, an html element with a head and a body, and content regions.

When pages are created from templates, the user is instructed to enter a label. This label is used to reference the page in the CMS and as a basis for generating a filename. For example, the label My New Page will result in a filename of my-new-page.html.

Templates are not dynamic. If you change the HTML of a template, existing pages will not be updated.

Editor Styles

You can customize the appearance of the editor to better match your site. To do this, select Edit Styles from the sidebar and enter any CSS that you want the editor to use.

Many designers like to simply copy and paste their website’s stylesheet here. This is perfectly acceptable, but it is important to understand that the structure of content in the editor will not be the same as it is on your website. Because of this, some styles may not show up as expected. Consider this page, for example:

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

The editor can only see the content inside of the editable region, which is the same thing as this:

<html>
    <head>...</head>
    <body>
        <p>Your content here</p>
    </body>
</html>

Because of this, the following CSS selector will not match anything in the editor, preventing the styles from appearing:

#content {
    font-size: 24px;
}

The use of semantic markup and CSS classes will greatly alleviate some of these issues. When working with editor styles, please keep in mind that it may take a few tries to get everything looking just the way you like it.

By design, editor styles have no influence on your website’s stylesheet and vice versa. This allows you to customize exactly which styles are available in the CMS.

Using Custom CSS Styles

The CMS will look for CSS classes in your editor styles and add them to the Styles dropdown menu in the editor. You can then apply these styles to your content by selecting them from the following menu:

The Styles Dropdown

Change Notifications

You can elect to receive email notifications whenever someone publishes changes to your site. Notifications are enabled per-site, so you can choose exactly which sites you want to monitor.

To enable or disable change notifications, select the Toggle Notifications option from the sidebar. A gray bell indicates that notifications are disabled, while a yellow bell indicates that notifications are enabled.

Analytics Dashboard

The analytics dashboard lets you link up your Google Analytics account to Surreal CMS. Once enabled, your clients will be able to view important information about their visitors right from the CMS.

Google Analytics is completely free, and if you’re not using it already you can set it all up in no time. All you need is to create an account, verify your site, and paste a code snippet into your pages.

Enabling the Dashboard

Once you have a Google Analytics account, you’ll need to authorize Surreal to access your analytics data. To do this, go to the Account tab in the CMS and look for the Enable Google Analytics Dashboard checkbox. You will be required to login to your Google account and authorize Surreal CMS.

After authorization is complete, you can enable the analytics dashboard in the Sites dialog:

Enabling the Google Analytics Dashboard

In V4, you only need to authorize your account one time. This behavior is different from previous versions of the CMS where you needed to authorize your account for each site.

Adding Authorized Users

If your client already has a Google Analytics account that you don’t have access to, you’ll need to ask them to share their profile with your Google account. Please refer them to this screenshot that shows where they can do this in the Google Analytics dashboard.