Collis Ta’eed, Chris Moyer and I successfully launched the new PSDTUTS web site today!

Wow what a Wordpress theme that was. Thankfully everything went off without a hitch and the new theme has found a home on the net. Apparently when I turned off maintenance mode the PSDTUTS community was waiting, comments have been rolling in all day about the upgrade and it seems to be an overwhelmingly positive response to the changes Collis and I made to the themes design and functionality.

If you are not familiar with PSDTUTS or the Envato TUTS network of web sites then the basic run down is they are awesome tutorial sites for us design and web types. The network is made up of a Photoshop, Illustrator, Internet and Audio tutorial repository for the most creative of us to get lost in and with talks about a few more additions to the family things are going to get pretty hectic over at Envato expanding and adding new authors and services for people to enjoy on a daily basis, wow that’s a lot of work. But hey, that’s what it’s all about, right? Growth is the single most important part of having a business, so cheers to that.

Added Options

Here are a few of the upgrades and changes to PSDTUTS that made it freaking awesome.

• Tabbed Navigation
• Breadcrumbs
• Author Profiles
• User Link Feed
• Relating Posts with images
• PSDTUTS Login on the Page
• Free downloads section
• Video tutorials

There are more little tweaks here and there that really set off the way the site works from a usability standpoint that just makes it better overall. It truly is an improvement over the last version, but if you didn’t ever see it you can see some screen shots of the last three versions before this one in the launch article Collis wrote regarding the theme switch.

Well, I’m off to get some work done and suggest you head over to PSDTUTS for a few lessons on getting to know Photoshop or check out NETTUTS fro some great web related tuts.

Well, Vesper Dark is pretty much exactly the same as the original theme named Vesper. The only real differences are in the header colors. A lot of what I am about to say is copied from the original post but here goes again anyhow.

Just like the original, Vesper Dark is a free widget ready 2 column fixed width template written in valid standards based code for the Wordpress content management system. Vesper Dark supports second level subpage navigation that is very similar to our own here. Basically, if a top level page has child pages it will display them in the sidebar when viewing that page, even if you have widgets enabled.

As well, Vesper Dark has support for a more advanced paging navigation through the use of the wp-pagenavi plugin. The template has the pagination style built into the style.css file and removes the call to the default CSS file that comes with wp-pagenavi by a simple remove action in the functions.php file in the Vesper directory, so everything should work right out of the box.

In addition, Vesper Dark is Wordpress 2.6 compatible and should also work in previous version but has only been tested in 2.3 and above. You can download the latest version of Vesper below and play around with it. If you have any questions, found a bug, or think there is room for improvement to the code please leave a comment.

Screenshot

Download

• Download

Installation

• Download Vesper Dark
• Unpack the zip file
• Upload the ‘vesper-dark’ folder and all of its contents to the ‘/wp-content/themes/’ directory
• Activate the theme through the ‘Design’ menu in WordPress
• Download the wp-pagenavi plugin by Lester Chan
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Done, enjoy!

Features

Features include: Excerpt Reloaded; WP-Pagenavi; Recent Posts; Widget-Ready; simple, clean, organized layout; Valid HTML; Valid CSS.

We love giving back to the open source community and thought what a better way than to build a beautiful template. Vesper is a free widget ready 2 column fixed width template written in valid standards based code for the Wordpress content management system. Vesper supports second level subpage navigation that is very similar to our own here. Basically, if a top level page has child pages it will display them in the sidebar when viewing that page, even if you have widgets enabled.

As well, Vesper has support for a more advanced paging navigation through the use of the wp-pagenavi plugin. The template has the pagination style built into the style.css file and removes the call to the default CSS file that comes with wp-pagenavi by a simple remove action in the functions.php file in the Vesper directory, so everything should work right out of the box.

In addition, Vesper is Wordpress 2.6 compatible and should also work in previous version but has only been tested in 2.3 and above. You can download the latest version of Vesper below and play around with it. If you have any questions, found a bug, or think there is room for improvement to the code please leave a comment.

Screenshot

Download

• Download from the Wordpress.Org Theme Directory

Installation

• Download Vesper
• Unpack the zip file
• Upload the ‘vesper’ folder and all of its contents to the ‘/wp-content/themes/’ directory
• Activate the theme through the ‘Design’ menu in WordPress
• Download the wp-pagenavi plugin by Lester Chan
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Done, enjoy!

Features

Features include: Excerpt Reloaded; WP-Pagenavi; Recent Posts; Widget-Ready; simple, clean, organized layout; Valid HTML; Valid CSS.

We can all agree that having a secure web site is very important but what people forget is that you need to actually do a little work to make it that way. Yes, Wordpress does a good job of doing a lot of the heavy lifting for us, but there are always ways to improve. This post is dedicated to the simple but affective solutions for enhancing your sites security and lowering your chances of being hacked. Mind you if someone is determined to get in there isn’t a whole hell of a lot you can do to stop them, but there is a lot you can do to deter them hopefully just long enough to move on.

Always use the most recent version of Wordpress

Make sure you update your version of Wordpress when an update becomes available. The main reason for this is because some people are not like the rest of us morally obligated humans. They spend a great deal of their time finding our sites vulnerabilities so they can insert malicious code or even take it over. When Wordpress comes out with an update it is usually to fix these holes and make your site more secure. I know the process of doing this can be a bit laborious and for some just not an option. For that reason you should visit Techie Buzz to download their Wordpress Automatic Upgrade Plugin which automates the process and makes backing up and upgrading your Wordpress super simple.

Change the default Username & Password

You should never use the default username or password that is given to you when you set up Wordpress. First, sign into the administrative section of Wordpress and reset your password to something at least 10 alphanumeric characters long. Also, be sure that is not a real word but a combination of two or more and a number or acronym. Make them work for it, right? You can also check out an article on blogherald called Protect Your Blog With a Solid Password that is of some use. Second, sign into the PHPMyAdmin through your web servers account center and change your username from “admin” to something much harder to guess. If you leave the username as “admin” you have basically made a hackers job that much easier because half the work is done.

Login Lockdown Plugin

Login LockDown is a useful plugin that monitors the login attempts to your site. Basically, it checks how many times in a short period the same IP range has tried accessing your administrative files. If, in that period of time, they exceed the number of attempts allowed, Login LockDown will essentially lock them out and no more access privileges for the period of time you previously set. This is good for deterring brute force attacks on your username and password.

Protect your Wordpress wp-admin folder

A simple but powerful plugin that adds a 2nd layer of security to your site by requiring a username and password to gain access to anything in the /wp-admin/ folder, is AskApache Password Protect. It’s really easy to use, all you need to do is create a second username and password and bam, you got some more protection. It works by writing a new .htaccess file for that folder, and encrypts your new password. It’s super simple to use and highly recommended.

Backup Your Posts/Pages and Comments

This is to make certain that your able to revert to an earlier clean version in the face of disaster. I could suggest a plugin or two but am not going to because I don’t trust them. I think you should always do a full manual database backup as often as you feel necessary and use the export feature in newer versions of Wordpress to do a basic backup between full database backups. Always save your files in a couple of location in case one gets corrupted so you don’t loose your mind later.

Loose the Wordpress version string.

Displaying which Wordpress version you are running can leave you vulnerable to attacks. Hackers usually run attacks based on specific versions because there are know issues they can exploit. If you are proudly showing the your version it could actually bite you in the ass. Make it harder and keep them guessing is always my motto.

Below you will find two perfectly good ways to manually change your version or make it disappear altogether. However, I wrote a Remove-My-Version plugin for Wordpress a couple days ago where you don’t have to change any of your files directly, for all you lazy folks. This works by either making the meta generator completely go away or by replacing the wp-version with a random alphanumeric set of characters. So it will work for everyone, even if you haven’t upgraded yet, which you should!

