Big Skin Upgrade

Posted 09/18/20, by Dan Vis

The transition from BoltWire 6 to 7 is going to involve several big changes. The first one has to do with how our skins are processed. In this guide I'll be looking at how the new system works, and how to make it a smooth upgrade.

Pictures of website skin in various forms.

BoltWire has never really put a lot of focus on skins. There are thousands of free templates out there, and BoltWire's architecture makes it pretty easy to import external skins. I figured, it was up to the user to find a skin they liked and make it work.

But my thinking has shifted a bit. My original vision was to make BoltWire a platform non-programmers could use to build engaging interactive sites. And that includes skin development. And even for developers, the documentation has been be a bit lacking. Plus, with a webhosting service coming soon, it is more important than ever to make sure we have a variety of functional skins available. So I knew I had to step up my game.

So starting with version 6.9, the first beta release for our 7.xx series, I decided to revamp the entire system. Here's how it all works now, and how to make the upgrade a smooth transition.

Skin Locations

First of all, there are number of structural changes in where skins are stored. Here is the new directory outline in the core distribution:

boltwire
   ---scripts
   ---shared
       ---pages
       ---plugins
       ---skins
   ---system
        ---img
        ---pages
        ---skins

You'll notice there are two skins folders. The system skin folder includes all the core skins, including the default, mobile, and print skin, plus three other special use skins (splash for landing pages, box for popups, and rss for rss feeds). Each one is in a subfolder with the name of the skin.

The shared skins folder contains a number of bonus skins. In this first distribution I'll be including somewhere between 15 and 20 different skins you can instantly turn on or off. These are skins we've had on our site for years, and could no doubt be replaced with newer, more modern skins--but I've updated them all to work within BoltWire. I'm providing these as an illustration of how to develop you own custom skins. And you may just find one you like!

When a skin is called in BoltWire, the system first looks for a folder in the local site folder first at this location:

local site
   --- files
        ---skins
            --- skinname

If it doesn't exist, and that skin exists in the system or shared skins folder, that skin folder is automatically copied over to the location above and becomes available in time for your page to load. If it can't find your skin, a default skin will be used instead.

To install a new skin, simply copy the skin folder into the files/skins folder above. To make that skin available to multiple sites, copy the folder into the shared/skins folder. As usual, you should not edit the system or shared skins in the core distribution as those changes will be overwritten with every BoltWire upgrade. But you can edit the local copies of a skin freely.

To keep your existing skin running smoothly, round up all your files (skin graphics, the code.skin html and css files, and any js files you have) and put them in a directory in your files folder. And make sure any paths you use are correct. Using the {+skin+} markup will ensure your paths always work.

Skin Files

As usual, there are a lot of options for how to setup your skins, but ideally, each will contain two main files:

code.skin.skinname.html
code.skin.skinname.css

The html file is a required basic template for your webpage, containing various variables, blocks, and zones (more on this in a minute). Though it resides in the files folder it can be edited like any other BoltWire page through the regular edit action (more on that, too).

Normally, this html file links to style.css as an external file (using the {+skin+} skinvar as the path. The other css file is used as a template for the style.css file. Basically, you edit and store skinvars, in this file. You can also store data fields in this file, which skinvars can access. Then, when updated, those skinvars are all populated, and an updated style.css file is created.

This gives you the best of both worlds: an instantly customizable style sheet, that can be linked to externally, and cached client side. Note: if your server caches css files, you may have to wait just a bit to see those changes take effect.

Vars, Blocks, and Zones

Skinvars of the form {+field+} can be put in both the html and css template, but they work differently. In the html file, these vars are processed dynamically and can be used to access any system, page, or info var. If one isn't found, it will scan the data vars in the css template--and even process any markup found there. The css file works the same way, but the output is frozen when it's published in the style.css file, meaning it can't really be used dynamically for things like page variables. There is one exception, and that is to import a css file as a block. See below.

Blocks are new in BoltWire 7. Basically, it's a new way to insert content into the skin using a format like <<blocktype content parameters>>. Currently there are 5 blocktypes available:

text: Set "content" to a short string of text. Optional parameters include markup=true (do markup) and rule='' to limit markup processing.
function:    Set content to the name of a specific function and include any desired parameters and it will be called.
code: Include a code page. This is an easy way to embed an inpage style sheet or javascript snippet--and because it is in the html file, skinvars will be processed dynamically.
markup: Set content to a page name and that page will be imported with markup processed. Optional rules parameter.
cache: Same as the markup block except you can set an expiration time in seconds. This allows you to cache the entire html output and only refresh on occasion.

Basically, the idea behind this was to give you multiple options for inserting content into your skin, with the minimum amount of server processing possible.

If you are upgrading, you will want to check your skins for two things:

1) First, <<css>> should be replaced with one of these lines in the header of the page:

<<code code.skin.skinname.css>>
<link rel="stylesheet" type="text/css" media="screen" href="{+skin+}/style.css" />

The first will insert the css rules into the page, with skinvars processed dynamically, and the second will link to the external style.css file.

2) Second, lines like ==some markup== should be replaced with <<text 'some markup' markup=true>>

