Grayscale Journal WordPress Theme

Easily change header image and add post thumbnails to your articles

A subdued theme throughout. Using CSS opacity settings, the sidebar is partially whited out unless that side of the page is hovered over. This cleans up the page, relieving the readers’ eyes as they take in the main content.

Use any size custom header image to replace the included image and the theme will adjust the image’s dimensions. Or choose not to have a header image form the theme options page.

The navigation bar features top level pages. If a page has sub pages, the navigation area expands to show a second screen-wide block of sub-pages on that page.

Grayscale Journal is a widget-ready theme with a theme options page where you can make theme selections from in your WordPress admin panel, including:

  • header image on front page (yes/no)
  • header image on inside pages (yes/no)
  • input link color scheme (use 6-digit HEX codes like #FF0000 or color words like red)
  • rounded thumbnail corners (yes/no)

Documentation

Installation

The zip includes a wp-content folder, divided into themes and plugins. Upload the contents of the themes folder to your ..wp-content/themes/ directory. You can also upload the included plugins to your ../wp-content/plugins/ directory. Activate the theme and any optional plugins you want to.

Theme Options

By going to the Design/Current Theme Options page of your wp-admin panel, you can configure the theme options.

Link Color

You can use either 6-digit hexadecimal color codes, or color words.

Enter a 6 digit color code (with # sign) like: #FF0000 or you can enter a color word like red, green, purple, etc. to set the links color scheme.

Tip

For choosing colors you may want to use an image editing program or if your browser is FireFox, try this nifty little color picker add-on: ColorZilla. Once you have it installed in your Firefox, click the color dropper in the browser corner and click anywhere on the page. Then you right-click the dropper icon and select to copy the 6-digit HEX code, and paste that into your theme options page.

Header Options

rounded or square thumbnails option

choose rounded or square thumbnails

Header Image - The default is visible. This means the header image will show up on all inner pages (not front page). If you choose the other option (hidden), this will make the header image disappear for all inner pages, but it will still be displayed on the font page of your site if that setting is turned to visible.

Header Image on Front Page - The default is visible. This means the header image will show up on the front page of your site. If you choose the other option (hidden), this will make the header image disappear for the front page, but will not affect header images on the inner pages.

Rounded Thumbnail Corners

This controls the automatic rounding of optional post thumbnails images. The default setting is visible, meaning the rounded corners will appear on your thumbnail images. If the other option (hidden) is chosen, the thumbnail images will appear with square corners.

Additional Configuration

Before you get too deep into configuring the theme it’s a good idea to save a backup copy, since you can change between the theme options page and your own custom tweaks.

Custom Title

select the font and size for your site title

select the font and size for your site title

The title is an image of the font FF Dax Wide Medium Italic . To get yours, go here (screenshot to right).

Enter the title of your site and select 32px if you want to duplicate the same look of the default title. You can use any size, or font from the fontshop.com site, though from what I’ve seen, the larger font sizes generate sample pics that are cut off.

Right-click on the generated sample and choose to save the image. Save the image as title.jpg <important!

The upload your new title.jpg image to the images folder of your site.

Custom Header Image

In the theme options page you can select whether or not to include the header image in your site. The default setting is for the header image to be visible.

You can replace the header image with your own custom image by naming your own header image header.jpg <important!

The theme will adjust for the height and width of your own header.jpg file, though the closer to 978 pixels wide, the better your header image will look.

Post Thumbnails

Use the image upload feature in the text editor window. Copy the Link URL text and paste it into a Custom Field called thumbnail

This feature is to give each of your posts a unique look on index pages. These will not show up in the actual full content post page, but you can use the regular image upload feature to do that, in fact, the image uploader is the easiest way to upload your post thumbnail images.

To add a thumbnail image to a post, scroll down to the Custom Fields section of the Write/Post screen. Type thumbnail under key, and the path to the thumbnail image goes under value.

The easiest way to get thumbnail images from your computer to your site is to use the regular WordPress image upload feature in the text editor field of your WordPress Write screen.