Building Block CMS

About

Building Block ist the Open Source Content Management Software for your website. It is lightweight and has minimal hardware requirements. At the same time it is powerful and delivers high performance. It's diversity allows you to create and manage professional web projects directly in your browser.

Example

This page shows an example of how to use the Building Block CMS for a simple web page with a content section and a news ticker. This is not a tutorial, but a quick walk-through. If you need a detailed explaination of how to set up a Building Block page, check out the basic guides.

Creating displays

The example page is going to have a content area and a newsticker. So first we need to set up a project and within the project a display for both of them. This is done in the administrator interface. The display is called "public" and has all features disabled, except for the "Add entry" form.

Click on the screenshot to view a larger version. Use the "Back" button to return.

After creating the display, Building Block displays a special piece of code to be put into the HTML file. This tag will cause the styled entries of the project to be inserted when the page is requested, so we copy-paste it into the right place.

The HTML page sets up some CSS styles and displays a header image. Everything else is done using Building Block.

<html>
    <head>
        <title>Building Block Example Wesite</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
        <style type="text/css">
        body {background:rgb(215,216,254) url(gradient.png) repeat-x;
              padding:2% 6%;
              font-family:Verdana,sans-serif;
              font-size:10pt;}
        </style>
    </head>
    <body>
        <div style="margin-bottom:2%;"><img src="head.png" alt=""/></div>
        <!--#include virtual="/cgi-bin/buildingblock.cgi?project=bbk_example_content&display=NRV9YwzoL2gLiX2L"-->
        <!--#include virtual="/cgi-bin/buildingblock.cgi?project=bbk_example_news&display=bQmTNol6AyEKiiY4"-->
    </body>
</html>

That's it. We can upload the page, all subsequent actions are done online using the browser.

Filling in content

We now point the browser to the page on the server. It shows the header image and, as set in the displays, an Add entry-form for each project. So we go right ahead and add some text for the main content section. Note that entries always have a heading.

After that, we hit the "Submit" symbol above the form. Building Block shows a brief confirmation message and takes us back to the page. We now can the see the entry we just wrote, but since we have not yet set up any transformations, it's just plain text. We'll add another entry to the content section.

Two entries are fine for the content. We now add some news. Two news entries have already been added on the screenshot, I'm typing a third one.

Wrapping entries in HTML

The plain text entries are not pleasant to look at, it is time for some HTML. The parts of an entry - title, author list, date, content - can be surrounded by customized HTML. This is done using the transformations tab of the administrator interface. I am going to surround the heading of the main content with a <h1>...</h1> tag.

The actual entry content will be wrapped in <p>...</p> (not on the screenshot). We save the transformations, flip back to the page and reload. The change is in effect immediately, and we can see nice headings and paragraphs.

Tuning the content display

Since we are done with adding entries to the content section, we disable the "Add entry"-form in the display section of the administrator interface. We also want the content to leave some space for the news ticker, so we wrap the whole project in a div tag, set a width of 50% and enable floating.

After that, we want a bit more fancy headings. I have prepared a background image and I'll put that behind each heading using the transformations. Note that Building Block uses those transformations automatically and immediately for each and every entry in the project. You can thus build, manage and change the style of your pages right in your browser.

Let's have a look at the result:

The main content section looks good, but the news do not yet, and there is still the "Add entry" form of the news ticker floating around. We are going to fix that now.

Styling the news ticker

We enter the display section of the news project and first disable the "Add entry" form. Second, we wrap the whole news project in some customized HTML. I have prepared two images which make up the top and the bottom of the news ticker, including the heading and nice rounded corners. Another image is used for the background, so the ticker can stretch infinitely in vertical direction. This is all just HTML magic and not a special feature of Building Block.

We also need some nice transformations for the news. Since the ticker is short of space, we set a smaller font size but care for an appropriate line height for readability.

The headings get a CSS tuned <h2>...<h2> tag (not shown). Now let's have a look at the result:

Now that looks much better than before. Note that all this is dynamic content, you can add, edit, move, delete, re-style it easily any time you want!

Enabling editing

Now say you want to be able to edit all contents of the page. This is not too hard to achieve: we just check the box "Viewers may edit entries" for the display in question and save.

Having done that for both projects, we flip back and reload the page.

Note the pen below each entry. This is a button inserted by Building Block. If we hit it, we will be taken to a form to edit the corresponding entry:

This is similar to the add form. Here you can edit the entry to taste, save it, and it's new content will be right on the page.

The form does not look too nice, but it can be styled using the transformations.

Taking it further

This was just a small example for a very basic dynamic page. Building Block has a lot more to offer:

Set up public and private pages, possibly password protected. You can have add and edit functionality while the visitor just sees a seemingly static page.
Give anonymous access or set up a list of dedicated editors.
Protect your site by restricting or disabling HTML usage in entries or limiting the entry size.
Receive regular backups of your projects in plain text format.
Use the email notification features for editors or upon errors.
Set up dynamic caching to achieve lightning-fast response and high performance by RAM-caching projects.