Using the RGCMS

RGCMS for Developers

2011-02-18T10:51:00.000+02:00

If you are a website developer/programmer, and are looking for a feature rich, yet easy to use CMS to sell to your clients, feel free to contact us.

I have made the RGCMS very customizable on the development side of the project, meaning that it is highly customizable to fit almost any website design template.

Some (but most certainly not ALL) of the features are:

You can design a website to have more than one menu - for example, our web design website has four menus (Top one, and three at the bottom) - so, when adding a new page, you can select from a dropdown box in which of your site's menus it should be.
Pages can have sub pages, with their own sub sub pages, or this feature can be disabled if not needed.
A "Calls to Action" feature, allowing you to design certain fixed elements into your website design, and then have the ability to link them to any of your CMS pages. For example, a "Get a Quote" button, or even something like a "Privacy Policy" link the footer of the website.
Different template files - if you have created more than one template for your website, you can set up the RGCMS in such a way that with each page you can select which of your templates you would like to use.
More than one Stylesheet - if your design uses multiple stylesheet files, this can also be implement in the RGCMS, allowing the customer to select which one to use when adding/editing pages.
Photo Galleries - this gives a Galleries - Albums - Photos structure that can be used or not. Various settings can be set, like to which size the photos must be resized by the system, and also what the size of the thumbnails should be. In the frontend, you can design the Gallery's look and feel based on this structure.
Since the look and feel of the website and the RGCMS backend are totally separate, you have much more freedom when designing your website.
Modules based - many of our clients have requested custom designed modules, so we modified the backend structure to easily add new modules to it. That also means that if you've written a module, copying it into another website will be as simple as copying the folder containing the module code.

So, if you are a web designer, be it freelance, or a big company, and would like to make use of our RGCMS system, contact us, so that we can arrange a demo!

The new and Improved RGCMS

2011-02-18T10:32:00.000+02:00

Over the last few months, we have worked very hard to make the RGCMS a much better and more feature rich product. In effect it means that most of the screen shots you will see throughout this blog will be a bit outdated. The basics remain the same though, so it shouldn't be too hard to figure out what's going on.

There are still a few changes we want to make to the RGCMS though, and as soon as we're ready to launch the latest version, we'll start redoing the various tutorials already on this blog, and add many more.

Thanks for everones support of the last few years!

How to create a "hidden" page

2010-11-30T10:59:00.000+02:00

If you would like a page you have created in the RGCMS to NOT display in the menu, it is very simple to do.

Now, depending on your website's menu structure, there is two ways to do this. When editing a page, close to the top you will see a field called "In men:" - this is what we need to use to make a page not appear in the menu.

Next to "In menu" you will either see a tickbox (or checkbox if you will), or a drop down box - If you see the checkbox/tickbox, simply UNTICK it by clicking on it (so that the checkbox is empty, no tickmark inside it) - otherwise, if there is a drop down box with a few options, simply select the top option "None".

Save the page, and from now on, this page will not appear in your website's menu structure anymore, but can still be linked to and viewed.

As always, remember to save!

How to ebmed a piece of code

2010-05-14T08:40:00.000+02:00

If you want to, for example, add a youtube movie clip to a page, or basically paste any piece of embedding code that a website gives you, just follow these few easy steps.

Firstly, the WYSIWYG editor does not allow you to paste the embedding code into it. If you try to "trick" it by adding it to the Source View section, it will appear to work, but the next time you want to edit the page, it probably won't work at all.

For this I have created a section what I call Page Extras - this allows you to add any number of extras to your page, and come in 3 categories: WYSIWYG extra, which is just a WYSIWYG editor like the normal one, HTML extra, allowing you to paste raw HTML coding onto the page, and Form extra, allowing you to link a form you've built with the Form Builder.

So, to add that raw HTML code (like the embedding code given to you by YouTube, or Google Calendar for example), first go the list of pages. In the Actions column, you will find the various available actions. The second to last action is Page Extras, with the icon