The zones feature is essentially unchanged in BoltWire, though I've changed many skins to minimize the number of zones used and replaced them with blocks wherever possible. For example, if the "bottom" zone is a typical sitemap that doesn't change from page to page, it's faster to change [[bottom]] to <<cache block.bottom expires=86400>>. Basically, BoltWire processes the markup one time, saves the html, and serves it up on demand. The expires parameter means it will reset itself once a day.

Note, I've also taken to storing these snippets as block pages (like block.bottom). And in the core distribution I've started adding several blocks: block.search, block.tabs, block.login, block.copyright, etc. Where possible, use these instead of zones. These are common elements you are likely to want to use on any skin. Do a search for block pages to see what's available, and feel free to incorporate these into your site. As usual, these pages are all fully configurable and you are welcome to create your own blocks, as well.

Skin Management

There are two aspects to skin management we've dramatically improved. First skin selection. In BoltWire 7, we use a site.auth.skins page with lines like the following to control which skin is used on a given page:

*: butterfly
welcome: splash
splash*: splash
box*: box | box
action.help: box | box
some.page: mydefault | mymobile | myprint

Basically, the butterfly skin is used on most pages, with the splash skin being used on the welcome page and all splash pages. (This is a system skin used for landing pages). The box skin is used on box pages and the help action. (This is a system skin used for popup windows). The second skin listed on these two lines means the box skin will be displayed on mobile devices as well. And the last line tells us some.page will use a custom desktop (default), mobile, and print skin. Where a skin is not defined, the system default, mobile, and print skins are used.

Incidentally, I added a "skin" action which allows you to override the default skin by setting the skin as a second parameter to the url, ie: https://www.boltwire.com/some/page&action=skin&skin=marble. I used this effect to create the skins display area on the BoltWire site. It's also used in the preview mode below which allows you to view a skin by instantly installing it.

The second thing we've added is a new site.skins page which lists all the available system and shared skins, as well as any installed skins on your site. Click an uninstalled skin to see it previewed. Click one of the installed skins, and you will see options to list the files in a skin folder, update the data variables for that skin (in the css template), edit the html or css templates, preview it, create a copy of an entire skin directory, rename a skin directory, and delete a skin directory. We may add additional capabilities to this in the future.

Suppose for example you want to tinker with a skin file but don't want to mess up your existing site in the process. Simply make a copy of your current skin, and set some test page to use that skin. Make any editing changes you want until you get it how you like. And then copy those changes back to the main skin. Easy as that!

If you do your development offline, you may prefer editing the files directly, but if you ever need to make a quick fix and you are away from your computer, it's nice to have this ability.

Developers

Other than getting your skin files pulled together and moved to your files/skins folder, and updating your html templates to use the new block format, you shouldn't really have much trouble making the upgrade to 6.9.

But if you have been doing a lot of custom work using BoltWire system hooks and vars to manipulate your skins, you are definitely going to want to test the new upgrade carefully. I've changed several function names, a few variables, the hooks, and other aspects of the code--and it's entirely probable some things will not work. So scan your plugins and config scripts for anything that might be impacted. I've tried to document some of these changes, but there were numerous systemic changes required to make all this work, and unfortunately I did not get everything jotted down. Reach out if you have trouble.

And last, if you have a skin you would like to share with the BoltWire community, or want to fix up one of our current skins (the css files need some improvement) I'd be really happy to include your work in a future release. Just zip up the skin file in your files/skins folder and send it to me for review.

I will prepare another blog post in the future dealing with how to build your own skins from templates available online, and how to optimize them for BoltWire. For now, let's just do our best to get through this upgrade!


Posted by Dan Vis on 06/07/20
Yes, some nice themes there. The cost is no problem, but most of those seem to be more like a welcome or landing page, and might not convert well to the actual members area behind the login screen.

The key to using BoltWire is to always think about what the second page looks like after you start getting into the content. For a splash page like these, you can just use them as they are and then integrate them into a BoltWire site on the back end...

I also need to make sure there's a license to redistribute them if I'm going to put them in the core download...
Posted by Binrd on 06/05/20
Dan, you don't need to be a designer, you need to be a good coder to convert one of 60+ ready to use html site themes into BoltWire skins: http://preview.themeforest.net/item/megaone-one-page-parallax/full_screen_preview/25651324

And of cause you need to spend $9 for it :)
It's nothing for 60+ good design themes.
Posted by Dan Vis on 06/05/20
Yes ID, I agree. Mostly, I decided to update and include these skins as examples of how to create skins. If you have a skin you have developed you would like to include in the core distribution, please let me know. I'd be happy to replace one or more of the older skins with some new ones. I don't claim to be a graphic designer! :)
Posted by Binrd on 06/04/20
It's great — now I can choose new skin. But I think all skins I see is quite old, maybe too old to be the right choose. Today nobody wants old design. As a designer who worked every day with clients I know it very good.

You can choose one free theme on themeforest.com and make some 2020 skins.




Join Us

To read more posts, or to leave a comment, join our FREE community...

JOIN NOW




Copyright © 2020. All rights reserved.