Nedsferatu.com Blog

The Nedsferatu.com Blog

Nedsferatu.com Blog header image Chicago branding

One Year Jeans and Washing Tips

February 15th, 2010 · DIY, Fashion

On the forums, I have been chronicling the progress of a pair of Levi’s Shrink to Fit jeans that I’ve been wearing for about a year. In this article I hope to share as much of my experience with these jeans as possible, so I can answer some questions, give you real life details and perhaps some idea of what you can expect from your own pair of 501xx. I’ll cover the progress along the way with the steps I took, the wear and tear, and the washing process–with tips I’ve learned from all you.

A Year in the Making

I bought a pair of 31×38 501xx’s from Langstons and started wearing them on 1/29/09. I knew they would shrink vertically 2-3 inches — ending at 35-36″ — which would give me an about an inch or two for a cuff at the bottom. Here’s a picture of them before soaking with light wear, you can see that the cuff is quite long before the shrinking:

I decided I wanted to soak them on my honeymoon in Jamaica; my wife actually bought a pair as well and shrunk them with me. I got about two months of wear in them before the day of soaking 3/4/2009. Since I can’t wear jeans at work everyday, this was under 300 hours of wear. Here they are right before soaking, you can see they already look much more fitted and comfortable then the first picture:

Here they are right after soaking. We soaked for about 20 minutes in a private hot tub (which was really nice, btw):

I let them dry on me which didn’t take very long since we were outside in warm weather with the hot sun (maybe 5 hours max).

After that there hasn’t been much excitement in these jeans life for the last eleven months or so. I wore them on nights and weekends and DIDN’T wash them ever. For those keeping track, that means for over a year the only water that has touched my jeans has been the soak in Jamaica.

If this sounds gross to you, I really do understand. My original plan was to wear them without washing for maybe a month or two figuring that after that the smell would drive me to wash them. Carrying out this experiment really challenged my perceptions of this.

As long as you don’t get dirt on them, don’t do a lot of strenuous activity in them and — sorry if this is a bit vulgar — be sure to always wear underwear you can really go a very long time between washing. Even towards the end they were not offensive unless you held them close to your nose. If you have a partner, be sure to listen to them if they tell you enough is enough!

But more on washing later. Here are some progress photos taken at random intervals over the last year. First, about a month after soaking:

6/20/09 – about four months after soaking:

11/7/09 – About 8 months after initial soaking:

Like I said earlier since I’m just a nights and weekends jeans wearer we’re only talking like 230 hours per month. You can do your own quick calculation to get an idea of how to compare apples to apples with my pictures. Thirteen months is about 3000 hours which us to the pictures below which were taken before washing them for the first time (click for full size):

Wear and Tear

Since Levi’s switched to lighter weight denim the most common complaint I hear is the wear in the crotch. Without washing your clothes will wear quicker as well because of the grit you’re carrying around and rubbing into the fibers. Between the two you’re likely going to see some wear and tear and my pair was no exception but I have to say it wasn’t as bad as I was expecting.

Cuffs have the disadvantage of a weak “hem” at the end of the pant leg. The hem the jeans come with is double or triple thickness makes it stronger and less prone to wear. The cuff doesn’t give you that kind of protection so I did see a couple holes right on the crease of the cuff.

I did also have a couple points of noticeable wear in the crotch, one of which will likely need to be repaired within a few months of more wear. The top layer of jean on the inseam wore off in two places and there is one crease that looks like it will become a hole pretty soon. From my experience and reading about other’s, I think this is to be expected and is just an unfortunate reality of the decrease in workmanship and quality of materials we’ve seen across the entire brand. Here’s a detail of some of the damage, as you can see i got lucky and it will be relatively easy to repair:

Washing

Why wash ever? If you’ve gone this long why not continue wearing and getting a deeper fade and higher contrasts. First, as mentioned earlier, there is a balance between wearing out your clothes by washing too much, and having them wear out faster due to neglect. Also by this point, they were bagging in the seat and knees to a point where they were no longer looking that great — it was getting difficult to justify wearing them to casual Friday at work. There was also the smell and the general dingy appearance that comes with long wear. I held out but also knew when it was time.

Here was my approach to washing:

  • Inside out
  • Cold water (not extremely cold but not warm)
  • Hand wash in the bathtub
  • 1/4 Cup Dr. Bronners Classic Liquid Castile soap (peppermint)
  • 1 Cup white vinegar
  • 1 hour soak agitating every 20 minutes or so
  • Rinse cold (not too much!)
  • Air dry flat (remember to flip every now and then)

Finn watches:

The theory behind this approach was to minimize fading (cold water, vinegar, minimum of mild soap, hand wash) while getting full benefits of washing (removing dirt, reshaping the clothes). There are many many different approaches that also work well, here are some additional tips that have been reported to me:

  • You can also substitute WOOLITE Dark as the soap
  • If you use the washing machine, wash them alone, inside out, on cold and remove before the spin cycle for air drying
  • Water, vinegar, and salt is another combination that will get good effects
  • Washing in the (clean) ocean and rinsing with clear water will get the job done as well

For a review of jean care and achieving different fades see the Levi’s 501XX Shrink to Fit FAQ.

The End Results

After wash and thorough air dry, here were my results (click for full size):

Here they are on (with my new Fred Perry Kingston Mid Prince of Wales sneakers):

Honestly I couldn’t be more pleased with how they are coming along.

