Documentation » Frequently Asked Questions

Answers to common questions that our users ask.

What if my webhost locks FTP access?

Some webhosts have started to lock FTP connections to prevent unauthorized access to your websites. This usually requires that you login to a control panel and "unlock" FTP for a brief period of time. This isn't necessarily a bad thing, but it can cause problems when you're trying to connect with Surreal CMS.

Fortunately, you can almost always provide your host with an IP address for them to white-list, which will make it so you can use Surreal CMS without having to worry about FTP locking. Simply give the following IP address to your webhost and ask them to disable FTP locking for all requests coming from it:

70.32.121.174

If you find that your host does not allow white-listing for this purpose, please contact us and let us know who your hosting company is so we can try to work out a solution with them.

How do I include files using PHP?

A lot of our users ask about the best way to handle headers, footers, and navigation on their Surreal CMS-managed websites. The traditional option is, of course, to update each section of each webpage one-by-one, which can be very tedious and lead to inconsistencies between pages. Since regions like these generally don’t vary from page to page, it would be more efficient to edit them once and have the changes automatically apply to every webpage in the site.

Unfortunately, this isn’t possible with simple, static webpages. It is possible with PHP, however, and this article is all you’ll need to get started.

Including Files

A common region that is an excellent candidate for an “include file&*rdquo; is your websites navigation menu. Since many designers find it easy to use unordered lists styled with CSS for their navigation menus, we’ll use one here in our example:

<!--index.html-->

<html>
<head>...</head>
<body>

    <div id="header">...</div>

    <ul id="nav" class="editable">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="sample.php">Contact</a></li>
    </ul>

    <div id="main">...</div>

    <div id="footer">...</div>

</body>
</html>

Since the navigation menu won’t be changing from page to page, we can take that code out of all of our pages and put it into its own file. Let’s call it navigation.php:

<!--navigation.php-->

<ul id="nav" class="editable">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="sample.php">Contact</a></li>
</ul>

Now, we’ll have to update each page to include this file. First, make sure your webpages are renamed to use the .php extension, otherwise this won’t work. Once renamed, add the following code to tell PHP to include your navigation file:

<!--index.php-->

<html>
<head>...</head>
<body>

    <div id="header">...</div>

    <?php include("navigation.php"); ?>

    <div id="main">...</div>

    <div id="footer">...</div>

</body>
</html>

Test it out on your server and make sure that the page is rendering properly. If so, update all the rest of your pages to use the same code. Now, any changes you make to navigation.php will propagate throughout your entire website.

Editing Include Files

If you want to be able to edit an included file in Surreal, make sure that you use the standard class="editable" and enable each included page. Each one will appear separately in your list of pages.

Now you can apply the same technique that you used for your navigation to other repeatable content regions, such as your header and footer. Get creative and see what other types of uses you can come up with for include files.

How do I embed YouTube videos?

