Minimal theme: Advanced tricks and tips for the advanced blogger
bobleah 270000CN12 Comments (26) Visits (29112)
This blog post will cover some advanced techniques on customizing the Minimal theme template to add a lead space graphic and tab treatment to your developerWorks blog.
I will also dive into some common customization mistakes, share with you some tips on how to find and prevent them, and introduce an iPhone simulator you can use to test updates and customizations you make to the Minimal theme.
Some background on the Minimal Theme
The goal of the Minimal theme is to provide an experience that your blog followers will find intuitive, in addition to making your blog easier to read, find, and follow. This theme retains many of the standard blog template features, and adds quite a few new ones. Additionally, the Minimal theme is implemented with an adaptive / responsive interface, which provides full support for mobile and tablet views.
The Minimal theme template does not require any customization or updating, and is completely functional once applied, with no additional editing required. However, there are a number of best practices that will maximize the new features of this theme. Additionally, the theme can be further customized for bloggers who desire unique visual treatments or require more fidelity and control over the widgets provided within the theme.
If you have not already done so, I recommend you read the following two blog posts, that will explain how to install and configure the theme, along with a set of best practices to maximize the features of the theme:
>> New blog template for developerWorks
>> Maximize your blogging experience on developerWorks using the Minimal Theme blog template
The _homepage template
After applying the Minimal theme, you may have noticed that the theme includes an empty template named _homepage. This template enables you to insert HTML markup directly following the lead space area on all of your blog's web pages. I created this template with the hope that advanced customizations could be contained within this template, avoiding the need to directly edit the more complex _day and weblog templates. These templates in and of themselves are not overly complex, but they are tricky. Tip: If you choose to modify the _day or weblog templates, you must be keenly aware that both of these templates support four unique views within your blog:
If you modify the _day or weblog templates, ensure you test each view! It is not uncommon to break one or more of these views and not immediately notice it. Let's explore an advanced customization, which will leverage the _homepage template, simplifying our test efforts and lowering the odds that we will break the theme in a way not easily detectable or obvious to correct!
Adding navigation tabs
Adding navigation tabs is actually a simple matter, but care must be taken not to break the mobile views of your blog template. First, you will need to add a lead space image to your blog. I recommend a lead space image with the following dimensions: 1150px by 250px. This is the dimension that by default, the _css template comes pre-configured to support. This size also works best when the theme automatically scales your lead space image for smaller devices. Tip: Don't use a narrower or shorter image, as it will not provide enough contrast to maintain the legibility of the lead space on smart devices in portrait mode.
Create your lead space
To configure a lead space image for the Minimal theme, simply add an HTML <img> tag to the $tem
Now add the tabs
Create some tab images. In my example, I'm adding four "big button" images for my tabs, so the dimensions are 287px by 138px. You can make your tabs any size, just be careful that the number of tabs or buttons will fit within the maximum width you have to work with, which is 1150px. We will be scaling these images for smaller screen sizes, so for now, you only need to consider this maximum width. Tip: store your lead space tab images within your blog, by using the File Uploads feature.
Next, within the _homepage template, create a <div> tag and give it an ID, which you will later reference in your Media queries. The <div> element wraps the <a> anchor tags, which in turn wrap each individual "big button" image tab. The idea here is simple, invoke a unique URL when each button tab in your lead space is clicked.
Here is the _homepage template I marked up
Next, we will add and adjust the Media queries located in the _css template. You will need to do this in order to maintain the integrity of the mobile views supported by the Minimal theme. Note how I reference the ID of the HTML element (#homepage-bar in line 01. above) assigned to the <div> tag within the _homepage template. Tip: you do not need to create the @media elements, since they already exist within the _css template. Just be sure to add your new lead space elements to the correct media querie as demonstrated below.
The media queries update
You can use any size tab images that you want, but remember to adjust your media queries to match... as these dimensions will only work with my original 287px by 138px big button tabs. I also updated the #css-hero-banner element in the _css template, adding a gradient that matched my lead space image gradient. By following these steps you will have combined the five cut images (lead space and four buttons) into a seamless experience that blends with the #css-hero-banner background gradient. Additionally, the images will scale correctly from desktop through smart devices, giving your blog a professional look and feel regardless of the device your reader is accessing your blog with.
Here is the final resulting lead space
One final tip
For this example, please note the URLs I invoke within the _homepage template for each button. I have chosen to take advantage of the blogs TAG search to display a results page of blog posts tagged with particular keywords. This is a good practice, and allows you to setup topics or categories by TAG keyword, which are navigated by pressing the buttons on your lead space. You can also invoke a single blog post, or any web resource, by simply changing the reference URLs in the _homepage temp
While I really like the idea of a lead space image, adding tabs to your blog requires additional thought. I don't feel the need for tabs on my blog, and prefer the simpler trending topics treatment to group and elevate posts on my blog . If you decide that tabs will enhance the user experience of your blog, please carefully consider and purposely limit the number of tabs you plan to add. LESS is more! I would personally limit the number of tabs to two, but for this example, I was able to expand the tabs to four without overly crowding or complicating the user experience. Also consider how your blog will display in portrait mode on small devices. Remember your lead space must scale gracefully between a maximum of 1150px to a minimum of 300px.
Testing you customizations
Be sure to thoroughly test any updates you make to your blog theme, especially updates to your lead space area. I have created an iPhone simulator that you can use to test your theme in both landscape and portrait modes. Simply enter the URL to your blog and press enter to load it. Click the lower far right button on the iPhone simulator to toggle between landscape and portrait views.
Enjoy and happy blogging!