The critical steps are done so from here on out my plan is:

  • Repair the damage by getting a tailor to close the holes with thick stitching (probably in light grey)
  • I’m going to put them in the regular rotation of jeans, so they will get less regular wear and last longer
  • I will not wash often but also not wait another year for washing. Once they start sagging a lot in the knees and seat it will be time for a wash

I hope this was helpful experience. Going through this process and documenting it has only reinforced that this m is the choice for achieving the best fit and best fade possible. Please respond in the comments and on the forums with your own experiences so we can all learn and improve.

  • Share/Bookmark

→ 8 CommentsTags: ·

WSB Theme v0.2

September 12th, 2009 · Internet

WSB Theme screenshot

The WSB Theme has just been upgraded to version 0.2. It comes with some interesting changes including:

  • Tags Updated
  • Documentation Updated
  • Recompiled using Blueprint v.0.9.1
  • Fixed Vertical rhythm
  • Added Sandbox’ Gallery CSS

Click to download the zip file directly or visit the theme’s page. All feedback is appreciated!

  • Share/Bookmark

→ No CommentsTags: ·

Update Your Feed

September 1st, 2009 · Uncategorized

This is a reminder that the old feed for this site will disappear within the next few days. If you haven’t updated your feed yet to the new one please do so today!

Update your feed. If you aren’t subscribed this is a great chance to! The new blog feed is:

http://blog.nedsferatu.com/feed

and the new comments feed is:

http://blog.nedsferatu.com/comments/feed

Thanks for your support!

  • Share/Bookmark

→ No CommentsTags:

The WSB Theme

August 10th, 2009 · Internet

Description

WSB is a Sandbox child theme that provides tight integration with the Blueprint CSS. This is the conclusion of the method of integration discussed here. Using Wordpress functions file, Sandbox template files, and Blueprint CSS files creates a excellent minimalist theme that is a very strong starting point for further theme development and customization. For more information and download, please see the WSB theme post.

Based on my last tutorial on setting up a Wordpress Sandbox and Blueprint environment, I decided to package a usable theme based on this method.

NB: the tutorial was based on a method that takes advantage of the very powerful compress.rb script to generate your stylesheets. This theme contains pre-generated stylesheets and does not take advantage of that method. If you are interested, I’d recommend installing blueprint and learning how to use compress.rb rather than starting with this theme.

Features

  • Tight integration of Wordpress, Sandbox, and Blueprint CSS
  • Child theme for easy upgrades and customization
  • Integration of Blueprint plugins
  • Minimalist theme when used as is
  • Baseline starting point for additional development

Download

Changelog

v0.2 – 2009-09-12

  • Tags Updated
  • Documentation Updated
  • Recompiled using Blueprint v.0.9.1
  • Fixed Vertical rhythm
  • Added Sandbox’ Gallery CSS

v0.0.1 – 2009-08-10

  • Initial Release

Demo

Screenshot

screenshot

Installation:

  1. Download WSB Theme
  2. unzip the file
  3. Upload the WSB folder to /wp-content/themes folder in your wordpress install
  4. Activate the theme in the admin section of your site: /wp-admin/themes.php
  5. Install the sandbox theme — as you installed the WSB Theme above
  6. In bp/print.css, uncomment the last line and change the domain name to take advantage of internal link printing.
  7. In bp/screen.css, change the url where you see:
    /* CHANGE URL BELOW FOR CORRECT LINK ICONS */
    body a[href^="http://sub.domain.com"] {background:transparent none !important;padding:0 !important;margin:0 !important;}


    LINK ICONS WILL NOT WORK UNTIL YOU DO THIS

  8. (optional)This theme comes with a robots.txt file for additional SEO improvements. Move this to the root of your wordpress install to take advantage of the SEO benefits (in conjuction with the function in functions.php).

Licensing

WSB Theme for Sandbox is licensed under the GNU General Public License.

Support

Support is available in the comments below or on the forums.

Donation

If you have gained value from this theme, please donate $5 to go towards adding more value to this theme.

  • Share/Bookmark

→ 9 CommentsTags: ·

Changing your name [Illinois]

August 5th, 2009 · Personal

This article is a reflection of my own personal experiences and should in no way be taken as legal advice. The information below may be incorrect.

When my wife and I decided to both change our names we knew it would be a hassle but I was expecting to find helpful information about how to do it — it isn’t that unusual after all. However, there seems to be lack of shared personal experience on the web at the moment for this daunting task. I hope this article will fill some of the gaps if you are interested in or in the middle of this process as well. This article will be from a Illinois perspective but hopefully it will be general enough to help others as well. There are of course many services you can pay to help you with each step of this process, but what’s the fun in that :-)

Name changes occur at the state level. The best general reference and guide I found online was at New Last Name. A name change starts with a name change document. This is most often a marriage certificate but can also be a court order or (I think) a divorce judgment. Obtaining our marriage certificate by mail was by far the fastest process of this whole experience. Look for your county clerk’s website vital records section for instructions on obtaining a certified copy of your marriage certificate. Certified copies of your marriage certificate will cost about $10 each and I would recommend ordering a few for your personal records as well as those you will need for your name change.

Using a marriage certificate limits your name choice to those names appearing on the certificate itself. In Illinois, this would be your husband’s or wife’s name. I understand that in other states you can write in a new name when applying for a marriage license but not in Illinois. This means if you want to choose your own name you will need a court order.

Allow at least 8 weeks to obtain a court order for a name change. This will be in addition to the time it will take to change your name with other agencies after you obtain the order. A court order for name change is basically a judgment on a civil suit your old name files against your new name. You will need to prepare legal documents, file them with the court clerk, publish an advertisement in a newspaper for 3 weeks stating your intention to change your name and stand before a judge to receive judgement on your new name. Luckily, there is a website Illinois Legal Aid that can really help with this process. Filing your paperwork and standing before a judge will cost you about $400 but expect other miscellaneous expenses as well.

One of the nice things about the court order is that you only need to file one order to change the names of everyone in your family. You can list your spouse and dependents on the same order which saves time and money. Also, If you file at a major courthouse (like the one in downtown Chicago), there will be an agency with a desk there that will handle your newspaper advertisement needs as well. This sort of one stop shopping will help take the burn out of the whole process.

After you’ve obtained your name change document (marriage certificate or court order) it is time to update various agencies and institutions you have personal and business relationships with. Allow yourself 4 to 6 weeks to complete all these updates. Your list will differ from mine, but hopefully this will help you develop your own list.

There are a few that most everyone will have to update including Social Security, Passport, and the DMV. These should take a high priority for you as soon as you receive your name change document. We updated Social Security and DMV the day of our court hearing but I chose to hold off on Passport until near the end of the whole process thinking that having a photo ID with our new name (driver’s license) and one with our old name (passport) may come in handy if we needed to prove our identity. For example, some businesses need to see a photo id to accept your credit card as payment. If your credit card is not yet updated but your driver’s license is then you would be out of luck. While this helped with piece of mind, it was never an issue we actually experienced.

Social Security is free and easy to update. You’ll need a filled out application, your name change doc, and photo id. We brought these to our local office and 2 weeks later got our new cards in the mail. Same number, new names. DMV was similar for driver’s licenses: bring your name change document, your old driver’s license, and five dollars.

I returned to the DMV to update my car’s registration and title with my new name. I am still making payments on my car so I had to get my title released from the bank (lien holder) for name change at the DMV. In order to release my title, my bank required me to refinance my loan under my new name (I faxed them my name change doc for proof). After, that I received my title in the mail and brought it and my name change doc to the DMV. There were two confusing forms to fill out once I got there. Registration was about $5 and the title was about $65.

With Social Security (they automatically update the IRS (fed and state) which is nice) and the DMV completely done, I turned my attention to some easy ones: I changed my name on our mailbox, and wrote a note to our landlord to let him know about the change. We also updated our cell phone voice mail messages and facebook accounts. But more on the online/social networking updates later…

I next went to my HR department at work. They were really good about taking care of many of the changes with business cards, payroll, medical and dental insurance, 401k plan, Time and Billing/Expenses program, and the name plate on my cubicle. A couple of other changes I made were my voice mail message, email signature, and since I’m in IT I made some changes to AD and Exchange (login and email) as well. An email sent to all the employees should be enough to let everyone know about the change; expect some questions but I found after a week or two the questions die down.

Banks, brokers, credit cards, loans, insurance, and investment banks were next for me. They ranged from very easy to moderately annoying. They mostly wanted a copy (one needed an original) of the court document and an updated photo id. I spent a lot of time on the phone and faxing documents. One thing I did learn from this process is to call the bank back three days after faxing them anything. In one case I waited for two weeks before calling to find out they had lost the fax. Make sure to get new copies of all your debit and credit cards as well as ordering new checks.

Utilities, PayPal, Netflix, Web Hosting, Audible, IPass (highway tolls), CTA Card (Public Transportation), and parking rental are mostly interested in making sure your payments are still coming in. They will make the changes to your name on the account but also make sure you update your automatic payment information if bank accounts or credit card name and number have changed. Changing your username for web access to your accounts will be covered below.

Doctors, dentist, and specialists are an easy one but should probably make your list at some point. In my experience they required little proof (a photo id at most) and a photo copy of your new insurance card.

Professional organizations (e.g. State Bar Association for attorneys, Nursing Association for nurses etc.), memberships (AAA, clubs, etc.), professional service providers (attorney, accountant, etc.), wills, health care directives, power of attorney, etc. are all important updates as well but ones I didn’t need to make. Let us know in the comments of any wrinkles you experience with getting these changed.

Passport is a big one but a relatively easy one to complete. This site has the official explanation but unofficially you are in either of two categories: you are replacing a passport that is under a year old or you are replacing a passport that is over a year old. And the difference is primarily monetary. In both cases you need to send in an originals of your old passport, name change document, an application for a new passport and some recent photos, but in the case of an passport over 12 months old it will cost you $65. Young passport replacement is free. The process took a few weeks and we received our new passports and our original documents in separate envelopes a day apart.

Updating your birth certificates is really more of a personal choice. Basically you find the address of for the office of vital records in the state you were born and send them your court document. They will add an addendum to your birth certificate and send you a new one. Basically that means they won’t replace your old name, they’ll cross it out and write the new one in below it. I haven’t yet figured out why you would want to do this unless you are changing gender so I leave this one as optional.

Logins, usernames, online updates/social networking as well as the large subtopic of Google services and accounts may be an topic best suited for another article. This can be a pain in the neck and will vary widely from site to site. Some sites have an option in your account settings to change your username, others you can email your request, and some it’s just not possible. Google unfortunately is on the harder end of this spectrum which is why I have been putting off both writing about it and actually doing it. For these kinds of tasks I’d highly recommend staying organized in a spreadsheet since your list of online accounts to change is likely quite long.