Old way, below version 2.4
Open header.php and find the line that looks like the text below and change it or delete it all together.

Change:

To:

New way, version 2.4 & above
The Wordpress version generator was moved into the core and standardized, since so many themes did it differently. You can remove it by adding this to your theme’s functions.php:

Make a blank index.html for the /plugins/ directory

If you view http://www.yourdomain.com/wp-content/plugins/ in your browser you will see a directory list. This is problematic because someone could potentially look at your plugins and see if you are using one with known security vulnerabilities and exploit them. Just make a blank index.html and put it in the /plugins/ folder and this is all fixed. Pretty cut and dry.

Block search engines from crawling your wp- folders

There is no reason you need to have all of your Wordpress files indexed, so it’s probably just a good idea to block them so when people search they don’t see those files. You can block search engines from crawling your wp- folders by blocking access via robots.txt file. Simply add this line:
Disallow: /wp-*

Lock It Down

Well, I hope you found this informative and useful and I want to also mention that there are more ways to secure your site and this is by no means an exhaustive list, but more of a jumping off point. happy securing folks.

In this tutorial I am going to explain some of the pitfalls and offer you a solution for tabbed navigation that has been tested and will render exactly the same in IE5.5+, Firefox, Opera, Safari and Netscape. We will write only valid CSS level 2.1 for this demonstration. However, where things may be slightly different than other tutorials is the use of a small JavaScript snippet that helps to correct the anchored CSS image hover issue in IE5.5 and IE6. This is to correct the hover state of your tabs and force them to render correctly. The only problem is if the users JavaScript is turned off the hover will not work in those browsers, but it will still look like the tabs above.

A side note, this markup and CSS is designed for the Wordpress CMS and uses its built in CSS classes to define the current active page and show an active state. However, this will work for any CMS or system you currently implement. The only changes that need to be made are anywhere that “current_page_item” is used change it to reflect your CSS class (i.e. active). Everything will work just like before but now with your new classes for the currently active page.

Sliding Doors Gone Wild

Some of the ideas behind this technique come from Douglas Bowman’s article on the popular A List Apart web site titled “Sliding Doors of CSS.” However, where we differ is with the hover state. Obviously the CSS is different too and I like to think mine is a bit more modern because it allows your tabs to have state change, where as, the original Sliding Doors did not allow anything more than the active tab.

Semantic Markup

First you will need to create a .html or .htm file in your favorite editor (I prefer Dreamweaver CS3), then you will create a header <div> that will hold your navigation and next add an unordered list <ul> to hold the links inside the header. Below you will find the HTML markup for the menu.

You’ll need to replace the href=”#” to point to the proper url and change the “Link” text to reflect the pages on your site. This simple code will create a very basic navigation list, but completely style free. If you loaded it in your browser you would see a very unattractive bulleted list of links. Don’t worry we will get to make it look nice in a few more steps.

The Images

As you can see here, portions of the images are hidden and only are displayed when the text size is made larger, making the tabs fluid and unbreakable for the most part.

I have included in the zip file an Adobe Photoshop tabs template where you can edit the gradients to match your site so you don’t have to try and rebuild the navigation from scratch, juts edit the color. You will need three images for the navigation to look like the example at the top of the page. Two images for the tabs (left and right), and an image for the navigation background, in this case it is a solid 1×1 pixel to give the navigation a bottom border and still allow the active tab to spill over and cover the border. Basically this will let you create a way to do what we did in our navigation, more about that later.

One more thing about the images before I move on to the CSS, when you save your image files make sure that the left image doesn’t have a transparency. What will happen is the right image will show through behind it and you will loose your rounded edge on the left side. I like to save both the images with a solid background color in that tiny space up in the corners so there isn’t any problems later. And now for the goods!!!

The CSS

These are the basic CSS resets & styles for the wild card & body tags. The font is set to 62.5% to reset it to 10px and allow us to resize things using em’s where 1.2em would be 12px.

