Posts Tagged ‘tutorial’

Kathy is in love with Subversion, you will be too after this tutorial:

Using Subversion is very similar to uploading and downloading files using an FTP client. First you’ll need a Subversion server and a Subversion client. You can get the latest version of the Subversion server from Tigiris.org. As I write this, the latest version for Mac OSX is Universal Subversion 1.5.0. I’m a Mac guy so if you use Windows, sorry but keep Googling for a different tutorial.

(more…)

Bookmark It

Hide Sites

This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

(more…)

Bookmark It

Hide Sites

You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

(more…)

Bookmark It

Hide Sites

Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

(more…)

Bookmark It

Hide Sites

(more…)

Bookmark It

Hide Sites