Tag Archives: Software

Dressing Up Your Posts and Pages

steve-jobs-dress-up-smDo your posts look bland and uninteresting? Do your readers look beyond the first paragraph? Can they scan your post and get the main ideas?

If not, you are losing readers. The experts say that if you don’t catch the reader’s eye with 10-15 seconds, you have lost them.

There are many things you can do to get readers interested enough in your post to read past the headline and the first couple of sentences. And let’s face it, readers on the internet scan as much as they read — unlike their reading habits in print publications. Think riffling through a magazine in a waiting room.

One of the most effective ways you can grab the reader’s attention is with an attractive post with images, drop caps, section titles, highlight or call-out boxes, and pullquotes.

Thesis provides several ways to make your posts more attractive, and this article shows you several more. The section headings are:

  • Drop caps
  • Images
  • Screenshot and code illustrations in your posts and pages
  • Adding section titles
  • Adding pullquotes
  • Using callout or highlight boxes
  • Software helpers

Note that most of these enhancements will use the HTML editor. If you need more information on how to use it, take a look at the “How and When to Use the WordPress HTML Editor” article.

Drop Caps

A drop cap is the big first letter of an article, like appears at the beginning of this one. It introduces the article in a big way and looks classy.

Drop caps are easy to do.

1. In the HTML editor find the first word of your post.

2. Put the following code around the first letter of the first word. Replace the words “FIRST-LETTER-HERE” with the letter:

	<span class="drop_cap">FIRST-LETTER-HERE</span>

Images

An image at the beginning of the post catches the reader’s eye and draws them into the post. Of course, the image should have something to do with the post.

The article “Finding Legal Images for Your Posts” has advice and many sources for getting just the right image for your post. Copyright is an important consideration in using images you find on the internet, and the article also explains the difference between copyright-restricted, copyright-limited and fair use of images.

Resizing the image

I like to resize the image prior to uploading it, even though WordPress will resize it for you. If you want the words to wrap around an image when placed to the right or left, it needs to be 220-250 pixels wide, depending on the width of your content column. If the image is to be centered, it needs to be no larger than the column width you set in Thesis Design Options.

If you do not have a graphics program that can resize images — and even the simplest ones can — there are lots of free programs available for download. GIMP is an excellent program availabe for several operating systems, but it’s a little like using a cannon to blast a flea!

Inserting the image into your post

This action may be done in either the visual or HTML editor:

1. Place your cursor where you want the image to be inserted.
2. Click on the leftmost icon in the “Upload/Insert” line above the editing window.
3. Find the image on your computer and upload it.
4. If you wish, write a caption to be displayed below the image.
5. If you have resized the image, click on “full-size.” If you have not resized it, click on the size that’s closest to 220-250 pixels wide if you want the text to wrap around the image, or a size smaller than your column width if not.
6. Click on right, left or center placement, then on the insert button.

Putting a frame around the image

If you have put a caption on the image, skip this step, since a frame will automatically be added.
1. In the HTML editor, find the code for the image.
2. Find the alignment word in the code — it will be “alignleft,” “aligncenter” or “alignright”
3. Right after the alignment word, type in the word “frame” with spaces before and after the word. It will look like this:

	alignleft frame 

Screenshot and code illustrations in your posts and pages

“A picture is worth a thousand words” — that old saying is nowhere more true than in your posts. If you are talking about a subject, especially a technical subject, it is very helpful to the reader to show them what you are writing about.

There are two main ways to use illustrations: screenshots and code excerpts.

For screenshots, most operating systems have a way to take pictures of the full screen. Mac OS X and Windows Vista can even take pictures of selected parts of the screen. If you prefer a software program with greater control, SnapNDrag for Mac and Screenshot Captor for Windows are both highly rated, free and offer many more controls than do the operating systems’ built-in abilities. Screenshots definitely need to be edited and resized before uploading them.

Code excerpts make use of the built-in capabilities of Thesis. The article “Using the code and pre Tags for Code and to Highlight Text” shows you how.

Adding section titles

This can also be done in either the visual or the HTML editor.

In the HTML editor

1. Write a section title on a new line above the paragraph it titles.
2. Surround the section title with <h3> tags, like so:

	<h3>Processed foods and your digestive system</h3>

In the visual editor

1. Write a section title on a new line above the paragraph it titles.
2. Highlight the section title.
3. From the “paragraph” pulldown at the top left of the editor screen, select “Heading 3”

Adding pullquotes

Pullquotes draw your reader into the text

The purpose of a pullquote (also known as a “lift-out quote” or “call-out”) is to lead readers into the post and to highlight a key topic. They also dress up your post and make it more visually appealing. The article “Make Your Pullquotes More Attractive” contains a thorough discussion of how to use pullquotes effectively.

Using callout or highlight boxes

You can emphasize text within your post or page with highlight or callout boxes. These are colored boxes that surround the text. The article “In-Post or -Page Highlight Boxes” gives you the code needed and shows you how to use them.

Software helpers

I use a Mac for most of my work, and I have found a program that has saved me more time and frustration than I can adequately describe. It is called BlogAssist from Dejal. It is a configurable utility that resides in the menu bar that will take whatever is in your clipboard and wrap it in anything that you want. I use it for HTML code and Forum code mostly. For example, for dropcaps all I have to do is copy the first letter of the word, find “Drop Caps” in BlogAssist, then paste it in my text. Bingo! The letter is wrapped in the proper HTML code for dropcaps.

My search for a comparable Windows program has not yielded any results yet. There are plenty of clipboard utilities, but none that do what BlogAssist does. If you know of such a program, please share it with us!

I hope you have found this article interesting and helpful. Remember that you are welcome to write a comment. You can also email me using the “Contact” button in the menu at the top of the page.

Installing Thesis for the First Time

Installing Thesis for the first time can be a daunting task, especially if you have little experience with WordPress, FTP programs, or file permissions. But setting up Thesis is not hard, and this guide offers step-by-step instructions to installation, along with plenty of illustrations to help you. The tutorial follows the standard Thesis installation process.

Before you start the installation

1. Make sure WordPress is installed on your server. This may sound silly, but there are more than a few support requests on the forum where the user has not installed WordPress yet.

2. Download the Thesis zip file from DIYthemes and unzip it on your computer. There will be a Thesis folder after you do so.

3. Be sure you know how to change file permissions. If you’re uncertain, read the article “How to Change File and Folder Permissions.

4. Make sure you know how to upload files. If you use an FTP program on your computer, usually you can just drag the folder from your computer onto the proper place in your FTP program and drop it. If you are using cPanel or a similar host program, refer to “File Management Using cPanel.”

If you haven’t thought about an FTP program for your computer yet, maybe it’s time to do so. Check out the articles “FTP Programs and Text Editors for Windows Users” or “FTP Programs and Text Editors for the Mac” for free FTP and editor programs. They will make file operations and customization a lot easier.

5. Read all the instructions below before you start.

Now, for the DIYthemes instructions and my comments:

1. Upload the new Thesis 1.5.1 folder to your /wp-content/themes folder.

Figure 1: The /wp-content and /themes folders
Figure 1: The /wp-content and /themes folders

1. Locate the /wp-content folder in your root directory. Inside it will be a folder called /themes. The folder structure will look like Figure 1.

2. Upload the entire Thesis folder you unzipped on your computer to the /themes folder. Do not upload individual files!

Figure 2: Thesis has been uploaded to the /themes folder
Figure 2: Thesis has been uploaded to the /themes folder

3. When you are finished, you will see the /Thesis folder within the /themes folder, as in Figure 2.

2. Locate the /custom-sample folder and change its name to /custom.

Figure 3: Thesis custom folder has been renamed
Figure 3: Thesis custom folder has been renamed

1. Open your /Thesis folder and locate the /custom-sample folder within it.

2. Rename the folder “custom” as in Figure 3.

Figure 4: The Thesis folder and all its files and folders
Figure 4: The Thesis folder and all its files and folders

When you are done, your Thesis folder should look like Figure 4. If it doesn’t, I recommend you delete it and start over.

3. Locate the layout.css file, and change its permissions to 666.

Figure 5: The layout.css file and the file dialog
Figure 5: The layout.css file and the file dialog

1. Find the layout.css file within your /Thesis folder and highlight it.

2. Most FTP programs allow you to right-click on the file to bring up a dialog similar to the one in Figure 5. Choose “Get Info,” “File Properties,” or similar wording. Refer to the cPanel article mentioned above if you are using that program.

Figure 6: Changing the file permissions on layout.css
Figure 6: Changing the file permissions on layout.css

3. A file properties dialog will pop up like the one in Figure 6. Choose “Permissions” or similar wording.

4. If there is a box that you can enter the file permission numbers, enter 666. If not, set file permissions to Owner: Read, Write; Group: Read, Write; and Others: Read, Write. “Owner,” “Group,” and “Others” may be worded differently, but they will be close enough to figure out.

5. Click the “Apply,” “Save,” “OK” or similar button to save your changes.

4. Change the permissions of your /custom/cache folder to 775.

The full instructions read:

[optional] If you’d like to give Thesis the ability to auto-crop thumbnail images for you, then you’ll want to change the permissions of your /custom/cache folder to 775.

Trust me, you will want to have Thesis to do this for you, so you need to change the permissions!

Figure 7: Location of the /cache folder within the /custom folder
Figure 7: Location of the /cache folder within the /custom folder

1. Locate the /cache folder. Open up your /custom folder. The /cache folder is inside the /custom folder within your /Thesis folder as shown in Figure 7.

Figure 8: Changing the file permissions on the /cache folder
Figure 8: Changing the file permissions on the /cache folder

2. Use the same procedure you did when changing the layout.css file’s permissions: Highlight the /cache folder, right-click on it, and get to the “Permissions” panel in the file dialog.

3. If there is a box that you can enter the file permission numbers, enter 775. If not, set file permissions to Owner: Read, Write, Execute; Group: Read, Write, Execute; and Others: Read, Execute. Note that Others: Write will be the only option left unchosen. “Owner,” “Group,” and “Others” may be worded differently, but they will be close enough to figure out.

4. Click the “Apply,” “Save,” “OK” or similar button to save your changes.

5. Inside your WordPress dashboard, go to Appearance > Themes, and then activate Thesis.

1. To get to your Administration panel, type “your-domain-name/wp-admin” in your browser. For example, I type in the following to get to the Thesis Theme Tools Admin panel:

http://thesisthemetools.com/wp-admin

2. From your Administration panel click on “Appearance,” then on “Themes.”

Figure 9: The themes panel with the Thesis theme
Figure 9: The themes panel with the Thesis theme

3. Click on the Thesis theme image. You will be taken to a simulation of how it will look (but believe me, it never looks right!). Click on the button to make Thesis active.

4. You will be taken to the Thesis Options panel. Although it’s not strictly necessary, click on the “Big Ass Save” button at the bottom of the panel to complete the installation.

6. You’re done!

The full instruction reads,

You’re done, but make sure you check out both the Thesis Options and Design Options pages that now exist inside your WordPress Dashboard. You’ll be able to do things like set up your navigation menu, set fonts and font sizes, select your layout, and much, much more. To put it simply, this is the part of Thesis you don’t want to miss!

Now it’s time to see your blog in Thesis for the first time! It will be the spartan look of the fresh install, but you will change that, won’t you?

I hope these instructions have been clear and helpful. Feel free to make a comment, or if you want to email me, click on the “Contact” button in the nav bar.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Free FTP Programs and Text Editors for Mac and Windows

New users will often try to get by with using their host’s cPanel software for file transfers and NotePad or TextEdit for editing the custom.css and custom_functions.php files. It’ll work, but it’s clunky and frustrating, at best.

There’s a better way. Two new articles just posted recommend free FTP and text editor programs for both the Mac and for Windows computers. These programs perform just as well as their paid counterparts and introduce a whole new level of productivity to the new Thesis user. The articles are:

Take a look!

FTP Programs and Text Editors for the Mac

For more than casual work with Thesis, you need to get separate programs for FTP file transfers and for editing your custom.css and custom_functions.php files. Trying to use your host’s cPanel or similar software for file transfers is an exercise in frustration, as is trying to change permissions. And TextEdit will try to change your files to the totally incompatible .rtf format if you don’t keep a close watch on it. Even the editor in the Thesis OpenHook plugin is pretty basic.

There’s an ongoing survey in the Announcements part of the DIYthemes Forums about which FTP programs and text editors people use. Based on the response of many Mac users, I feel confident recommending the following two free programs:

Cyberduck FTP program for file transfers

Cyberduck is a free open source FTP program for the Mac. Just because it’s free doesn’t mean it doesn’t have all the features that paid programs have. Here are some of the things you will find most valuable for use with Thesis:

  • Browser looks like the Mac Finder
  • Drag-and-drop file transfer to and from your computer
  • Change file permissions (essential for Thesis upgrades)
  • Supports external editors to edit files directly on the server, an advanced feature you’ll appreciate later

This is a screenshot of the browser during a file transfer:

Cyberduck browser during file transfer
Cyberduck browser during file transfer

TextWrangler Text Editor

TextWrangler is a powerful text and programming editor from BareBones Software, the maker of the venerable BBEdit text editor. It does not have all the features of its big brother, but TextWrangler has more than enough power to edit Thesis files efficiently — and it’s free, while BBEdit costs $130!

There are too many features to list, but these are the ones you will most appreciate:

  • Syntax highlighting for the php and css files you will be editing
  • Line numbering and invisible character show helps you when you cut-and-paste and debug
  • Powerful general-purpose text editor with many text-transformation features
  • Built from the ground up as a Mac program, with Mac look-and-feel

Here’s a screenshot of the syntax coloring feature in action:

TextWrangler edit screen showing syntax highlighting
TextWrangler edit screen showing syntax highlighting

Of course, there are many other fine FTP programs and text editors out there, but they are not free! And for all but the most serious Thesis work, they will not do any better than Cyberduck and TextWrangler will.

I hope you will take the plunge soon and get you some good tools for your Thesis work — you’ll thank yourself! And I hope you found this information helpful. Please feel free to leave a comment or send me an email using the “Contact” button!

©2009 Thesis Theme Tools. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

FTP Programs and Text Editors for Windows Users

For more than casual work on Thesis, you need to get separate programs for FTP file transfers and for editing your custom.css and custom_functions.php files. Once you have used separate programs on your computer for FTP and program file editing, you will wonder how you ever did without them

There’s an ongoing survey in the Announcements part of the DIYthemes Forums about which FTP programs and text editors people use. Based on the response of many Windows PC users, I feel confident recommending the following two free programs:

FileZilla for FTP file transfers

FileZilla is a free FTP file transfer program that will take the place of your having to do file transfers on your host’s cPanel or similar software. Using a separate program is a lot easier and more flexible, besides its having many more features than cPanel.

Although FileZilla is free, that doesn’t mean it’s crippled: it has a full list of features that compare favorably with paid programs. In particular, it:

  • Has an interface familiar to Windows users
  • Is easy to use, with drag-and-drop file transfers from and to your computer
  • Has all of the essential tools of site management
  • Allows easy changing of file permissions (essential for Thesis users)
  • Supports remote file editing (an advanced way to edit files directly on the server)
  • Supports a full range of transfer protocols

Here is a small screenshot to give you an idea of how it looks. You can see more screenshots on the site:

FileZilla main screen
FileZilla main screen

Notepad++ text editor

Although you could use NotePad on your computer to edit custom.css and custom_functions.php, it really wasn’t designed for editing source code files and shows it. Even Thesis OpenHook’s editor is very basic, and not suitable for more than occasional work.

A much better alternative is Notepad++, a free programming editor for Windows. Once again, just because Notepad++ is free doesn’t mean it’s not powerful and full-featured. Among the things you will most appreciate are:

  • Syntax coloring
  • WYSIWYG
  • Auto-completion
  • Multiple documents and views can be open at the same time
  • Full drag-and-drop support

This small screenshot gives you an idea how the syntax coloring and line numbering look. There are many more screenshots on the Notepad++ site:

Notepad++ HTML editing example
Notepad++ HTML editing example

I hope you have been encouraged to get separate FTP and text editor programs. I’m sure you won’t be disappointed by either of these two recommended pieces of software. Please feel free to make a comment, or to email me using the “Contact” button at the top of the screen.

©2009 Thesis Theme Tools. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!