This block of CSS deals with styling the “header” division. The navigation is sitting inside of this header so we will set it to position: relative; which allows us to manipulate the the navigation to exactly where we want it down to the pixel. You can change the height to anything you want and the navigation will remain stuck to the bottom. However, if you use “em” the height will expand but if you use “px” to define the height it will remain constant while everything else expands. The background image is a 1×1 solid pixel that is repeated on the x axis to form a bottom border.

Now here is where the navigation style starts to take place. We first set position: absolute; to allow us to move our navigation around at will. Since the parent division (header) is relative the absolute position of the navigation is relative to that. Meaning bottom: 0; is the bottom of the header division and not the page. The z-index just make sure that nothing gets in the way of our navigation. We certainly don’t want something from another element leaking in and not allowing us to click a link. The * html #navigation portion just targets IE6 and 5.5 to set the position, otherwise there would be a crack in the navigation by one pixel in IE5.5. The first rule sets IE5.5 and fixes the problem and the second one sets it back for IE6 so it doesn’t break that browser.

Here the <li> tag is getting styled. To make the standard vertical list into a horizontal one, we have to float each list item to the left. This will cause the list items to stack horizontally side by side. The margin on the left is to give your tabs some space between them. The background is set to no-repeat with a position that reads right top corner for those interested. The font is set to 15px and not 1.5em’s to allow browsers to shirk the font as well as expand it.

This anchor <a> tag is floating left and set to block to allow the <li> tag to wrap around it and shrink to its size which is set to 1.8em for normal browsers and 2.4em for IE5.5. This has to do with the box model and how padding is handled in IE5.5. It’s a little out of the scope of this tutorial but rest assured that this make it look the same height as all the other browsers. The padding is top right bottom left and should be pretty self explanatory. It pushes the text into the middle for those who don’t know.

These last set of selectors are mostly to position the tab images during resting, active and hover states. One important thing to note is when the padding on the bottom is set to 1px it will bypass the header image that acts as a bottom border for all the resting tabs and spill the active and hovering tabs beyond the edge of the division by 1px, which is just enough to cover up that bottom border. Everything else is just color or the position of an image. To demonstrate, if the image says 0% -150px it means all the way left and down 150 pixels to the top of the hover portion of the image. The reason the image is one and not two different images for separate states is because two images have a tendency to flicker. If you put the images together and utilize the positioning you can avoid any flickers in your sites images when they hover and it also loads faster.

The JavaScript

The only reason for this is to make IE6 and 5.5 hover.Otherwise you will have a menu that doesn’t change the position of the image and doesn’t properly function like we want it to. The JavaScript is very small and should go in the head of your document. If you don’t know what to do, there is a full working version of this menu that you can download below with the JavaScript implemented properly.

The Wrap Up & Download

So hopefully you read the post and found it interesting and are now downloading the files so you can edit the .psd file and change your colors and get started playing with your new menu. And hopefully you didn’t just skip my whole article and go straight for the goods. Anyhow, I hope this was informative and can solve a problem you were facing with your navigation. I know this is years of experience all wrapped up in a little neat little zip file all completed and ready to use, but me personally, I would miss getting my hands dirty. Anyhow, have fun and let me know if you launch a site using this navigation, I would enjoy seeing your take on it.

• Download Files

The Remove-My-Version plugin is very simple and works in all version of Wordpress but just differently depending on what you have. In versions before 2.4 it will change the version to be a random string of alphanumeric characters. However, in newer versions it simply removes it all together. In addition, the plugin changes the wp-version in your feeds for all installations for added security.

Installation

To install the plugin just upload the remove-my-version.php file to your wp-content/plugins/ directory and activate it through the administration panel. This plugin requires no configuration, it just works.

Download

You can download the latest version (1.0) from the following link:

• Download Plugin

