Creating New Content Styles

Creating New Content Styles

Virtualmin Professional includes a fast website creator that allows users to build websites from templates with just a couple of clicks. Once built, the end user can edit the resulting website using a built-in WYSIWYG editor (or using other tools).

Virtualmin includes a few styles that are royalty free and usable for any purpose, commercial or otherwise. Adding new styles is easy, and we encourage web designers to create their own templates for sale - making an existing template into a Virtualmin Content Style is a very simple process.

Directory Structure

The content styles included with Virtualmin are located in the virtual-server/styles directory under the Webmin root. This may be /usr/libexec/webmin/virtual-server/styles (RHEL/CentOS/Fedora/SuSE/Mandriva) or /usr/share/webmin/virtual-server (Debian/Ubuntu). Styles you create yourself should go in /etc/webmin/virtual-server/styles - you may need to create that directory if it doesn't exist yet. Each style should have its own directory, named similarly to the name of the style. Style names should be unique. Including a STYLE-LICENCE.txt file is optional, but recommended if your style is not freely re-distributable.

Here is an example directory and file tree for a simple but complete style with three pages (index.html, sales.html, contact.html):

newstyle/
newstyle/css
newstyle/css/style.css
newstyle/index.html
newstyle/sales.html
newstyle/STYLE-LICENCE.txt
newstyle/template.html
newstyle/thumb.png
newstyle/images
newstyle/images/footer.jpg
newstyle/images/header.jpg
newstyle/contact.html
newstyle/style.info

Create the sub-directories under styles, each of which contains the template HTML and image files for your own style. The only other special file that needs to go in a style directory is style.info, which should contain lines like:

desc=My Custom Theme
name=newstyle

The desc= line specifies the description of the style as it appears in Virtualmin, while the name= line defines the directory it will be stored in under /etc/webmin/virtual-server/themes when installed on another system. No two styles should have the same name.

The other bit you'll want to create is a thumbnail image of the style. The format of this is PNG at 500x375 pixels. Call this file thumb.png. If you will be contributing your style for inclusion in Virtualmin Professional, you'll also want to include an HTML file called template.html which is a version of your index.html with suitable example content included instead of the variables mentioned below.

Within the .html files you can use variables ${CONTENT}, ${OWNER}, ${DOM} to tell Virtualmin where to put the user data (which can all be edited later in the WYSIWYG editor).

Packaging

Just like all other types of packages for Virtualmin, Webmin and Usermin, Content Styles can be bundled into tarballs, optionally gzipped. They can also be zipped, if you're more comfortable with zip format files.

To create a Content Style package, at the directory styles within the Virtualmin virtual-server directory, execute a command like the following:

cd /etc/webmin/virtual-server/styles/newstyle
tar czvf /tmp/newstyle.tar.gz .

This can then be easily installed using the *System Settings* → *Content Styles* page in Virtualmin. If you have the rights necessary to distribute the work (e.g. if you created the style, or if it is based on a Creative Commons licensed redistributable template), feel free to post a link in the forums so others can enjoy it. We also encourage commercial template developers to get involved. If you've already got a stable of templates, converting them for us in Virtualmin is simple, and could provide an additional source of revenue for your existing work. Let us know if you've built commercial Virtualmin Content Styles, and we'll provide a free link to your website.