Create a simple theme

This builds on the following intros:

Script

Let’s create an app for this simple theme.

We start from almost scratch, so we get an error, but you will find some code snippets and other assets in this intro file.

Let’s put our application in sys, apps, and name it sky-theme. Because its an app, its type shall be app-1

I want it to serve requests, so it shall impelment the .Request interface. I want to write JavaScript code. Here is the basic layout.

var p = ''

p += '<!DOCTYPE html>'
p += '<html>'
    p += '<head>'
        p += '<title>TITLE</title>'
    p += '</head>'
    p += '<body class="-body">'
        p += '<div class="-paper">'
            p += '<div class="-left">'
                p += 'LEFT'
            p += '</div>'
            p += '<div class="-right">'
                p += 'RIGHT'
            p += '</div>'
        p += '</div>'
    p += '</body>'
p += '</html>'

response.body(p)
response.attrStr('content-type', 'text/html')

Let’s dynamically generate the page title. And make sure to HTML encode it.

'+util.htmlEncode(f.title())+'

As for the right column, let’s store all those contents in placeholder 1. So, let’s display all the contents in placeholder 1.

p += os.inline(f.query(":c:1"))

os.inline() renders them, f.query() finds files on the filesystem, while :c:1 selects all the children of the page that are contents (:c) in placeholder 1 (:1).

So much for displaying the contents already in the right column. To also allow dropping files in that column, add the class o1-placeholder and the attribute data-o1-placeholder="1". If you want to see the documentation for these, just google boomla o1-placeholder.

The left column shall contain a menu. This intro is not about writing a menu, so I’m going to use a menu supplied with this project.

p += os.inline(app.query("menu"))

The app variable points to the .Request file, so we will copy the menu in it for this to work. Note that I did not make the left column droppable, that’s intentional.

Let’s find the menu, copy it, and paste it into our .Request file.

Let’s also add some CSS. Create a .RequestStyle file, of type css-1, and make our sky-theme look nice.

.-body {
    background: url(pattern.png) #AAC7FC;
}
.-paper {
    margin: 50px auto;
    width: 1000px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.-left {
    float: left;
    width: 270px;
    min-height: 500px;
    margin-top: 30px;
}
.-right {
    float: right;
    width: 670px;
    min-height: 500px;
    margin: 30px;
}

This background image, we will also copy from the intro file. By the way, it’s always useful to visit your stylesheet after editing, as the css-1 app won’t let you get away with a broken image reference.

Let’s find this image. Copy. Paste into. Please note the pattern is stored within the stylesheet, that’s to avoid external dependencies and help keep things in order.

3 more things. To hold users hands, Boomla won’t let users drop everything everywhere, only where files make sense. To help enforcing this, everything is denied by default, we have to enable dropping explicitely. Let’s create a file named .Accept, set its type to accept-1, and allow dropping contents in placeholder 1.

"placeholder-1 string": ".Inline"

Contents implement the .Inline interface. Also, because we want to have subpages, let’s allow dropping pages in placeholder 0.

"placeholder-0 string": ".Page"

Pages implement the .Page interface. Let’s verify the .Accept file is valid. Okay.

Notice that we only allow dropping pages in the menu, but our theme does not yet implement the .Page interface. We can implement it by simply creating a .Page file.

Finally, let’s add our theme to the Toolbar. Go to sys, create a file new, and add our theme. Type /sys/apps/sky-theme, or simply sky-theme, because its in the default location. Give it a title as it will show up in the toolbar.

It’s time to make our root page use our theme, and visit it.

We can readily create new pages through the toolbar. To also try the content area, let’s install a text app from the Boomla Store. Install. Select the website. Okay. Refresh. And we can readily use it.

That’s it! I hope you will agree that this was a pretty cool return on the effort.