Many users have asked how to embed YouTube videos into webpages using the rich-text editor. Here are the steps to do just that:

  1. Navigate to the YouTube video you wish to embed
  2. Copy the embed code (usually starts with <object width=...)
  3. Paste the embed code into a text editor such as Notepad
  4. Look for the <param name="movie"> tag and copy the value parameter (looks like http://www.youtube.com/v/EwTZ2xpQwpA)
  5. Back in the CMS, select the Insert/Edit Embedded Media button
  6. Paste the copied value into the File/URL field
  7. Enter the width and height into the Dimensions fields (you can obtain these values from the <object> tag or set your own)
  8. Select Insert to embed the video into your webpage

Other Video Sources

Vimeo: Follow the same steps listed above, except for Vimeo videos.

Blip.tv: Select Embed with Show Player and copy the src parameter; continue to Step 5.

How do I update my credit card?

If you received a notification regarding a failed payment, most likely your credit card has expired or needs to be updated for some other reason. Designer Account holders who need to change their credit card info in PayPal should follow these steps:

  1. Log into your PayPal account
  2. Select the Profile subtab
  3. Select Credit Cards from the Financial Information section

You should be able to select the Edit button next to the credit card that needs to be updated. If, for some reason, you cannot edit an existing card, you’ll have to add a new card:

  1. Follow the three steps above
  2. Select the Add button to add a new credit card
  3. Follow the instructions to save the new card in PayPal
  4. Once the card has been added, select Basic Search from the History subtab
  5. Browse for your Surreal CMS subscription and select the Details link
  6. Select Edit Funding Sources and choose your new credit card

If you remove the credit card associated with your Surreal CMS subscription before adding a new card and changing the funding source, PayPal will automatically cancel your subscription. If this happens, please send a help request to us right away so we can assist you.

Why does my page have strange characters after publishing?

If your webpages displays  or other strange characters after publishing, there is an issue with your character encoding. Most likely, it is set to ISO-8859-1 instead of UTF-8.

The CMS outputs characters in the versatile UTF-8 format and, as a result, other encodings will usually cause erroneous characters to appear throughout your webpages. This is very easy to correct. Refer to our documentation for more information about this.

Why is my page getting cut off after publishing?

This sometimes happens when content has been copied and pasted from Microsoft Word or other similar applications. Try removing the special character(s) from the webpage or simply replace them with their Unicode equivalent or an appropriate HTML entity and then upload the file back to your web server.

If you do this and the content gets truncated again, but at a different location, repeat what you just did and try editing again. If a document has more than one characters that the editor can’t read, this may occur a number of times until all of the invalid characters have been removed.

For best results, always ensure that the content you are copying is formatted using UTF-8 character encoding.

Can I use shortcut keys in the rich-text editor?

Here are some keyboard shortcuts that you can use to enhance your editing experience:

  • CTRL + 1-6
     Make the current block an H1, H2, H3, H4, H5, or H6 heading. Doesn’t work with the number pad.
  • CTRL + 7
    Make the current block a normal paragraph. Doesn’t work with the number pad.
  • CTRL + 8
    Make the current block a paragraph.
  • CTRL + 9
    Make the current block an address.
  • CTRL + B
     Make the selected text bold.
  • CTRL + I
    Make the selected text italic.
  • CTRL + U
    Make the selected text underlined.
  • CTRL + X, CTRL + C, CTRL + V
    Cut, copy, and paste, respectively.
  • CTRL + Z, CTRL + Y
    Undo and redo, respectively.

These are Windows shortcut keys. Most of them work on a Mac by replacing CTRL with Command.

A lot of designers like to include navigation menus using PHP. This is nice because it saves you from having to update every webpage just to make a simple change to the menu. The basic syntax for an include looks like this:

<?php
include("path/to/navigation.php");
?>

Most designers also like to use unordered lists to manage their menus. For example:

<ul id="navigation" class="editable">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="services.php">Our Services</a></li>
    <li><a href="contact.php">Contact Us</a></li>
</ul>

The problem is that, in many designs, it’s nice to use the navigation menu to show the user where they are in the site. To do this, we add a special class to the list item that corresponds to the page that we’re currently viewing. Normally, each page would just have something like class="active" attached to the appropriate <li> element. Since we’re including the menu, we have to come up with a more dynamic way to handle this. Enter PHP.

We could use something like this to detect what page we’re on and apply the active class dynamically:

<li<?php echo ($_SERVER['PHP_SELF']=="/index.php"? ' class="active"':''); ?>>Home</li>

This works well, except that your clients will be editing this. That is, people who won’t understand how or why they need to update the code when they add to or change the navigation menu. (Not to mention the fact that the CMS doesn’t allow server-side code in editable regions.)

So what’s the solution to make included navigation menus editable? JavaScript.

First, for clarity, let’s reconsider what we’re trying to do. We want add a CSS class of active to the <li> containing the link that corresponds to the current page, whatever the current page may be. Here’s the code:

<script type="text/javascript">
    window.onload = function() {

        var menuID = 'navigation'; // The ID of your menu
        var activeClass = 'active'; // The class to add

        var menu = document.getElementById(menuID);
        var items = menu.getElementsByTagName('a');
        for( var i = 0; i < items.length; i++ ) {
            if( items[i].href.replace(/https?:\/\/.*?\//i , '/') ==
                location.href.replace(/https?:\/\/.*?\//i , '/') ) {
                items[i].parentNode.className = activeClass;
                break;
            }
        }

};
</script>

When the page loads, the script will quickly scan the navigation menu for a link whose href attribute matches that of the current page. You can link relatively (i.e. path/to/file.html) or absolutely (i.e. http://example.com/index.html). The best part of all is that you don’t need to manually update anything when the links change and you don’t need any PHP code at all. This solution degrades gracefully, as users without JavaScript will still have complete access to the navigation menu.

One thing to note is that this solution will not work if a query string is appended to the file name (i.e. index.php?variable=value). Otherwise, this is a great solution for websites powered by Surreal CMS.