Remove-My-Version
by Derek Herman is licensed under a
Creative Commons Attribution 3.0 United States License.

Basically you have your typical browser window when you first open it up, but when you type a URL into the address field, an image of the site you’re looking for pops up in a smaller window in the center of the screen. As you open more windows, they arrange themselves in a sort of a 3D line up staggered on top of each other one after another from left to right on your screen as you click from one image to the next.

I came across SpaceTime a few months ago by accident, while you guessed it, randomly searching the internet. The free software is amazing in its attempt and seriously elegant but still has some bugs that need to be worked out before I would suggest this for public use. I wanted to take it for a test drive and see what was under the hood and I was pleasantly surprised of the capabilities that it possesses; after my brief spin around the block. However, as a pretty net savvy individual, I think regular browsing with SpaceTime lacks a bit in its execution. When you type a URL directly into the address field it opens a smaller window that you need to double click in order to get where you’re trying to go. Unless you are using the built in search features for Google, Flickr, YouTube, eBay, and more the browser lacks that normalcy you need for everyday browsing.

SpaceTime requires a fairly powerful configuration of your computer systems hardware–512MB of RAM, a 3D graphics card with 128MB of onboard memory, Pentium 4 2.4GHz or AMD 2400xp+, and a screen resolution of at least 1280 by 1024. I used the program on a desktop with 1GB of RAM and an nVidia GeForce 7600 with 256MB of RAM, and the application still gave me a decent amount of lag. The images of Web pages are somewhat fuzzy and take a decent amount of time to render if the internet connection isn’t tip top.

Overall I think this is a great step forward but needs some more work before I make it a permanent fixture in my internet arsenal. I believe it’ll be a driving force in the 3D browsing arena in the near future, so keep a look out. Till that happens it’s a great toy you can tinker with, but let’s face it I’m not giving up my Firefox.

Now, with that said it’s inevitable that you will encounter a client or two in your business dealings that has their role confused with being your best friend. You know how hard it is to get your friends to pay back money they owe you right, well add a zero or two and see how hard it gets to get them on the phone. For that very reason I wrote a few tips on how to be a better client and this also pertains to how to run a better business.

Payment is pretty much expected (On Time).

Problem: As business owners we are all expected to pay our bills, period. Sometimes in this industry clients forget that us web types are running a legitimate business that pays taxes, employee salaries, overhead, and numerous other expenses I will spare you from. Clients, it is your responsibility to be aware of what you can and can’t afford. A good design/development company or freelancer cost more. It’s a fact, in this business you get what you pay for. So be prepared to pay your bills without hesitation. Seems pretty much like a no brainier, right?

Solution: Most important above all else, if you feel like the project budget is out of your clients’ ability to pay DO NOT build it. Be aware of how much is too much for your client. Don’t just jump into a project without first properly doing your homework on someone you plan to devote your time too. Next, you need to be able to except credit cards. This means establishing a merchant account or something like Paypal. It is important that you can receive payment in any form they can give it to you. After you have that set up, go get a Freshbooks account, or something like it that sends invoices and has an API to connect to and way for clients to make payments and keep track of those payments. Pay attention this is very important, use your accounting/invoicing software for every project regardless of size. Why? Because you want to have a paper trail so you can keep track of your receivables and expenses in one very simple to use place. As well, if a client has a contract and has been invoiced they are legally obligated to pay. It’s just good practice to keep records especially during tax time.

Content is your job!

Problem: If you are in the market for a web site and don’t have content, tell us before hand. We need to know these things so we can plan accordingly and because without fail we will get your site fully functional with filler content and you are nowhere to be found. Even though last week you were rushing the project calling every hour asking “what’s the ETA for the launch”, basically you want it now and quicker than expected but don’t want to actually do any of the work you are required to finish. What it boils down to is, write your content and give it to your web master when they need it. Not to point fingers but it usually is your fault that the project isn’t done on time. And also, remember that you signed a contact and most of them do say that you are required to supply content by a given date and if you don’t you are still obligated to pay. So it’s in your best interest on every level to give us the goods. Most companies will not just stop work and invoice you if you have not finished your content but they actually do have the right.

