Matt Atherton is the Owner of purpleplanet – Software Solutions, a Germany-based web solutions company. purpleplanet has been working with MindTouch since 2012 and has proven to be an effective and reliable resource for design, site branding and creation and implementation of custom widgets.
In this blog post, I’d like to reveal some tricks and tips for enhancing your MindTouch pages using effective styling, pre-defined MindTouch widgets and some basic DekiScript.
To start us off, we’re going to focus on adding a box to the top of an article that contains information about the page author and some basic statistics about the article itself. Here’s the result we’re aiming for:
As you can see, the new box incorporates:
- Page Author – which can be linked to an email address, LinkedIn page, etc.
- Job Title and Company – with a link to the company’s homepage
- Page Views
- Page Updates
- Page Votes
The method for creating this new “widget” is two-fold.
Building the Template
First, we need to create the template that gathers all this information together. To do this, navigate to your site Templates and create a new template with this path:
Once your new template page is in place, you need to create a Dekiscript block, in order to add the variables required for the elements of our new widget. To do this, first “Edit” the template page, then choose “DekiScript” from the “Styles” drop-down. Make sure the following code is added inside the red-bordered DekiScript area:
Now that we have these variables declared, we can define the structure of the widget beginning with the author information. This should also be contained inside the DekiScript area we just created, below the variables we added in the first step:
Finally, we add in the statistics counters, which will sit on the right side of the widget. Here’s our final DekiScript block:
Now that we have the correct information coming through, the final stage of the template build is to style the elements. Beneath the DekiScript block, inside the new Author template, add a blue-bordered CSS block (Styles -> CSS) and paste in the following CSS:
Stage two of the process is to call this template into place on a page. This requires a list of values to fill the variables which will then be passed into the template as arguments. Open the page where you wish to add the author widget and add the following code inside a DekiScript block at the top of your page:
The values here will need to be amended for each page you add this widget to. If you leave the ‘name’, ‘companyname’, or ‘companyurl’ out of this argument list, the values will be automatically added, as follows:
- name: the name of the page Author stored in MindTouch
- companyname: the site name in the Configuration of your MindTouch site
- companyurl: the URL of your MindTouch site
For more information on branding, please head over to the MindTouch Customer Success Center.