Go ahead and click on it, and you will see a screen that looks like the following (if you don't have any page extras loaded for the page):

It gives you the option to add either a WYSIWYG extra, HTML extra or Form page extra.

Click on the second icon:

This will allow you to paste the code given to you by YouTube or whichever site you used, and voila, you've just added raw HTML coding to your page.

How to use tables to add captions to images in the WYSIWYG editor

2010-01-26T17:10:00.000+02:00

If you used the WYSIWYG editor of the CMS to add an image, and want to give that image a caption (some text about the image), it can be a pain to get the text nicely aligned with the image. And using a bunch of spaces is NOT a good idea!

Anyway, here is a quick tutorial on how to do it nicely, by using tables. In this example, we're going to add two pictures next to each other, with their captions below each image in the center.

So, to achieve this, we must first draw a table that will contain the actual pictures, as well as the captions. Since we want our captions to align up nicely next to each other, we're going to have them in their own ROW. So, the images will have a row, and the captions will have a row. Also, each image and caption will have their own CELL - in HTML we may refer to the Cell as the TD or Table Data...

Anyway, lets get our table in first by clicking the Insert/Edit Table button:

This will bring up the Table Properties screen:

It might be intimidating at first, but if you look closely, you'll see that is not! Anyway, for this table we want 2 rows and 2 columns. Also, I'm gonna leave the border size on 1, but feel free to make the value 0 if you don't want your table to display its border. Next, I'm making the width 100 PERCENT (not pixels), and the rest I'm leaving as is. The end result for this screen will look like this:

Go ahead and click the OK button at the bottom, which will draw the table in your body copy:

Now, add the images in the first row, and lets center them as well (see here: http://rgcms.blogspot.com/2009/02/adding-image.html if you don't know how to add images yet...):

Next, simply click in the cells underneath each image, then type in the caption you want, and remember to center the text as well:

That is how easy it is! As always, remember to save the page. Till next time!

Creating a Nav link that links to a custom url (like your blog)

2010-01-17T19:01:00.000+02:00

If you would like to create a link in your navigation menu that links to an external website, like your blog for example, just follow these simple steps:

Firstly, create a new page as you would normally do, which will bring you to this screen:

Right at the top of the fields, you will see one labeled "Links to url", with a checkbox next to it:

Go ahead and tick this checkbox, which will change the screen to look like this:

As you can see, it now asks for you to Type in the URL, select the parent page (though this is not applicable to all CMS's...), specify whether it is in the menu or not, and Page Name. So, go ahead and type in the FULL url into the "Type in URL" field (be sure to include the http:// part as well - easiest way to ensure you do this right, is to copy and paste the address in the browser open on the website you want to link to...), and remember to give it a Name, otherwise it will not show in the menu.

Next, click on Save, and voila! You now have a navigation link linking to an outside URL.

Making a link to another page in your cms

2010-01-10T09:27:00.002+02:00

Here is how to make a link to one of your CMS pages:

It works almost exactly like normal links. Firstly, select the text you want to make the link, and click the Insert/Edit Link button:

This will open up the Link Dialog box:

Here, we want to change the "Protocol" option to :

Next, open up your website in a new window or tab, and go to the page you would like to link to. Once the page is open in front of you, select the part in the address bar after your websites url (url would be something like http://www.rgtwebhosting.com/ or http://www.rgcms.co.za/).

You want to select the part AFTER that. Say for example the address is http://www.rgtwebhosting.com/HostingPackages.html , then you ONLY want to select the "HostingPackages.html" part (in other words, the part AFTER the last forward slash "/"), and copy that by pressing Ctrl+C on your keyboard:

Once that is copied, paste it (Ctrl+V) into the Link Dialog, in the URL text box:

Now click the Ok button, and you've just created a link to one of your CMS pages. Once again, remember to save the page once you're done editing the page!

UPDATE

We've been battling for months and months for our WYSIWYG editor creators to make a more detailed help section on how to customize it - well, we've finally got it right to include a new option in the drop down box mentioned above - in the latest version of the RGCMS (contact your web designer about getting the upgraded version), you can now select a "RGCMS Page" option from the Link Type list, and then you'll see a list of all the pages in the CMS, and you can simply select which one you would like to link to.

How to use the Form Builder

2009-12-07T08:49:00.000+02:00

I am very excited to announce that I have created a very nice form builder module for the RGCMS, as well as the RGCMS Lite. I have been playing around with the whole idea for more than a year, and about a month ago, I just decided that now is the time!

Anyway, here is how to create a form for your website.

When logged in to the RGCMS, you will see a new option in the menu called "Forms". If you hover on it, you will see 2 options namely View Forms, and Add a new Form.

Lets go ahead and click Add a new Form, which will open up the add new form screen:

Here you can fill in all the relevant details for the form. The most important of these are the Name, To, Subject Line, and Gmail username and password.

The name of the form is just so that you know what form it is, for example: "Contact Form". The "To" field, is the email address where the form will be sent when filled in. The "Subject Line" is what will appear in the subject line. You must specify a Gmail username and password - if you do not have one, I highly recommend getting one (its free!). The form is sent through the Gmail mail server, which also means you have a online backup of all the forms that get submitted through your website, in the sent items part when logged into your gmail account.

(I personally recommend creating a new gmail account specifically for your forms though...)

Anyway, after filling in the details, just click the Add Form button, and VOILA, the form has been created, and is now ready for some fields - to do that, click on the fields button in the row of the form:

Which will bring you here:

Click on the button, and you can now enter the details for the new field, which will look like this:

As you can see, the Field Type is set to Text Box by default, and you can now enter all the properties for the field.

Now, all of the fields have the Name, Description and Title properties, but, depending on the field type, some of them have different properties that needs to get filled in.

There are basically 8 different fields you can select: Text Box, Email Text Box, Drop Down Box, Country Drop Down Box, Date Selector Drop Down Box, Text Area, Radio Button Group and Checkbox.

Just follow the onscreen instructions, fill in the relevant details, then click the Add Field button at the bottom to add the field. In this way, you can add as many fields as you want to your form.

After a few fields, you will have a screen similar to this one:

Now we are ready to add this field to one of the RGCMS pages. That is quite simple to do... Firstly, go to the Pages section of the RGCMS, which will show you the list of the pages you have already created (if any...):

To add the form to one of your pages, just click on the View Extras for this Page button:

which will bring you to this screen:

As you can see, there are three options here, but we want to click on the third option to add the Form to the page:

This will show you this screen:

Now just give the page extra a name, and select the form you'd like to use on the page, then click the Save Form Page Extra button, and you're good to go. The form has now been added to the page. Note: you can still make as many changes to the actual form as you want. A good idea would be to create a thank you page and make sure that it is not in the menu, and link the form to that page - that means that the website will automatically redirect to that page when the form has been submitted!

That's it! This was just a short and sweet article on how to use the RGCMS Form Builder. Best would be to play around and create all the forms you want!

The RGCMS Lite also has the form builder built in, but with a few limitations:

1. You cannot have more than 3 forms at any one time.

2. You can only create 4 different field types, not 8 like the standards RGCMS (Text box, Drop Down Box, Text Area and Checkbox)

Other than that, they work exactly the same!

Enjoy!

How to assign a call to action (standard CMS only)

2009-10-09T10:36:00.000+02:00

The standard cms has a Calls to Actions section (The Lite CMS does not have this feature...), which was specifically created to link various on page elements, like images, or links that are in the footer for example, to one of your created pages.

For example, on your website, you have a big red button that says something "Current Specials" - now, to allow you the freedom to decide what is on your current specials page, you have the ability to create the page as you would normally create a page with the cms, and make sure to specify that the page is NOT in the menu (so it is then hidden), and then, with the Calls to Actions feature you can link your Current Specials button to that hidden page you created.

Now, Calls to Actions on the cms is a unique thing for each individual cms, so some cms's does not have calls to actions, and some can have several...

Anyway, to link a call to action summary:

Create a new page that will have the content of the "call to action".
Be sure to specify that this new page is NOT in the menu (otherwise it will appear in the menu, if you, however, would like it to be in the menu as well, feel free to do so).
In the menu, click the Calls to Action link, which will bring you to the screen where you can choose which page to assign to which call to action.
Be sure to click the save calls to action button.

Thats basically it. The big red button, or whatever your calls to actions are, will now be linked to the page you assigned to it.

Another thing you can do, you can, when you create the page, have it link to an outside website, and if you assign it to the call to action, it will then link to that specific website address! Handy if you have a big button that you want to link to you blog, for example!

Working with Images

2009-09-07T10:17:00.007+02:00

With the WYSIWYG (what you see is what you get) editor, you can insert images as well, giving some colour to your website, BUT if you do not resize the images before you upload them, it can REALLY slow down your site!

If you uploaded an image, and the make it smaller by dragging the small blocks in the corners, this does not actually make the file size of the image smaller - it basically just "tells" the browser to display the image at that size - the original file size is still like it was when you uploaded the image, which can really slow down your website if the images are really big.

The best way to go about this is to make the pictures smaller BEFORE you upload them (remember to make a backup of the image first, and then make it smaller...)

A very nice little utility is actually one by Microsoft, and best of all, its free! There are actually a few of these handy little tools, but the one we can look at is the Image Resizer.

Click here and you will see a whole list of stuff, and on the right side of the page, you will see a link to download the image resizer (about 2 thirds of the way down...) - so download that, and install it.

What this tool does, is it adds an entry to the right click menu when you are browsing through your files. First, select the image/s you want to resize, the rightclick on them. It will look similar to this (in Windows XP that is...):

Note: you can select more than one picture at a time if you want to resize them all to the same size...

Clicking on Resize Pictures will open up a very simple to use dialog box that looks like this:

As you can see, pretty straightforward. Anyway, I always click the Advanced >> button, cause I'm usually not happy with one of the default sizes - this makes the Resize Image dialog look like this:

Go ahead and select the Custom option, and then just manually type in the size for the image. I usually make pictures that go on a website 400 pixels or so wide - width is the first of the two text boxes (height doesn't matter in this case).

If you made a backup of your original image, you can go ahead and tick the "Resize the original pictures (don't create copies)" checkbox, but it's safer to just leave it unticked...

Click OK, and a copy of the image will be made, and that one will be resized (unless, of course, you ticked the Resize the original... checkbox), quickly and easily! Now it will be ready to go on your website. It will load nice and quick, which is something that your visitors will like!

Creating bookmarks

2009-06-12T11:41:00.013+02:00

To create bookmarks with the RGCMS is also very easy. Just note, in web design terms, bookmarks are called "Anchors". So the short and sweet of creating a bookmark on a site is basically this:

Create an Anchor (this is where you want the page to jump to)
Create a Link to that Anchor.

That sums it up. Heres the step by step on how to actually do this:

When adding or editing the page, you'll see a screen like this (only with your own content of course...):

Now, place the cursor where you want the bookmark (Anchor) to be by clicking somewhere. In this tutorial we're making it before the M of the heading (don't select any text). Then, click the Insert/Edit Anchor button:

This will bring up the following dialog:

Now, simply type in a name for the Anchor, for example "Top", then click the OK button at the bottom.

This will bring you back to the editor, with the anchor placed where you clicked:

As you can see, it shows a little Anchor icon where the Anchor was placed. Note, you won't see this icon on the actual page.

The next step involves placing a link to the anchor. For this one, we want a "Back to top" link at the bottom of the page:

Now, select the text you want to link to the bookmark (in this case "Back to top"):

Then click on the Insert/Edit Link button:

which will bring up the Link dialog box, that looks like this:

Under the Link Type dropdown box, select "Link to anchor in text", which will then change the screen to look like this:

Now, select the Anchor you made in the "By Anchor Name" dropdown box:

Note: if you have more than one anchor in the page, you'll see them all in this drop down box. Anyway, now you can click the OK button, and voila! You just created a link to a bookmark on your page.

Remember to save the page after you've done editing it!

Creating a link to a file (Like a PDF or Word Doc)

2009-03-26T16:00:00.008+02:00

Creating a link to a file like a PDF or Word Document is, just like regular and email links, really straightforward to do.

First off, select the text (or image) you want the site visitor to click on to download the file:

Now click on the Insert/Edit Link button:

Remember, the layout you see might be different, depending on which version of the CMS you have.

This will bring up the Link Dialog box:

Now, obviously we need to get the file from your computer onto your website. This is, fortunately, very simple indeed. Go ahead and click on the Upload Tab at the top of the Link Dialog screen:

No, simply hit the Browse... button, which will let you select the file on your computer that you wish to upload to your website. As soon as you have selected the file, it should show in the box next to the Browse button. Now, click on the Send it to the Sever button, and after a short while (depending on how big the file is) it should display this message:

and will bring you back to this screen:

As you can see, the Protocol was put on "other" automatically, and the name of the file has been entered into the URL box. Simply click OK, and the file is linked!

And remember to save!

Making an Email link

2009-03-26T12:24:00.007+02:00

So, you want to make a link that opens up the relevant email program (Outlook Express for example) when you click on it - this is really easy to do.

It is very similar to creating a link to another website:

Firstly, select the text you want to make the link:

Then click on the Insert/Edit Link icon:

Remember, the arrangement of your icons may be different from the screen you see above...

Anyway, this brings up the Link Dialog box:

Now, to make an email link, be sure to select Email under the Link Type drop down box. This will change your Link Dialog screen to something like this:

Now, just fill in the blanks, and click the Ok button. Its usually a good idea to leave the Message Body part empty, but that is just a personal preference.

And once again, remember to save the page!

The CMS Photo Galleries

2009-02-27T10:41:00.002+02:00

This is just a quick explanation of how photo galleries work on your RGCMS...

The default version of the gallery are basically three levels deep.

The top level is Galleries - You can create several galleries for your cms - this can be something like Weddings, Parties, Functions, etc. (if you're a photographer for example) - or whatever you want. More often than not, one gallery is enough, but, as you can see there are extra room for more.

The second level is Albums - Each Gallery can basically any number of Albums in it. So, for example, your Weddings gallery could have a John and Sue album, a Peter and Jane album, etc.

Then, the third level is Photos - Each album can basically have any number of photos in it.

That's the short and sweet of how the Galleries work!

Adding an image

2009-02-18T09:45:00.009+02:00

Adding an image to your page is more or less the same as adding links, with a few minor details different:

First, click where you want to add the image, then click on the Insert/Edit Image button:

What you see on screen may be slightly different, but the idea remains the same. Anyway, this will open up the Image Properties Dialog:

Once again, what you see may be slightly different. Now, the easiest way to add a new image is by click on the Upload tab at the top, then click Browse to browse for the picture you want to upload, and click Send to Server:

Depending on the size of your image, it can take a while before the Image uploaded successfully screen shows:

This will bring you back to this screen, but now you'll see some of the text boxes have been filled in, and you'll see an example of how your picture will look inside your text:

Now, there's all kinds of properties you can set. Here is a summary of what they do:

Alternative Text: This is a short, optional, description of the picture. You usually see this when you hover your mouse pointer over the image.

Width and Height: This is the size in pixels that the image will be displayed on screen when someone views the page. As you can see, these values are automatically filled in to the actual sizes of the image you uploaded. If you want, you can change this, but its always a good idea to have the image you are uploading be the actual size you want it to display on the site. Especially true if the image is HUGE and you make the height and width properties smaller - the image will still take quite a long time to load.

Border: if you want a border around your image.

HSpace and VSpace: This is white space around your image so that any text is not touching the image. HSpace is the space to the left and right of the image, and VSpace is the space to the top and bottom of the image. Play around with the values and see what effect it will have. (usually a value of 10 or more is a good idea)

Align: Use this if you want the picture to be "inside" your text. Also, experiment to get the best setting you want.

After you have edited the properties of the image, click the Ok button, and voila! Your image is now in your page. Just remember to save the page after making any changes!

Linking to another website

2009-02-03T18:55:00.005+02:00

If you want to make a link to another website with the What You See Is What You Get (WYSIWYG) editor, that is actually very easy and simple to do.

First, select the text or image you want the visitor to click on to follow the link:

Your screen might look a bit different than the above image, but the basics remain the same...

Anyway, now click on the Insert/Edit Link button, its icon is a picture of a chain link:

This will open up the Link Dialog box (graying out the background):

If you are linking to another website, simply enter the address in the URL box (like www.rgtwebhosting.com) and click OK at the bottom. This will turn your highlighted text or image into a link that can be clicked by your visitors.

Working with Pages in the RGCMS

2009-02-02T12:12:00.001+02:00

The whole idea of a website is based on web pages. Each website out there consists of at least one web page, but there can be up to several hundreds of pages on any website.

Now, web pages are categorized into two versions: Dynamic and Static. Dynamic pages are pages that usually pull their content from a database, and then, with the help of some programming in a language like PHP, is displayed on the screen. An example of a Dynamic website like this would be Kalahari.net or Amazon.com - they are both huge online shops, and all of their content comes out of a database.

Static pages are pages that do not often change, and if you do want to change Static pages, you'll have to edit the actual HTML file, and then upload it via FTP to your website server.

With the RGCMS, we have combined the two. The pages for the website appear to be static to the general public visiting your site, but their content is actually stored in a database, and the owner of the website has the necessary tools to be able to make changes to any of the loaded pages.

In the Admin Panel of the RGCMS, you will find a Menu Bar at the top with several Menu Items. One of them is Pages. Hovering over Pages will automatically open up a drop down menu, giving you the option to View Pages, Add a new Page and Rearrange pages.

Viewing the Pages
If you click View Pages, you will see a screen showing all of your websites' pages, if any. If you do NOT have any pages so far, you will see the relevant message, with the option to add a new page.

Adding a New Page
Clicking on the Add a New Page option in the menu under Pages, will directly take you to the Add a New Page screen. Depending on your specific website, you will see several "fields" that can be filled in, like Title, Keywords, Description etc.

The title of the page is what is going to be displayed in your websites' menu (navigation). It also determines what the "static" page's "filename" will be. For example, if you create a page with the title "Contact Us", then the page's "filename" will be ContactUs.html. Take note, with an FTP program, you will NOT see an actual file named "ContactUs.html" on the server - that is because it is a CMS page, and is part of the database.

Rearrange Pages
This will allow you to change the order of the pages that are stored. Say for example you just added a new page, then it will automatically go to the bottom of the pages list, but, with the Rearrange Pages function, you can move it to where you want it to be.

The RGCMS

2009-02-02T12:06:00.000+02:00

After searching the internet quite extensively for a easy to use, simple content management system (CMS), we ended up with many a headache and late nights using the ones we actually tried. They were all just too powerful, and not at all user friendly. So, we decided to create our own...

Thus, the RGCMS were born. The whole aim of this CMS is to keep it as easy to use, and as simple for our clients as possible. They don't need to be able to change their stylesheets, or html coding, or anything like that. All they want to do is have the ability to manage the content of their website. That is, add new pages, edit existing pages and delete outdated pages. That is all!

I'm writing this blog to give some guidance in using the RGCMS. How simple and easy it is, so that our clients can easily maintain their own website, saving lots of money in the long run.