Thesis Skin for Photographers: Exhibit

Free Thesis Skin for Photographers: Exhibit

by Ben Cook on October 27, 2009

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:

Exhibit

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.

Requirements:

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.

Installation:

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.

thesis-export

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.

Logo

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.

dynamic-content-gallery-options

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.

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!

BUY THESIS | DEMO

{ 2 trackbacks }

Two New free Thesis Photoblog Skins
October 27, 2009 at 7:47 pm
Wednesday Web Wanderings – Thesis Edition
December 23, 2009 at 10:08 am

{ 29 comments… read them below or add one }

DennisG October 27, 2009 at 10:38 am

Wow, great work, and thank you for sharing.

The photo skin is not something for me, but if I would like to use the Network News skin, can I make small color changes?

thanks

DG

Ben Cook October 27, 2009 at 10:51 am

Dennis, you absolutely can make color changes. In fact it’s pretty easy just going through the Design Options and custom.css file and replacing the red color (I think its #CC0000 if I remember correctly) with whatever color you’d like to use.

RowdyKittens October 27, 2009 at 11:03 am

This is fantastic! I’m going to try this skin out on my photoblog. Thank you so much!

Ben Cook October 27, 2009 at 11:23 am

Hey thanks! You’ve got some great pictures there. Can’t wait to see how it works out for you :)

Oscar October 27, 2009 at 11:26 am

This is awesome. Thanks for the detailed instructions too. I’ve only worked with FCG before so this gives me an excuse to try a DCG. Thanks again!

Ben Cook October 27, 2009 at 12:14 pm

Oscar, no problem. Graywolf’s tutorial on DCG helped me a TON and I tried to explain any elements where I struggled with it the first time around.

ThesisTheme.net October 27, 2009 at 4:05 pm

Ben – Great job with this skin. Very clean and the focus is definately on the photots as it should be with a photoblog. I’ll be sure to include this in the skins section of my Thesis Resource site. Looking forward to seeing more skins in the future!

Ben Cook October 27, 2009 at 4:31 pm

@ThesisTheme thanks! Cant wait to see the finished product on your design as well. Looked very nice.

TrevR October 27, 2009 at 5:02 pm

This is a beautiful skin. I’ve followed every instruction and cannot seem to get the Dynamic Content Gallery to work (or the ‘teasers’) for that matter. Never have been able to get DCG to work with Thesis. Any thoughts? Site is http://www.uncork29.com/krjphotography/

Ben Cook October 27, 2009 at 7:38 pm

TrevR, glad you like the skin! There’s actually a few different issues that could be going on, can you post link to a screen shot of your DCG settings?

Michelle October 28, 2009 at 7:26 am

Ben, You just saved my “skin”! This is perfect for a site I need to revamp quickly…thanks SO much! Downloaded and will install tonight!

TrevR October 29, 2009 at 1:02 am

Ben–can I email you the screenshots?

Ben Cook October 29, 2009 at 3:24 pm

TrevR, sure! bcook at wpblogger dot com.

Tammy October 30, 2009 at 2:24 pm

I don’t have a custom logo for my photoblog yet. This is probably a silly question, but could I use the default header in the interim?

Thanks in advance! I can’t wait to try the skin out this weekend.

Ben Cook October 30, 2009 at 3:27 pm

Tammy, I’d recommend just typing the name of your website into paint or something and creating a logo that way. The one that’s displayed on the demo site has (your logo here) as part of the image and that wouldn’t look very good on your site.

RowdyKittens October 30, 2009 at 4:33 pm

Thanks Ben. I’ve never created my own logo before so I wasn’t sure how to move forward. Thanks for the suggestion! I’ll check Paint out.

Ben Cook October 30, 2009 at 5:03 pm

Tammy, there are all sorts of free image editors out there. You’ll just need to find a font you like.

I used white text with a transparent background and saved it as .png. Then upload your image and swap that file path out for the one I’ve listed in the custom.css.

robert November 2, 2009 at 7:33 pm

hi, about to use your skin, just working on the gallery – when the gallery is finished will my nav menu also be within the DCG?

RowdyKittens November 3, 2009 at 3:50 pm

Hey Ben – thank you so much for the skin! It’s officially up on my photoblog. I’m having some issues with the image slider, but I’m hoping to figure out how to fix the problem tonight. :)

Jennifer December 16, 2009 at 2:40 pm

Thanks for the great skin! It’s perfect for my WWII project!

But, everything stopped working when I updated DCG to v.3. According to the support forum, you no longer need to use global $post to call DCG. Once I made the code change they suggested, DCG worked fine again. It only affects those who have updated DCG to ver 3.

Ben Cook December 16, 2009 at 2:51 pm

Jennifer, thanks for the heads up! I’ll edit the post to mention the possible issue as well.

Koen January 3, 2010 at 3:43 am

Hey Ben, great work on the skin dude! I am testing it on a development project as we speak. This project has both landscape and vertical pictures so every post links to content showing those pictures. In your demo site every picture is landscape (in the teaser and in the post). You have any recommandations for picture sizes (landscape and portrait in the post itself)?

Ben Cook January 4, 2010 at 2:57 pm

Koen, glad you like the skin. The skin definitely handles landscape images better but it does ok with portraits as well.

If you have images that can fit the 955 width that looks really sharp IMO but in the end it comes down to personal preference. I’ve used this skin on one of my other sites (http://viralimages.com) and it looks good even with much smaller images.

Good luck & let me know how it goes!

Koen January 6, 2010 at 4:10 pm

Tnx for the reply Ben. My dev-project can be found at http://www.koencolpaert.net/dev/ The current sizing of the images is a remain of the former theme and I am searching for the best balance between swift loading and visibility.

Lovinthistheme! January 19, 2010 at 2:39 pm

I really like this but for some reason I get an error lacoralina dot com / blog thank you for any assistance you can provide me with :)

Ben Cook January 22, 2010 at 5:41 pm

I’m guessing you didn’t tell the plugin where to find your images in one of two places. I’ll email you to try and walk you through it. Glad you like the skin!

amanda January 24, 2010 at 2:32 pm

Hey I was the lovinthistheme comment :D Do you have gtalk or something maybe I can figure this out myself I’llt ry again.. or else email me @ this address when you have time :)

Thanks!

amanda January 24, 2010 at 2:45 pm

i think the issue is my upload folder, does it have to be chmod other than 755 or something?

Ben Cook January 25, 2010 at 3:44 pm

Amanda, no your upload folder doesn’t have to be anything other than 755. You do need to make sure that you’re pointing the DCG plugin to the correct upload folder though AND that you’re entering the special dfcg-image as a custom field. Are you doing both of those?

Leave a Comment

Previous post:

Next post: