In my continuing effort to provide quality pre-coded designs for the Thesis community , and after the success of my first skin, Network News Skin, I’ve decided to release another free skin for all you Thesis theme users out there.
If you’re not yet using the Thesis theme, I really don’t know what more I can do to convince you to buy it. My endorsement has only grown stronger since my 4 out of 5 star review, and as evidenced by these skins, it has helped me learn CSS at a rate I never thought possible.
Besides, without Thesis you can’t make use of all these kickin’ Thesis skins I’ve been working so hard on lately 😉
This time around I decided on a completely unique design that would cater to photographers, artists, and just about anyone else that would want to showcase their work. I present:
The image above should give you a pretty good idea of what the skin looks like but I’ve also set up a Demo Site so you can take a look around and see if you like it.
Once again, if you’re already comfortable using Thesis as well as the custom.css & custom_functions.php files using the Exhibit skin will be a breeze for you.
However, if you’re not quite to that level yet, that’s ok! I’ve documented the entire process, from installation to actual use of the theme, in as much detail as possible.
Note: Please don’t let the length of the instructions intimidate you, I just wanted to make it clear enough that even someone brand new to Thesis would be able to use the skin.
As I already mentioned, you obviously need to have the Thesis theme for this skin to work. Also, this skin was designed for Thesis 1.6 which is out of beta and has been released to all Thesis owners. While the Network News Skin was backwards compatible, I’ve not gone to that length with this skin.
Besides, you should upgrade anyway.
I’ve also once again made use of the fantastic Dynamic Content Gallery plugin that allows us to achieve the “slider” functionality without a ton of coding of our own. I’ve updated the skin to use version 3.1 so be sure you have the latest version.
And last but not least, you’ll need to install Greg Boser’s Thesis Import/Export plugin. This will save us a TON of time in configuring the skin.
In order to download the files for the skin you’ll need to enter your name and email in the form to the left.
Don’t worry, we won’t be spamming you or anything like that. We simply want to be able to alert you when we update the skin or release a new one you might be interested in using.
Anyway, once you’ve confirmed your information you’ll receive an email with a link to download a zip file.
Unzip the files into a folder that will be easy to find later.
Upload the custom.css, custom_function.php and layout.css files to the Custom folder, over-writing your current versions. While I didn’t make any edits to the layout.css file, it would be best to upload the version I’ve provided just to make sure we’re all starting from the same place.
Tip: Always save copies of your current files before uploading the new versions. They’ll act as a safety net of sorts in case anything should go wrong or you make a mistake.
Next you’ll need to install the Thesis Import/Export plugin. You can do that quickly and easily by going to the Plugins/Add New link in your WordPress sidebar.
On the Thesis Import/Export page (as seen in the screen shot above), you should be sure to download your current settings and save them as a backup. That way you can always go back to the design you have now if you decide not to use the skin for some reason.
After creating your backups, select browse under Thesis Options and select the exhibit-thesis-options.dat file and click Import Options. Then do the same for the Design Options section by selecting the exhibit-design-options.dat file and clicking the Import Options button to the right.
Warning! Importing these options will overwrite any of your current options. However, it also saves me from having to explain every single option I’ve clicked as I did with previous skins.
Once the settings have been imported, I recommend deactivating the Thesis Import/Export plugin until you need it again. The last thing you want to do is get your site set up just the way you want it and then accidentally overwrite something.
Displaying your custom logo instead of the default Exhibit image requires just one simple edit to the custom.css file.
Simply replace http://exhibit.wpblogger.com/wp-content/uploads/exhibit-logo.png with the file path to your logo and save!
The default logo size is 955 pixels x 75 pixels and is a transparent png. You don’t have to use a logo this wide, and the theme can accommodate taller images as well, but you will need to edit your custom.css file if using an image that’s not 955 x 75.
Featured Content Slider
Last but certainly not least, we need to get the featured content slider working. Michael Gray has an amazing tutorial on how to create the slider and it’s actually his code that I’ve incorporated into the skin.
Note: The code on Michael’s site is slightly out of date. We’ve gone ahead and made this change to the code so be sure not to over-write it.
However, I do need to walk you through a few of the items that are specific to this Thesis skin.
Once you’ve installed and activated the Dynamic Content Gallery (DCG) plugin, you’ll need to go to the DCG settings page and skip down to step 3 to specify what content you want to feature.
DCG gives you 5 “slots” to feature in the slider and allows you to mix and match how you want those slots distributed. Rather than mixing and matching across several categories, I just created a Featured category, and inserted the category id (in my case 5) into each of the 5 category id spots.
Since I want to display the last 5 posts from that featured category, I simply numbered 1 through 5 in each of the post select boxes.
Steps 4 & 5 let DCG know where to find the images you want to use in the slider. I’ve input /wp-content/uploads/ in both fields since that’s where my images are stored.
Tip: WordPress defaults to managing your uploads into month and year based folders. Unless you want to be continually updating this setting in DCG, I recommend unchecking that box and forcing WordPress to store your images in one large folder.
Step 7 is where you’ll need to set the desired width, height, and colors for your slider. Since I want the slider to take up the full width of my site, I set the width to 955. The height is up to you but I used 500 as I think it provides the best ratio for most images. The rest of the settings are fairly self explanatory and I’ve included a screen shot of my settings for easy reference below.
Tip: Cropping your images to match the settings of your slider (in my case 955 x 500) will make sure the images aren’t stretched or distorted in any way. It will also avoid any cropping issues when Thesis generates the thumbnails to display in the Teasers on the home page.
Once you’ve entered the desired settings, click the update options button to lock them in.
Before the slider will work you’ll need to a) make sure to save a few posts into your featured category and b) create two custom fields on each post you want to display in the slider.
The fields are as follows:
- Key = dfcg-image with a Value = Image filename including extension eg. myImage.jpg
- Key = dfcg-desc with a Value = Description text eg. Here’s our latest news!
After you enter each of the custom fields once, WordPress will automatically remember them for future use. When you want to put a new post into the featured slider, just make sure you add those two fields.
Also, make sure you only include the file name of the image in the dfcg-image field. The plugin is already set to look for the images in your uploads folder so you only need the myImage.jpg portion of the file name.
Customize to Taste
Since this skin aims to cater to the artistic community I fully expect you to want to make significant changes and customizations to the skin.
I’ll try to help you through the more common issues you may encounter but I simply don’t have the time to answer all of the questions and issues you may encounter when heavily changing a free skin. Although, leaving the attribution link in your footer will definitely help your chances of getting some support for the skin. 😉
Fortunately, the Thesis support forums are absolutely top notch and I’ve never failed to get the help I needed. That’s one of the things that makes Thesis great so be sure to take advantage of it!