Here’s the summary list of places to notify of your name change. This list will hopefully jog your memory to think of other places that are applicable to your life (like gym membership for example), listed in the order they were mentioned:

  • Name Change Document
  • Social Security
  • Passport
  • DMV
    • License
    • Registration
    • Title
  • Mailbox
  • Landlord
  • Voice Mail Messages
  • Facebook
  • HR Department
    • Business Cards
    • Office Nameplate
    • Payroll
    • Medical/Dental Insurance
    • 401k
    • Email Address
    • Email Signature
    • Time and Billing
  • Banks
  • Brokers
  • Credit Cards
  • Loans
  • Insurance
  • Investment Banks
  • Home Utilities/Bills
  • PayPal
  • Netflix
  • Web Hosting
  • Audible
  • IPass (highway tolls)
  • CTA Card (Public Transportation)
  • Parking
  • Doctors
  • Dentists
  • Medical Specialists
  • Professional Organizations
  • Memberships
  • Professional Service Providers
  • Wills
  • Health Care Directives
  • Power of Attorney
  • Birth Certificate
  • Logins/Usernames
  • Social Networking
  • Google Services/Accounts

I hope this relatively comprehensive article on my experience with name change is helpful for you. For more information on applying for a marriage license, see your county clerk. There is a nice feeling after completing all of this that you know where all your accounts are and their status. It was also a good time for us to consolidate accounts, close unused accounts, and generally blow the dust out of the infrastructure that runs under our lives. That and I’m really good at using a fax machine now…

  • Share/Bookmark

→ No CommentsTags:

We’ve Changed Domains

August 3rd, 2009 · Uncategorized

You may or may not have noticed but this blog recently made the transition from being 1 is A | 2 is B to the Nedsferatu.com Blog. I decided I wanted to migrate as a way to organize my online presence and strengthen my branding. I have found that since choosing the 1 is A domain name for my blog, it has been a confusing for you and hasn’t worked as well for me as I had hoped. Additionally, my goal is a single point of entry for all information (and eventually services) that I offer.

I may release an article soon about how I made this magic happen, but for now I ask that if you are subscribed to this blog that you update your feed. If you aren’t subscribed this is a great chance to! The new blog feed is:

http://blog.nedsferatu.com/feed

and the new comments feed is:

http://blog.nedsferatu.com/comments/feed

The old feed will be disappearing soon so please make the switch today! Thanks for your support.

  • Share/Bookmark

→ No CommentsTags:

Wordpress Sandbox and Blueprint

July 31st, 2009 · Computers

The files included at the bottom of this post are those that were used to implement the methods described in this article. They are not a wordpress theme and will not work if installed as such. If you are looking for a theme built using this method, see the post The WSB Theme.

I have been very excited by the seamless integration of three of my favorite development tools: Wordpress, Sandbox and Blueprint CSS. I know there’s a lot of interest these days in Wordpress “frameworks” for child theme development and projects like Thematic and others are certainly exciting. For me though there is a definite cool factor in a rapid development and deployment stack like WSB.

Blueprint is the piece of this puzzle that is newest to me but that I’m almost most excited about. I have been using Wordpress and Sandbox for theme development for a few years and have run up against all the common issues: lack of rapid complex layouts, lack of baseline typography, lack of baseline forms styling, and of course IE compatibility. What Blueprint provides is a baseline, common hooks, class generating plugins, and browser compatibility hacks to give you a consistent starting point for your design project. Getting it to integrate with Wordpress and Sandbox is a must.

What we’ll set up here is a solid baseline for theme design: a complete, non-invasive integration of all three projects. Once set up, redeploying this stack for other projects and development environments on your server is very quick and easy. Blueprint provides nice tools for customizing your different installations from an organized central management script.

The Summary Workflow:

  1. Install Wordpress and Sandbox
  2. Create a Sandbox Child Theme
  3. Install Blueprint centrally and use compress.rb to generate stylesheets for the child theme
  4. Import Blueprint screen.css into child theme style.css
  5. Use functions.php to inject Blueprint stylesheet declarations into the header
  6. Work with settings.yml to generate a layout and plugins for Blueprint stylesheets

