Home

Editing Your Website

Christopher Rankin January 23, 2010 • Content Management & Design

Getting Ready

Before you being be aware that when activating a new website template, all your content is deleted, including Assets, Snippets, and Layouts. You should settle on a template design before making any permanent changes to  your site. The guide below will walk you through the basics of how the Content Management System works. Click these links for a more detailed guide on editing Pages, editing Snippets, and editing Layouts.

The Admin UI at a glance

To begin editing your site go to http://yourdomain/admin. Where 'yourdomain' is the URL to your SBMSuite site. For example http://joesplumbing.sbmsuite.com. Once logged in, the three main building blocks of SBMSuite can be edited: Pages, Snippets and Layouts.

As you can see the SBMSuite administrative interface is a familiar tabbed interface, where each tab reveals a subset of functionality, by default you land on the Pages sub-menu tab after successfully logging in.

Hierarchical Organization

SBMSuite is organized in a very intuitive and structured way. If you’re a developer, you should be familiar with the term tree, and should readily notice from the organization within the administrative interface that SBMSuite forms an n-branch tree (the root being the main or home page of the site). If you’re not familiar with tree structures or terminology, the easiest way to see this is to think of an upside-down tree (i.e. root at the top, branches and leaves at the bottom). At the very top of the tree, is the root (which as said above is the site’s main or home page), from it you can spawn children (that is, branches of the tree). Please don’t think of children as their own entity: they are fully dependent on their parent. But just as it is the case in nature, branches themselves can have children, and these children can, of course, have children of their own. Children who do not have children are usually referred to as leaf nodes.

Site Creation

If you've chosen not to activate a template SBMSuite supplies no page template data at all. So you have to do some work to get going. You'll first need to create a layout (typically using HTML). Read the layout , guide to get started. If need be create some so Snippets, then populate the site with pages.

As with any site, getting a good layout template sorted will help a lot in the long term with making things easier to maintain and aiding easy changes in the site look and feel for purposes of modernization, corporate rebranding, or simply a change for change’s sake.

Your First Page

If you don’t have any pages yet click the New Homepage button, otherwise click the name of the top most page in the tree (probably “Home” or something similar) if there is any content in the body part in there just delete it.

Give your new page a title and enter some content into the body part, set the Status to published and click Create Page, if you’re editing an existing page make sure you set the Layout to inherit.

Click the View Site link at the top-right of the page to see what your new page looks like. It probably doesn’t look like much, it’s just plain HTML. You could create an entire site in this way just letting the user agent do as it will with your content. However you probably want to use things like CSS, Javascript, page tracking tools and all the other things you’re accustomed to using to develop websites, and SBMSuite is there for you.

Refer to the Pages page for more details on the Edit Page UI, about page attributes and parts.

A Basic Layout

A layout is the outermost block you use to build your site, with pages being the innermost and snippets somewhere in the middle. Refer to the Layouts page for a more lengthy explanation.

To edit or create a layout, click on the Design tab, then click on the Layouts tab. Now click the New Layout button.

Give your layout a name and enter a basic structure for your site using HTML. For this simple example I’ve used the following:

<!DOCTYPE html>
<html lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8"/>
  <title>Demonstration</title>
  <link rel="stylesheet" href="/stylesheet" media="all" title="Default" charset="utf-8"/>
</head>
<body>
  <r:snippet name="header_footer">
    <h1><r:title/></h1>
    <r:content/>
  </r:snippet>
</body>
</html>

Now return to the Pages tab and the page you edited earlier, on that page select your new layout from the menu, while you’re in there choose Markdown or Textile from the Filter menu if you hadn’t already.

Save your changes and click the View Site link. If you used the layout code from earlier you’ll notice a handy error message noting that we’re missing a snippet, otherwise you should see your site.

A Simple Snippet

For the benefit of those using the code from above (or anyone interested in the snippet yielding technique used there) we’ll cover making a snippet that inserts our site’s “used on every page” header and footer elements.

Click on the Snippets tab (Under Design). Now click the New Snippet button.

Give your snippet a name. For the above layout to work I’ve used the following:

<div class="header">
  <h1>A Simple Demonstration Site</h1>
</div>

	
<r:yield/>


	
<div class="footer">

  <small>legal information</small>
</div>

Save your changes and click the View Site link. Now you have a common header and footer that will be applied to any page you send through your layout.

Refer to the Snippets page for the more information on snippets.

Create a Stylesheet in SBMSuite

Go back to the Pages tab and click the Add Child button next to topmost page in your tree. We’re going to use this page to contain our stylesheet.

Give your stylesheet page a name and insert your CSS code, here is some simple CSS used in this demonstration:

html {
  font-family: sans-serif }
h1 {
  text-transform: uppercase }
p {
  line-height: 1.5 }
.header {
  background-color: black;
  color: white }
.footer {
  background-color: inherit;
  color: #888888;
  font-size: 75% }

You can save your new stylesheet page now but it’s still not quite ready to be used. We need to create a new layout which we can use to wrap our actual CSS code, the same way we use layouts to wrap our content. The difference here is that instead of using the layout for structure we’re going to use it for serving a different MIME type, namely text/css.

Click on the Layouts tab. Now click the New Layout button.

Give your layout a name, click the More link then enter text/css and in the body enter the following:

<r:content/>

Now save the layout.

Return to your stylesheet page and set the layout to the new layout you made for wrapping stylesheets.

Save the page and click the View Site link to see your site with the stylesheet applied.

Where to Next?

If you’re still feeling uneasy with the building block concept of SBMSuite reading all the wiki has to offer on Pages, Layouts and Snippets should help. If you’re ready to jump in, you probably want to know all there is to know about Radius Tags.