Matt Industries Skin For Thesis

Download Matt Industries Skin for Thesis Here!

Installation Instructions:

1. Download and unzip from link above.
2. Rename your current custom.css file something like custom-old.css. Then upload the new, Matt Industries custom file [to domain.com/wp-content/themes/thesis_16/] you got from unzipping.
3. Thesis Options→Design Options→Framework Options→Outer Page Padding. Set to 0 [zero].
4. Thesis Options→Design Options→Multimedia Box→Select ‘Do Not Show Box’
5. Thesis Options→Design Options→Site Layout→Columns. Select 3 Column Layout with Content=507px, Sidebar1=248, Sidebar2=149px
6. Optional: From Wordpress Dash go to Settings→Reading. In this area set ‘Blog Pages Show at Most: 4
7. The following show some suggested font families and required font sizes:
   • Content Area: 14pt
   • Nav Menu: Helvetica, 11pt
   • Header: Helvetica, 36
   • Tagline: Inherit from Header, 14pt
   • Headlines: Helvetica, 22pt
   • By-lines: Lucida Grande, 10pt
   • Sidebars: Helvetica, 13pt
   • Footer: Inherit, 12pt

Remember! Content is restricted to an area that is 450px wide! In the near future the content area will be dynamic.

About Matt Industries Skin

I have been waiting to drop a Thesis Skin for a while. So, I decided there could not be a better time than now!

With the release of Thesis 1.6 and it’s new menu class system, the Matt Industries Skin needed a little tweaking. So, I set out to understand the new menu class system in order to make the Matt Industries Skin Thesis 1.6 compliant. I was incredibly impressed with the new system, to say the least.

The Matt Industries Experiment

The Matt Industries Experiment is simply this: I want to show that the coolest designs on the web, if not already made with Thesis, can be. But, let’s make sure that the record stays straight. All of my skins will be “in the style of __________.” Does that mean I just go and copy files from someone’s site? Heck no. My code is 100% original. I tackle problems from a usability/extensibility point of view.

Thesis tackles 90% of the work in web design and it is an epic SEO powerhouse. As of 10/21/2009, 12:51pm EST a site made on Thesis is the fourth search result for a Bing search of “twitter.” That is amazing, folks. The point is all you need to do is tweak the design of Thesis; there is an underlying framework spitting out TONS of code that you don’t ever touch. In order to get the most out of Thesis you must learn to work with the Thesis code and not against it. I assure you that it is far better than anything you or I will ever write.

I digress.

There are a few nuances in Thesis that I had to account for when making the Matt Industries Skin. One nuance is that Thesis, for good reason, does not extend the sidebars all the way to the bottom of #content_box unless there is content in the sidebars that fills in the area. That means in order to get the effect of the long sidebars I had to get creative.

First, I decided to position background images to get the sidebar effect. Then I wrote a program that actually makes .gif’s so you can change the color of the sidebars by simply entering a hex value. Genius, I thought!

The hover triangle in the menu was my next challenge because I needed it to also be easily color-changeable. At first I tried using PHP to draw the triangle, but it came out wonky and looked silly. So I made a small, white triangle in Photoshop and put it in the images folder. I then wrote another little program that will change the white to any color I specify.

For the three areas above the content and sidebars, I simply hooked in some divs into place and lined everything up.

The last thing I addressed was the category tags and number of comments displayed for each post on the blog home. I used some simple code to move those around and have them display what I needed. I also changed the way comments look on a single post page, which was nearly 100% a CSS issue.

All in all I think that I made a great skin that is completely color flexible and looks awesome!

Here are some facts about the final product of this skin:

• The area where actual content will go is 450px. For pics to look good in a post, make them 450px wide.
• The sidebars are the same width displayed in Thesis.
• You must change the colors for the sidebars and the triangle in the custom_function.php file, which is now easily accessed through the Custom File Editor.
• For now, many color changes will have to be made through custom.css

Disclaimer:
This design is based on Mike Davidson’s site. I did not copy a single file of his and there are many aspects of his site that I did not emulate. Although the outward appearance of his site and my skin are the same, the underlying code is entirely different. This will be the first in a long series of skins in which I will emulate another site using Thesis.