The Detailed Workflow:

  1. Either create a new domain or subdomain on your server or decide which wordpress installation you want to use for this project.
  2. Install Wordpress if it isn’t already, and make sure the Sandbox theme is installed as well. For this example, I’ll use
    /var/www/wordpress/
  3. Next we’ll create a new theme called WSB in
    /var/www/wordpress/wp-content/themes/WSB

    . Create the WSB folder and upload a style.css file with a header similar to the following:

    /*
    THEME NAME: WSB
    THEME URI: http://domain.com
    DESCRIPTION: Theme using WSB stack
    VERSION: 0.0.1
    AUTHOR: <a href="http://nedsferatu.com/">Nedsferatu</a>
    AUTHOR URI:
    TAGS: sandbox, blueprint
    TEMPLATE: sandbox
    */

    The important line here is TEMPLATE:sandbox. This basically makes your new theme a child theme of sandbox. What this means is wordpress will use the style and function files in our WSB theme first but will go to the sandbox theme for the template files. Be sure the check out the documentation for more info. This basically keeps the sandbox theme untouched and easily upgradable while we make all our customizations in this child theme.

  4. In the Appearance menu, select our new WSB theme as your default theme. Your site shouldn’t look like much yet so keep going with the steps! :-)
  5. At this point we have have our wordpress and sandbox integration with our new child theme so let’s add blueprint into the mix. The best way to use blueprint for developing is to have a central installation of it that feeds style files to your projects. Upload the blueprint files to another directory on your server such as
    /var/www/usr/blueprint-css

    or

    ~/blueprint-css

    . We will want to make a folder in our new theme to accept the files we generate:

    /var/www/wordpress/wp-content/themes/WSB/bp
  6. Let’s generate some basic Blueprint stylesheets for our new theme. In the shell, create a settings file for Blueprint:
    /blueprint-css/lib/settings.yml

    that contains the following:

    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     semantic_classes:
      "body": "container"

    The key thing to know about this file is that indentation is meaningful. Be sure to only use a single space to differentiate sections of this settings.yml file. Be sure to read this guide for more, especially the Advanced Usage section. Also the comments in the blueprint files and the readme files throughout blueprint are a very good source of information about usage.

  7. After you save the settings file, use the compress.rb script to generate the stylesheets and save them to our theme folder:
    ruby compress.rb -p WSB

    using the -h option will give you a help file on compress.rb usage.

  8. Now if you look at your /WSB/bp directory you’ll see blueprint generate stylesheets. To make changes to these we will be updating our settings.yml file and rerunning the compress.rb script. (Incidentally to have blueprint generate stylesheets for another project, just add a new project name and path below the existing one in your settings.yml file. Hopefully you’ll begin to see the advantages of this approach although the real power comes with additional information we can put in the settings.yml file.)
  9. Let’s integrate Blueprint into our new theme to run with sandbox and wordpress. First import the blueprint screen.css file into our new style.css:
    /*
    THEME NAME: WSB
    THEME URI: http://domain.com
    DESCRIPTION: Theme using WSB stack
    VERSION: 0.0.1
    AUTHOR: <a href="http://nedsferatu.com/">Nedsferatu</a>
    AUTHOR URI:
    TAGS: sandbox, blueprint
    TEMPLATE: sandbox
    */
    @import url('bp/screen.css');

    At this point you could also import the default styles from sandbox but I prefer to keep the style separated to Blueprint and my own customizations.

  10. Now we need to add Blueprint’s print.css and ie.css to the header of our template. To do this without touching the sandbox header.php file we will write a functions.php file in our theme directory:
    <?php
    function header_blueprint() { // PUTS BLUEPRINT STUFF IN THE HEADER ?>
            <link rel="stylesheet" href="<?php bloginfo("wpurl"); ?>/wp-content/themes/WSB/bp/print.css" type="text/css" media="print" />
            <!--[if IE]><link rel="stylesheet" href="<?php bloginfo("wpurl"); ?>/wp-content/themes/WSB/bp/ie.css" type="text/css" media="screen, projection" /><![endif]-->
    <?php } // END header_blueprint
    
    function header_ie8() { // PUTS STUFF IN THE HEADER ?>
            <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    <?php } // END header_ie8
    
    function footer_webmaster() { // PUTS STUFF IN THE FOOTER ?>
    <div id="designer-link">
    <span class="meta-sep">|</span>
    <span id="designer-link"><a href="http://nedsferatu.com/" title="<?php _e( 'Nedsferatu.com', 'sandbox' ) ?>" rel="designer"><?php _e( 'Nedsferatu.com', 'sandbox' ) ?></a></span>
            </div>
    <?php } // END footer_webmaster
    
    add_action('wp_head', 'header_ie8');
    add_action('wp_head', wp_enqueue_script('jquery')); // ADDS JQUERY TO THE HEADER
    add_action('wp_head', 'header_blueprint');
    add_action('wp_footer', 'footer_webmaster');

    OK this script does a lot so let’s take a look at it. There are three functions: header_blueprint, header_ie8, and footer_webmaster. Header_blueprint takes the two stylesheet declarations and puts them into the header of all our pages using the add_action at the bottom. Header_ie8 calls the very helpful ie8.js (ie7.js) file that will help us maintain browser independent pages. Read more about it on their google code page. The last function can help you insert your own links or copyright information into the footer of the page. There is a fourth add_action at the bottom that adds the jquery call to your pages so that you can use jquery in your theme. Functions.php is a very powerful tool for child themes.

  11. So now we have sandbox and blueprint integrated into our child theme so let’s go ahead and apply some basic layouts for the site using the settings.yml file. At this point I would recommend a few additions to the settings.yml file:
    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     namespace: wsb-
     semantic_classes:
      "body": "container"
      "div#wrapper": "column clearfix prepend-top append-bottom"
      "div#header": "span-24 column clearfix"
      "h1#blog-title": "span-18 column"
      "div#blog-description": "span-6 prepend-top column last"
      "div#access": "span-24 clear"
      "div#container": "clearfix div.border column"
      "div#content": "span-18"
      "div#primary": "span-6 prepend-top column last"
      "div#secondary": "span-6 column last"
      "div#footer": "span-24 column"
    

    The namespace will put a wsb- in front of all classes that blueprint generates. This will help alleviate any clashes with already existing classes in sandbox. Semantic classes basically take an existing class or id in your theme (#header for example) and assigns blueprint classes to it in the css (such as span-24 column and clearfix). This means that you can get the benefit of all the blueprint classes for layouts or other actions but you still only see your semantic classes in your markup provided by sandbox. Also, you can take advantage of the grid background to check your themes alignment at anytime by adding the showgrid class to div#wrapper. As always, whenever you make changes to settings.yml don’t forget to run:

    ruby compress.rb -p WSB
  12. Using the menu from sandbox and a couple other css tweaks at this point should leave us with a very respectable looking site:
    /*
    THEME NAME: WSB
    THEME URI: http://domain.com
    DESCRIPTION: Theme using WSB stack
    VERSION: 0.0.1
    AUTHOR: <a href="http://nedsferatu.com/">Nedsferatu</a>
    AUTHOR URI:
    TAGS: sandbox, blueprint
    TEMPLATE: sandbox
    */
    
    @import url('blueprint/screen.css');
    
    div#wrapper {text-align:left;}
    div.skip-link {display:none;}
    div#secondary {float:right;}
    
    /* Navigation (from Sandbox) */
    div#menu {background:#EEE;height:1.5em;margin:1.5em 0;width:100%;}
    div#menu ul,div#menu ul ul {line-height:1em;list-style:none;margin:0;padding:0;}
    div#menu ul a {display:block;margin-right:1em;padding:0.2em 0.5em !important;text-decoration:none;}
    div#menu ul ul ul a {font-style:italic;}
    div#menu ul li ul {left:-999em;position:absolute;}
    div#menu ul li:hover ul {left:auto;}
    div#menu ul li,div.gallery dl,div.navigation div.nav-previous {float:left;}
    form#searchform input.text {width:120px;} /*overrides blueprint's large input for sidebar*/
    div#comments {clear: both;}
  13. Adding custom css files to your blueprint generate stylesheets is an easy way to make changes to blueprint that you don’t want to make in your style.css file. All you have to do is save your custom css files in a folder such as:
    /wp-content/themes/WSB/bp/custom

    and then add them into your settings.yml file like so:

    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     namespace: wsb-
     custom_css:
      screen.css:
       - custom/custom-css-file.css
     semantic_classes:
      "body": "container"
      "div#wrapper": "column clearfix prepend-top append-bottom"
      "div#header": "span-24 column clearfix"
      "h1#blog-title": "span-18 column"
      "div#blog-description": "span-6 prepend-top column last"
      "div#access": "span-24 clear"
      "div#container": "clearfix div.border column"
      "div#content": "span-18"
      "div#primary": "span-6 prepend-top column last"
      "div#secondary": "span-6 column last"
      "div#footer": "span-24 column"
    

    As you can see, you can save all of your customized css files with your project and manage them from your central settings.yml file for added convenience and organization. Specifying screen.css simply lets compress.rb know which blueprint css file to include the custom style in. You could also use print.css, etc. This will all come in handy below when working with plugins. As always, whenever you make changes to settings.yml don’t forget to run:

    ruby compress.rb -p WSB

Here’s a quick screenshot example of what can be done using almost exactly this method without any additional styling:
example
I think this is quite nice and usable without any really design work yet.

Other Tips:

Plugins:

  • If you want to use the Fancy Type Plugin with Blueprint and Sandbox, you will have to write a custom css file and include it in your settings.yml file. This is because both Blueprint Fancy Type and Sandbox use the .alt class for different things and as of this writing the namespace is applied to classes generated before plugins are included by the compress.rb script. A solution to this is including a custom css file when you call the plugin. The css file:
    /wp-content/themes/WSB/bp/custom/fancy-cust.css

    would look like this

    /* --------------------------------------------------------------
       fancy-cust.css
       * resets .alt generated by fancy-type and sets a class with a non
         clashing name.
    
    -------------------------------------------------------------- */
    
    .alt {
      font-style: inherit !important;
      font-weight: normal;
      color:#222 !important;
      font-family:"Helvetica Neue", Arial, Helvetica, sans-serif !important;
    }
    
    .wsb-alt {
      color: #666;
      font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
      font-style: italic;
      font-weight: normal;
    }

    This will reset the offending class and set a new class with a non-clashing name. To add this to your settings.yml file:

    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     namespace: wsb-
     custom_css:
      screen.css:
       - custom/fancy-cust.css
     semantic_classes:
      "body": "container"
      "div#wrapper": "column clearfix prepend-top append-bottom"
      "div#header": "span-24 column clearfix"
      "h1#blog-title": "span-18 column"
      "div#blog-description": "span-6 prepend-top column last"
      "div#access": "span-24 clear"
      "div#container": "clearfix div.border column"
      "div#content": "span-18"
      "div#primary": "span-6 prepend-top column last"
      "div#secondary": "span-6 column last"
      "div#footer": "span-24 column"
     plugins:
      - fancy-type
    

    This change calls the custom css file, adds it to the screen.css file and calls the fancy-type plugin. As always, whenever you make changes to settings.yml don’t forget to run:

    ruby compress.rb -p WSB
  • If you want to use the Link Icon Plugin with Sandbox you’ll have to make a few modifications in a custom plugin file and include it in your settings.yml file. This is because the links plugin will be expecting relative links for internal links and Sandbox provides absolute links for all internal links. If you don’t modify it, you’ll see the external link image next to every link on the page. We take a similar approach to fixing this plugin to work with sandbox. The css file:
    /wp-content/themes/WSB/bp/custom/links-cust.css

    would look like this

    /* --------------------------------------------------------------
       links-cust.css
       * Icons for links based on protocol or file type fixed for sandbox.
    
    -------------------------------------------------------------- */
    
    /* Uses this class if a link is internal */
    body a[href^="http://sub.domain.com"] {
    background:transparent none !important;
    padding:0 !important;
    margin:0 !important; }

    This will apply no image to links that begin with http://sub.domain.com so you’ll want to change that to your domain. To add this to your settings.yml file:

    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     namespace: wsb-
     custom_css:
      screen.css:
       - custom/fancy-cust.css
       - custom/links-cust.css
     semantic_classes:
      "body": "container"
      "div#wrapper": "column clearfix prepend-top append-bottom"
      "div#header": "span-24 column clearfix"
      "h1#blog-title": "span-18 column"
      "div#blog-description": "span-6 prepend-top column last"
      "div#access": "span-24 clear"
      "div#container": "clearfix div.border column"
      "div#content": "span-18"
      "div#primary": "span-6 prepend-top column last"
      "div#secondary": "span-6 column last"
      "div#footer": "span-24 column"
     plugins:
      - fancy-type
      - link-icons
    

    As always, whenever you make changes to settings.yml don’t forget to run:

    ruby compress.rb -p WSB

Printing:

  • I would recommend a custom css file for printing as well with the following changes…the css file:
    /wp-content/themes/WSB/bp/custom/print-cust.css

    would look like this

    /* --------------------------------------------------------------
       print-cust.css
       * Gives you some custom sensible styles for printing pages.
    
    -------------------------------------------------------------- */
    
    #header, #footer, #access, .navigation { display:none; }
    
    /* If you're having trouble printing relative links, uncomment and customize this:
       (note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */
    
    a[href^="/"]:after {
      content: " (http://sub.domain.com" attr(href) ") ";
    }

    This hide some page element when printing a post or page from your blog. It also adds http://sub.domain.com to help when resolving internal links during printing. Be sure to test your printing styles by using the print preview function in your browser. To add this to your settings.yml file:

    WSB:
     path: /var/www/wordpress/wp-content/themes/WSB/bp
     namespace: wsb-
     custom_css:
      screen.css:
       - custom/fancy-cust.css
       - custom/links-cust.css
      print.css
       - custom/print-cust.css
     semantic_classes:
      "body": "container"
      "div#wrapper": "column clearfix prepend-top append-bottom"
      "div#header": "span-24 column clearfix"
      "h1#blog-title": "span-18 column"
      "div#blog-description": "span-6 prepend-top column last"
      "div#access": "span-24 clear"
      "div#container": "clearfix div.border column"
      "div#content": "span-18"
      "div#primary": "span-6 prepend-top column last"
      "div#secondary": "span-6 column last"
      "div#footer": "span-24 column"
     plugins:
      - fancy-type
      - link-icons
    

    As always, whenever you make changes to settings.yml don’t forget to run:

    ruby compress.rb -p WSB

Conclusions

This should give you a really solid start in developing and designing themes using Wordpress, Sandbox, and Blueprint CSS. I feel there are many more areas for tight integration among the programs so maybe there will be followup articles as well. I will be looking into integrating visual elements like typography, and using Sandbox’ available filters for added flexibility. I would love to hear from others who are working on this and similar projects.

What most excites me about this set up as it stands here is how portable it is. This can be replicated in minutes allowing a designer to get into customizing faster with a more solid and proven foundation. Also, all of the customizations and tweaks we’ve made so far are completely non-invasive; this means that when Wordpress, Sandbox, or Blueprint publish an update, we can upgrade quickly without anything breaking.

Download all the files mentioned in this article: WSB-stack-demo.zip
Please see the individual project sites to download the installation files and for more information: Wordpress, Sandbox and Blueprint CSS

  • Share/Bookmark

→ 20 CommentsTags: ·

Wordpress and BBPress integration

May 27th, 2009 · Computers

This is not new, it’s just a bullet pointed version of the fantastic screencast over on the official site. Hopefully this will be helpful if you are just looking for a reminder of how to do it without wanting to rewatch the whole movie.

  • Install WP
    • Create a config file
    • Set collation type in config file to utf8_general_ci
    • Run installer
    • Login / change your pw / logout
  • Set up the keys and salts in the config file and login again to make sure you still can
  • Install BBPress
    • Create a config file
      • Include the collation
      • Leave the keys blank for now
    • During the integration step of the installer include the keys
  • Logout of BBPress then login as admin from wp installation
    • Go to wordpress settings
    • Skip BBPress speed up techniques for now
  • Login to the Wordpress installation
    • Install the new plugin BBPress Integration and activate
    • Fill out settings for the plugin
    • add the cookie settings to config file

I’d recommend watching the screencast if you haven’t before but hopefully this will be helpful if you are just looking for a reminder of the non-intuitive parts of the install. Enjoy your integrated sites!

  • Share/Bookmark

→ No CommentsTags: ··

Wordpress Speed Tweaks and Hacks

May 26th, 2009 · Chicago

A few weeks ago I was considering putting good money on the table for a dedicated private server to host my sites. My main reason was to gain the performance advantages of the dedicated resources. I run a handful of sites on a handful of domains with moderate traffic for the most part. Does this sort of load really warrant a private server? Before going that route I wanted to make sure so I started researching performance tweaks for my sites.

I run mostly Wordpress installations with some other apps and some custom apps. The suggestions I found are wordpress specific but some will help any site you want to speed up. The results from applying these have been very good so I hope you consider implementing some or all of them yourself.

Assuming you have all the obvious stuff set up (Akismet for spam and Super Cache for caching) this article also doesn’t have to do with getting people to your site either (SEO, Sitemap, robots.txt, feedburner) or making money once they are there (Adsense, social networking, referals). These are all valuable topics but this article is about showing as many pages to as many visitors as fast as possible.

My favorite hacks so far are:

  • Creating Expire headers using htaccess. This will allow browsers to cache most of the media on your page leading to great improvements in load times. Here’s what you need to add to your .htaccess file:
    Header unset Pragma
    FileETag None
    Header unset ETag
    
    # 1 YEAR
    
    Header set Cache-Control "public"
    Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
    Header unset Last-Modified
    
    # 2 HOURS
    
    Header set Cache-Control "max-age=7200, must-revalidate"
    
    # CACHED FOREVER
    # MOD_REWRITE TO RENAME EVERY CHANGE
    
    Header set Cache-Control "public"
    Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
    Header unset Last-Modified
  • Set up a subdomain to store commonly used images on your site — such as theme images and sidebar images. Browsers will load media in parrallel from subdomains giving you performance increases. Try saving widget images from your sidebar in that subdomain as well rather than making requests to other webservers (feedburner or facebook for example). Be sure to remember to apply the above .htaccess hack to you subdomain as well for additional browser caching.
  • PHP bloat is any php call that a theme makes for what is not, for the most part, dynamic content. For example, look in your theme header.php doc and compare it to the source of your redendered page. My guess is there is a series of php calls (which likely call sql queries as well) for information such as the name of your blog, the location of the .css files, the content type, and others. If you replace this php with the resulting html you will save significant load time on every requested page on your site. Check out the footer and sidebar as well. This is more helpful with a blog that is not changing rapidly and I wouldn’t recommend it for a new install you are still tweaking, but the savings here are significant.

I’m still testing some additional plugins but here is what I’ve liked so far:

  • Javascript to footer will give the appearance that your site is loading faster than it is by loading the content first then parsing the javascript. Easy to implement with instant results
  • Revision Control will help with load on your server while posting. The revisioning feature with wordpress is cool but I’ve found that it leads to more database bloat than it is worth. I turn it off and clear out the stored revisions using a sql query.
  • WP-DBManager is a must have plugin for all wordpress blogs…period. Set it up to run regular backups and optimizations and forget about it. Optimizations will help reverse fragmenting in your database which will improve your performance as well.

These are some excellent resources with many interesting ideas for you to consider:

So for now, I have been able to optimize my sites so significantly that I think a hardware upgrade is pushed off at least for now — sorry Dreamhost maybe next time :-) . As a side note, these tips are essential for preparing for a slashdotting or digging. So if you are creating great content out there on the web — and i know you are — you may want to make site optimization a priority especially if you’ve never considered it seriously before.

  • Share/Bookmark

