Archive for January, 2010

WordPress and Twitter API, Plugin

Introduction:

You can connect to WordPress.com to follow your favorite blogs and receive notifications when new posts are published. You can even publish status updates to the WordPress.com blog of your choice. You’ll see the author’s gravatar in your timeline with excerpts and links to full posts. This way you can be notified of each new post within minutes. In some ways our service is different from Twitter. A Twitter user has a timeline of status updates which is like a blog. On WordPress.com one user can write for many blogs and one blog can have many authors. And then there are comments which can be left by anonymous users.

Twitter is an online social networking and micro-blogging tool which basically allows users to post their facebook-like “status” on their twitter page using various devices such as your cell phone, pda, or computer. Their idea revolves around the “what are you doing” concept; letting people know what you’re up to.

Since Twitter’s launch and exponential growth of other social media networks and blogging tools such as Digg, Facebook, WordPress and Blogger, there have been further Twitter developments in the form of plugins and widgets based on the Twitter API to further the cause.

The Twitter API basically allows developers to play around with Twitter’s functions and use twitter’s xml based data on custom applications.

Using the Twitter API, web developers can integrate their latest twitter into Flash, PHP, JAVA, PERL, Python, .NET, Ruby (and more ).

WordPress enables posting and reading via Twitter API

Megablogging, meet microblogging. WordPress now supports posting to and reading your WordPress blogs through any Twitter client that allows custom APIs. Following a WordPress blog on Twitter means you get snippets and links to new posts, just like you’d get any other tweet. Connecting your own WordPress blog to Twitter means you can tweet and blog simultaneously.

WordPress’ Matt Mullenweg wrote a blog post explaining how to connect Twitter and WordPress using Tweetie 2 on the iPhone. Basically, you just need to find your Twitter client’s Custom API settings (for Tweetie 2, they’re behind the little gear icon on the Add Account screen) and enter https://twitter-api.wordpress.com/ as the API root.

WordPress can also attach geotagging information from Twitter to your posts, if your client supports it. If you’ve got multiple blogs, you can go to the profile settings in your WordPress dashboard and choose which one to associate with each of your Twitter accounts. We’re used to thinking of tweeting and blogging as two separate things, but the WordPress team sees them as closely related, and API support is a pretty cool extension of that philosophy.

Using WordPress.com through the Twitter API

If you’re a software developer interested in talking to WordPress.com using the Twitter protocol–you’ve found the right page. If you’re a user, visit our Twitter API page to learn how to get real-time access to your blog subscriptions using a Twitter client that supports WordPress.com.

Twitter is a communication protocol where one can send a message without specifying a recipient. There are a lot of possibilities for Twitter as a protocol and we’re exploring this at WordPress.com.

Through the Twitter API, WordPress.com users can:

  • Read and receive new post notifications from blogs they’re subscribed to using the Blog Surfer feature
  • Post a “status update” to one of their WordPress.com blogs

On this page you’ll learn which Twitter APIs WordPress.com supports, the WordPress.com Twitter API conventions, and other resources to look at.

API Basics

The WordPress.com Twitter API supports Basic AUTH. OAuth is not supported at this time. Users should use their WordPress.com username and password.

Our end-point for the Twitter API is http://twitter-api.wordpress.com. We also support secure connections at https://twitter-api.wordpress.com

The Twitter API is a RESTful API. Requests are made over HTTP and the response is returned using the format you specify. The general format of a Twitter API request is:

http://twitter-api.wordpress.com/category/method_call.format

The available categories and methods are shown in the next section. The formats available are RSS, XML, and JSON. The WordPress.com Twitter API supports each of these.

API Methods

This list of API methods is organized similar to Twitter’s API Documentation. Missing categories are not implemented on WordPress.com.

Timeline Methods

statuses/friends_timeline

Individual blog posts on WordPress.com are status updates. With this call you will receive recent posts from the blogs the user is subscribed to.

statuses/home_timeline

Same as statuses/friends_timeline

statuses/user_timeline

Users can request their most recently blog posts using this call.

↑ Table of Contents ↑

Status Methods

statuses/update

This method is similar to its Twitter counterpart. It lets you make a blog post. You may specify a post with a title using “post title::post body”. If you specify an identifier for a blog, the post will go there. Otherwise the post goes to the default blog of the authenticated user.

↑ Table of Contents ↑

User Methods

users/show

Shows profile information about the specified blog and returns its latest post.

statuses/friends

Shows which blogs the authenticated user is subscribed to.

↑ Table of Contents ↑

Friendship Methods

friendships/create

Subscribe to a blog

friendships/destroy

Unsubscribe from a blog

friendships/exists

Check whether the current user is following the specified blog or not

friendships/show

Shows the relationship between two users

↑ Table of Contents ↑

Social Graph Methods

friends/ids

Returns the blogs the current user is subscribed to as a list of ids

↑ Table of Contents ↑

Account Methods

account/verify_credentials

Use this method to authenticate a user and test if their credentials are valid (uses BASIC AUTH)

API Fields

Each of the API methods returns different fields. Here are how these fields map onto WordPress.com.

description is the tag line description of the blog.

id is a number that identifies a blog.

name is the WordPress.com username of the author of the post.

profile_image_url is a link to the Gravatar of the post author. If no Gravatar is available the Blavatar for the blog is used instead.

screen_name is the address of the blog without the http://.

text is an excerpt or shortened snippet (up to 140 characters) of the post.

url is the URL of the blog.

Recommended Reading

Here’s a list of Twitter Plugins and links:

WordPress Twitter Plugins, Tools, Widgets

  • Wickett Twitter Widget – Display tweets from a Twitter account in the sidebar of your blog. As seen on WordPress.com. The easiest and best way to add Tweets to WordPress.
  • TweetSuite -� a Twitter-WordPress integration plugin that includes server-side TweetBacks, ReTweet-This buttons, digg-like Tweet-This Button, automatic tweeting of new posts and some widgets.
  • Tweet This – A plugin that adds a Twitter icon to every post and page, so your readers can share your blog entries on their Twitter accounts with ease.
  • TweetMeme button – easily allows your blog posts to be retweeted.
  • Simple Twitter Link – simply returns a URL, which is a link to Twitter with your post/page URL within it.
  • WP Twitip ID – Plugin adds an extra field to the comment form for user to enter their twitter username
  • Twitter Badge – Official javascript codes that display badges showing what you are posting on Twitter.
  • The Twitter Updater – a wordpress plugin that automatically sends a Twitter status update to your Twitter account when you create, publish, or edit your WordPress post. You can specify the text for the updates, and also have the option to turn the auto update on/off for the different post actions in the admin panel.
  • TwitThis is an easy way for people to send Twitter messages about your blog post or website. When visitors to your website click on the TwitThis button or link, it takes the URL of the webpage and creates a shorter URL using TinyURL. Then visitors can send this shortened URL and a description of the web page to all of their friends on Twitter.
  • Twitter Tools – This wordpress plugin creates an integration between your WordPress blog and your Twitter account. Pull your tweets into your blog and create new tweets on blog posts and from within WordPress.
  • Twitter WordPress Sidebar Widget – Customise the number of updates shown in your sidebar, individual links to each status update on Twitter, style your Twitterings using CSS, choose whether to display your Twitter name before each post and customise text between the post text and the relative time.
  • Twitter Feed – Posts your blog updates to your twitter account. Login to twitterfeed using your OpenID, provide the URL for your blog RSS feed, and how often to post to Twitter.
  • Twitt-Twoo – is a simple little plugin that will allow you to update your Twitter status right from your blog�s sidebar. It is AJAX powered and allows for quick and easy status updates.
  • Twitter Sharts – ‘Shart’ your twitter status anywhere within your wordpress blog posts or pages.

title-twitterSince Twitter launch in Year 2006, it has grown to create network what most people would call a social media revolution and it became one of the most popular social media networks, which if you’re serious about blogging, you can’t ignore.

Twitter has their own tools for displaying Twitter status on website, but they are pretty slow and not too varied or maybe you just need don’t know about such plugins, that’s why I chose to take research and create comprehensive list with Twitter related WordPress plugins and tools that will help you unite Twitter with your blog.

Twitter Tools

Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account.

Twitter Tools integrates with Twitter by giving you the following functionality:

  • Archive your Twitter tweets (downloaded every 10 minutes)
  • Create a blog post from each of your tweets
  • Create a daily or weekly digest post of your tweets
  • Create a tweet on Twitter whenever you post in your blog, with a link to the blog post
  • Post a tweet from your sidebar
  • Post a tweet from the WP Admin screens
  • Pass your tweets along to another service (via API hook).

TwitterDash

TwitterDash is a WordPress plugin that adds your friends timeline from twitter into your dashboard.

twitter-dash-wordpress-plugin

Thread Twitter

Thread Twitter fetch your tweets and display them in thread style.

Elegant Twitter Widget

A WordPress widget that displays twitter updates in yummy valid semantic XHTML code. The code is heavily commented and the output is in template functions so everything is fully customizable.

Twitt-Twoo

twitttwoo-released

Twitt-Twoo is a simple little plugin that will allow you to update your Twitter status right from your blog’s sidebar. AJAX takes cares of the hard work, and means that your page doens’t even have to reload, allowing for quick and easy status updates.

twitt-twoo-wordpress-plugin

Twitter Retweet

Twitter ReTweet provides a function that displays a ReTweet link which gives visitors the ability to ReTweet the current post; supports custom URLs (perfect for Google Analytics Campaign Tracking

Tweet Tweet

Tweet Tweet is a plugin for WordPress that polls Twitter and archives your tweets and the tweets of those you follow so those insightful conversations you have at 1am are never lost.

Twitter Widget

Adds a sidebar widget to display Twitter updates (uses the Javascript Twitter ‘badge’)

twitter-widget-wordpress-plugin

Twitter Widget Pro

A widget that properly handles twitter feeds, including @username, #hashtag, and link parsing. It supports displaying profiles images, and even lets you control whether to display the time and date of a tweet or how log ago it happened (about 5 hours ago, etc). Requires PHP5.

twitter-widget-pro-plugin

Tweet Rooster

Add the code from this website and you can enable users to tweet directly from your website or blog.

WP-Twitip-ID Plugin

Add a twitter field to your comment form (easily).

wp-twitip-id-plugin

Top Twitter Links by Twitturls

Widget that displays currently popular links that have been tweeted.

TwitterFountain

Have you ever wanted to see what was happening at that one event you could not go to? Did the plain text-backchannels somehow left you feeling disappointed?

Twitterfountain comes to your aid mashing up tweets and Flickr-images that share the same tags into a spectacular visual. Below is a sample, that you can copy and embed in your own site.

twitter-fountain-wordpress-plugin

TweetSuite

The first version of TweetSuite, a Twitter-WordPress integration plugin that includes the following features:

  • Server-side (no-JS or remote calls) TweetBacks
  • ReTweet-This buttons for each TweetBack
  • A digg-like Tweet-This Button
  • Automatic Tweeting of new posts
  • A Most-Tweeted Widget
  • A Recently-Tweeted Widget
  • My-Last-Tweets Widget
  • A My-Favorited-Tweets Widget

TweetBacks

People are talking about your posts, and not only in the comments to your post. A lot of that conversation is happening on Twitter, and now, you can take that conversation right back to your blog! This plugin imports those tweets about your posts as comments. You can display them in between the other comments on your blog, or display them separately.

Tweet Stats

This plugin adds two widgets to your site: “Most Tweeted Posts” and “Recently Tweeted Posts”. It depends on the Tweetbacks plugin by Yoast, so make sure you have that plugin installed.

tweet-stats-wordpress-plugin

Twitter Remote (beta)

This widget shows which twitter users recently visited your blog or website.

twitter-remote-wordpress-plugin

Tweet This

Adds a “Tweet This Post” link to every post and page. Shortens URLs in advance through Th8.us, eating up only 19 of 140 characters. Also included: Plurk, Yahoo Buzz, Delicious, Digg, Ping.fm, Reddit, and StumbleUpon. Includes the post’s title after the link (can be customized). If your titles are really long, they get cut off at 136 characters with “…”. Customize under Settings > Tweet This. Includes your choice of six buttons.

tweet-this-wordpress-plugin

ComenTwitter

Ultimately plugin’s goal is to give the commenter the option of sending their comment to twitter and allowing people to follow that blogs comments both in the blog and in twitter. The main reason for this is to generate a buzz and encourage commenting on peoples blogs. It will also improve the quality and value of people’s tweets revolving around blog posts.

commentwitter

TweetRoll

This widget shows your friends avatars on your blog/website and encourages more people to follow you. Colour customization and localization options available.

tweet-roll-wordpress-plugin

Twitme

This plugin allows you to automatically post your new posts on the twitter website. This is good because for example the iPod and iPhone for example have a large amount of twitter clients to pick from. Your blog posts will arrive to people while they are walking the streets.

Twitter Poster

The Twitter Poster is a plugin which allows wordpress publishers to automatically post their new posts to their Twitter account. The Twitter Poster will take the title of a new post and will subit it to the Twitter account specified in the options. It will also add the link back to the post, allowing your twitter followers to access the post details

Twitter Friends Widget

Twitter Friends is a WordPress plugin that displays your Twitter friends/ followers in your sidebar in the same way that they appear on your Twitter homepage.

twitter-friends-widget

Tweetable Twitter Plugin

Tweetable is a WordPress Plugin intended to help integrate Twitter into your blog. It can tweet your blog posts as they are published, shortening the URLs with either Tr.im or Is.gd and optionally including Google Analytics campaign tags. You can display your latest tweet(s) in your blog sidebar with a customizable widget, which can even display your follower count.

tweetable-twitter-plugin-wordpress

Twitter Feed

The application will display the latest tweet from all of the active accounts and then displays those latest tweets in date order. So the newest tweet across all of the accounts will always be shown first. It is also possible to switch between allowing/disallowing PM (Private Message) tweets to be included in the display.

twitter-feed-wordpres-plugin

Add Twitter RSS

Add Twitter RSS is a simple plugin that adds your Twitter RSS link to the header of your blog. It allows your readers to easily find your Twitter feed.

add-twitter-rss-wordpress-plugin

TwitterCounter

Allows you to integrate TwitterCounter.com badges on your blog. Additionally, you can add the Twitter Remote to your blog, which shows which twitter users recently visited your blog or website. Manually add where you would like to display the badge / remote or use the WordPress sidebar widgets instead.

@ Reply

This plugin allows you to add Twitter-like @reply links to comments. When clicked, those links insert the author name and a link to the comment you are replying to in the textarea.

reply-wordpress-plugin

Bird Feeder

Bird Feeder is a WordPress plug-in that simply tweets when you publish a post. It doesn’t do anything else, nor will it ever.

Twitter Updater

This plugin will let you automatically update your Twitter.com status with your most recent blog post. There are a few options to how the display will look when it updates.

TweetMeMe

At last I found this beautiful website which tracks the hottest links on Twitter, interesting analysis.

tweetmeme-twitter-links

Example:1 AJAX Twitter plugin for WordPress

image I have been working on a plugin which I had early posted on my personal blog. I have finished the Twitter plugin for WordPress now and ready to release for public download.

This plugin is using the Twitter API to get and post the updates. You need to have a twitter account to post updates. I am sure now almost all the bloggers use twitter.

Features

  1. You can update your twitter status from your blog
  2. You can view and display public updates on your blog
  3. You can view and display your followers updates on your blog
  4. You can view and display your followers on your blog and increase your followers
  5. Simple installation
  6. Widget Ready, just need to enable to use
  7. Can you displayed anywhere on your blog, by just adding a simple code if you do not want to display using the widget
  8. Widget fully customisable, size, font, font size, colour, number of updates, number of followers, etc
  9. Enable and disable different features
  10. Regular Updates

Installation

Installation is very simple, just upload the unzipped files to the plugins directory and activate the plugin. If you wish to display on the sidebar, just go to the widgets option as shown below

image

Settings

After activating the plugin, just go to the setting link , you will find the Kish Twitter settings link

image

Once you go to the settings, you will find all the options to customize the view of the “Kish Twitter” Widget

image

Options Explained

  • Twitter Enabled – If you want this plugin to work, you need to check this option or nothing will be shown even if the plugin is activated
  • Enable Public Updates – You can enable or disable public updates on your widget
  • Enable Followers Say – By enabling this, you can display the messages from your followers on your widget
  • Enable Rel = nofollow – You can add rel tag by enabling this
  • Enable Follow Me- You can enable this to get your followers details
  • Twitter User Name – You need to enter your username and password for this plugin to work
  • Maximum Info Lines – The maximum number of updates that you want to show on your widget. You will need to set this according to the size of the widget.
  • Maximum Users- You need to set this to display the number of followers and the number of twitters you follow
  • Font- Family – Name of the font that you want to use for this widget, example a series of fonts or font name
  • Font Size – Font size of the widget
  • Message – You can display a message on the footer of the widget
  • After you make the changes, just save the options

You can display the widget anywhere on your blog by just adding the following to your blog template

<? if (function_exists('printKishTwitter')) printKishTwitter(); ?>

If you have a questions please post it here.

UPDATE – Please check the latest version of Twitter WordPress Plugin – Kish Twitter

Download Now

Example:2

WordPress Twitter Plugin is a cool plugin that will add a beautiful Tweets widget to your wordpress blog.

You can choose to display your Twitter timeline or your friends’ timeline in the widget. You can even choose to display tweets on a keyword, depending upon your blog’s niche. For eg., if your blog is about wordpress, its themes and plugins, you can choose to display tweets on the keyword “wordpress”.

If you have a blog on iphones then you may add a WordPress Twitter widget that displays all tweets on the keyword “Iphone”!!! This makes your blog more useful to your readers, as they will be able to discover some cool tweets (links) related to your niche.

The widget is available in three different themes – blue, green and red. You can preview the widget live here on Bestindianbloggers

How to install WordPress Twitter Plugin?

  • 1. Download the plguin zip file and upload it via “Plugins” –> “Add New” –> “Upload” in wordpress. Alternatively, you can choose to search for the term “Wordpress Twitter” and install it directly from wordpress.
  • 2. Activate the plugin through the ‘Plugins’ menu in WordPress
  • 3. Go to “Settings” –> “Wordpress Twitter” and specify the Twitter user name, password, Widget’s width, height, theme (style), number of tweets to display etc. If you want to display tweets on a keyword, choose “Search” against “Timeline” and specify the keyword
  • 4. Go to Widgets and add the “Wordpress Twitter” widget to your sidebar.
  • 5. Alternatively, you can also directly add the following code to wherever you want to display the widget.
<?php $bibtweets=new bibtweets(); $bibtweets->printBox(); ?>

That’s all folks!!! Install WP Tweets and enjoy the widget.

WordPress Twitter Plugin Options:

The following image shows the various configurable options in wordpress twitter plugin.

WordPress Twitter Widget:

The following image is a red themed widget as seen on a wordpress blog. It is showing Bestindianblogs Friends Timeline.

Wordpress Twitter

WordPress Twitter Keyword Widget:

The following image is a blue themed widget as seen on a wordpress blog. It is showing tweets for the keyword “Wordpress”.

Wordpress Twitter Keyword, WordPress Tweets

WordPress Twitter Keyword Widget:

The following image is a green themed widget as seen on a wordpress blog.

Twitter for WordPress

Download WordPress Twitter Plugin from wordpress repository @ http://wordpress.org/extend/plugins/wordpress-twitter/!!!

Thanks to Ptwix for being the inspiration behind this plugin. Ptwix can be used on any PHP based site, but lacked the automation of a wordpress plugin. WordPress Twitter Plugin is easily configurable and can be used on wordpress blog.Besides, it can automatically detect the presence of Curl and use it for retrieving Tweets.If Curl is not enabled on your wordpress server, the plugin uses file_get to retrieve the tweets. We have plans to extend the capabilities of this plugin beyond what is there currently.Until then, enjoy showing beautiful WordPress Tweet widgets on your wordpress blog.

FAQs:

Can I adjust the width and height of the widget?

Yes for sure.You can easily configure the width and height via the plugin settings (Settings — >Wordpress Twitter)

Can I determine the number of tweets to show in the widget?

Yes.You can configure the number of tweets to show in the widget via the plugin settings (Settings –> WordPress Twitter).

Can I hide my “Follow me on twitter” link in the widget?

Yes. It is turned off by default.You can turn it on to let your blog readers follow you on twitter.

Can I display the widget at any place other than the sidebar?

Yes. You can do so by placing the php code (refer above) in the appropriate theme file.

What version of PHP does this plugin require?

The plugin needs PHP 5.0 and above.Most good webhosts would have already migrated to the latest version of PHP. If you don’t have PHP 5.0 or above, ask your webhost to upgrade PHP.
Version 1.4 of the plugin can work even on earlier versions of PHP.

Bookmark and Share

WordPress and Facebook Plugin

WP-FBConnect

From Facebook Developer Wiki

WP-FacebookConnect adds Facebook functionality to WordPress using the Facebook Connect APIs. It provides single sign-on, avatars, and News Feed publication of comments.

You can download the plugin from http://wordpress.org/extend/plugins/wp-facebookconnect/.

Please contact ahupp at facebook.com with any questions or problems.

Contents

[hide]

//

How Does it Work?

The first time a user clicks the Connect button, the plugin creates a new WordPress user named ‘fbN’, where N is that user’s Facebook user ID. The Facebook user ID is also stored in the wp_usermeta table under the key fbuid. The plugin can securely identify the Facebook user because it received signed session cookies along with the request.

Once the WordPress and Facebook accounts are linked and the Facebook user ID is verified, the plugin sets a WordPress login cookie. The page reloads and the user will be logged into the blog.

Most login state handling occurs in fbc_init_auth.

Installing the Plugin

  1. Copy the plugin to wp-content/plugins/wp-fbconnect under your WordPress installation.
  2. In the WordPress Admin panel, visit the plugins page and Activate the plugin.
  3. Visit the settings page and select “Facebook Connect”. Follow the given instructions to configure the plugin and obtain a Facebook API key.

A minimal amount of theme integration is necessary. Open the ‘comments.php’ file in the theme and add the following line where the Connect login button should be inserted:

<?php do_action(‘fbc_display_login_button’) ?>

The reason for calling fbc_display_login_button via do_action instead of directly is to avoid spewing errors if the plugin is disabled. It would be equally correct to directly call fbc_display_login_button() here.

As a simple example, the comments.php file on my blog looks like:

<?php if ( $user_ID ) : ?>

<?php else : ?>

….

<?php endif; ?>

<?php do_action(‘fbc_display_login_button’)  ?>

Note: The fbc_display_login_button function should be called regardless of whether the user is currently logged into WordPress or not. However, the login button does not appear in the user is logged into WordPress.

You should also make sure the following required hooks appear somewhere in your template. These appear in the default template but may not appear in a modified template.

  • language_attributes() should be called within the declaration of the HTML tag in header.php.
  • wp_head() and {{c|wp_footer() should be called in header.php and footer.php, respectively.
  • comment_form() sets up the Feed form.

There are also some optional but useful hooks that should appear:

  • get_avatar in a comment will display the commentor’s Facebook profile pic.

See config.php and the Settings page for more configuration and customization options.

If you don’t want the user login state box to display in the upper right corner of the screen, simply add a call to

fbc_display_login_state();

in the template where you would like it to appear.

External Documentation

Adam Breckler wrote up an installation tutorial: http://www.adambreckler.com/setting-up-facebook-connect-for-wordpress

Other Plugins to consider

Integrate Facebook Share on your WordPress with analytics: http://wordpress.org/extend/plugins/facebook-share-new/

About the nofollow Attribute

When a Facebook Connect user posts a comment, the Author field for the comment links back to that user’s public profile page at Facebook. For instance, my comments link back to http://www.facebook.com/people/Adam-Hupp/806285106.

To reduce spamming, WordPress automatically adds the nofollow attribute to all comment links. However, this is undesirable when the links are generated by a trusted source (for example, the plugin). For this reason the plugin will remove the nofollow attribute from all Facebook user comments. You can configure this on the Settings page.

AJAX Login

TODO: Example will be implemented in a later release.

Known Problems

  1. The login status box (“Welcome, yourname”) has a fixed size instead of expanding to fit the name.

Future Work

  1. Support avatars and News Feed for blog posters.
  2. Notification when a friend comments on the same article you have.
  3. Widget to display your friends that have visited the blog.
  4. Widget to invite friends to read the article.
  5. Support for BuddyPress

Troubleshooting / FAQ

The best tool for troubleshooting is to load a post with the string “?fbc_verbose_debug” at the end of the URL. This will try to identify the most common misconfigurations. Note that this only works in Firefox at the moment.

Q. I don’t see the Connect button.

A1. Currently the Connect button will not display for users that are already logged into WordPress.

A2. Make sure there is a call to the wp_head hook in the header.php file of your theme, and that the wp_footer hook is also called somewhere.

A3. See the question entitled “It doesn’t work in IE”.

A4. Look at the generated page and find the URL to the fbconnect.js file. It should look something like ‘http://somesite.com/wordpress/wp-content/plugins/wp-fbconnect/fbconnect.js’. Load this page for your site and verify that something like JavaScript is returned. If you get a 404 error or some other page you’ll need to fix your access rules/installation/rewrite rules so that the file is accessible.

Q. Under what license is this plug-in released? Can we edit and release new versions based on it?

A. GPL Open Source.

Q. It takes too long for the user profiles, logged in user name, and login button to appear. How can I make it faster?

A. Loading of these page elements is triggered by the call to FBConnect.init(…) generated in fbc_footer. If there is large amount of JavaScript (e.g., ads or tracking) that appears before that call it will slowdown Facebook Connect loading. Make sure the FBConnect.init(…) call comes as close to the end of all XFBML content as possible.

Q. A user logged in to wp-fbconnect cannot post comments. The “submit” button does nothing.

A. The textarea containing the comment text may have had its id attribute renamed. Find the textarea with name=comment and ensure that its id attribute is also equal to ‘comment’

Q. It doesn’t work in IE.

A. You’re missing a call to language_attributes() in the html tag of your theme. Edit header.php and make sure the html tag looks like this: http://trac.wordpress.org/browser/trunk/wp-content/themes/default/header.php

Q. How do I get this to work with wp-super-cache?

A. See http://www.allfacebook.com/2008/12/how-to-make-facebook-connect-work-with-wp-super-cache/

Q. I get a error that says “parse error, unexpected T_OBJECT_OPERATOR”, or some other parse error.

A. The plugin only supports PHP5 and you are using PHP4. Please upgrade. If you are a user of 1and1 hosting, follow these instructions: http://www.thecodecave.com/article206. The .htaccess file it describes must be placed in the root directory of your WordPress installation.

Q. How do I change the text “Connect with your Facebook Account” that appears above the connect button?

A. Go to yourblog.url/wp-admin/plugin-editor.php?file=wp-fbconnect/fbconnect.php. Search for “Connect with” and replace that line with any text you like or remove it.

Q. I setup the plugin and then moved it to a new site. Now I receive and error about an invalid Connect URL. How do I fix this?

A. The Connect URL is configured automatically each time you press “Submit” on the settings page. Try going to the settings page and pressing Submit again.

Q. How do I change my story template?

A. Update the template in config.php. Then, go to the settings page and check the box that says “Force Reload of Template Bundle from config.php (resets ID): ” and click “Update Options”.

Q. The white background on the login button looks bad because I have a dark background on my blog. How do I make it look better?

A. On line 99 of common.php change the background=”white” attribute to light or dark, as needed.

Q. How can i use my own CSS style?

A. On line 358 of fbconnect.php delete the CSS stylesheet declaration line then use you own CSS file or write styles in default style.css file of current active theme.

Q. How can i show/use it whatever i want in my template?

A. Here is an example of using it with sidebar.php

<?php if ( is_user_logged_in() ) { fbc_display_login_state(); } else { fbc_display_login_button(); } ?>
Please note the plugin should activated before using such code and FBC_USER_PROFILE_WINDOW should set to false to stop rendering the loggedin user info in absolute position.

Q. How can i change the facebook login button?

A. Update the code at line 99 of common.php according to the attributes described here.

Q. I have a Facebook Fan box on my WordPress blog and am also using this plugin but the plugin is saying it’s under development and might be using the wrong app ID. What’s going on?

A. Out of the box, you can only have one connection to Facebook in each window. Since the fb:fan tag (which the fan box uses) essentially creates a placeholder app and references that, it may hijack any other attempts to connect to Facebook. To get around this, use an iframe that references a file like this as the src:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Fan widget</title>
</head>
<body>
<base target="_parent" />
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections=""></fb:fan>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{
FB.init("YOUR_FAKE_API_KEY", "YOUR_WP_URL");
});
</script>
</body>
</html>

The YOUR_FAKE_API_KEY can be found in the generated code that Facebook gives you when you create a Fan box: FB.init("YOUR_FAKE_API_KEY");

Facebook WordPress Plugins

1. Add to Facebook

Once you install this plugin on your WordPress blog, you can see a footer link at the bottom of each blog post. By clicking on this link, user can add the current post to their Facebook mini-Feed. You can choose either a text link “Share on Facebook” or a Facebook button or both can be displayed at the bottom of the post. By clicking on the link, the user can sign in to the Facebook account it he is not already logged in and the post will be automatically added to his Mini-Feed.

2. Facebook Comments

This plug-in will import all the comments that are written on Facebook to your blog to the exact post such that you can see all the comments that are been made for a particular post directly in your WordPress blog. By this way you will not miss a single comment made on your post and it automatically updates the comments. (Edit: Plugin is not working for some people and pending update by author)

3. Facebook Dashboard Widget

This WordPress plug-in for Facebook allows you to see all the updates from your friends and allows you to know what your friends are doing. This is a  dashboard widget that allows you to go side by side with your friends on Facebook and your WordPress blog. Using this widget you can know the updates from your Facebook friends even if the Facebook site is blocked.

4. WP-FBConnect

This plug-in will add Facebook functionality to your WordPress blog using the Facebook Connect APIs. You have to link WordPress and your Facebook account, and once they are linked you need not have to sign in again. You can publish the comments on your blog through the newsfeed and Facebook avatars will be displayed in the comments field.

5. Gigya

All the features in this plugins are fully configurable by the WordPress administration panel. By installing this plug-in to your WordPress blog, you can have a secure signup and login for users in your site. You can update your states on various social networking sites at once and also invite all your friends on various networks to visit and join in your blog site.

6. Facebook Photos plug-in

This plug-in allows you to add photos to the posts directly from the Facebook. All that you have to do is install and activate the plug-in and link your Facebook account with the WordPress blog. After that when you edit a new post in WordPress, a new Facebook icon in the add media section will be present – by clicking on the icon you can see the photos that you have uploaded to your Facebook account. You can then insert the photos to the post as small, medium and large size and can also align the image position.

Bookmark and Share

WordPress and Flickr

Flickr Photo Album for WordPress:

This Flickr plugin for WordPress will allow you to pull in your Flickr photosets and display them as albums on your WordPress site. There is a pretty simple template provided, but you can customize the templates 100% to match the look and feel of your own site. And if you want, you could also hook it up with Lightbox or any other number of display libraries.

On the backend, this plugin will also add a new Flickr icon to your WordPress edit screen which will allow you to easily insert your Flickr photos into your blog posts with just a couple clicks. You can either have your inserted photos link back to your WordPress Flickr photo album or directly to your Flickr.com photo page.

Demos

  • Default Gallery Demo — The gallery you get out of the box (except of course, with your own photos).
  • Popup Overlay Demo — Including demos of the Lightbox, Fancybox, Fancyzoom, and Facebox display libraries. See below for implementation instructions.
  • Admin Screencast — Screencast demo of how the admin works in WordPress 2.5

Screenshots

WordPress 2.5+

safariscreensnapz003.jpg

Click the screen shot to see what the pop up overlay looks like
Older WordPress:

photo-album-screenshot.jpg

Author: Joe Tan (joetan54@gmail.com)

License: GPL

Features:

  • Supports Flickr videos
  • Display your Flickr photo sets as albums on your site
  • Search engine friendly URLs
  • Complete control over the look and feel, see below for customization details
  • Show or hide your photos that have been marked ‘private’
  • Flickr notes and Flickr comments are supported
  • Adds a new Flickr icon to your media bar which allows you to easily add Flickr photos to any blog post. Browse your photos by tags, album, or search everyone’s photos by tags
  • Use WordPress shortcodes to easily insert photos from an album into a post (and also Flickr videos).
  • Supports WordPress Widgets: Pull in your recent photos into your sidebar.
  • Use a popup overlay to display your photos.
  • Allow your visitors to leave comments without leaving your blog (via third party commenting services).
  • Coming soon Support for over 10+ languages. Learn how you can help.

Installation:

  1. Unpack / unzip the archive
  2. Copy the entire “tantan-flickr” directory to your WordPress plugins directory. Your wordpress plugins directory should be something like [WORDPRESS DIR]/wp-content/plugins. Upgrading Note: Just overwrite all the files inside the tantan-flickr directory. If you made edits, then make sure you make a backup just in case something goes wrong!
  3. Go into your WordPress admin, click on the “Plugins” tab, and then activate “Flickr Photo Gallery”.
  4. Click on the “Options” (or “Settings”) tab, and click the “Photo Album” subtab to bring up the options screen.
  5. Just follow the onscreen prompts to link your photo album to your Flickr account.
  6. Once your photo album is linked to your Flickr account, enter a URL where you want your photo album to appear.
  7. You’re done! To view your photo album, just go to the URL you entered in the previous step. To insert a photo, just click on the Flickr icon in your “Add media” bar when editing posts. Click on a photo, select a size, and a HTML snippet for that photo will appear in the post’s textarea. Cool!If you’re using WordPress 2.3 or older, then you should a new “Photos” tab next to your uploading tabs.

Photo Album Customization:

  1. All the templates are located inside a “templates” folder inside the tantan-flickr directory.
  2. If you just want to customize one particular template, just copy that template into your current theme directory
  3. To completely customize the look and feel, copy all these template files (they all start with photoalbum-) into your current theme directory and modify as necessary.
  4. Modify the HTML and CSS in the template files to fit your own site. All the CSS is referenced from the template file photoalbum-header.html
  5. That’s it!

Popup Overlay Support:

Download the plugin

flickrRSS for WordPress

This plugin for WordPress allows you to display Flickr photos on your weblog. It supports user, set, favorite, group and community photostreams, and is relatively easy to setup and configure via a settings panel. The plugin also has cache support, allowing you to save thumbnails on your own server.

Installation

  1. Put the flickrRSS files into your plugins directory.
  2. Activate the plugin.
  3. Configure your options under the Settings tab.
  4. To use an image cache, create a writable directory and specify its location in the settings.
  5. Add <?php get_flickrRSS(); ?> to your templates where you want the images to appear (or use the widget system).

Support & Questions

Please check out the common problems and solutions page.

If you’re still have questions, check out the flickrRSS forum. Do a quick search before posting, other people may have run into a similar thing.

Advanced: Parameters

The plugin also supports a number of parameters, allowing you to have multiple instances of the plugin across your site.

Example 1

This would show the 10 most recent public photos tagged with london and people.

<?php get_flickrRSS(array(
    'num_items' => 10,
    'type' => 'public',
    'tags' => 'london,people'));
?>

Example 2

This would show the 20 most recent thumbnail sized photos from the specified user’s set.

<?php get_flickrRSS(array(
    'set' => '72157601681097311',
    'num_items' => 20,
    'type' => 'set',
    'id' => '44124462494@N01'));
?>

Parameters List

  • 'type' => 'user' — The type of Flickr images that you want to show. Possible values: ‘user’, ‘favorite’, ‘set’, ‘group’, ‘public’
  • 'tags' => '' — Optional: Can be used with type = ‘user’ or ‘public’, comma separated
  • 'set' => '' — Optional: To be used with type = ‘set’
  • 'id' => '' — Optional: Your Group or User ID. To be used with type = ‘user’ or ‘group’
  • 'do_cache' => false — Enable the image cache
  • 'cache_sizes' => array('square') — What are the image sizes we want to cache locally? Possible values: ‘square’, ‘thumbnail’, ‘small’, ‘medium’ or ‘large’
  • 'cache_path' => '' — Where the images are saved (server path)
  • 'cache_uri' => '' — The URI associated to the cache path (web address)
  • 'num_items' => 4 — The number of images that you want to display
  • 'before_list' => '' — The HTML to print before the list of images
  • 'html' => '<a href="%flickr_page%" title="%title%"><img src="%image_square%" alt="%title%"/></a>' — the code to print out for each image.Meta tags available: %flickr_page%, %title%, %image_small%, %image_square%, %image_thumbnail%, %image_medium%, %image_large%
  • 'default_title' => "Untitled Flickr photo" — the default title
  • 'after_list' => '' — the HTML to print after the list of images

Some other Flickr Plugin:

Flickr, like twitter and YouTube seems to be everywhere nowadays. And just to make things that little bit easier here are 10 WP Plugins to integrate Flickr directly into your blog.

Flickr Photo Album for WordPress

Wordpress Flickr PluginDescription: This Flickr plugin for WordPress will allow you to pull in your Flickr photosets and display them as albums on your WordPress site. There is a pretty simple template provided, but you can customize the templates 100% to match the look and feel of your own site. And if you want, you could also hook it up with Lightbox or any other number of display libraries.

On the backend, this plugin will also add a new Flickr icon to your WordPress edit screen which will allow you to easily insert your Flickr photos into your blog posts with just a couple clicks. You can either have your inserted photos link back to your WordPress Flickr photo album or directly to your Flickr.com photo page.

URL: http://tantannoodles.com/toolkit/photo-album/.

Flickr Manager for WordPress

Wordpress Flickr PluginDescription: WordPress Flickr Manager is an easy to use plugin that seamlessly integrates your Flickr account with your WordPress backend. It replaces the browse panel from previous versions, but legacy mode can be enabled through the options menu. You also have the choice between Highslide and Lightbox.

URL: http://tgardner.net/wordpress-flickr-manager/.

Flickr Tag Plugin for WordPress

Wordpress Flickr PluginDescription: This plugin downloads all of your Flickr images onto your own server and allows them to appear on your own gallery. Nice and simple.

URL: http://www.webopticon.com/archives/148.

SimpleFlickr for WordPress

Wordpress Flickr PluginDescription: This is a plugin for WordPress that allows you to embed a flickr integrated simpleviewer into your WordPress site. In addition, you are able to specify a path to a standard SimpleViewer XML configuration file to display images from a local gallery.

URL: http://wordpress.org/simpleflickr/.

Slickr Gallery for WordPress

Description: Slickr Gallery is a very fast, bandwidth-friendly photo gallery plugin for WordPress. It allows you to pull your Flickr-hosted photos into a gallery section of your blog, as well as easily add Flickr-hosted images to your posts and pages. It is especially useful for people with many Flickr albums/photos.

Slickr Gallery needs a Lightbox plugin to work properly.

URL: http://stimuli.ca/slickr/.

FlickrRSS for WordPress

Description: This plugin for WordPress allows you to display Flickr photos on your weblog. It supports user, set, favorite, group and community photostreams, and is relatively easy to setup and configure via a settings panel. The plugin also has cache support, allowing you to save thumbnails on your own server.

URL: http://eightface.com/wordpress/flickrrss/.

Flickr Thumbnail Photo stream for WordPress

Description: The Flickr Thumbnail Photostream WordPress plugin makes including and linking to photos on a Flickr account simple and flexible. The links come in the form of thumbnail images that link to their larger, normal formats within the Flickr website. The advantage of this plugin is that it does not use RSS feeds and uses the Flickr API instead.

URL: Flickr Thumbnail Photostream.

Flickr Tag Cloud Widget for WordPress

Wordpress Flickr PluginDescription: This is plugin for the Widget Sidebar in WordPress. It will display your flickr tags as a tag cloud in your blog’s sidebar.

URL: http://wordpress.org/flickr-tag-cloud-widget/.

WP Decoratr for WordPress

Wordpress Flickr PluginDescription: WP Decoratr automatically finds images relevant to your post content from Flickr to spice up your posts.

WP Decoratr is very easy to use and doesn’t need any configuration. It will add a panel on the “Write Post” page. Compose your post as usual and click “Get Images” when you’re done. WP Decoratr will analyse your post content and suggest several matching images. Just click on an image to insert it in your post.

URL: http://wordpresssupplies.com/wp-decoratr/.

Flickr Gallery for WordPress

Description: Using the “shortcodes” system in WordPress 2.5 and up, this plugin will allow you to quickly and easily incorporate your Flickr photos into your WordPress pages and posts.

URL: http://wordpress.org/extend/plugins/flickr-gallery/.

Bookmark and Share

Codelobster vs YouCMSAndBlog WYSIWYG Vs Aptana IDE for PHP, CSS, HTML, CMS (WordPress, Joomla, etc)

Codelobster:

For working with WordPress code Codelobster PHP Edition has the following abilities:

1. WordPress autocomplete

Intelligent autocomplete feature enables to write code faster. Pop-up completion list includes functions

WordPress Functions Autocomplete

and its arguments

WordPress Arguments Autocomplete

Completion list is called automatically in necessary area of WordPress code.

2. Context and Dynamic Help

With these features you can quickly obtain necessary information about WordPress syntax.

To get help topics using Context Help:

  • Place pointer on element you want to review help topic for end press F1 button

Our application searches for proper help information on http://www.wordpress.org/ site directly.

Dynamic Help

The Dynamic Help window displays links to help topics for element pointer placed on. Application conducts search on http://www.wordpress.org/ site.

WordPress dynamic help

3. WordPress Theme Editor

WordPress Theme Editor makes WordPress theme creation very simple.
You don’t need WordPress installed, You don’t even need a server at all!
Codelobster assembles the different WordPress pages into a WYSIWYG version of your blog that you can edit with data in the Inspector.

WordPress Theme Editor

WordPress Theme Editor automatically combining the WordPress theme files such as index.php, header.php, sidebar.php, footer.php and style.css into a single editable design view page.
You may navigate to included pages by mouse holding CTRL key.

YouCMSAndBlog WYSIWYG IDE:

YouCMSAndBlog WYSIWYG IDE is a free editor to save your time in designing template for any CMS and Blog Template themes (Joomla, Drupal, WordPress, Blogger, php-Nuke, Mambo).

With this IDE, you can have an interactive environment when designing your CMS / Blog template. Easily inserting your predefined taglist & functions (Joomla, WordPress, Blogger, etc) by double clicking its list from listbox on the left side off the IDE. And you can modify the taglist or add new one easily by editing its XML config file.

Current Features release include :

  • Interactive View through True View and Quick View mode while you edit your template
  • Easily switch to Full Editor mode (like UltraEdit IDE) if you prefer it to working asa normal text editor with Joomla tag list supported, Full View (Result View) mode or Hybrid mode (Half editing window & half result window)
  • Code Syntax Highlighting (Coloring), which you can configure from your main configuration file using Regular Expression * Find words with color highlighting
  • With Quick View, users will not need to install CMS or Blog Engine on their local machine, i.e: Blogger Template, user can download the template and open it using this IDE to get a dummy view easily
  • With True View, user will get instant true view from your running CMS or Blog engine hosted locally.
  • Automatic back-up for all files you are editing but can be turned off.
  • Currently it supports Joomla, Drupal, WordPress and Blogger but easily you can create new template taglist and quick view to support other CMS template and blog template.

YouCMSAndBlog WYSIWYG IDE 1.2

Developer: Sunento Wu
License: Freeware
Os: Windows2000,WinXP,Windows2003,Windows Vista Starter,Windows Vista Home Basic,Windows Vista Home Premium,Windows Vista Business,Windows Vista Enterprise,Windows Vista Ultimate,Linux,Linux Gnome
Price: 0$
Size: 0.31MB
Download time: 56K: 6s 64K: 5s 128K: 2s 768K: 1s
Keywords: joomla drupal blogger wordpress php-nuke mambo cms blog template skin theme wysiwyg ide editor

Aptana

Aptana Studio which absolutely rocks when it comes to web development. By default, Aptana doesn’t have a PHP editor but you can install it after you install the default Aptana installation from the Aptana\My Aptana menu option. A page will open with some plugins you can add to Aptana and this is where you will find PHP support.

Aptana IDE

So, what about WordPress? does Aptana supports WordPress? well, Aptana has HTML, CSS, PHP autocompletion and it also support libraries like jQuery. To enable jQuery autocompletion open the References panel and under the Global References section check (if it’s not checked already) the jQuery 1.2 or 1.3 support; you will instantly get jQuery autocompletion. However, WordPress autocompletion is not yet supported so I’ve been writing a bunch of what Aptana calls Code Templates to assist me while coding a WordPress theme or plugin. It’s no rocket science, all you have to do is (having Aptana PHP installed of course, since WP is written on PHP) go to Window\Preferences. Then, on the tree, go to Aptana-Editors-PHP-Code Templates

Aptana Preferences

Like I said, I’ve started writing some templates, so you can download these WordPress code templates for Aptana 1.2 and import them to the Code Templates. The Code Templates are variable based so, for example, you can write (see the image above) the hook name to add an action to, and it will append the hook name to whatever function name you add (it’s the way I write action and filter functions). I’ve included the WordPress loop by Justin Tadlock, explained in great detail on its website, as an example of a large code template, and you can trigger it typing the_loop on the Aptana PHP editor. Other code templates like the ones triggered by _openfile  and _savefile (for opening and saving a file in a WordPress option page) make heavy use of variables.

I wonder why there’s still no IDE that supports WordPress syntax, given that it has become so widely spread on the last two years. We can only expect that 2009 will be the year where an IDE add WordPress syntax. Maybe Aptana is the one, it has been growing amazingly in the last year and I hope it will continue doing it.

I wonder, do you know of any IDE supporting WordPress? which is your IDE of choice? I will be adding more WordPress Code Templates for Aptana so stay tuned!

Bookmark and Share

NetBeans IDE Vs Eclipse PDT 2.0 IDE for PHP, Java script, CSS, HTML

NetBeans IDE 7.0M1:

  • Free IDE.
  • Support php, javascript, css, html, java, SVN and lots…
  • Common function of php will show automatically or by pressing ctrl + space.
  • For HTML, it checks div correctly, if there is any unmatched tag like then it will colored and show that problematic line. So you could easily fix that
  • If your file’s extension is .php but you write … netbeans automatically colored the css code in here according to css style.
  • Common javascript functions are shown correctly or using ctrl + space.
  • Indentation format is very good in netbeans. If you select a block of code, that may contains css, javascript, html or php code, netbeans format that code very clearly and placed indentation nicely.
  • Eclipse PDT 2.0

  • Free IDE.
  • Support php, javascript, css, html, java, SVN and lots…
  • Common function of php will show automatically or by pressing ctrl + space.
  • Eclipse couldn’t render div matching properly.
  • If your file’s extension is .php and in that file you write css code within …. eclipse couldn’t render that according to CSS color rather it shows only black color.
  • Common javascript functions are shown correctly or using ctrl + space.
  • Eclipse is not good as netbeans. Specially when you’ll mix html + php code Eclipse makes those more ugly.
  • Bookmark and Share

    Ref: http://mahmudahsan.wordpress.com/2009/01/25/eclipse-vs-netbeans-ide-for-php/

    Republic Day

    ” If Hindustan rises which Nation will Remain?”
    Jaihind

    Bookmark and Share

    WordPress and CSS

    WordPress and CSS:

    The Header:
    weblog title:
    The CSS that controls how those words are displayed

    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }

    #header a {
    color: #fff;
    text-decoration: none;
    }

    #header a:hover {
    text-decoration: underline;
    }
    (I have highlighted in bold only that part which affects the appearance of ‘my weblog’ in the top statement.)

    the part in bold tells the font to be over double the normal size, that the font used should be Times New Roman, and the letters should be .2 of an ’em’ apart.

    The #header a says that the letters should be in white, and that even though it is a link, it must not be underlined normally.

    The #header a:hover bit tells the code to underline the link when it is hovered.

    You can alter what you want in those sections of css I have just described.
    The Header
    The Header box:
    Here’s some CSS again:
    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }
    From the top, it means;
    The background is that green / grey colour.
    The border at the bottom should be a double border, 3 pixels wide, and be the colour of #aba
    That the borders on the other three sides should be solid, 1 pixel wide and the colours described.

    The ‘margin’ line means there is no white space between the header box and the screen sides of your display.
    The ‘padding’ is the space that is automatically put between the weblog title and the sides of the box.
    Want to make the header thinner ? Make the first and the third number smaller. (The numbers for the padding refer to the space that should be inserted on the top, the right, the bottom and the left in that order).
    Want to make the header bigger ? Increase the first and third numbers.

    So you can change the font you want, you can alter it’s colour, and you can make the background a different colour too. Wonderful ! But you might want an image …….. so here’s how to do it.
    3: Putting an image into the header box.
    Before I start, one or two points:
    Although you may have a fast line, not all your viewers will. Try to keep image sizes to around 50K or less – it will save you bandwidth too.
    If you have changed the image, but it is not showing up, it could be an issue with your browser cache. Clear the cache and / or – on a Windows machine – press CTRL-F5. This will force a hard refresh. If this does not work, then check your image upload again.
    Okay, image time.
    Here’s that code again;
    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }
    The background has been set with a colour, but if we add an image statement after it, this will take over.
    You can leave the ‘background: #90a090;’ line in, comment it out, or delete it, or change the colour to that of your page. Your choice.

    Just under that line you need to add this line;
    background-image: url(”);
    and in between the ” goes the address of the image you are going to use.

    Unless you tell the CSS otherwise, it will repeat your image if there is any extra space in the header.
    If you are using an image that is smaller, you can add the following to the CSS to alter how it repeats: background-repeat: no-repeat; Image is displayed only once.
    background-repeat: repeat-x; Image repeats horizontally.
    background-repeat: repeat-y; Image repeats vertically.
    background-repeat: repeat; Image repeats constantly. Good for tiled images.

    Looks straightforward eh ? Hmmm … not quite 🙂

    The default header box is what ? around 50px tall ? If you load an image that is 1000px tall, all you will see is the top 50px of it (though why you would want a header picture that big is beyond me, but you see what I mean). The image properties matter not if the image is too big – the box will win the contest. So you have to alter the box – not the image.

    Let’s say you have an image that is the perfect width, but is slightly too tall. This is how we alter the box. Look at that ‘padding: 15px 10px 15px 60px;’ line – this is where we change things.
    (I’m assuming you have chosen an image and can see part of it on your weblog).
    Now we are going to alter the first and third numbers.
    Altering the first will make the box bigger, but will push your weblog title down.
    Altering the third will again make the box bigger, but your title will stay where it is.

    For now, increase the third number until the whole image appears in the box. If you are happy with how it looks, cool ! You’re done 🙂
    If you want the title to be at the bottom though, swap the first and third numbers around.
    If you want it in the middle, adjust those numbers to be the same.

    You may now want to either change the border colours to suit the image or your page, or lose the borders – just delete those lines in the latter case.

    With the example below, here is the CSS used to display it.
    #header {
    background: #fff;
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 150px 60px;
    }
    One last thing …. the header box actually fits the whole screen width in a default install. And you may have an image that wide – and of course you want to see all of it. In this case, you need to bump the menu down.
    Here’s the menu CSS;
    #menu {
    background: #fff;
    border-left: 1px dotted #ccc;
    border-top: solid 3px #e0e6e0;
    padding: 20px 0 10px 30px;
    position: absolute;
    right: 2px;
    top: 0;
    width: 11em;
    }
    See the line ‘top: 0;’ ?
    Make the 0 into 100px, see where it goes, and then adjust it to suit.

    That’s how to add an image to your header.
    It does get a bit more complicated – but not that much – when you want to use an image that is smaller. If this is what you want, please head over to the WP Styles page and check out the other effects than can be achieved. Study the same part of their CSS as detailed above, and you should, knowing what you do now, be able to see how they did it.
    Removing the weblog title.

    If you have taken the time to create a new image for your weblog, you might not want the title to be written all over it.

    It’s easy enough to alter ‘index.php’ so that is not in the header id, but that removes an important part of your site’s navigation. If someone were to view a single post, or a category list of posts, they would have no easy way to return to your main page. So what is needed is for a way for your header image to act as the hyperlink, even without your weblog title there.

    The ‘#header’ and ‘#header a’ CSS needs replacing for this to happen.
    First, find the measurements of your header image in pixels.
    Then, in the CSS, find where #header is defined. It may look something like this if you already have an image there:
    #header {
    background: #fff;
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 150px 60px;
    }
    Delete lines until you are left with this:
    #header {
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    margin: 0;
    }
    Now add the dimensions of your background image:
    #header {
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    margin: 0;
    height: 200px;
    width: 718px;
    }
    That now controls the image, but it doesn’t yet take the text away. To do this, find where ‘#header a’ is defined. In a default CSS, it looks like this:
    #header a {
    color: #fff;
    text-decoration: none;
    }
    Delete that. In it’s place, put this code:
    #header a {
    display:block;
    height:100%;
    text-indent:-500em;
    text-decoration:none;
    }
    Your text is actually still being displayed, but as it’s a couple of feet to the left of your monitor, you can’t see it. But, even though it is there, the code above causes the whole area to act as a hyperlink.
    So you now have an image that is a link, but without any writing on it, and without having to edit the index file.

    Post Content

    The date.
    This is styled from the following statement:
    h2 {
    border-bottom: 1px dotted #ccc;
    font: 80% “Times New Roman”, Times, serif;
    letter-spacing: 0.2em;
    margin: 15px 0 2px 0;
    padding-bottom: 2px;
    }
    If you don’t want the dotted line across your page, delete the ‘border-bottom’ line.
    If you want the gap between different days posts to be larger, increase the 15px in margin.
    If you want the font altering, either in size or family, help yourself.
    In a default install, the h2 tag is only used for the date. So if you want your date to appear on the right of the main area, just add:
    text-align: right;
    to the above definition.

    3. Your post title
    This has 3 elements of the CSS which affect it. They are;
    h3 {
    border-bottom: dotted 1px #eee;
    font-family: “Times New Roman”, Times, serif;
    margin-top: 0;
    }

    .storytitle {
    margin: 0;
    }

    .storytitle a {
    text-decoration: none;
    }

    From the top …. the border-bottom gives the line across the screen, and the #eee gives the colour of that line. The font-family is self-explanatory, and the margin-top stops the browser automatically putting a gap between the post title and whatever is above it (Browsers will do that with header tags).

    The two .storytitle statements .. the first one ensures no margins are added in any direction, and the second one makes sure that even though the post title is a link, it will not be underlined when hovered.

    To alter the colour of your post title, add
    color: #00ff00;
    just under the ‘text-decoration: none;’

    4. Post data
    This line is styled by the meta div
    .meta {
    font-size: .75em;
    }

    .meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
    }

    .meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .meta li {
    display: inline;
    }

    Looks complicated …….. from the top it means;
    The font to be used should be smaller (.75em), the font colour should be grey (#808080), it should be a normal font, not a bold font, and the last two parts mean that because items could appear in this which would normally be put into a list, the display should keep them on the one line (a post could fit into different categories for instance).
    Seen that in the screenshot the word ‘General’ is underlined ? If you don’t want that to happen, add this line
    text-decoration: none;
    to the .meta a section.

    5. Blockquote
    As it is, your blockquote style consists of indented text with a grey bar down the left side. That code looks like this;
    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    }
    The border is described – 5 pixels, solid grey – and the whole quoted part will be 1.5em’s in from the left with a padding of 5 pixels between the border and the words within it.

    In contrast, the blockquote style I have been using here is this;
    blockquote {
    border-top: 1px solid #000099;
    border-bottom: 1px solid #000099;
    border-left: 1px solid #000099;
    border-right: 1px solid #000099;
    margin-left: 1.5em;
    padding-left: 5px;
    background-color: #ccc;
    font-family: Arial;
    }
    You can see how that looks just by looking at the box that code is in.
    Everything there is up for alteration.

    Note:I have defined each border individually. This is to show you how to alter different borders if you wanted to. It is better, if using the same border all the way around, to just use one line to do this: border: 1px solid #000099;
    Want only 2 borders ? Then delete the ones you do not want.
    Want 3 borders ? Again, erase the unwanted line .
    Want dotted borders ? Change the word ‘solid’ to dotted’.
    Fancy a bolder background colour ? Drop the #ccc for your particular shade.
    And the font ? Up to you again.

    6. Your entry text
    The controlling CSS is
    p, li, .feedback {
    font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
    letter-spacing: -1px;
    }
    Changing the 90% will change the text size, while changing the 175% will change the text spacing.
    If you want to change the font, alter the 4 font names to your desired choice.
    Letter-spacing is self-explanatory, but try changing the value there just so you can see it’s effect.

    To alter the colour of your post text, add;
    color: #00ff00;
    just underneath the ‘letter-spacing: -1px;’ line,
    but read the part below first – this css statement affects 3 parts of your post. You may only want the colour in one.

    If you want to alter the colour of the background of the post, you need to add a colour to the content div.
    #content {
    margin: 30px 13em 0 3em;
    padding-right: 60px;
    background: #00ff00;
    }
    Will make your post background bright green. Unfortunately, this will clash with the rest of the background. If you need to alter that, then go to this page.

    7. .storycontent
    There is another tag that can control just the content of what you post – .storycontent
    It does not control the post title, or the post data, or the comment. It just covers what you have written in the main entry box when writing a post.

    Using this tag, you could have a separate font for your entries, or a separate background just for your entries. In fact, you will gain more control over how all aspects of your post appear if you take the time to define the different elements.

    So, what can you define then ?
    Here is a basic list: normal text, links, an ordered list, an unordered list, text indentation for paragraphs, link classes, how images appear. Of these, I will cover some examples.

    Normal Text
    You can define which font you use, the spacing between letters / lines.
    .storycontent p {
    text-indent: 3em;
    font: 100%/130% arial, verdana, ‘lucida sans unicode’, sans-serif;
    color: #ccc;
    }
    The above will automatically indent the first line of each paragraph.
    The font size is set at 100% of the VIEWERS browser setting. (This is important for accessibility reasons. Setting your font in point (pt) sizes is not recommended as they scale badly.)
    The line spacing is set at 130% of the original font size.
    The font is set with a selection of fonts and a generic last font.
    The colour of the text is #ccc (which is a light grey).
    If you wanted to increase the gap between lines of text, just increase the “130%” figure.
    If you wanted to increase the gap between individual paragraphs, add a line to the above definition: margin-top: 20px and then adjust from there.

    Links
    On your page, you have links in the header, for the title of your post, for some of the post data, in your menu, for the Comments link and in the footer. That’s a lot of links, and you can style how each of them appear and react when hovered. Other links will be mentioned elsewhere, but for links in your posts, read on.

    .storycontent a {
    color: #669933;
    border-bottom: dotted 1px #669933;
    }

    .storycontent a:hover {
    border-bottom: solid 1px #669933;
    }

    .storycontent a:visited {
    color: #669933;
    }
    From the top:
    .storycontent a – Links will be green, and have a green dotted underline.
    .storycontent a:hover – When the mouse goes over the link, the dotted line will become solid.
    .storycontent a:visited – Visited links will still be green, but there will be no underlines.

    Of course you can change the colours and underlining to whatever you want. See the page on Link Classes for more details on what you can do.

    An Ordered List
    1.A default ordered
    2.list will appear something like
    3.this. The numbers are roman, and you can see the indenting
    4.and the line spacing.
    But if you changed your CSS to this:
    ol li {
    list-style: lower-roman;
    margin-left: 5em;
    text-indent: 4em;
    }
    it would indent into the page a lot further, the list items would indent even further than that, and instead of 1,2,3 it would be i, ii, iii.
    Additionally, you might want an image to represent each item on the list.

    The CSS that produced that:
    ol li {
    list-style-image: url(‘bug.gif’);
    }
    Menu

    The menu itself is controlled by:
    #menu {
    background: #fff;
    border-left: 1px dotted #ccc;
    border-top: solid 3px #e0e6e0;
    padding: 20px 0 10px 30px;
    position: absolute;
    right: 2px;
    top: 0;
    width: 11em;
    }
    From the top again:
    The background is white
    If you do not want a border on the left, delete that line.
    If you want a thicker border, change the 1px to 2px (or 3px or 4px ..)
    If you want the border to be a solid line, use ‘solid’ not ‘dotted’
    Change the border colour by changing #ccc
    The same things apply to the border-top.

    Padding:
    This is the white space that surrounds the words inside the menu.
    There will be 20px (px=pixels) between the top of the menu and the start of the words, no space on the right, 10px space at the bottom, and the 30px mean that the text will be indented from the left side. This 30px applies to the link titles (Links, Categories etc)
    right: 2px; means position the menu 2px in from the right, and top: 0px; means put the menu right at the top of the screen.
    If you wanted to drop the menu, increase the top value.
    If you want the menu on the left, change right: 2px; to left: 2px; BUT!! you will also need then to alter the header and the content divs. (Please check the Index page for when this is added).
    1. The Link Title
    Controlled by:
    #menu ul li {
    font: italic normal 110% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.1em;
    margin-top: 10px;
    padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
    }
    Change fonts and spacing here. To alter the colour of a link title, add
    color: #00ff00;
    to the above statement. (You can change the #00ff00 to a more subtle colour if you really want to !)

    The links themselves are controlled by:
    #menu ul ul li {
    border: 0;
    font: normal normal 70%/115% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 12px;
    }

    #menu ul ul li a {
    color: #000;
    text-decoration: none;
    }

    #menu ul ul li a:hover {
    border-bottom: 1px solid #809080;
    }

    Okay.. actually there is more css that affects them, but this lot will do for starters.
    Change the link font in the top part
    Change the normal link colour in the second part
    Change how the link acts when it is hovered in the third part.
    If you do not want it to be underlined, and just want it to change colour, make that line read:
    color: #00ff00;
    If you would rather have a dotted underline, and in bright green, make it:
    border-bottom: 1px dotted #00ff00;
    If you want the link to get bigger:
    font-size: 150%;

    This is an example of overkill!
    #menu ul ul li a:hover {
    font-size: 150%;
    border-bottom: 1px solid #809080;
    border-top: 2px dotted #00ff00;
    }
    But it should give you some idea of what you can mess with.

    2. Categories
    The same CSS as above applies here.
    If you want the number of posts in each category to be displayed though, edit your ‘index.php’ to read like this;

  • Categories:
    • If you would like drop-down categories, then put this into your index.php;
      <form action="” method=”get”>

      3. The Search Box

      First, instead of it being on 2 lines, with “Search” on a button below, how about making it one line only ?

      Add this to your style.css – it doesn’t matter where;
      form.searchform {display: inline;}
      Now edit your index.php, and you will see these lines;
      <form id="searchform" method="get" action="”>


      <input type="submit" name="submit" value="” />

      and delete the
      that is in bold.
      If that does not do the trick, see this part above ? size=”15″ />. Make that ’15’ into 5 and increase it by 1 to whatever your template will tolerate.
      If altering THAT doesn’t move things around, look inside the CSS:
      #menu input#s {
      width: 80%;
      And change the 80% to something smaller. That’s that done.

      Notice I changed the word from “Search” to “Go!” ? Put whatever you want of course.

      Colour the Search box.
      Add this to your css;
      #menu li form input{
      background-color: #ffff00;
      }

      #menu li form input#s{
      background-color: #ffff00;
      }

      That will give you a bright yellow background where your viewers can enter the text they wish to look for.

      Colour the Search button
      Add this to your css;
      #menu li form input.purple{
      background-color: #ff00ff;
      }
      and in your index.php, edit these lines to include what is in bold
      <form id="searchform" method="get" action="”>


      <input class="purple" type="submit" name="submit" value="” />

      That will give you a purple button. Again, use the colours you want, and what you call it does not matter – you could alter the background colour to whatever you want but still call it purple. It’ll work, though it is always better to use the name of a colour when using classes.

      Now … you may have a really nice colour button, but you now want to alter the text on it too, so let’s change that too.
      In the CSS you added above, make it like this;
      #menu li form input.purple{
      background-color: #ff00ff;
      font-size: 10px;
      font-weight: bold;
      color: #fff;
      }

      Again, you can change the font size, font weight, and text colour.

      Make the Search button an image

      First, go make your image. I’d recommend that you start with an image that is around 20 pixels square, no larger, and that it is a tranparent gif. This will merge well with your existing colour scheme.
      Upload that image to wherever you want, and note it’s location.

      Into your CSS, you need to add a class;
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      When trying to do this, I could not get the bottom of my image button to line up with the bottom of my search box. I have no idea right now why, but it just wouldn’t. That’s why I have a negative margin. You may need one, you may not. (If I come up with a better way of doing this, I will update the page).

      Next, you need to modify your index.php;

      Note the ‘src=”pix/button.gif” ‘ That is where I have my button – you must put your location.

      And if, after reading all this, you do not want the Search function on your page, just delete that part of ‘index.php’

      4. Archives
      For drop-down archives, edit your ‘index.php’ to be like this;

    • Archives:

      By Month

    • 5. The Calendar
      The colours of the days of the week can be altered by adding to this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      }
      so to make them red, turn the above into this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      color: #ff0000;
      }

      To alter the numbers, you need this part;
      #wp-calendar td {
      color: #ccc;
      font: normal 12px ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: normal;
      padding: 2px 0;
      text-align: center;
      }
      Change the colour on the top line, and the font on the second.

      To change the colour of the text, and the colour of the highlight box that appears when a date you have posted is hovered;
      #wp-calendar a:hover {
      background: #e0e6e0;
      color: #333;
      }

      To change the colour of the highlight box that appears when any date is hovered, alter the top line in the css below.
      To change the colour of the text that appears in the highlighted box when it is hovered, alter the second line below.
      #wp-calendar td:hover, #wp-calendar #today {
      background: #eee;
      color: #bbb;
      }

      The colour of the border that surrounds the calendar is controlled by;
      #wp-calendar {
      border: 1px solid #ddd;
      empty-cells: show;
      font-size: 14px;
      margin: 0;
      width: 90%;
      }
      Alter the top line to change the colour.
      If you want a thicker border make the ‘1px’ into ‘2px’
      If you don’t want a border, don’t delete the line – just make it’s colour the same as that of your page. That way, if you ever want to put it back, it’s very easily done.
      You can also alter the width by changing the 90%.

      6. Login / Registration
      Delete either or both of these from your ‘index.php’ if you do not want visitors to see / use them.

      Boxing in your links

      This creates the impression that you have cleverly made vertical boxes for your links content.
      To do this, you modify the following part – this part was discussed above. It looks like this right now;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      }
      and you make it into this;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      padding-left; 2px;
      background-color: #fff;
      border-top: solid 1px #000;
      border-left: solid 1px #000;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      }
      Note: I have added a padding of 2px so that your link titles are slightly away from your new borders.
      You can add a colour to the menu background by adding
      background-color; #0000ff;
      to your #menu div – it’s the one at the top of this page.
      You can again just have the borders you want, the sizes you want, colours etc..
      The Footer

      In a default install, the footer will stretch across the entire screen. Now footers are a good thing, but as it is, it’s more of a ‘catch all’ than a footer. So it needs moving.
      Edit ‘index.php’ and scroll to the bottom. You should see this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      All you need to do is move a closing div to below the footer code. Like this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      Now, if your footer still goes all the way across the screen, it’s because you have not defined the rap div. Define that, and your footer will sit nicely where it is meant to.

      1
      The CSS that sorts this bar out is;
      .credit {
      background: #90a090;
      border-top: double 3px #aba;
      color: #fff;
      font-size: 11px;
      margin: 10px 0 0 0;
      padding: 3px;
      text-align: center;
      }
      Change the background colour at the top.
      If you would like the double border at the bottom too, add this line below the ‘border-top’
      border-bottom: double 3px #aba;
      Don’t like the double border ? Want a dotted one ? Replace ‘double’ with ‘dotted’
      Change the border colour by altering the ‘#aba’ to whatever you want.

      The Margin will set the bar 10px below content on the page, the padding will make the bar 3px thicker than the height of the text, and the text will be centre aligned.
      If you want the text in that bar to be on the left, put ‘left’ where ‘center’ is.
      (That bar actually passes behind the menu, so if your menu is covering part of the bar, although the text will not be centred according to your content, it is still centred according to the page size).

      If you don’t want a full bar across the screen, you can alter that too.
      Add this line to the above;
      width: 20em;
      This will shorten the bar.
      Now look at the line
      margin: 10px 0 0 0;
      The numbers refer to the margin that should be allowed in each of the four directions, but in this order – top, right, bottom, left (think of it as clockwise).

      Alter the last zero to read ‘100px’ and see what happens. It moves away from the side. Try 150px or 200px and just fiddle with it until it is exactly the place that you want it to be. You can also alter the ’12em’ and the ‘padding’ if you want.

      2
      The CSS in the above box still controls this.
      The font will be 11 pixels tall.
      ‘color: #fff’ means that text will be white.
      If you want to add extra links in the bar, you will need to edit your ‘index.php’.

      3
      The ‘WordPress’ link is affected by these two elements;
      If you want to alter the colour of the word ‘WordPress’ in the bar, add the following to your css;
      .credit cite a {
      color: #00ff00;
      }

      .credit cite a:hover {
      color: #ffff00;
      }
      That will make the word bright green, and yellow when hovered.

      Note:If you have removed the link to WordPress from your links, please leave the link to WP in this bar. It’s only polite to do so, after all, if someone used your work and didn’t at least let their viewers know where they had got it from, it would annoy you, right ?

      You may want to show the amount of database queries that it took to create your page, and the amount of time it took to render your page. This is the code to do that:

      num_queries; ?> queries. seconds. <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?>

      Links
      On your default WP install, links in your posts appear a green/grey colour and are underlined. They also change colour slightly when hovered. This behaviour applies to most links anywhere in your weblog, and you may well want to change it. Here’s how.

      Now before you start, think for a moment about how you want your links to look to your visitors. If you have a large site, then the colour of a link that your visitor has already seen is quite important. It can help them to navigate through your site if a visited link looks different to one they have not yet been to. On your average weblog, it’s no huge deal, but if your site begins to grow, it can become important. Anyway ….

      To do this, we need to create some link classes, and then change our code.
      Right at the top of your wp-layout.css is the CSS that curretly has control.
      a {
      color: #675;
      }

      a img {
      border: none;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      Ignore the line with the ‘img’ in (that just stops all images having borders if they are links).
      Now don’t go getting rid of this part above! If nothing else, it’s your backup, and if it’s not used, it’s not exactly taking up a lot of space.

      So let’s create a link that will be bright green, and go dark green when hovered.
      Copy the above section into a text editor (like Notepad).
      Edit out the ‘a img {border: none;}’ line.
      You should be looking at this;
      a {
      color: #675;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      Now we add our first ‘class’.
      Alter the above lines so they look like this;
      a.green {
      color: #00ff00;
      }

      a.green:visited {
      color: #669933;
      }

      a.green:hover {The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      color: #669933;
      }
      Paste that into your ‘wp-layout.css’ – it doesn’t matter where, but close to the other similar links is good. Now that will colour links bright green, visited links will be a darker green, and hovered links will also be a darker green…..but only if we tell the code the right thing.

      A link normally looks like this;
      WordPress

      but if we want to use our new colours, we need to add the ‘class’;
      WordPressThe rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!
      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      You can add as many classes as you want – just change the colours and change the class name (which as you have seen is the word between ‘a.’ and ‘:link’).
      If you have these classes, and you forget to add a class to the href, it will look like a default link. Just edit your post.

      This has covered just those links in the main content area. The section of this guide that covers the menu will show how to alter some of the link colours there, and the ‘Post Content’ section has details there too.

      If you want to go all out on your links, then an excellent article is Custom Underlines from A List Apart.

      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.
      A left sided Menu
      So you want to move your column of links to the left hand side ? Keep reading then !

      The above is what you have now.
      This tutorial will take you through moving first the menu, then the header, then the middle bit where you post. All it involves is changing the file ‘style.css’ in a few (well, quite a few) places.
      This tutorial, unlike the others, involves more changing of numbers. While the numbers I give will work for what you see, they may not be exactly right for you. If they aren’t, then change them little by little until they do work for you. It will work in the end 🙂

      Move the menu

      In style.css is this part;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0;
      width: 11em;
      }
      Now the bit we will change is the right: 2px; part. Change the word right to left. If you now look at your weblog, it’s a mess like this;

      Now there is nothing wrong there, the code is still fine, but we do need to shift the stuff from behind the newly placed menu.

      Move the header

      We’ll move the weblog title first. Strictly speaking, we are not actually moving the header. We are just moving that part of the header that you want to see. So that’s the title then.
      Look at your css again, and find this part;
      #header {
      background: #90a090;
      border-bottom: double 3px #aba;
      border-left: solid 1px #9a9;
      border-right: solid 1px #565;
      border-top: solid 1px #9a9;
      font: italic normal 230% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.2em;
      margin: 0;
      padding: 15px 10px 15px 60px;
      }
      We just need the bottom line of that statement.
      Try changing that number 60 into 260. You should now see that your weblog title has been moved into view.

      Okay, so that’s the header bit sorted.

      Make the Content content

      The soon-to-be-altered part of the css is this;
      #content {
      margin: 30px 13em 0 3em;
      padding-right: 60px;
      }
      I suppose it’s about here that I try to explain what an ’em’ is. Hmm, okay then.
      An ’em’ is equal to an ‘M’ in the font you are using.
      So a horizontal space of ’13em’ in this font would be the same width as MMMMMMMMMMMMM – because that’s 13 M’s. Bigger font ? Bigger space .. get the idea ?
      So why use ’em’ here and not pixels like we do pretty much everywhere else ? Because we want what we write to have a nice, straight, unruled edge to it. We want the left side of our paragraphs to be neat. There, that’ll do eh ? Right ……

      So, an explanation of the above #content css.
      Your content will have margins around it, and going from top – right – bottom – left they are 30px, 13em, 0 (none) and 3em.
      Now look again at the image above.
      The top and bottom margins are fine, and can stay the same. The left margin is too big though, and so is the right.
      If the page worked the other way around though, it should work this way if we switch the numbers, so swap the 13em and the 3em.

      And you should now see this;

      There you go – job done !
      Image Alignment & Drop Shadows

      When you put an image into your post, this is the sort of thing that you will see…

      The image just sits there on the left.

      Let’s move it…..

      1. Stick it in the middle

      We need to create the CSS to center the image.
      Actually, it will center anything, not just images.

      From your login, go to Options, and edit ‘style.css’
      Paste this into your css file;
      div.cent {
      text-align: center;
      }
      I know it says ‘text-align’ but it works with pictures too. Now, when you post something that you want to be centred, you write it like this;

      Everything here will be centred

      For this next part, you are going to need some code and images.
      This is already done – by Laughing Lizard – and you will need to go to his site, get the code, and follow all the instructions there (they are brief and easy!) before you can do the rest of this page.
      Go to the Weblog Tools Collection.

      2. On the left with text wrap

      The code you have just got will enable you to have images like the above on your weblog.
      If the image ‘breaks through’ your entry box, then you will need to add this code to your css;
      div.clearer {
      clear: left;
      line-height: 0;
      height: 0;
      }

      and then when you enter your last image – not at the end of your text – put this;

       

      That image above was produced by the entry into WP identical to that below;

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt …….
      Note the gap ! There is a carriage return between the

      and the start of the text. If this is not there, your entered text will be in bold text.

      3. On the right with text wrap

      You need to copy and alter the css that Laughing Lizard wrote now.
      This is part of his original CSS:
      .img-shadow {
      clear: both;
      float:left;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      In your ‘style.css’, copy that, then paste it again into your css file. Yes, you do have a doubling up, but only for a moment.
      Now alter the pasted code by making the following changes which I have highlighted in bold. (Or you could just copy this code below 🙂 )
      .img-shadow1 {
      clear: both;
      float:right;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow1 img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      And the entry in WP that produced that screenshot above was this;

       

      magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …

      Again, note the carriage return and where the

       

      goes.

      Note also that if you use your new ‘Quicktag’, that the image will always be left-aligned. If you want it right aligned, you can still use the Quicktag, but be sure to put the ‘1’ in as in the above example.

      Credits

      The CSS, as mentioned, is the work of Laughing Lizard. Many thanks to him for allowing his work to appear here.

      The clearer div has been taken from Complex Spiral. I recommend that you read the article here on containing-floats. I have permission from the author of that page – Eric Meyer – for the quoting and use of his code.
      Customising Comments

      This part of the tutorial will enable you to do the following;
      Change the font family used for the comments
      Change the font size used for comments
      Put borders around the comment boxes
      Have a background colour or image for the comments box
      Change the “Comments by” line
      Altering the page background
      The Comments link
      Extra bits
      Files involved are: style.css, comments-popup.php / comments.php

      Change the font-family
      At present in your css, this is all the code that affects comments
      ol#comments li p {
      font-size: 100%;
      }
      Okay … there is some more, but we can ignore it for now.
      Now if you were to ‘View Source’ on a comment page, you will see that there are some tags that are called, but are not defined, so that’s what we are going to do here, and later on. So, changing the font-family ..
      Add the following to your style.css (you can copy and paste it if you want)
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 100%;
      }
      We now have the font-family Tahoma, and it is set at a size of 100%.
      Now this will only affect text that is an ordered list within your comments page – that is, just your comments. It will not affect other text on the page. To be precise, it will only affect paragraph text that is contained within a commentlist div. Remember, if the font-family that you want has more than one name, such as Lucida sans unicode, it should be entered in quotes – “Lucida sans unicode”

      Change the font size
      Easy, alter the 100% in the code you just entered;
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 150%;
      }
      That’s BIG text!
      A point: the bit in your comments that says “Comments by …….” is affected by this 150%. So if this text in your comments gets bigger, so does that bit. Likewise, if you make the comment text smaller, the “Comments by …” will be even smaller than that. See further down the page “Change the “Comments by” line”

      Bordering
      Time to add some css;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      This tells the browser that each list element (in an ordered commentlist div) must have a border on each side, and that the border should be solid, 1 pixel wide and be bright red.

      I have added a margin so that the comments are slightly apart. Change or remove this as you wish.
      Now you don’t need all sides bordered if you don’t want, and you can of course change the border styles and sizes to suit the look you want.

      Another point: There is a very good reason why we are not using the ‘p’ element in the above definition. Take a look at this screenshot

      That uses the same code as above, but with the top line being ol#commentlist li p {
      See how the comment is in a different box from the person who made it ? Now that’s not so bad on it’s own, but look at the bottom entry … when I entered that, I wrote the first line “Here’s a lyric from Apoptygma Berzerk” I then pressed Enter, and continued writing. The code though thought that this was another paragraph, so it put a box around the first line, and then a box around the rest. So you could end up with several boxes for just one comment entry. Messy. So that’s why the ‘p’ is not there. Anyway…….

      Colour or Image the Comments box

      Look again at this code which you put into your page;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      We’ve told it what to do around the box that the words are in, but not what to do with the inside of the box. So let’s do that then. We’ll add a line to make that code look like this;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-image: url(‘image.gif’);
      }
      You can use a .gif .png .jpg – it matters not.
      The image goes in your main WP directory.
      Remember that the comments boxes are usually quite small, so don’t have a huge image loading into it.
      Something more subtle than that scribble would be good too !

      If you just want a background colour, then you need this instead;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-colour: #0000ff;
      }
      That will give you a blue background. Change to suit of course.

      Change the “Comments by” line
      Because we have changed the background, it’s maybe not as quickly obvious as to who has made the comments. If you like the look you have, then just ignore this bit.

      If though you want to alter the ‘Comments by…” then we need to make a change elsewhere.
      From your login, go to Templates, and edit the comments template that you use (either ‘popup comments’ or ‘comments’) and look for this part (It’s about a third of the way down);

      by — @ <a href="#comment-“>

      You need to change it so that it looks like this – add the 1 in both locations.

      by — @ <a href="#comment-“>

      Now save the change.
      Now we need to add cite1 to your css, so open style.css
      cite1 {
      font-size: 90%;
      font-style: normal;
      background-color: #fff;
      }
      We have had to to this because the element cite is used elsewhere, and we only want these changes to affect the comments page.

      The new code above will produce a result like this.
      The commentor now stands out that bit more.
      You can change anything on each of those lines, and add borders like the examples above if you want. It’s a bit small for an image, but you could try !

      By now, you should be able to change the font and font size of your comments, you can have your comments box bordered, and you can have a background image or colour too. Pretty good. Shame about the rest of the page ……… but read on !

      Altering the page background

      There is a div that is used on the page, but it’s not actually defined. Yet.
      Here is some code for style.css;
      #commentspopup {
      background-image: url(‘image.gif’);
      }
      It’s only a page background, so not a lot of code is needed. If you don’t want an image, use something like this;
      #commentspopup {
      background-color: #ff00ff;
      }
      I think that’s a purple colour ?

      The Comments Link
      In a default install, this part of the CSS controls how that link looks.
      p, li, .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      If you are going to customise your page, it’s a good idea to split these statements. This was described on the ‘Post content’ page. So you should have this:
      .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      Change the 90% up or down to make the text larger / smaller. If you make the font a fixed size – by using a ‘pt’ measurement, this may make it hard for people with other screen resolutions to see the words you have there.

      The ‘Comments’ is a link, and can be styled as such too. Here for instance, it is coloured green, but when it is hovered, it turns yellow.
      .feedback a {
      color: #00ff00;
      }

      .feedback a:hover {
      color: #ffff00;
      }

      Extra bits
      You can put some colour into the comments boxes too.
      Each of those boxes is named in the WordPress code, so all we need to do is create the CSS that will colour those named areas.
      #commentform #author {
      border: 1px dotted #000;
      background: #ff0033;
      padding: .2em;
      }

      #commentform #email {
      border: 2px solid #000;
      background: #ff6633;
      padding: .3em;
      }

      #commentform #url {
      border: 3px dotted #000;
      background: #ff9933;
      padding: .4em;
      }

      #commentform textarea {
      width: 100%;
      background: #ffff33;
      }
      That CSS looks like this:

      That bug is the submit button.
      To have something similar, in the CSS, put this:
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      And in comments.php (or comments-popup.php) change this line:
      <input name="submit" type="submit" tabindex="5" value="” />
      into this: