Archive for April, 2008

WordPress Tip: Increase the size of your post-writing box

Friday, April 18th, 2008

In my opinion, I think the default size of the post-writing box (shown below) is a little too small. Then, again, I do have a 24″ monitor. But still, especially with the size of images we tend to post on ProPhoto blogs, this area is a little cramped.

Luckily, there is a simple way to increase the size of your posting box. Just click on “Settings” (”Options” in WP 2.3.3 and earlier) in your WP Admin area, and then click on the “Writing” subtab. Then, where it says “size of the post box” just bump it up from the default 10 lines to something bigger.

I like 20 lines or more. Depends on how big your monitor is. Or, if you really want a lot of room, click on the “Toggle Fullscreen Mode” button, and really get comfortable.

Update:  if what you’re really after is more WIDTH to your posting box, try using this plugin.  It’s pretty sweet.

Update #2: If you want to make just a quick temporary adjustment to your posting box height (it won’t be remembered next time you post) you can also just grab the lower left-hand corner of the box (shown below) and drag it.

Filezilla Tutorial Screencast: free FTP program for PC’s

Thursday, April 17th, 2008

I’ve been meaning to record this video for a long time, but I had never worked out how to record my virtual PC on my Mac. Well, I figured it out, so here it is.

If you use a Windows PC (are there photographers who still use PCs?), FileZilla is the most popular free FTP program. This video shows you how to use all of its basic features.

Installing WordPress plugins tutorial screencast

Wednesday, April 16th, 2008

Plugins are one of the great things about WordPress.  In the future, I’ll be posting a lot about great plugins that add all kinds of cool functionality to your blog.  In this video I show you how to download a plugin, how to install one, and some basic facts about plugins.

How to show full posts on WordPress archive and category pages

Monday, April 14th, 2008

I’ve been asked a couple times how to force ProPhoto to show full posts when people visit your archive or category pages. Right now, the default for ProPhoto is to show excerpts of the posts in the category and archive pages. So, when a user clicks on an archive month, this is what they see:

default theme behavior: excerpted archives

If you want to change this so that the full posts are seen, in your WP Admin area, you’ll need to go to your “Design” tab (”Presentation” in WP 2.3.3 and earlier) and select “Theme Editor.” Then choose the file called “Archive (archive.php)” to edit it. (NOTE: don’t get confused with the file called “Archive (archives.php)” - they are named almost exactly the same - you want the one that is not plural.) In that file, look for a line that says:

<?php the_excerpt(''.__('Read More <span class="meta-nav">&raquo;</span>', 'ProPhoto').'') ?>

Delete it and then paste in this line:

<?php the_content() ?>

Click “update file” to save your changes and then check your work.

You can also do this with your category pages as well. Just open up the file “Category Template (category.php)” and do the same edit.

A word of caution, however. The ProPhoto theme was built to display excerpts only on these pages for a reason. That reason is to avoid ‘duplicate content,’ which search engines don’t like, and which can get you a small penalty in Google and other search engines. Basically, the issue is, search engines don’t like it when websites have multiple pages with exactly the same content. That seems spammy to them, because a lot of spammy websites have hundreds of pages of duplicate, computer-generated content. When you leave your full posts open on your category and archive pages, you end up with a good deal of duplicate content, because your posts may be shown in full in 4 or more pages: your home page (or paged interior pages), your single post permalink page, your category page, and your archive page. This is why a lot of WordPress themes excerpt posts on archive and category pages. It is also why lots of blogs even excerpt posts on their home page.

Technically, the best search engine friendly way to do things is to have only your single-page permalink post page show the entire post, and have every other place show an excerpt. Now, that’s a little extreme, so ProPhoto was built to be a compromise between what’s good for your readers and what is good for the search engine robots. You’re more than welcome to change your archive and category pages to show the full post, just do it with the awareness that there is search engine optimization tradeoff. At the end of the day, most people’s blogs are for people and not search engine robots, so you may decide that ease-of-use for your readers is more important. I just thought you might like to know why the theme (and many themes) are built that way.

How to find background images for your blog

Friday, April 11th, 2008

Some people have asked me about where and how to find good background images for their blogs. Here’s a couple thoughts:

This website: http://squidfingers.com/patterns/ has a bunch of cool backgrounds that are free to download. They are all small, lightweight, tiling GIFs, which are perfect for blog backgrounds, because they follow the guidelines of my #1 all-time blog tip.

This website, which I just found, is also pretty sweet.  Maybe better than that last one.

Another place you might check is http://www.sxc.hu/. That’s where I found the cool paisley background for my wife’s blog, although I had to pay a buck for it. I found it by searching for “paisley.”

To add a background image to your ProPhoto blog, save your background image as “bg.gif” and upload it into the “images” folder of the “prophoto” theme folder, overwriting the existing “bg.gif” file.  If you are using a “.jpg” instead of a “.gif” for your background image , you’ll need to modify line 29 of the “Stylesheet” (style.css) so that it says “bg.jpg” instead of “bg.gif.”

Finally, I was hoping some of you knew of some additional resources. Where do you find cool free or cheap backgrounds? Post them in the comments so we can all benefit. Thanks!

Match your background color to your background image

Wednesday, April 9th, 2008

Here’s a quick tip to help you put another little bit of polish on your blog: make sure to match your background color to your background image, if you are using one. Here’s why: If I visit Audra Little’s blog, which looks great by the way, this is what I see:

