Archive for the ‘Skinning’ Category
MindTouch Skin Support
Keeping Our Skins Healthy
We are deprecating the Ace and Fiesta skins in MindTouch Core/Platform/TCS 10.1 (a.k.a. Pipestone). Ace and Fiesta will continue to ship, however they will no longer be actively maintained (though we will continue to accept community supplied patches). Deuce is now the default and recommended skin. Beech is still in beta and we continue to mature it for production use.
What to do?
If you are currently using Ace or Fiesta and do not wish to upgrade your version of MindTouch, then you don’t need to do anything. If you are planning an upgrade of MindTouch then you should also plan on migrating to Deuce (or Beech once it is ready). Functionality unique to the Ace and Fiesta skins will no longer be supported after migration.
I believe you will find the Deuce skin to be a compelling alternative to the aging Ace and Fiesta skins. And it enables us to focus on delivering a truly exceptional experience. Should you, however, decide to stick with either of the deprecated skins, fear not. We will continue shipping the required files with each subsequent update so that you do not have to do anything. On the flip side, you will also not see new features show up in the user interface. As before, we will accept community patches to Ace and Fiesta through our bug tracker.
As always, please feel free to reach out to me directly (kellya at mindtouch dot com), on the forums or on this blog to make your voice heard.
Writing a more flexible MindTouch theme
Download this Theme
Theme File Hierarchy
It is important to understand the difference between a MindTouch “theme” and “skin”.
Goals & Objectives
Recently I have been exploring how to make the process of skinning MindTouch a little easier. It’s not that skinning Ace, Fiesta or Deuce is hard but there are some improvements that could make customizing MindTouch faster and more flexible. So, I created a new theme designed specifically to meet the following goals.
- Provide much more granular control over the layout
- Make PHP skinning functions understandable
- Provide a more bare-bones HTML layout for designers to customize as they see fit
- Require designers to modify just one CSS file
- Make navigating the theme file system more intuitive
Implemented Changes
As of now this is still experimental and I have no immediate plans to ship it with a MindTouch release. I figured I could at least document it in the meantime to provide some insight into our skinning ideas. Here are some of the steps I have taken so far.
- Separated most of the PHP & HTML
Formerly only one markup file existed for each theme and its name matched that of the theme, ace.php, fiesta.php, deuce.php. Each of the these files were loaded with markup, PHP and JavaScript, much of which was not important to a designer. Additionally because these files were so cluttered visually parsing them was difficult, even for the trained eye. To solve this problem I moved the HTML content from the markup file to a new file called HTML.php. The new separated file is intended to provide designers with a more accurate and manageable skinning experience. I also located HTML.php inside the skin folder to provide more granular control over each skin. With this change now each skin can have custom markup that is independent of other skins. - Restructured the theme files
When creating this new theme I wanted to make accessing its files more intuitive. With the other themes there are multiple files in numerous folders that are inserted into the skin. Custom CSS modifications were always stacked on top of a large underlying layer of MindTouch prescribed CSS. This approach limited flexibility and forced a very sculpted look & feel upon designers. In order to solve this problem I removed the base CSS files (_common.css, _style.css) in exchange for one CSS file, _style.css, which resides in the skin folder. I also shifted the _print.css, html.php and all images to the skin level. Again, this provides much more granular control over the look & feel of each individual skin and also eliminates any MindTouch defined CSS dependencies. - Renamed all the PHP skinning functions
When I set out to change the theming process I immediately noticed that the PHP skinning functions in each markup file were inconsistent and could be challenging to a non-developer. For instance there were references to wfMsg(), $this->html(), $this->haveData(), $wgTitle, $wgUser and many more. While programmatically these functions all make sense they add an unnecessary burden on a designer. As an alternative I gave these functions new pseudo names that follow a simple pattern and consistent naming schema. For instance:- $this->SiteLogo();
- $this->PageTags();
- $this->PageEdit();
- $this->PageAdd();
- $this->PageTitle();
- Consolidated CSS files
Initially when we built MindTouch themes we planned for CSS modifications to be made as an addition to the existing CSS. While this enabled very rapid theme development it also limited the flexibility of the design and greatly raised the skill level required to completely customize MindTouch. Additionally it also made many assumptions about how MindTouch should look and generally limited the scope of customization to aesthetic CSS such as colors, fonts, etc. As a solution I decided to completely remove the base CSS files (_common.css and _style.css) and only reference the _style.css in the skin folder. I will add, however, that _content.css will remain, as content styling has proven to be the most challenging portion of creating a new MindTouch skin. The _content.css file is pre-populated with default content CSS but can be modified on a per skin basis. - Eliminated unnecessary structure
In order to make theming more flexible there were some deeper consideration required for the PHP skinning functions. Whereas the older PHP skinning functions contained a large amount of predefined HTML I opted to remove most of this HTML and place it directly in HTML.php. This may seem fairly useless but it does shift the control of the HTML into the hands of the designer. For instance I removed extra wrapper <div>, <li> and <span> elements that were added for CSS identification or to meet some assumed function. Ultimately now you can decide if your logout button is in a dropdown list, wrapped in <div class=”logout-wrapper”> or just by itself.
Theme File Structure
- Theme (called beech as an example)
- _reset.css – Resets CSS
- beech.php – The base php file, formerly contained all markup and php
- head.php – Contains all <head> included files: CSS, JS, favicon, etc
- pale/ – Skin folder (called pale as an example)
- _content.css – Contains editor/content CSS
- _print.css – Contains CSS for MindTouch print preview
- _style.css – Contains all chrome/layout CSS
- css.php – Consolidates css files
- html.php – Contains the markup for your skin
Conclusion
As I continue to develop this theme I will do my best to keep the community informed via my documentation. Seeing as this is currently experimental there are no immediate plans to releases. Please let me know if you have any thoughts or suggestions regarding my approach.
I will continue to document this theme at http://developer.mindtouch.com/Deki/Skinning/Beech
Thanks for your time
Damien Howley
@DamienH
Animated Ajax Pageview Ticker
In my infinite quest to make everything better I found myself quite frustrated with the use of “plaintext” to display the number of pageviews on a MindTouch page . Plaintext was clearly way too simple and I saw an opportunity to make it way more complex, quite possibly even confusing.
Using plain numbers is boring, they don’t move, shake, glide or slide. Plaintext is not flashy enough and it doesn’t update. If another ten billion people visit the page you’ll never know it’s true popularity, at least not until you refresh (so 90′s). I know, all very pointless points but this is what I have to tell myself to justify such an endeavour.
To combat my frustration I decided to build an automated number ticker that updates using ajax to display the REAL-TIME pageviews of a MindTouch page. The ajax utilizes the MindTouch API to retrieve the latest pageview data. I used CSS to make the nice numbers which referenced this image.
The Number Ticker currently hits the API every 10 seconds. This can be reduced to savor server resources and should be a major consideration when deciding to use this script or not.
Lastly, I consolidated it all into one MindTouch template so it can be included into multiple pages. To create this template:
- copy the code below
- go to your template namespace (yourwiki.com/template:)
- create a new page
- view source
- paste and save.
Template Code
<h1>Template:AjaxCounterTicker</h1>
<input type="hidden" id="pgapi" value="{{page.api}}">
<div class="counter-wrap">
<div class="counter-number">
</div>
</div>
<div>
<style>
.counter-wrap {
height:18px;
overflow:hidden;
}
.counter-number {
height:198px;
width:12px;
position:relative;
background-image:url(http://developer.mindtouch.com/@api/deki/files/4548/=counter_ticker_bg.gif);
float:left;
}
</style>
</div>
<script type="text/javascript">
Deki.$("body").ready( function() {
getviewcount();
setInterval("getviewcount()", 10000);
});
function getviewcount() {
var pgapi = Deki.$("#pgapi").val();
Deki.$.ajax({
type: "GET",
url: pgapi,
async: false,
dataType: "xml",
success: function(xml) {
var pgviewnum = Deki.$(xml).find("metric\\.views").text();
loadticker(add_commas(pgviewnum));
}
});
}
Deki.$(".counter-number").each( function(i) {
Deki.$(this).attr('id','num'+i);
});
function loadinput() {
var newval = Deki.$("#numgo").val();
loadticker(newval);
}
function loadticker(ticnum) {
var numheight=18;
addticker(ticnum);
if (ticnum && ticnum != 0) {
var s = String(ticnum);
for (i=s.length;i>=0; i--)
{
var onum=s.charAt(i);
Deki.$("#num"+i).attr('value',onum);
}
Deki.$(".counter-number").each( function() {
var nval=Deki.$(this).attr("value");
if (!isNaN(nval)) {
var nheight = Number(nval)*numheight*-1;
Deki.$(this).animate({ top: nheight+'px'}, 1500 );
}
if (nval==','){
Deki.$(this).animate({ top: '-180px'}, 1500 );
}
});
}
}
function addticker(newnum) {
var digitcnt = Deki.$(".counter-number").size();
var nnum = String(newnum).length;
var digitdiff = Number(nnum - Number(digitcnt));
if (digitdiff <0) {
var ltdig = (Number(nnum)-1);
Deki.$(".counter-number:gt(" + ltdig + ")").remove();
}
for(i=1;i<=digitdiff;i++) {
Deki.$(".counter-wrap").append('<div class="counter-number" id="num' + (Number(digitcnt+i-1)) + '"> </div>');
}
}
function add_commas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
How to call the Template
{{AjaxCounterTicker();}}
If you have questions please post them as comments and I’ll be sure to respond. Thank you for your time.
Damien Howley
@DamienH
New skin: MindTouch Deuce
In MindTouch Lyons (9.02), we’ve finally pushed the Deuce skin into the public release. Because it hasn’t been fully vetted across all different browsers and platforms, it’s called “deucebeta” in your installs.
Here’s a screenshot of Deuce Beta:
If you’d like to try out the skin on a test site, check out trunk.mindtouch.com and navigate around.
You can find some of the known shortcomings inside Deuce Beta as well as some of the reasoning behind the skin on the Deuce wiki page.
I would love to hear your feedback on this new skin – please drop by the Deuce page and add some comments there! With your help, we can stabilize this skin and release the full production skin soon :)
Download Lyons Preview 3 and check out the skin today!
Fiesta CMS mode added to the Control Panel
About a month ago I wrote a blog post about Fiesta CMS mode and how admins can toggle on the CMS functionality via localsettings.php. From the feedback I received on my post it was obvious that users wanted this functionality to be accessible via the control panel. Ask and you shall receive!
With some help from Roy, I’ve added a Fiesta CMS mode configuration key. You can now enable CMS mode by going to Control Panel > Configuration > Advanced Settings and adding the following configuration key.
- KEY: ui/fiesta-cmsmode
- VALUE: true
Behavior
Fiesta CMS mode is designed to make your current Deki installation function like a CMS. All unauthenticated or “anonymous” users will only see the content area of the wiki excluding tags, files, images and comments. They will not see the dynamic side navigation, top navigation (edit page, new page) or the site navigation (control panel, my pages).
After authentication, admin users will experience Deki as they are typically used to with all forms of navigation and all page tools. The file manager and image gallery can be used to store files that will be accessible or embeded on particular pages. Comments can be used for internal communication amongst multiple CMS admins. Tags can be used to provide additional search data to particular pages.
Lastly the custom HTML areas that are accessible by going to Control Panel > Custom HTML are visible to the anonymous user allowing further customization of the CMS.
Settings Priority
As mentioned in my previous blog post, Fiesta CMS mode can also be configured via localsettings.php. As with any configuration key, settings specified within localsettings.php will take presedence over a control panel configuration key. If you define the CMS configuration in localsettings.php, regardless of whether it is true or false, the control panel configuration key will be ignored.
This feature is available in Deki Lyons Preview 3.
Thanks,
Damien
@DamienH