Solution: Talk to your clients during the proposal stages and make sure they have content either from an existing site that is being redesigned or they have it written. If they have not written it yet clearly outline when it is due in the contract and remind them regularly but politely. There are many ways to do this but a good unobtrusive one is through the use of project management software and document version control (we have our own but Basecamp is a good alternative). This way the files are there and they can sign off on each of them before the due date and there is no confusion about content. Now that’s specfreakintacular.

Know what you want, before hand.

Problem: If you went to a doctor and sat in his office and said, “Well doc I’m not sure how I’m feeling and I think you need to decide for me,” what do you think his answer would be? “Well, Mr. Client you need to be a whole hell of a lot more descriptive if you want me to be of any real use to you,” is probably a reasonable answer. Long story short, yes a good designer can make great designs that other designers wish they could do but they still need to know what you like. We can make you a site that tons of people would love to have but might not be what you are looking for. Remember this is your site and you should give some feedback on how it looks. It’s not like going up to the bartender and saying, “surprise me!” You’ll end up with a cement mixer (look it up its disgusting).

Solution: If you want your clients to be happy in the end, make them talk at the beginning. Yes, I know you need the cash and think if you can just get started then you will be ok, but not true. The less of a dialog you start off with the further from their vision you will get, trust me they have one but have a really hard time saying it. Pull it from their heads with simple questions that frame the project and both of you agree on the direction. This is very important, ask them for at least 3 links to sites they like so you can see their taste. I bet what you like isn’t always the same and don’t ever forget they hired you.

Well, if you’re still with me I’m gonna wrap it up with this. You can tell that this is a pretty common sense list of 3 basic problems and hopefully useful solutions and it is not exhaustive by any means. Clients, just remember that communication is going to get you the product you want and help us build the sites people love to visit. Everybody likes a well designed and thought out site. Oh, and pay your tab, or next time I see you out at a bar I’m gonna order you a cement mixer. Cheers.

1) Start with the artwork for the cover. Open a new file and set the image size in Adobe Photoshop to 510×592 pixels and design a beautiful cover for your book. Don’t worry, we will be going from the flyer to the e-book in a few quick and painless steps.

Note: the spine should be roughly 75-80 pixels wide. Once you have finished your e-book cover art, move on to the next step.

2) Open the ebookoutline.psd (download the source file below). The layers are separate and the colors can be changed to suit your e-book cover art by selecting a layer, double clicking it and changing the Color Overlay in the Layer Styles menu. Note: if you don’t have the layers panel open you can open it by clicking (F7) or going to Window -> Layers

3) Now that you have a finished cover you need to flatten the image temporarily so you can Cut & Paste the finished cover for your book into the ebookoutline.psd. After you paste the cover there, undo the image flatten so you can still edit the cover later. Next, cut the left part of your art work using the marquee tool and paste in back into the ebookoutline.psd. Name it Spine in the layers panel and name the right side Cover.

4) Next, align the Spine & Cover layers with the bottom right (Spine) and bottom left (Cover) corners touching where the spine meets the cover. Then, go to Edit -> Transform -> Distort. Left click and drag the Top Right corner to distort the image. Then proceed to Top Left and Bottom corners using the same steps.

You’re all finished. Enjoy your new e-book.

• Download E-Book Outline PSD

I can tell you we just want to have fun and be helpful. We love web standards and amazing design so it’s pretty likely you will find helpful reviews and tutorials for that kind of crowd.

Anyhow, enough chit chat about nothing. Come back for the goods when we get things running on a regular basis and subscribe to the RSS feed (look in the footer there’s an icon) and get updates on new articles as they happen. I’m looking forward to a New Year with some amazing people and great community interaction in the notebook. Let’s get the show moving.

Cheers,
Derek Herman