Backlight supports all Shifter body sizes and module positions. Backlight will enhance the look of all of Shifter’s advanced content management features.

Screenshot Setup (foreground - home page):

• Body Size: 974px
• First Sidebar: Sidebar left 180px
• Second Sidebar: 66/33
• Sidebar Shift Order: Standard
• Shifter Plate: Blog-Portal-Excerpt
• Main Content Column Border Shape: Round Border
• First Sidebar Module Shape: Square
• Second Sidebar Module Shape: Square
• User Modules 5, 6 and 7: Activated
• User Modules 5, 6 and 7 Shape: Round Top Clear

Screenshot Setup (background - single post):

• Body Size: 974px
• First Sidebar: Sidebar left 180px
• Second Sidebar: 66/33
• Main Content Column Border Shape: Round Border
• Shifter Tabs Widget: Second Sidebar

Download Backlight Skin.

Follow these simple steps to create a post thumbnail image using custom fields:

Upload Your Image

Upload an image to your site using the image upload feature on the post edit screen in your WordPress admin panel. The image upload interface can be found just below the post edit section of your post edit screen.

Choose “Show: Full size” and “Link to: None” and then click “Send to editor” to insert your image in the post edit screen.

Once the image has been inserted into the post edit screen, copy the URL of the image that was inserted.

Add A Post Thumbnail Custom Field

After uploading your image to your post edit screen, scroll to the very bottom of the post edit page and look for the “Custom Field” bar. Click the “+” on the custom field bar to open the custom field dialog.

Type the word “thumbnail” into the “Key” input field in your custom fields dialog box. Paste the URL to your image in the “Value” textarea input field of your custom fields dialog box and click the “Add custom field” button just under the “Value” textarea input field.

Save your post.

That’s it! You have now successfully added a post thumbnail image using custom fields.

Shifter Does The Rest

Shifter’s intelligent thumbnail system takes care of the rest. Shifter will automatically resize your post thumbnail and place the post thumbnail in functional places on your site. Shifter will place post thumbnail images on your category and archive pages to make those pages more interesting. Shifter’s Featured Tabs will also show a post thumbnail image on your home page when the tabs are active. If you are using the “Blog-Portal-Excerpt” Shifter Plate for your home page, Shifter will place thumbnails next to your post excerpts for a fantastic eye catching front page.

Heart Stopper is a fun new Shifter skin for for Valentine’s Day. One of the best things about Shifter is that you never really have to commit to a single look or layout. The system is so tightly integrated that you can flip a switch today and have a different look than yesterday without any headache or hassle.

See a slideshow of Heart Stopper screenshots.

That’s what Heart Stopper is about - flip the switch and have a fun Valentine’s theme for your WordPress site. Once you’ve had enough candy and flowers, switch back to your regular Shifter skin. Of course you don’t have to put Heart Stopper away after February 14th! This skin would look great on a celebrity gossip blog or romance site.

Heart Stopper has a throbbing (yes, throbbing!) menu tab that expands on hover for a cool pulse effect and the dark and light versions support all of Shifter’s module positions and shapes as well as all of Shifter’s customized widgets and other secret features.

This Valentine’s skin for WordPress is available now on Get Shifter! which is our new site where you can blog with Shifter for free. Signup now for your free Shifter blog and enjoy this fun heart stopping Valentine’s theme for WordPress.

Screenshot setup:

• Body Size: 950px
• First Sidebar: Sidebar left 180px
• Second Sidebar: 75/25
• Sidebar Shift Order: Standard
• Single Post
• Main Content Column Border Shape: No border
• First Sidebar Module Shape: Round
• Second Sidebar Module Shape: Round

Shifter allows you to choose virtually any functional look or layout for your WordPress site with the flip of a switch. This video tutorial shows how to select the proper body size, sidebar positions and skin options for your WordPress site using the Shifter Theme System. This video also demonstrates the power of the Shifter Module System.

This video tutorial demonstrates three key elements of any site setup made easier with Shifter: body size, sidebar layout, overall appearance and theme, and module positions. Choosing the correct body size or page width, sidebar size, sidebar location and sidebar number, and the skin of your WordPress has never been easier than with Shifter.

Shifter Modules display your content effortlessly anywhere you want. Switch module positions and content location without destroying the overall setup and layout of your WordPress site.

Watch the video and see how Shifter changes everything.

See a slideshow of Tech Clean screenshots.

Tech Clean is designed for those looking for a clean, professional look. Soft gradients for the page background, toolbars, module headers and tabs enhance the professional feel without detracting from page content.

Tech Clean is a great looking skin for tech review sites or tech tip blogs but the skin is so versatile it will look great anywhere.

Tech clean supports all Shifter body sizes, module positions, shapes and sizes as well as all Shifter features including Shifter’s intelligent Featured Tab Blocks and Featured Images.

Download Tech Clean Skin.

Don’t have Shifter? Get a free demo version.

Some Shifter skins use a header background image and some do not. Every skin can be customized to show a header background image even if the original version of the skin does not include a background image for the header.

For purposes of this example, we will change the header background image of the Resolution Skin packaged with your Shifter Theme System download. All of the techniques used in this tutorial are very simple and require no expert knowledge of CSS techniques. This method can be used on any skin.

Changing The Background Image

To change your header background image, locate the skin file for your active skin on your server and open the skin in a text editing program like Notepad or Text Wrangler. Your active skin file is the file listed in the drop down menu for the skin selection on your Shifter Settings page in your WordPress admin panel. In our example, we will open the /skins/resolution/brown.css file.

If your skin uses a background image for the header, your skin file will contain something similar to this

#hd {
background:url(images/doc_bg.gif) repeat-x;
}

If your skin does not use a header background image and you want to add one, copy the above code and paste it into your skin file.

The background image file in the above example is “images/doc_bg.gif”. Change the header background image by uploading a new background image to the /images/ sub-folder in your skin directory. If the skin you are editing does not have the /images/ sub-folder, create the sub-folder and place your background image in that folder.

After uploading your new header background image, change the “images/doc_bg.gif” in the above example to the name of the background header image you uploaded to your server and save your skin file. Your header background image has now been changed.

Default header background image

Custom header background image

Best Practice For The Right Header Image

A few things to remember about placing a background image in your header, Shifter utilizes advanced techniques to make your page zoom perfectly. If visitors to your site press “CTRL” and “+” on a Windows PC or “⌘” and “+” on a Mac, all elements of your Shifter page will zoom (expand) perfectly. However, CSS limitations prevent background images from expanding or zooming properly.

To compensate for the inability of background images to expand in CSS, it is important to select the right background image for your header. Repeatable images work great. Repeatable images are images that appear as one larger, continuing image when placed side by side in a line or stacked one after the other horizontally.

If using a photograph for your background image, it is important to select the right type of photograph for your background to maintain a proper zoom. Photographs that have room to place a text logo are important for your header background image. It is best to select a photograph that is slightly larger than the actual size of your header area so that when your page zooms, the header image still looks great.

If you are using a fluid width layout, you must use either a repeatable image for your header or an image that is large enough to display correctly when your page is viewed by a visitor with a very wide monitor. The dimensions of the header background image in the Lizard skin downloaded with your copy of Shifter should be used as a guide if you are changing your background header image when using a fluid body width layout.