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
Advertisements

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:

      Today Netaji Birthday Jan 23

      Netaji Bhawan, Calcutta, where the museum, archives and library of Netaji Research Bureau are located, is the ancestral house of Netaji Subhas Chandra Bose owned and managed by the Bureau. Netaji is regarded as a national hero in India and widely respected in the whole of Asia for his struggle and sacrifice for the liberation of India and all Asian peoples and the establishment of an international order based on justice, friendship and cooperation. The house is a national shrine and visited by thousands of Indians, many Asians and people from across the world all the year round. The Netaji Research Bureau, founded by Dr Sisir Kumar Bose in 1957, is an internationally renowned institute of history, politics and international relations. Its Netaji Museum is the finest museum on the Indian independence movement.

      In the history of India’s struggle for freedom, one man stands out in all distinctiveness and a class by himself. In physique and mental constitution, in manner and life style, in ideology and in action packed with drama and daring unmatched in contemporary annals, Subhas Chandra Bose is in his total personality a unique phenomenon of twentieth century India. The story of Subhas Chandra Bose needs to be told and understood in the context of the long march of the Indian people to independence from 1857 to 1947.

      Ajax in WordPress Plugin

      Introduction

      Ajax (Asynchronous JavaScript And XML) is a technology that allows a web page to update some of its information without a full page reload. It is used in the Administration sections of WordPress for auto-save of post edits, adding new categories, and other purposes. Some WordPress Plugins also use AJAX for things like voting on post ratings and map refreshes.

      This article, aimed at plugin developers, describes how to add Ajax to a plugin. Before reading this article, you should be familiar with the following:

      * Ajax – Overview of the technology
      * Writing a Plugin – How to write a plugin
      * Plugin API – Filters and actions – what they are and how to use them
      * How to add HTML to the appropriate WordPress page, post, or screen — for instance, if you want to add Ajax to administration screens you create, you will need to understand how to add administration menus to WordPress; if you want to add Ajax to the display of a single post, you’ll need to figure out the right filters and actions to add HTML to that spot on viewer-facing blog screens. This article does not cover these topics.
      * You will also need to know something about client-side JavaScript programming, PHP programming, and HTML, in order to use Ajax in WordPress.

      It turns out that the techniques for adding Ajax to a plugin are quite different, depending on whether you want the Ajax functionality to be part of the WordPress administration screens, or to appear on the viewer-facing side of WordPress. So, this article treats those two possibilities separately (after discussing common considerations).

      Ajax Implementation Basics

      There are three steps in an Ajax request, in general:

      1. The user does something (such as clicking or dragging the mouse), and JavaScript embedded in the HTML of the web page responds by composing a “request” and sending it to a special URL on the web server. Due to security restrictions, the URL the request goes to must be on the same web site that the file containing the JavaScript came from.
      2. A script or program on the web server (in WordPress, this will generally be one or more PHP functions) processes the request and sends information back to the browser.
      3. The returned information is displayed using JavaScript.

      Unfortunately, much of Ajax is JavaScript, which runs in the user’s web browser, and the different web browsers have not all implemented the Ajax calls and responses in the same manner. So, to make things easier, most Ajax developers choose to use a tested cross-browser library that wraps the particular browser idiosyncracies in a standard class with a documented API. In this article, we’ll use one such library, SACK (Simple Ajax Code-Kit), which is included in WordPress. The Further Reading section (see bottom of page) has several references for how to use JQuery to do AJAX — JQuery is another library included in WordPress, and the concepts are pretty much the same, but the syntax is a bit different.

      So, we’ll need to make sure both the SACK library and the JavaScript functions that compose the Ajax request get included in the HTML head section of the web page where the Ajax request will take place; the sections below will show how to do that for both the administration and viewer-facing sides of WordPress.

      When creating an Ajax request using the SACK library, we’ll need to supply the following information; the sections below will fill in the details of what this information should be for the administration side and the viewer-facing side:

      * Request URL: The URL on the server that will process the Ajax request.
      * Custom request variables: SACK allows us to set arbitrary request variables, which are sent via POST or GET to the server. Cookie information can also be sent.
      * What to do if there is an error: a JavaScript function to call if there is an Ajax error.

      By default, SACK assumes that the returned information from the server is JavaScript code, which is executed when it comes in (asynchronously). In the examples below, we’ll use this default behavior, so the PHP functions that are processing Ajax requests will need to compose their results into JavaScript commands. If you want to do something else with the returned information in your plugin, you might want to visit the SACK Project Home Page, download the zip file, and read the documentation, because there are definitely other possibilities.

      One other detail is that the PHP function that processes the Ajax request should use the PHP die function at the end.

      Ajax on the Administration Side

      Since Ajax is already built into the core WordPress administration screens, adding more administration-side Ajax functionality to your plugin is fairly straightforward, and this section describes how to do it. As mentioned above, if you want to use Ajax on the blog-viewer-facing side of WordPress, you can completely skip this section of the article.

      Here’s a short example. All this will be in one file.

      First, add some javascript that will trigger the AJAX request:

      jQuery(document).ready(function($) {

      var data = {
      action: ‘my_special_action’,
      whatever: 1234
      };

      // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
      jQuery.post(ajaxurl, data, function(response) {
      alert(‘Got this from the server: ‘ + response);
      });
      });

      <?php
      }

      Then, set up a PHP function that will handle that request:

      <?php

      add_action('wp_ajax_my_special_action', 'my_action_callback');

      function my_action_callback() {
      global $wpdb; // this is how you get access to the database

      $whatever = $_POST['whatever'];

      $whatever += 10;

      echo $whatever;

      die();
      }

      That's it! You will need to add a few details, such as error checking and verifying that the request came from the right place ( using check_ajax_referer() ), but hopefully the example above will be enough to get you started on your own administration-side Ajax plugin.
      NOTE: Since Version 2.8, The javascript global variable ajaxurl can be used in case you want to seperate your javascript code from php files into javascript only files.

      Ajax on the Viewer-Facing Side

      As of WordPress 2.8, there is a new hook similar to 'wp_ajax_my_action':

      'wp_ajax_nopriv_my_action' executes for users that are not logged in.

      So, if you want it to fire for both visitors and logged-in users, you can do this:

      add_action('wp_ajax_my_action', 'my_action_callback');
      add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

      Note: In WP 2.8, if a user is not logged in ('wp_ajax_nopriv_my_action'), then GET requests are ignored (and return -1). This bug was fixed in WP 2.9.
      Note 2: Unlike on the admin side, the "ajaxurl" javascript variable does not get automatically defined for you. Use this PHP code to generate the URL you need to call instead:

      echo admin_url('admin-ajax.php');

      Ajax on the Viewer-Facing Side ( WordPress 2.6 , 2.7, 2.8 )

      Implementing Ajax on the viewer-facing side in older versions of WordPress is slightly more ad-hoc than doing Ajax on the administration side and this section describes how to do it.

      As an example, let's consider a plugin that allows a blog viewer to vote on or rate something (which could be a generic poll plugin, a post rating plugin, or something else like that). When the blog viewer submits a vote, we want the submission to go via Ajax, so that the viewer doesn't have to wait for the page to refresh; after the vote is registered, we'll want to update the running vote total display. For this example, we'll assume the voting and display are text-based, for simplicity, and we'll assume you've either edited the theme or used a WordPress filter or action to add HTML to the appropriate WordPress viewer-facing screen. The added HTML will look something like this:

      Your vote:

      (previous results output from your PHP function)

      Next, we need to define the JavaScript function myplugin_cast_vote, the onClick action for the button, which will read the information the user entered, compose a request with SACK, and send it to the plugin for processing. As mentioned in the introductory section, this JavaScript function and the SACK library need to get added to the HTML head section of the web page the user is viewing. One way to do that is to add it to all viewer-facing screens using the wp_head action (you could also be a little more selective by using some of the is_xyz() Conditional Tags tests). Let’s drop this in a plugin file myplugin.php:

      add_action(‘wp_head’, ‘myplugin_js_header’ );

      function myplugin_js_header() // this is a PHP function
      {
      // use JavaScript SACK library for Ajax
      wp_print_scripts( array( ‘sack’ ));

      // Define custom JavaScript function
      ?>

      //

      <?php
      } // end of PHP function myplugin_js_header

      Next activate the plugin and reload the HTML where the form is. By looking at the HTML source you should see the SACK Javascript library being loaded:

      The next step is to fill in the body of the myplugin_cast_vote JavaScript function, which is supposed to read the vote from the form field, compose an Ajax request with SACK, and send the request to the server. Given the list of generic SACK information from the introductory section, here is what we need to set up for this example:

      * Request URL: We need to send our request to a plugin PHP file. This should be the main plugin PHP file. In case you want it to be a separate PHP file, bare in mind that you won’t be able to access the WordPress global variables, e.g. $wpdb, since separate files have absolutely no visibility to any part of WordPress at all.
      * Custom request variables: We need to send the vote and the ID of the div where the results go to the server, and also the function that will be called to process the vote in this simple example.

      Putting this together, the body of the JavaScript function becomes:

      function myplugin_cast_vote( vote_field, results_div )
      {
      var mysack = new sack(
      “/wp-admin/admin-ajax.php” );

      mysack.execute = 1;
      mysack.method = ‘POST’;
      mysack.setVar( “action”, “my_special_action” );
      mysack.setVar( “vote”, vote_field.value );
      mysack.setVar( “results_div_id”, results_div );
      mysack.onError = function() { alert(‘Ajax error in voting’ )};
      mysack.runAJAX();

      return true;

      } // end of JavaScript function myplugin_cast_vote

      add_action(‘wp_ajax_my_special_action’, ‘my_action_callback’);
      add_action(‘wp_ajax_nopriv_my_special_action’, ‘my_action_callback’);

      Take special note of the Javascript code which has an “action” variable. Also take note that it is calling the admin-ajax.php file. Then note that my_special_action is part of the first parameter in the add_action call (wp_ajax_my_special_action). These are all significant.

      The final step in this example is to define my_action_callback, which is what gets called when the Ajax request gets to the server. This will need to read the posted information, verify that the vote is valid, add the vote to the database, figure out what the new running totals are, and send that back to the browser. Leaving aside all the details of processing the vote, here’s what needs to go into the file:

      That’s it! You will need to add a few details, such as error checking, escaping quotes, processing the vote, and verifying that the request came from the right place, but hopefully the example above will be enough to get you started on your own viewer-side Ajax plugin.