When I declared that Premium Themes Are Dead, I received a LOT of feedback arguing that there will always be a market for premium themes since they give you a head start on the design process.
My response was that skins for framework themes such as Thesis provide that same “leg up” on the design and layout, without sacrificing any of the flexibility.
And, while I firmly believe that, there is one slight problem… there just aren’t many skins available yet.
So in an effort to help my prediction about premium themes come true, I decided to create a free Thesis Skin that heavily mimics one of my favorite premium theme designs.
Ladies and gentlemen, allow me to introduce…
The Network News Thesis Skin!
Feel free to click around the demo site to check things out.
As those of you familiar with premium WordPress themes world will no doubt notice, the skin is based heavily on the Gazette theme by WooThemes, but offers even more flexibility.
Note: Let’s go ahead and get one thing out of the way right off the bat. I did not rip WooThemes off. Their themes are released under the GPL license and this is exactly the kind of thing the GPL is designed for. Besides they say, imitation is the sincerest form of flattery.
If you’re already comfortable using Thesis as well as the custom.css & custom_functions.php files using the skin will be a breeze for you.
If you’re not quite to that level yet, I’ve documented the process below in as much detail as possible. Please don’t let the length of the instructions intimidate you, I just wanted to make it clear enough that even someone new to Thesis can use the skin.
Requirements:
So what do you need for this skin to work?
Well obviously, you need to have the Thesis theme (and yes, that’s an affiliate link *waves to FTC*).
Also, this skin is also built for Thesis version 1.6.
I left comments within the custom.css file for those of you using older versions of Thesis, but you really should upgrade to the newest version.
You’ll also need to install the Dynamic Content Gallery plugin which will create the featured content slider on the home page for us.
Last but certainly not least, you’ll also need to install Greg Boser’s Thesis Import/Export plugin.
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.
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 netnews-thesis-options.dat file and click Import Options. Then do the same for the Design Options section by selecting the netnews-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
To display your logo instead of the big red block that’s there by default, you only need to make one simple edit to your custom.css file. Replace http://thesisdev.wpblogger.com/wp-content/uploads/logo-placeholder.jpg with the file path to your logo and save!
The default logo size is 384 x 100. The skin can easily accommodate a wider logo, however that will limit your use of the banner widget in the header .
If your logo is taller than 100 pixels, you’ll need to edit the height setting in the custom.css file one line above where you entered the image URL. You may also need to adjust the margin-top: value (currently set at -82px) for the sidebar_header in your custom.css file in order to keep it centered vertically.
Banner
The Network News was designed to incorporate a 468 x 60 banner advertisement into the header. To make use of the banner, add a text widget to the sidebar named Banner. Drop your banner code into the widget, click save, and you’re all set.
If you don’t want to use a banner, not a problem! Just don’t insert a widget into the Banner sidebar and the sidebar won’t be displayed.
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.
Setting the plugin up can be a bit tricky so I’ll try 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 (version 3.1), 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 content section, I set the width to 595. The height is up to you but I used 270. The rest of the settings are fairly self explanatory and I’ve included a screen shot of my settings for easy reference below.
click for larger image
Tip: Make sure my post images are cropped to the 595 x 270 dimensions so the images aren’t stretched or distorted in any way.
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!
I’ve said countless times that the best thing about the Thesis theme is the incredible flexibility it offers.
I’ve tried to capitalize on that as much as possible with this skin offering all sorts of widgetized areas that should make it easy for you to mix and match the different content you want to feature on your site.
I really enjoyed the process and plan on creating a few more skins so if you have any questions or suggestions please leave them in the comment section below!
{ 2 trackbacks }
{ 41 comments… read them below or add one }
Am I right in thinking that even though this is a skin, you still need to add CSS and HTML code to it to get it looking like this?
Cheers!
Danny.
Danny, the skin is actually only 2 files, the custom.css and custom-functions.php files.
You have to drop those two files into the “custom” folder in your Thesis theme, and then make the tweaks that I lay out in the post. If you don’t have the Thesis theme, this skin won’t work for you.
Nice skin mate!! Love it.
I will download when I get a moment and test drive it!! I agree, premium themes are dead!!
I’ve had a couple of questions about changing the color away from red.
If you’re using Thesis 1.5.1 you’ll only need to open up your custom.css file and do a search for #CC0000 (the color of red I used) and replace it with your desired color.
In Thesis 1.6 you’ll also need to edit the color settings for your Nav Menu in the Design Options panel.
Hey There,
Thanks for sharing this great Thesis skin! I actually had my site designed in a VERY similar fashion and deleted my Thesis folder by accident today. It turns out that I had backed up everything but the stylesheet but luckily your skin was there to save the day (and my site).
You can see my slightly edited version over at the following site:
>> http://www.themodernentrepreneur.com
Keep up the good work!
Daniel, glad you like the skin!
I’m hoping to be releasing more fairly soon since this one has been met with such great response.
really nice release, I really appreciate your efforts in creating such a nice looking theme for thesis.
Web Techy, I’m glad you like the skin. I’m working on another one now that should be available shortly. You might want to subscribe to our RSS feed so you don’t miss it!
Loving the detailed set up instructions. Working on it now – see how it turns out
Kudos for the free release! (once built you get link from site)
Rishil, no problem! When I have a few minutes I hope to take advantage of Grag Bosers new plugin which would make installation even easier. Gonna have to wait til after Pubcon though
Great job with the skins, I’m playing around with Network right now. I have no idea what I’m doing in general with design and CSS – could you tell me how to go about changing the header/logo? I see the part in the instructions saying to change the path to where my image is located, but I’m not sure how to define a path for an image i have on my desktop, not online. Does that make any sense? Would appreciate any help!
Dan, you have to upload the image to your server. You can do this by adding an image through the Media section of your WordPress dashboard. Then copy the image URL and past it in as directed.
Hi,
Thanks for the cool skin. I’m using it right now on two of my sites. I followed your directions to the “t” on my test site, and everything worked out great.
However, I’m running into one problem when I uploaded it onto my real site, hoopgainstraining.com. The featured content gallery isn’t showing on the home page.
I retraced my steps and have gone over the custom.css and custom_function.php to make sure I haven’t messed anything up there. It’s all checking out. Would you have any clue where else I could checkout to see if I messed up.
Thanks,
Ceasor
ceasor, I’m glad you like the skin. If you had it working on a test site but it won’t work now I’m guessing you have a competing plugin that’s causing you issues.
Any other plugin that uses JQuery could be the issue. I believe there’s a known issue with the lightbox 2 plugin but that’s the only one I know by name.
Other than that I’m at a bit of a loss since you had it running on the test site. If you run into a problem still let me know and I can take a look at the code while the theme is active but that’s about all I can do.
Love this skin especially the featured content slider & your instructions are great but I was wondering how I would go about switching the positions of the nav bar and the category bar (openhooks?) and also leaving the category bar blank (without breaking the page format) seeing as how the category column is already above the fold.
thanks
John
Definitely will be linking back to you once the site is up.
John, I’m glad you like the skin!
If you’d like to ditch the category bar you’ll need to remove the following code from your custom_functions.php file:
If you’d like to move the nav bar down, just move the nav function into the thesis_hook_after_header space.
Let me know if that helps, or if you have any other questions.
Hi Ben
Thanks for that!
Worked great once I took out the code (see below) in between the two lines you pointed me to… just removing your lines gave me an error message, locked me out of the dashboard etc and freaked me out
I’m new to css though so I expect to get freaked out every so often when something doesn’t quite work how I expect
One step closer to going live… thanks for your help!
John
extra code I removed:
John, sorry about that! WordPress ate some of the code in my comment. Glad you got it sorted out.
Whenever you’re editing the custom_functions.php file, if you screw it up, it will throw your site into the error you saw. It’s important to either work from a local copy on your machine, or to keep a backup handy
Thanks again Ben
but lesson learnt!
Today I learnt the hard way about keeping a recent backup handy when I installed a plugin after I did your edit that completely screwed up my site. Had to reinstall WP & start from scratch… I believe it’s called a learning experience…. hmmm
John
this is freaky awesome… Can it use as three column??????
@xphunt3r yeah, it handles three column just fine. I’m glad you like the skin.
wow! This looks like a great skin! I’m currently contemplating the purchase of thesis since I’ve been so frustrated with other themes that are so hard to customize without knowing code really well. Can you make that left picture a slide show? I’d like to incorporate something like this for my food blog & I want to make double sure it will be worth it since I’ve already paid out of pocket for a theme that isn’t user friendly and customizeable. Thanks!
@eating – you mean the big picture at the top of the page? That already is a slide show using the Dynamic Content Gallery plugin. If you take a look at the demo site for the skin you can see how it works.
Yes, Nice!! this is perfect thank you! Would I be able to do something like this http://londoneater.com/ with a bit wider page? And in order to get any skins I would have to have a developer’s account or would I be able to add a slider with a personal account? I think you’ve just convinced me to purchase & start experimenting, looks great and I love how you have a ton of other helpful tutorials for coding retards like me
@eating you can use any skin or plugins with a personal license of the Thesis theme. If you’re purchasing it, I’d love for you to do it via my affiliate link (the banner at the top right of the page).
The width of the site as well as the slider depend on your settings. If you want the slider to be the entire width of the site like in the example link you posted, you’ll need to change which hook you place the slider in.
When you get to that point feel free to contact me and I’ll do my best to help you out.
Of course I will, thanks! I’m not sure what ‘hook’ is, but will soon find out.
@eatingRD I think it’s probably time for me to put together a Thesis Theme Starters Guide for people just like you. I’ll start working on that but feel free to ask any questions you have either in comments on the tutorials, in the Thesis forums, or via my contact form.
There’s a bit of a learning curve but it’s WELL worth it.
That would be a great idea! I just downloaded Thesis and am trying to figure it all out. I had another question about this skin: Is there a way to just have a slider with random pictures that I like (not necessarily linking to recent posts) and then have the recent post snippets at the bottom like the one demoed? Thanks!
Finally got the error exposed in my previous comment. Your custom code is no longer available with the last DCG.
global $post; include (ABSPATH . ‘/wp-content/plugins/dynamic-content-gallery-plugin/dynamic-gallery.php’);
should be change for :
dynamic_content_gallery();
Nexus, sorry about that mate! DCG updated and I forgot to update the instructions accordingly. I’m going to be going back and updating the code in these skins here shortly but it’s been difficult to find the time lately.
I appreciate you giving me the heads up on this though & I’ve added a note to the instructions.
I’m happy if I could help a little.
I’m still having a problem, but it’s not the skin, it’s me and my very very basic skills with CSS : the widgets in the footer appear below each other instead of being next to each other.
What have I to do in the custom css please ?
I am a newbie. I have WP.org and Thesis 1.6 installed on my hosting site. I have not started my design because I want to use skins which look to be easier. I really like the Network News skin. I uploaded the skin but when I went to activate the theme it said I had a broken theme because I do not have the template or Style sheet. I used the file manager in Blue Host to upload. I did not use Filezilla. ould this be a problem. As I said I am new and I am a writer not a techie but I feel confidant once I get it loaded properly.
Had a look at you thesis skin , it looks swell. Heads up on a good job. Just wondering can one hide a category from showing in the category nav bar? If so let me know how, only things stopping me from using your thesis skin and getting it from your affiliate link.
Bob, my guess is that you uploaded the files to the wrong place or maybe haven’t changed the name of the custom-sample folder to simply custom.
I’d suggest checking that first and if that doesn’t work, posting in the Thesis support forum as they’ll be better able to assist you with that.
Gregory,
You can hid a category from showing in the nav bar. You simply add “exclude=4,7&” before the “title_li=” in the category_navigation function in your custom_functions.php file. The example I’ve used will exclude two categories, the ones using ID 4 & 7. Obviously you should customize this to exclude the categories you don’t want displayed but it shouldn’t give you any trouble.
Thanks!
Hey! that was real quick dude. Nice to know it can work the way I was looking at. Will get Thesis this weekend thru your Aff link
Have a good weekend and keep up the good work – helping everyone.
Great skin! Any instructions on how to include sub-categories in the second nav bar so that there’s a drop down effect?
I have uploaded per instructions but I am getting this error message. Why and how do I fix
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Network News Skin Stylesheet is missing.
thesis-settings-export Stylesheet is missing.
__MACOSX Stylesheet is missing.
Bob, it sounds like you might not have installed Thesis quite correctly. Did you change the name of the custom-sample folder to just custom?
Ben,
Thanks but I just figured out what I was doing wrong. Thanks
Bob,
Glad you figured it out! Are you willing to share in case anyone else runs into the same problem?