Servlet Web Hosting - MySQL, Java, JSP, Servlet, Tomcat, SSH Blog

CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG 443 Figure 16-8. A new base image for a theme To replace the header graphic in the theme, I cropped the image to match the dimensions of the original header graphic. I also overlaid the blog name onto the image. The original theme header deliberately left that area blank for the same purpose. My header image is shown in Figure 16-9. Figure 16-9. Cropped and modified image ready for the theme After you are happy with your main header image, copy it to the same name as the theme header image, overwriting the original. The theme now automatically uses your new version of the header image. You can continue to modify the other background images that accompany the theme, again copying over the originals. I re-created them using colors from the new masthead image to blend with it. Finally, I tweaked the CSS style sheet to use the same colors from the header
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

442 CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG Figure 16-7. The original c3ro mask theme Modifying Theme Images To change the tone of the theme, choose a different header graphic. You can use any image or images you find to convey the appropriate impression about your blog. You could take a photo yourself or buy an image from one of the many photo agencies on the Web. For this example, I thought the group of horses shown in Figure 16-8 seemed to convey the idea of a community.
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG 441 displaying a single post and the file single.php exists in your current theme directory, Word- Press will use that template. This allows you to present single posts with a different layout. Similarly, a file called page.php will be used to display pages. For example, you might decide to use the full width of the browser for your in-depth pages with more content and not display the sidebar. In this section, I will take you through some adjustments to a theme. You will see how to remove elements you don t want and add extra information you do want. You will also learn how to adjust the CSS to make things appear differently, without needing to change the HTML generated from the template. Installing and Copying the Theme First, you need to obtain the theme that you want to modify. For the original theme to use in this chapter s example, I have chosen the c3ro mask theme by C3ro, created by Chris Carlevato (http://c3ro.com/themes/), shown in Figure 16-7. This is a beautiful, three-column theme with a graphical masthead and a fading background. It is a little unusual in that it has its two narrow informational columns, both on the right. I made a couple of changes to the original theme to make it valid XHTML, as standards compliance is an important part of WordPress. The validated theme is available from the Source Code area of the Apress web site (http://www.apress.com), as c3romask-xhtml.zip. Use this as your starting point. After you download c3romask-xhtml.zip, unzip it into a folder call c3romask. Then upload the folder and its contents to your wp-content/themes folder. Go to the Presentation administration page and select the c3ro mask theme to activate it. If you view your blog now, it should look like Figure 16-7. So that you can compare the before and after versions of the theme, you will make changes to a copy of the theme. On your local machine, in the place you unzipped the original theme, rename the c3romask directory to c3romask2. (You could instead copy the directory and not rename it in order to retain the original code on your local machine for later comparison should things go drastically wrong.) You will also need to edit the style.cssfile to change the name defined in the file. If two installed themes have the same name, even if they are in different folders, WordPress gets confused. See Listing 16-1 for the new header comment. Listing 16-1. New Theme Meta-Information in style.css /* Theme Name: c3ro mask 2 Theme URI: http://c3ro.com/themes/ Description: A modified version of c3ro’s mask theme Version: 1.0 Author: Mike Little (after c3ro http://c3ro.com/) Author URI: http://building-online-communities.com/wordpress/ */ Upload this new folder with the modified style.css into wp-contents/themes and check the Presentation page. You should now have the c3ro mask and c3ro mask2 themes listed. Activate the c3ro mask 2 theme.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

440 CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG Figure 16-6. Stylesheet meta-information Template tags are small pieces of PHP code (typically one line of code) placed in your template. These tags do a variety of work. Here are just a few examples of what template tags can do: List the categories in your blog. This list includes links to make your blog display all the posts in each particular category. List your archives by month, by week, or individually. Create a calendar on your page, complete with links to stories for each day and links to move the visitor backwards and forwards through the history of your blog postings. Change the title of your web page based on the current story or current category. All these template tags produce XHTML, not colors, borders, or columns. In other words, the tags make the real content of your blog, marked up semantically, with meaning. The CSS applies the look to this page, adding the colors, positioning different elements into columns, and so on. This allows you to deliver the content in a number of ways without changing the content itself. Tip As an example of the variety of ways you can deliver the same content in very, very different ways, pay a visit to the CSS Zen Garden (http://csszengarden.com). This is a site put together to demonstrate the design capabilities of CSS. The site has hundreds of different themes in a vast range of styles from simple, business-like designs, to eastern-flavored works of art, through punk-styled graffiti-like pieces. But every single version of the site uses exactly the same HTML content! WordPress goes further than many theming and skinning systems. It can automatically use special template files in appropriate circumstances if it finds them. For example, if you are
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG 439 Installing Themes Once you have chosen a theme, you need to install it. Here are the steps: 1. Find the download site and download the zip file. 2. Unzip the theme zip file to your local machine. 3. Upload the files to your server, placing them in the wp-contents/themes folder. 4. Go to the Presentation administration page of your blog and activate the theme (see Figure 16-3, shown earlier in this chapter). If a theme requires a particular plug-in that you don t have installed and the theme author hasn t coded it well, you may get an error message (see Figure 16-18 later in this chapter). If this happens, activate another theme that you know does work and check the readme.txt file or the theme s documentation page (there should be a link to it on the Presentation admin page). The readmefile may mention any requirements for the theme or any restrictions on usage. If you still want to use the theme, download and install any required plug-ins before activating the theme again. (Refer to Chapter 15 for instructions on installing plug-ins.) Modifying an Existing Theme If you cannot find a theme that matches your requirements, you could create your own, but that s not a trivial task. Rather than create a new theme from scratch, it is often quicker to take an existing theme similar to what you want and modify it, assuming the license allows that. This is the approach I describe here. First, let s look at the components of a theme. Examining a Theme s Components A theme consists of two or more files. At the very least, it requires a CSS style sheet named style.css and a PHP template named index.php. The style sheet must contain a specially formatted comment at the beginning of the file. This comment identifies meta-information about the theme, such as a name and description for the theme, version number, URL for the theme, and so on. Figure 16-6 shows this comment for the WordPress Default theme. The PHP file contains the HTML and WordPress tags to display your content. This file contains what WordPress calls The Loop, which is a fairly short but important piece of PHP code that is the heart of your blog page. This code displays the title and contents of your blog posts, as well as information related to it. It also displays a count of the comments a post has and a link to the comments themselves. All the rest of the information displayed on a typical blog page the blog title, links in a sidebar, archive links, and so on is peripheral to The Loop. Most of this other information is displayed by calls to template tags.
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check mysql web server services.

438 CHAPTER 16 CHANGING THE LOOK OF YOUR BLOG As another example, take a look at the Juicy theme by Joni Mueller of Web Jones Designs (http://webjones.org/), shown in Figure 16-5, which I spotted on Alex King s site (http:// managedtasks.com/wpthemes/blog/index.php?wptheme=Juicy). This theme would perhaps be suited to a blog about healthy eating. Its clean, fresh look and pertinent imagery would help keep your readers focused on the subject. Figure 16-5. Juicy theme from Web Jones Designs Tip Some designs for older versions of WordPress are available around the Web, particularly WordPress styles for version 1.2, many of which are listed at Alex King s old competition site http:// www.alexking.org/index.php?content=software/wordpress/styles.php. These are not compatible with the current version 1.5 and need to be converted. A straightforward conversion is fairly painless, and you can find details of that process on the WordPress Codex at http://codex.wordpress.org/ Upgrade_1.2_to_1.5#Upgrading_Old_Templates_-_Easy.
You want to have a cheap webhost for your apache application, then check apache web hosting services.