How To Create A Simple Portfolio Site Running On Surreal CMS

I always enjoy working on new things and learn about new CMS and how they work and all. I recently connected with Cory at Surreal CMS, and I decided to write a tutorial on how to create a portfolio site and run it with Surreal CMS.

It’s pretty simple actually. In this tutorial I’ll show you how I came up with the basic design, we’ll also go through coding that layout (markup and CSS) and I’ll show you how to integrate Surreal CMS and how it can be used to run your site and your client’s sites. We’ll also go through the process of branding the CMS so that your clients see your own logo instead of the Surreal CMS logo.

Now let’s get started!

First We Need A Design

I used Adobe Fireworks to create the basic layout and graphics. You can check it out below – This is what we’ll slice, code and use to run Surreal CMS with. It’s a rather basic layout, but it’ll be perfect for the purpose of this tutorial.

Here’s the layout:

Quick Overview Of The Layout Design

I created a new document in Adobe Fireworks and set the width and height to something I’m comfortable working with. In this case I went with 1200x1000px. And I chose #EEEEEE as the background color.

In the first layer I created a rectangle and gave it a height of 130px and a width of 1200px. The rectangle has a linear gradient that goes from #70A033 to #48761C (the green rectangle at the top – which we’ll use as our body background image).

I then created the logo using Century Gothic and the nav menu is set in Helvetica. I made it uppercase and put a -1px letter spacing. Then I created a main content box and set the color to #FFFFFF (so it contrasts a bit with the #EEEEEE in the background)

Then it was just a matter of figuring out what to put in those content boxes. I figured it’d be cool to have some thumbnails of recent projects (that would open in a lightbox when clicked) and a little ‘about us‘ blurb. I used some cool free icons from Function.

And then at the bottom there’s the usual footer with a Copyright notice and all.

Slicing Up The Images

I grabbed a 1x130px sample of my green gradient box. This will become our body background image and it will repeat horizontally.

I also saved the logo and tagline as a transparent PNG file.

And then I just sliced the icons.

Coding The Layout

Our portfolio site will have 4 pages:

Home
About
Work
Contact

First of all we’re going to have to create the following files:

nav.php
footer.php
index.php
style.css

We’re going to need more PHP files for the about, work and contact pages, but for now let’s focus on writing the markup and CSS for the homepage.

Let’s Start With The Header

You’ll notice that I use a class=”editable” on many divs and paragraphs. This is because Surreal CMS will look for those regions and make them editable via the CMS admin panel. Make sure you never use a class=”editable” for anything else than what you want to show up in the CMS.

So, we’ll need to declare the DOCTYPE and then we can start coding away. Here’s the first part of the website:

[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This site is a live example of what can be done using Surreal CMS" />
<meta name="keywords" content="Surreal CMS, CMS, tutorial, portfolio, Surreal" />
<title>Simple Portfolio Site Running On Surreal CMS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
</html>
[/html]

Then the logo and navigation:

[html]
<div id="header" class="editable">
<h1><a href="/" title="Surreal Portfolio"><img src="images/logo.png" alt="Surreal Portfolio" /></a></h1>
<ul class="menu editable">
<li><a href="/">home</a></li>
<li><a href="/about.php">about</a></li>
<li><a href="/work.php">work</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
[/html]

We’ll come back to the header section later, but that’s a start. :)

As you can see I gave my header an ID of ‘header‘, and I gave the unordered list a class of ‘menu‘. Obvious, right?

And Then The Main Index

We’ll start the main index file with the header we just did and then do a php include to grab the nav.php file, like this:

[html]
< ?php include(‘nav.php’); ?>
[/html]

And then we’ll need a main div (maincontent) that will hold all of our content. Right before that maincontent div I put a paragraph and gave it a class of ‘message‘. This is the box that’s between the header and the content on the homepage.

[html]
<p class="message editable">Hello there! Welcome to surreal portfolio. This site is an example of what you can do with <a href="http://surrealcms.com/?referer=SpyreStudios" title="Surreal CMS">Surreal CMS</a> – an easy to use and powerful CMS that can make your life as a designer much easier! <span>(oh hey, and this section is easy to edit via the Surreal CMS admin panel)</span></p>

<div id="maincontent" class="editable">
</div>
[/html]

And of course we close this file with another php include, our footer file:

[html]
< ?php include(‘footer.php’); ?>
[/html]

A Simple Footer

The footer is pretty simple, just a paragraph inside a div. Then we end the document with the closing body and html tags.

[html]
<div class="footer editable">
<p>Copyright 2009 – Jon Phillips & SpyreStudios – Powered by <a title="Surreal CMS" href="http://surrealcms.com/?referer=SpyreStudios">Surreal CMS</a>.</p>
</div>
[/html]

We’re Getting Somewhere

Now we have a somewhat functional homepage (though it’s butt ugly since we didn’t write any CSS yet) Here’s what our homepage should look like now:

Here’s the homepage markup in it’s entirety (we’ll add some content and javascript soon):

< ?php include(‘nav.php’); ?>

<p class="message editable">Hello there! Welcome to surreal portfolio. This site is an example of what you can do with <a href="http://surrealcms.com/?referer=SpyreStudios" title="Surreal CMS">Surreal CMS</a> – an easy to use and powerful CMS that can make your life as a designer much easier! <span>(oh hey, and this section is easy to edit via the Surreal CMS admin panel)</span></p>

< ?php include(‘footer.php’); ?>
</body></html>
[/html]

Now We Need Content

So, before we write any CSS, let’s add some content. Let’s take the ‘maincontent’ div and add some stuff in there:

[html]
<div id="maincontent" class="editable">
</div>
[/html]

We have 2 sections:

Latest From The Portfolio
About Our Company

Since the first section to come up is the ‘Latest From The Portfolio‘, let’s create a div and add some images:

[html]
<div id="maincontent" class="editable">
<div class="content1 editable">
<h2>Latest From The Portfolio</h2>
<a href="images/portfoliosample1full.jpg" title="Work Sample 1 Full" rel="lightbox"><img src="images/portfoliosample1.jpg" alt="Work Sample 1"/></a>
<a href="images/portfoliosample2full.jpg" title="Work Sample 2 Full" rel="lightbox"><img src="images/portfoliosample2.jpg" alt="Work Sample 2"/></a>
<a href="images/portfoliosample3full.jpg" title="Work Sample 3 Full" rel="lightbox"><img src="images/portfoliosample3.jpg" alt="Work Sample 3"/></a>
<a href="images/portfoliosample4full.jpg" title="Work Sample 4 Full" rel="lightbox"><img src="images/portfoliosample4.jpg" alt="Work Sample 4"/></a>
<a href="images/portfoliosample5full.jpg" title="Work Sample 5 Full" rel="lightbox"><img src="images/portfoliosample5.jpg" alt="Work Sample 5"/></a>
</div>
</div>
[/html]

See, I also added rel=”lightbox” to my image links. We’ll need to go back in the header.php and add the JS file for this to work. I used Lightbox 2 and you can download it here and instructions are also available on the website.

Let’s go back to our header and add the JS files and the Lightbox 2 CSS file in there. Like this:

Now let’s do the ‘About Our Company‘ section. Another div and 2 paragraphs inside it. You’ll notice I’ve also put H2 headings for each section.

[html]
<div id="maincontent" class="editable">
<div class="content1 editable">
<h2 class="computer editable">Latest From The Portfolio</h2>
<a href="images/portfoliosample1full.jpg" title="Work Sample 1 Full" rel="lightbox"><img src="images/portfoliosample1.jpg" alt="Work Sample 1"/></a>
<a href="images/portfoliosample2full.jpg" title="Work Sample 2 Full" rel="lightbox"><img src="images/portfoliosample2.jpg" alt="Work Sample 2"/></a>
<a href="images/portfoliosample3full.jpg" title="Work Sample 3 Full" rel="lightbox"><img src="images/portfoliosample3.jpg" alt="Work Sample 3"/></a>
<a href="images/portfoliosample4full.jpg" title="Work Sample 4 Full" rel="lightbox"><img src="images/portfoliosample4.jpg" alt="Work Sample 4"/></a>
<a href="images/portfoliosample5full.jpg" title="Work Sample 5 Full" rel="lightbox"><img src="images/portfoliosample5.jpg" alt="Work Sample 5"/></a>
</div>
<div class="content2 editable">
<h2 class="coffeecup editable">About Our Company</h2>
<p>We’re a small, yet highly focussed, team of designers and developers from Montreal, Canada. We build websites for clients from all over the world and we love what we do!</p>
<p>This website is our home on the web – please take a minute to have a look around or <a href="/about.php" title="About Surreal Portfolio">click here to learn more about us…</a></p>
</div>
</div>
[/html]

Now The CSS!

I don’t think it’s necessary for me to explain the whole CSS file. Everything is pretty self explanatory: maincontent div for the main content, content1 div for the first block of content, same for the second block of content, unordered list with a class of menu for the navigation menu. Pretty easy, right? (you can always leave a comment and I’ll try my best to answer your questions)

Here’s the CSS in it’s entirety:

[html]
body {
background:#eee url(images/bodybg.jpg) repeat-x;
color:#444;
width:900px;
font-size:14px;
font-family:helvetica, arial, sans-serif;
margin:0 auto;
padding:0;
}

#header {
margin:0;
padding:0 0 15px;
}

h1 {
float:left;
width:397px;
margin:0;
padding:30px 0 20px;
}

h2 {
font:bold 26px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:0 0 20px;
}

h2.computer {
background:url(images/computericon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:8px 0 30px 56px;
}

h2.coffeecup {
background:url(images/coffeeicon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:12px 0 30px 50px;
}

h3 {
font:normal 22px georgia, serif;
color:#000;
margin:0;
padding:25px 0 12px;
}

img.right {
float:right;
background:#eee;
border:1px solid #ccc;
margin:0 0 15px 20px;
padding:10px;
}

img.left {
float:left;
background:#eee;
border:1px solid #ccc;
margin:0 20px 15px 0;
padding:10px;
}

ul.menu {
text-transform:uppercase;
float:right;
margin:0;
padding:50px 0 0;
}

ul.menu li {
font-size:18px;
font-weight:700;
letter-spacing:-1px;
display:inline;
margin:0;
padding:0 8px;
}

ul.menu li a,ul.menu li a:visited {
border:none;
background:transparent;
color:#fff;
display:inline;
margin:0;
padding:0;
}

ul.menu li a:hover,ul.menu li a:visited:hover {
background:transparent;
border:none;
color:#000;
display:inline;
margin:0;
padding:0;
}

p.message {
clear:both;
font:normal 24px helvetica, arial, sans-serif;
background:#fff;
letter-spacing:-1px;
color:#313F4C;
line-height:30px;
margin:0 0 30px;
padding:30px;
}

p.message span {
font:18px normal georgia, ‘Time New Romans’, serif;
color:#888;
font-style:italic;
margin:0;
padding:0 0 0 10px;
}

#maincontent {
float:left;
width:840px;
font:14px normal helvetica, arial, sans-serif;
background:#fff;
color:#313F4C;
line-height:34px;
margin:0 0 10px;
padding:30px;
}

#maincontent p {
line-height:28px;
}

ul {
line-height:18px;
list-style-type:none;
display:block;
margin:0;
padding:0;
}

ul li {
list-style-type:none;
display:block;
margin:0;
padding:0 0 8px;
}

ul li a {
list-style-type:none;
color:#556D84;
display:block;
margin:0;
padding:10px;
}

ul li a:hover {
list-style-type:none;
display:block;
color:#000;
margin:0;
padding:10px;
}

#maincontent img {
border:1px solid #ccc;
background:#eee;
margin:0 3px;
padding:8px;
}

#maincontent img:hover {
border:1px solid #bbb;
background:#ddd;
margin:0 3px;
padding:8px;
}

a,a:visited {
text-decoration:none;
color:#48771E;
}

a:hover,a:hover:visited {
text-decoration:none;
color:#000;
}

.footer {
float:left;
font-size:12px;
width:900px;
color:#999;
padding:10px 0 40px;
}

.content1,.content2 {
width:840px;
font:16px normal helvetica, arial, sans-serif;
background:#fff;
color:#333;
margin:0 0 30px;
padding:0;
}
[/html]

Creating The Other PHP Files

Now that we’re done with the header, navigation, main index, footer and CSS, let’s create our work, about and contact pages.

This is actually very easy: Simply duplicate the index.php file 3 times, rename to about.php, work.php and contact.php and you’re almost done. Open up those 3 new files in your favorite editor and remove the ‘message’ paragraph and insert some lorem ipsum in the maincontainer div. (at the end of the tutorial you have a download link so you can grab all the files from this tutorial)

Creating Your Surreal CMS Account – PROMO CODE!

We’ve partnered with Surreal CMS to give you guys and gals a little something. You can create a free account with Surreal CMS but there are some restrictions. With the upgraded account you’d be able to manage an unlimited number of websites, use your own custom logo and color scheme (clients will love this), and access the CMS via your own domain at cms.yourdomain.com instead of via surrealcms.com. Those features are not available with free accounts.

The Designer/upgraded account costs $25 per month, but Cory agreed to give the first month free to readers and visitors of SpyreStudios. You can read more about it and grab the promo code by visiting this page (this offer is valid up till September 31st).

Integrating Surreal CMS To Our Design

Now that we have a working website, let’s work on the fun (and actually pretty easy) stuff :)

Surreal CMS really is a simple, no-fuss CMS. All you have to do to make a region editable (I mentioned this earlier) via the CMS is to add a class=”editable” to an element. It’s that easy! You can also add a title=”something here” to elements, though if an element already has an ID, you won’t need to add the title attribute.

Step By Step

1- Go to Surreal CMS and signup. Once you’re done with the signup process, login with your email and password. You’ll be on the ‘My Websites’ page. Click on ‘Add a Website’ and enter your FTP information, test the connection and browse to your website root. The website root is where you will upload your website files, in most cases that’s the main folder, also called ‘root directory’.

Click ‘Save Changes‘ when you’re done.

2- Click on the website URL and then on ‘Enable Pages‘. Then select the pages you’d like to enable. Make sure you actually upload those files manually to your website root directory. For this tutorial I uploaded all my php files, my css file, the js folder that contains the lightbox script, a css folder that contains the lightbox css, and my images folder. When you’re done, you’ll be able to change the display name of the file so it’s easier to work with in the CMS.

3- Since we put the class=”editable” to many of our divs and paragraphs, we’ll be able to edit those regions via the admin panel. Next to each of the file names you’ll see an ‘Edit‘ link, click on the one next to the index.php. It’ll load the Editor. There you will see the content regions you defined as ‘editable’, you’ll also have a ‘publish to web’ button which, when clicked, will update your html or php file. And you can also edit your markup by clicking on the ‘Edit Content Regions’ button. What that means is once you’ve uploaded your files, you don’t have to re-upload anything, you can manage everything via Surreal CMS.

That’s basically it. You can manage your whole site from within the Surreal CMS admin. Want to add a new editable region? Easy! Just load up the ‘Content Region Editor‘ and add the class=”editable” to the element you want to edit with Surreal CMS.

The class=”editable” can be added to a number of html tags (more than this list – those are some of the most popular ones anyway):

blockquote
div
h1 — h6
img
ol, ul
p
pre
span
table, td, th

4- You can even change the title and meta description and keywords via Surreal CMS. Just click on ‘Properties‘

Adding Editors

This feature is pretty cool. Say you’re building websites for clients and you want them to be able to edit their site themselves (that’s the whole point right?) Simply add an editor, edit the welcome message, and voila! You’re done! Your client will be able to easily edit the content of the pages the same way you would via the Surreal CMS admin.