It looks very lovely with a tasteful, cool looking background image that is bright, funky yellow. But, if I’m visiting her blog for the first time, for about 1-2 seconds, while the background CSS image loads, I can see the default background color grey underneath. It looks like this:

Try it, by visiting her site. Watch the background before the image loads. (Sorry to pick on you Audra! - it’s my fault really, I should have put this in a tutorial or something.) Background colors specified by CSS load immediately (really, they don’t load, they’re just there) as opposed to background images which must be downloaded before they can be displayed.

Therefore, the optimal thing to do is to eyedrop the dominant color in your background image, and set your whole page background to this. In this case, Audra’s site would start out being a flat yellow #FFC300, and then after 1-2 seconds, the yellow image would take its place, subtly but significantly improving the look of the background. This is much better than a gray site that abruptly turns yellow after a second or two.

In case you forgot, to set your background color, simply open your Theme Editor under the “Design” tab (”Presentation” in WP 2.3.3 and earlier) and click on “Stylesheet (style.css)” to edit. Line 30 is where you edit the background color.

BugFix: headlines on post pages

Tuesday, April 8th, 2008

So, I screwed up the css a bit by not pulling out one line of code and putting it in the easy edits on the top of your Stylesheet (style.css). The result is, unless you’ve already hunted it down, when you click on your single post pages, you probably get the default blue instead of your nice branded color, like you can see below.

I’m guessing that Holly, since her blog is called “All Things Pink,” didn’t mean to have big blue headlines on her single post pages. Sorry Holly, and the rest of you. You can see if you have the same problem by clicking on one of your post titles.

Luckily, as usual, the fix is very easy. Just open up “Stylesheet (style.css) from within your “Theme Editor”, and scroll down to line 400. There you will see the missing code on the third line down:

#comments h3 {
margin: 0 0 15px 0;
font-size: 19px;
color: #3333CC;
}

Change the line that says “color: #3333CC;” to the six-digit color of your choosing and save your changes.

My bad, my bad. Carry on.

Troubles uploading images with WordPress 2.5

Tuesday, April 8th, 2008

[Note: you might also want to read this post, about the problem where your image upload box freezes and turns white, not allowing you to insert images.]

Hey all, I thought I’d quick post because some people have been having trouble with the image uploader feature of WordPress 2.5. These issues seem to be mostly experienced by those using PC’s and Internet Explorer. Often, using FireFox instead is enough to get it working. If not, you may want to read this thread and try some of the things they recommend.

http://wordpress.org/support/topic/164999

Hopefully WordPress will have this resolved when they release 2.5.1 in a few weeks. If you use a PC and haven’t upgraded yet, this is probably a good reason to wait.

By the way, this is a WordPress problem, and not a ProPhoto problem, so I can’t provide support for you if you’re having trouble. WordPress is an open-source platform used by millions, so there are lots of resources out there. If you’re having trouble, try googling your problem (if you’re getting an error message, try googling the exact error message) or visit the WordPress support forum:

http://wordpress.org/support/

Adding a custom post separator image

Tuesday, April 8th, 2008

One thing I’ve been asked a few times is: how do I replace the default dotted line separating posts with a custom image that matches my branding? Like Shari’s blog, for instance, shown below:

Well, here’s how:

Step 1: Upload an image for your separator, it should be no wider than 900px, into your prophoto/images folder. Use an FTP program or your web-based file manager utility. Note carefully the name and spelling of your image, and it is case sensitive.

Step 2: in your WP Admin area, go to “Design” (”Presentation” in WP 2.3 and earlier) and click on “Stylesheet (style.css)”. (It might be a good idea to copy the whole file and paste it into TextEdit (Mac) or WordPad (PC) first as a backup in case you mess something up.) Then scroll down to line 346 to this chunk of code:

.meta-inner {
margin: 0;
padding: 0 0 25px 0;
border-bottom:1px dotted #CCCCCC;
}

Delete that chunk and replace it with this:

.meta-inner {
margin: 0px 0px 1px 0px;
padding: 0 0 85px 0;
background: url(images/myFile.jpg) no-repeat center bottom;
}

Except put your own file name and extension (.jpg,.gif, or .png). Then, just fiddle with the bottom padding (”85px” on the third line) until it looks right–this will probably need to be at least as many pixels as your image is tall. You may want to add some margin below the image as well, which you can do by fiddling with the “1px” on the second line.

How do I change the background color of my blog’s body?

Monday, April 7th, 2008

I get asked a lot how to change the background color of the blog’s body.  So often in fact, that in the next minor release I’m going to feature this CSS rule much more prominently in the simple edits area and in the tutorials.  But for now, I’ll address it here and point people to this post.

If you want to change the background of the body portion of your blog, say you want to turn it black, like Frank’s blog, open up your Theme Editor under the “Design” tab (”Presentation in WP 2.3.3 and earlier) of your WP Admin area. Click to edit the “Stylesheet (style.css).”  

Scroll down to line 153 where you will see this:

#wrapper {
 width: 980px;
 margin: 0 auto;
 background-color: #FFF;
}

Just change “#FFF;” to the six-digit color code of your choice, and you’re all set.

Furthermore, if you wanted to change just the background of the header area next to the logo to be something unique and different by itself, scroll down just a bit further and look for this bit of code:

#header {
 height: 108px;
}

Between the two brackets add a line to specify a background color of your choice, like so:

#header {
 height: 108px;
  background: #000000;
}

Click to update your changes and you should be golden.