→ No CommentsTags: ··

MySpace CSS Styling: Taming the Beast

May 17th, 2009 · Internet

Recently I went mano y mano with MySpace and wanted to share my expereinces. We all know the fact that MySpace is the worst written most popular web application on the internet; it is sort of a grotesque freak that you know you should just forget about but seems to just keep coming back to over and over.

My most recent tussle was for the sake of my wife who was looking for more consistant branding not only on her blog but across her social networking sites. The only three I believe worth spending time on today is twitter, myspace and facebook (youtube is a subject for another post). Her twitter was easily done and there’s not much you can do with facebook so that left Big Ugly to contend with. Hopefully, I’ll be able to pass along some tips in case you are interested in putting lipstick on this pig.

First of all, I am very impressed with what we were able to achieve. This is mostly because the crowd who uses and develops themes and hacks for myspace seem to have about as much good sense as the core developers themselves.  Second, if you care about semantic markup and elegant coding, working with myspace might give you a heart attack. You have to be willing to compromise with the site and write some nasty CSS to get it to display a decent looking page.

Luckily, Mike Davidson wrote a very helpful and tremendously funny post with source on a pretty in depth look at the available CSS hooks and hacks necessary to wrangle a good looking page. Please let his work be a starting point for your own efforts; it will likely be good for your health.

Besides tweaking his CSS doc for our own branding purposes (and creating the requisite images of course), there was a big of tweaking around hiding certain page elements that my wife didn’t want displayed: page url, blog, comments, and top friends. Here’s what was necessary:

  1. Page url is in a table with class .userProfileURL so a simple display: none did the trick
  2. The blog section is located entirely in .latestBlogEntry so the same display:none works there as well
  3. Same goes for comments which are entirely in .friendsComments
  4. Finally, top friends but not the display all friends links or the heading displaying total number of friends. The necessary code is: .friendSpace tr td.text table tr td table tr td { display: none; }

The results I think you’ll agree is a very presentable and professional myspace page…or at least the closest you’re likely to get on MySpace. I think the take away here is that it is possible to brand myspace if you feel there is a good reason to have a presence there. With limited amount of effort you can right many of the wrongs that come with your account by default. Good luck and feel free to share your successes (and questions) in the comments.

  • Share/Bookmark

→ 1 CommentTags: ·