Using Pulse CMS with Serif WebPlus

(This tutorial requires Serif WebPlus X8, but will work for older versions with some modification)

Written by Charlotte of CRJ Design | crjdesign.co.uk

Introduction

Pulse CMS is a cost-effective, easy to use Content Management System that works well with many web design programs, including Serif WebPlus. You can provide your clients with a system that allows them to alter text, update a blog, and add photos to an interactive gallery with lightbox (or as a slider). In this tutorial, I will show you how to use Pulse CMS with Serif WebPlus X8.

Installation

First, you will need to a copy of  Pulse CMS. Unzip the ‘Pulse’ folder and, using an FTP client such as FileZilla, upload all the files and folders from the ‘Pulse’ sub-folder within to the root of your domain (where your website is hosted). Next, edit the config.php file using a program such as Notepad++ to change the password. Now when you go to yoursite/admin, you’ll be able to login and see your CMS content. Full install instructions can be found here

Pulse CMS

Within Pulse CMS, create blocks for each section of text on your website, formatting it with different header tags where relevant. These blocks can be easily categorised into folders for each page. If you’re using the gallery, then upload the photos for it to a new folder within ‘media’. If you’re using the blog, delete the example posts and replace with your own.

Serif WebPlus

Create your website in Pulse CMS like normal, but leave out the text, blog and photo gallery (of course, you can always add these features anyway to give you an idea of what your site will look like and what kind of sizes they are, just delete them before you continue with this tutorial).

You will need to place iframes (in WebPlus, Insert > Document Frame) in place of each section of text, and create a separate page for each one that’s 20px smaller (height and width) than the iframe – this is in case a scrollbar is needed. These pages need to have the same background colour as the page they’re on, and you need to change the file name in the Page Properties from .html to .php. For the purpose of this tutorial, I’ll refer to these pages as content pages. Now make sure each iframe is set to show its relevant content page by setting the contents.

(Using iframes means that all text is contained within its specified area and can’t overlap onto other areas of the site if more text is added)

CSS

You will need to write a small piece of CSS to use on each content page so that the text can be formatted, as you can’t edit the text colour, size, font etc. in Pulse. Create styles for each header class so that sub-headings etc. can be formatted correctly. Here is an example of CSS:

body {font-size:100%;}
h1 {font-family: pt sans; letter-spacing: 1px; color: #2f2f36; font-size:11pt;}
p {font-family: pt sans; letter-spacing: 1px; color: #2f2f36; font-size:11pt;}

On each content page, view the HTML source by clicking the icon: at the top of the screen (or go to View > Page HTML Source) and paste your CSS code underneath where it says ‘/*Page StyleSheet*/’:

You can always alter your CSS code for different pages if they need have a different appearance.

Adding Pulse Text Blocks to WebPlus

Copy the following PHP code onto each content page (Insert > HTML Fragment > Paste to Body), making sure that it fills the whole area, and change ‘blocknamehere’ to link to the relevant text block in Pulse CMS:

<?php include("content/blocks/blocknamehere.txt"); ?>

If the text block is in a folder, just format it as shown below:

<?php include("content/blocks/folder/blocknamehere.txt"); ?>

You won’t be able to see the text when you preview the site in Serif WebPlus, but once the website is published, everything should work correctly. You might need to adjust the sizes of the iframes and content pages to get rid of any scrollbars and overflowing text.

Adding Pulse Gallery to WebPlus

Please note: it’s best to copy the PHP code for a gallery straight onto the page it’s on, rather than within a content page in an iframe, so that the lightbox feature works correctly. Just change your Gallery page from .html to .php via the Page Properties.

Copy the following PHP code onto the gallery page (Insert > HTML Fragment > Paste to Body), resizing it to the size you want, and change ‘gallerynamehere’ to the name of the folder with your photo gallery pictures in:

<?php $tag_var1="gallerynamehere"; include('inc/tags/gal.php'); ?>

To change the size of the icons and the margins, edit the ‘gal.php’ code in the Pulse/inc/tags folder and change the  following settings:

To insert a gallery as a slider, simply replace ‘gal.php’ with ‘slide.php’.

Adding Pulse Blog to WebPlus

Please note: no content pages are needed for the blog.

Simply insert an RSS Reader onto the site where you’d like your blog to show (Insert > RSS/Podcast > RSS Reader) and use the following URL, replacing ‘yoursite.com’ with your domain name:

http://www.yoursite.com/rss.php

You can format the text using the ‘Appearance’ settings. To hide the ‘My Blog’ title, simply change the appearance of the Title by making the text colour the same as the background, and the font size as small as possible. You may also have a line above your blog posts that says “this is my blog”. To remove this, open the rss.php file from your server in a program like Notepad++, delete the following line (line 27), and re-upload:

echo "<description>$blog_description</description>\n";

Still need help? Contact Us Contact Us