Use Surreal CMS With Your Own Domain

That part is pretty straight forward. This is if you would like to be able to access the CMS via your own domain instead of the default edit-content.com website.

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

Branding Surreal CMS With Your Own Logo And Color Scheme

Of course if you use Surreal CMS to build websites for your clients you’ll want them to see your logo and color scheme instead of the default colors and logo. Click on the ‘My Account tab at the top, upload your logo and change the color scheme. It’s that easy. You can also change your contact information and password via this page.

Here’s the default design of the Surreal CMS admin:

Here’s my own:

It’s A Wrap!

That concludes our tutorial on creating a portfolio site running on Surreal CMS. I hope you liked it! Here’s our final result: Surreal Portfolio.

You can download the files from this tutorial here (downloaded [download#3#hits] times already!).

If you would like to try out Surreal CMS, remember that you can get a Designer Account for the first month for free (the offer is valid up till September 31st). The Designer/Upgraded account enables features that are not available with the free account! :)

Cheers!

Comments

Steven Snell says

August 12, 2009 at 9:18 pm

Nice tutorial Jon. Looks pretty similar to Cushy CMS. I like the simplicity of a CMS like this for certain purposes. There are times when using WordPress or some other CMS cause more confusion for clients than it is worth.
Jon Phillips says

August 12, 2009 at 11:39 pm

Thanks a lot Steven! I’m with you, WordPress is great, love it, but sometimes it can be overkill especially when building a ‘static’ site and you don’t need a blog platform. Depends on the project :)
Pablo Lara H says

August 13, 2009 at 11:44 am

Very useful. Thank you. I have recently won a free account for Surreal CMS and with your article I know how to use it.
Thaaaaaank you¡¡
Luci says

August 13, 2009 at 11:57 am

Nicely written tutorial! I am a big fan of WordPress though i agree with the previous comments – sometimes it can be completely over the top for a simpler, static site. Next time i need something simpler, i’ll consider Surreal after reading this tutorial.
Selvam says

August 15, 2009 at 9:31 am

great news for non technical ppl
Lucas Tadeu says

August 15, 2009 at 10:57 am

Great tutorial!It’s really easy-to-follow ;)
cocinas baratas says

August 18, 2009 at 3:54 am

Doesn’t seem very dificult, and the CMS looks great!
Webjohn01 says

August 19, 2009 at 10:41 am

Hi Jon!

It was very impressive tutorial for us starting out designers. I would like to ask can you make another these but it was created in photoshop?

Thank you!
Matt Ward says

August 23, 2009 at 10:49 pm

I just want to say that I love the integration of the Tim Horton’s coffee cup into the design! Go Canada!
Martin Sanders says

August 26, 2009 at 8:45 pm

Thanks for introducing me to Surreal CMS, I’ve just launched my ow new portfolio site using MODx. I found MODx supper easy to use and the templates are excellent if your unfamiliar with PHP.
Lisa Santos says

August 27, 2009 at 10:17 pm

Thanks for introducing Surreal CMS. I had never heard of it until now. I have to agree with one comment about WordPress sometimes being over the top for some clients. It’s great to know there is something much simpler and cleaner. Great tutorial.
Daniel says

October 21, 2009 at 8:34 am

This tutorial is fantastic. But I have a question, when I navigate through the pages wanted to maintain the current of each menu item? I try but I could not.
Thank you for you help!
Karen says

September 6, 2010 at 10:27 am

Thanks for tutorial – been searching for the answer to the following on forums and no luck so far. Does lightwindow v2 work in same way as lightbox?
e.g. in lightwindow class=”lightwindow” and not editable

so could you apply the same as lightbox e.g. class=”editable” and rel=”lightwindow”?
pc says

October 1, 2010 at 1:30 pm

nice one man…i become a fan of urs..thanx
Arturo Ryes says

February 17, 2011 at 3:35 pm

Loved it! This is a great post!