html for counter start and stop

<button onclick="startCounter()">Start </button>
<button onclick="stopCounter()">End </button>
<div class="Timer"></div>

and the javascript part is

var intervalId; 
//setInterval function return a value . by passing this value we can stop it.
    function startCounter(){
        var start = new Date;

       intr = setInterval(function() {
            $('.Timer').text(((new Date - start) / 1000).toFixed(1) + " Seconds");
        }, 100);
     //this will update in 100 millisecond later 
    }
    
    function stopCounter(){
        clearInterval(intr);

    }

 <div id="fb-root"></div>
 <script src="http://connect.facebook.net/en_US/all.js"></script>

after that one friend request we can do this

<p>
      <input type="button"
        onclick="sendRequestToRecipients(); return false;"
        value="Send Request to Users Directly"
      />
      <input type="text" value="User ID" name="user_ids" />
       //here user id is whom we send request
      </p>

// here User id is the used id to whom we send request

or if we want to send request through multi friend selector we need this

<p>
    <input type="button"
      onclick="sendRequestViaMultiFriendSelector(); return false;"
      value="Send Request to Many Users with MFS"
    />
    </p>

here is the javascript part

FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
oauth: true
});</code>

function sendRequestToRecipients() {
var user_ids = document.getElementsByName("user_ids")[0].value;
FB.ui({method: 'apprequests',
message: 'My Great Request',
to: user_ids,
}, requestCallback);
}

function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
}

function requestCallback(response) {
// Handle callback here
}

if we need to filter our friend list we have to add a line in the function

function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'Invitation request from FBMathGame',
// filters:['app_users'] //for who use this apps
filters:['app_non_users'] //for are not using this apps
//if we use all or remove filters it will show all friends</code>

}, requestCallback);
}

i got this error because mysql default packet size samll. if data is gather than 1Mb we need to reset the default packet size. we can do this by this command

set max_allowed_packet=1000*1024*1024;
set net_buffer_length=1000000;

or
set GLOBAL max_allowed_packet=1000*1024*1024;
set GLOBAL net_buffer_length=1000000;

check if it is set or not by this
select @@max_allowed_packet;

Note that the @@ operator works in global scope when setting up a variable, while when fetching a variable, it will retrieve the session one and if it’s not found, the global one. The reason for using session vars is that they are set per client, so a mysql restart won’t be necessary. They also don’t require SUPER privileges.

lets we have a date $date =”2010-06-04 12:45″ . we want to add some days with it.

lets the day is $days = 90;

so adding day into date fast we need to convert date in millisecond. we can do this easily by a php function strtotime();

so we can write $date = strtotime(“2010-06-04 12:45″);

then we can use this function to add a date.

$addeddate= date(“Y-m-d H:i:s”, $date+((60*60)*24*$days));

it will return 2010-11-11 12:45:50 .

that’s it. we can difference between two days that way also.

there is another way but it take only y-m-d .

function dateDiff($dformat, $endDate, $beginDate)
{
$date_parts1=explode($dformat, $beginDate);
$date_parts2=explode($dformat, $endDate);

$start_date=gregoriantojd($date_parts1[1], $date_parts1[2], $date_parts1[0]);
$end_date=gregoriantojd($date_parts2[1], $date_parts2[2], $date_parts2[0]);

return $end_date – $start_date;
}

$currentTime=date(‘Y-m-d’);

$date =”2010-06-04 12:45″;

$end = date(‘Y-m-d’, strtotime($date));

this will convert date in to this
if date = “2010-06-04″;

the call the function

$dif=dateDiff(“-”, $end,  $currentTime);

if out date format is 2010/06/04 then

we call it this way $diff =dateDiff(“/”,$end,$currentTime);

first one is if any space or other thing before starting <?php tag .

second reason is if any output occur or echo or print command before redirect.

and the third is very uncommon . if  any body enter newline after ending php tad ?> than it occur.

so if an one fetch this problem check this thing.

and ajax.js file process the Ajax request.
in here first need to create an request then process it

var xmlhttp= cr();

function cr()
{
var xmlhttp;
// for Microsoft ie 6+
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}
catch(e)
{
xmlhttp=false;
}
}
// for mozilla or other browser
else
{
try{
xmlhttp=new XMLHttpRequest();
}
catch(e)
{
xmlhttp=false;
}
}

if(!xmlhttp)
alert("Error creating the file");
else
return xmlhttp;
}

after that we need to write the ajaxprocess() function

function ajaxprocess()
{
if(xmlhttp.readyState ==4 || xmlhttp.readyState ==0)
{
name=encodeURIComponent(document.getElementById("name").value);
// get data from name field
xmlhttp.open("GET","ajax.php?name=" + name, true);
// call the php function for processing data
xmlhttp.onreadystatechange = handle;
xmlhttp.send(null);
}
else
{
setTimeout('ajaxprocess()',1000);
}
}

Now we need return data from server add to the main page. return data
are xml format

function handle()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
response = xmlhttp.responseXML; // response from server
xmldomelement = response.documentElement;
// get the message
mess = xmldomelement.firstChild.data;
document.getElementById("message").innerHTML=''+mess+'';
setTimeout('ajaxprocess()',1000);
}
else
{
aleart("There is a problem accessing Server: "+xmlhttp.statusText);
}
}

}
now the ajax.php file looks like
<?php

header(‘Content-Type: text/xml’);

echo ‘<?xml version =”1.0″ encoding =”UTF-8″ standalone=”yes”?>’;

echo ‘<response>’;

$name = $_GET['name'];

$username = array(‘MAHFUZ’,'RANA’,'YOUSUF’,'MEHEDY’);

if(in_array(strtoupper($name),$username))

echo ‘Hello ‘.htmlentities($name).’!';

else if(trim($name) == ”)

echo ‘Enter a name ‘;

else

echo htmlentities($name).’, i donot know’;

echo’</response>’;

?>

thats the normal ajax with xml. but if we want to process this with json
we need some change.

function ajaxprocess()
{
if(xmlhttp.readyState ==4 || xmlhttp.readyState ==0)
{
name=encodeURIComponent(document.getElementById("name").value);
xmlhttp.open("GET","json.php?name=" + name, true);
xmlhttp.onreadystatechange = handle;
xmlhttp.send(null);
}
else
{
setTimeout('ajaxprocess()',1000);
}
}

function handle()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
card = eval("(" + xmlhttp.responseText + ")");
//eval function process the json data
mess= card.name;

document.getElementById("message").innerHTML = ''+mess+'';
setTimeout('ajaxprocess()',1000);
}
else
{
aleart("There is a problem accessing Server: "+xmlhttp.statusText);
}
}
}

and the json.php file is

<?php

header(‘Content-Type: text/JavaScript’);

// json code start with {

echo ‘{ “name” :’;

$name = $_GET['name'];

$username = array(‘MAHFUZ’,'RANA’,'YOUSUF’,'MEHEDY’);

if(in_array(strtoupper($name),$username))

echo ‘”Hello ‘.htmlentities($name).’!”‘;

else if(trim($name) == ”)

echo ‘”Enter a name “‘;

else

echo ‘”‘.htmlentities($name).’, i donot know”‘;

echo’ }’;

// and end with this  }

?>

if we want to json encode with php we can use this

<?php

header(‘Content-Type: text/JavaScript’);

$name = $_GET['name'];

$username = array(‘MAHFUZ’,'RANA’,'YOUSUF’,'MEHEDY’);

if(in_array(strtoupper($name),$username))

$m=’Hello’.htmlentities($name).’!';

else if(trim($name) == ”)

$m=’Enter a name ‘;

else

$m=htmlentities($name).’, i donot know’;

echo json_encode($m);

// json_encode() is a php function for json encoding json_decode() for decoding

?>

thats all now play with your code what you want. but now we do not need such line of code for processing the ajax .with JQuery we can do this with only two line of code

$.ajax() function.
that will be my next post.

i need to store image and restore it for display. i was thinking how can i do it. by goggling and my friend rana told me it can be done by two way. one is storing image in blob format in database. but there is a problem with this when image size is big or number of image is big the database is going to heavy. so this technique is less used. another way is    storing image in a folder and saving link in database and then use it. this one is better.

for uploading a image need a file browser.

after uploading we need to process the file it need some server side script like php for categorize the image .this code like this

$pic_name = $_FILES ['image']['name'] ;

// for Processing JPEG Type Image.

if($_FILES['image']['type'] == 'image/jpeg' || $_FILES['image']['type'] == 'image/pjpeg')

// do some thing

// for Processing PNG Type Image.

else if($_FILES['image']['type'] == 'image/png' || $_FILES['image']['type'] == 'image/x-png')

//do something else

//and for GIF type Image

else if($_FILES['image']['type'] == 'image/gif')

after then we can upload image by this code
$address ='/upload/image/'.$pic_name;
// $name is a picture name given by us and $address is where we want to upload the file

if(move_uploaded_file($_FILES ['image']['name'],$address))
the show success.

we can upload music file the same way. only change is

if($_FILES['music']['type'] == 'audio/x-mp3' || $_FILES['music']['type'] == 'audio/mpeg')
you can add other type if you needed.

for video file upload check with this

if($_FILES['video']['type'] == 'video/3gpp')

after uploading just save the file path to the database and retrive when need.
i hope this little thing might help you.

after downloading this extract it. then place it to Java\jdk1.6.0_03\jre\lib\ext .

after this start coding.

String DRIVER=”com.mysql.jdbc.Driver”;

String DATABASE_URL=”jdbc:mysql://localhost/books”;

Class.forName(JDBC_DRIVER);

con=DriverManager.getConnection(DATABASE_URL,”root”,” password”);

statement=con.createStatement();

Site Architecture 1.5

The following is a description of the general site architecture for WordPress v1.5. WordPress Theme authors are encouraged to maintain much of the core site architecture of XHTML tags and CSS selectors, but they are not required to. Therefore, this is just a general outline and your Theme may be different.

Template Driven Pages

Before we get to the Core Structure of the WordPress page architecture, you need to understand that WordPress uses template files to generate the final page “look” and content. For example, when viewing the front page of your WordPress site, you are actually viewing several template files:

• index.php
• header.php
• sidebar.php
• footer.php

When you view a single post page, you might be viewing the following template files:

• single.php
• header.php
• sidebar.php
• footer.php
• comments.php

On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files:

• index.php
• category.php
• 404.php
• search.php
• header.php
• sidebar.php
• footer.php

We’ve specified which CSS selectors belong in which template files as much as possible in the following architecture specifications.

Core Structure

The core structure of a WordPress site represents the main containers which hold the page’s content. The core structure of a WordPress site features, at a minimum, are:

• Header
• Sidebar/Menu
• Content
• Footer

These are the main containers in which the most important parts of the page are “contained”. Remember, the core structure is like building blocks. They are dependent upon each other. If you change one, you have to change the others.

Classic Theme

<body>
<div id="rap">
<h1 id="header"></h1>
<div id="content"></div>
<div id="menu"></div>
<p class="credit"></p>
</div>
</body>

Default Theme

<body>
<div id="page">
<div id="header"></div>
<div id="content" class="narrowcolumn"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div><!-- end page -->
</body>

While one calls their sidebar sidebar and the other menu, the main difference between the two Theme’s core structures is the use of the header and footer. For the Classic Theme, the header is in an h1 tag and the footer is in a paragraph tag. In the Default Theme, the header is in a div called header and the footer is in the footer div.

Both Themes feature a container that encompasses or “wraps” itself around the entire page. This wrapping container allows for more definitive control over the overall structure, often used in combination with the body tag. In different WordPress Themes, these are also found by these names:

• container
• page
• wrap
• rap

Some Themes may add a second, third, or even fourth sidebar, creating a column effect. Or they may include additional wrappers around the entire page or specific containers, but this is the core structure.

The Modular Template Files

Based upon the premise of building blocks, WordPress Themes divide up the core structure between blocks called template files. These are the template files:

• Header – header.php
• Sidebar/Menu – sidebar.php
• Content – index.php, single.php, page.php, category.php, author.php, search.php, etc.
• Footer – footer.php

As you can see, the content container can be found across many other template files. These are generated dependent upon the user’s request. If they click on a category, the category template is displayed. If they choose a Page, the page template is used. And so on.

Combined with the WordPress Loop and queries, a variety of templates can be generated, and the web page designer can style all of these differently and independently from each other.

Interior Structures

Within these core structural containers are smaller building blocks that hold the specific content within the parent container. WordPress Themes can feature a variety of these, but we are going to concentrate on the two Themes that come with WordPress. Most WordPress Themes are based on these two Themes.

Header

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

The Classic Theme features the simplest header code:

<h1 id="header"></h1>

The Default Theme has a more complex header code:

<div id="header">
   <div id="headerimg">
      <h1></h1>
         <div class="description"></div>
   </div>
</div>

While the styles for the Classic Theme are found within the Theme’s style.css style sheet file, styles for the Default Theme are found within the style.css and the <head> of the header.php template file. Working with these styles is extensively covered in Designing Headers.

Content

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

The Classic Theme has the simplest content structure:

<div id="content">
   <h2>Date</h2>
   <div class="post" id="post-1">
      <h3 class="storytitle">Post Title</h3>
      <div class="meta">Post Meta Data</div>
      <div class="storycontent">
         <p>Welcome to WordPress.</p>
      </div>
      <div class="feedback">Comments (2)</div>
   </div>
</div>

The Classic Theme hosts containers for the Date, Title, Post Meta Data, Post Content, and Feedback (number of comments). It also showcases a powerful feature. The ability to individually style a single post’s look.

<div class="post" id="post-1">

The post CSS class selector applies the post styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this:

<div class="post" id="post-<?php the_ID(); ?>">

The use of the template tag the_ID() generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for post-1, as could post-2. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too.

The Default Theme content container features a different look for multi-post views like the front page, categories, archives, and searches, and a different single post view for single posts. The multi-post view looks like this:

<div id="content" class="narrowcolumn">
   <div class="post" id="post-1">
      <h2>Post Title</h2>
      <small>Date</small>
      <div class="entry">
         <p>Post Content.</p>
      </div>
      <p class="postmetadata">Post Meta Data Section</p>
    </div>
    <div class="navigation">
       <div class="alignleft">Previous Post</div>
       <div class="alignright">Next Post</div>
    </div>
</div>

There is a lot going on here. Let’s break it down.

<div id="content" class="narrowcolumn">

In the multi-post views, it features a class="narrowcolumn" and in the single post views, it features class="widecolumn" and the sidebar is not generated on that page, allowing the post to be viewed “wide” across the width of the content area.

<div class="post" id="post-1">

Like the Classic Theme, this division sets up the style for post and the identifier for post-X, with X representing the post’s unique ID number. This allows for customizing the specific post’s look.

<h2>Post Title</h2>

This encompasses the post’s title code, styled by the <h2> tag.

<small>Date</small>

The date code is surrounded and styled by the small tag.

<div class="entry">

The post content is styled by a combination of the styles within the entry CSS selectors and the paragraph tag.

<p class="postmetadata">Post Meta Data Section</p>

The Post Meta Data Section contains the data details about the post such as the date, time, and categories the post belongs to.

<div class="navigation">

The Next and Previous Links are styled in the navigation. They also include classes for alignleft for the Previous Post and alignright for the Next Post in chronological order.

These elements are shifted around in the single post view content structure:

<div id="content" class="widecolumn">
   <div class="navigation">
      <div class="alignleft"></div>
      <div class="alignright"></div>
   </div>
   <div class="post" id="post-1">
      <h2>Post Title</h2>
      <div class="entrytext">
         <p>Post content.</p>
         <p class="postmetadata alt">
            <small>Post Meta Data</small>
         </p>
      </div>
   </div>
</div>

The widecolumn class is featured to stretch the content across the page to fill in the absence of the sidebar. The navigation has been moved up to the top. And the Post Meta Data is now incorporated into the entrytext parent container and styled differently with an alt style added.

These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized.

Comments

Comments may be featured on the single post view or in a popup window. The overall styles for the two sets of comments remain basically the same. The two template files are comments.php and comments-popup.php

Classic Theme Comments

<h2 id="comments">1 Comment
  <a href="#postcomment" title="Leave a comment">»</a></h2>
   <ol id="commentlist">
      <li id="comment-1">
         <p>Hi, this is a comment.</p>
         <p><cite>Comment by Person</cite> </p>
      </li>
   </ol>
<p>
  <a href='http://example.com/archives/name-of-post/feed/'>
  <abbr title="Really Simple Syndication">RSS</abbr>
  feed for comments on this post.</a>
  <a href="http://example.com/name-of-post/trackback/" rel="trackback">
  TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>
  </a>
</p>
  <h2 id="postcomment">Leave a comment</h2>
    <form action="http://example.com/blog/wp-comments-post.php"
method="post" id="commentform">
      <p>
          <input type="text" name="author" id="author" value="" size="22" tabindex="1" />
          <label for="author">
          <small>Name (required)</small>
          </label>
       </p>
       <p>
          <input type="text" name="email" id="email" value="" size="22" tabindex="2" />
          <label for="email">
          <small>Mail (will not be published) required)</small>
          </label>
       </p>
       <p>
          <input type="text" name="url" id="url" value="" size="22" tabindex="3" />
          <label for="url">
          <small>Website</small>
          </label>
        </p>
        <p>
          <small><strong>XHTML:</strong> List of Tags you
          can use in comments</small>
        </p>
        <p>
          <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4">
          </textarea>
        </p>
        <p>
          <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
          <input type="hidden" name="comment_post_ID" value="1" />
       </p>
   </form>
</div>

While individual sections of the comments feature styling reference, the Classic Theme has no general comment division or group style reference, one could be easily added.

#comments h2

Styles the title at the top of the comments list which says “Comments 4 Leave a Comment”, with the latter part of the sentence in a link that jumps to <h2 id="postcomment">Leave a comment</h2>.

#comment-n

Comments are given a unique ID number, signified here by the letter n. This allows them to be styled individually.

#comments ol

This begins the ordered list of the comments, counting down from one, and sets the overall style of the comments list.

#comments li

Style reference for each comment on the list.

#comments p

This paragraph tag styles the actual comments on the comment list.

#comment cite

This use of the cite controls the look of the commenter’s name. It usually states “Name says:” in the comments list.

#comments h2 or #postcomment

The h2 heading can be styled two ways, as #comments h2 or #postcomment. The latter is used by the “Leave a Comment” link from the top of the comments section, too.

#commentform

Style reference for the overall “form” for inputting comments. Each input area has it’s own ID.

#author

ID reference for the comment author’s input area.

#comments small

The <small> tag is used in several places in the Classic Theme. This usage surrounds the text in the comment submit form and the text for the list of tags that can be used in the comment.

#email

ID reference for the comment author’s email.

#url

ID reference for the comment author’s URL.

#comment

ID reference for the comment input textarea. It does not style the final generated comment, just the input box.

#comment #submit

There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button.

Default Theme Comments

The Default Theme comments feature a loop query within the comments.php and comments-popup.php which changes some of the information depending upon if comments are open, closed, and any present. If the comments are open or closed and no comments have been made, this information will be displayed within the <h3 id="comments"> tag.

<h3 id="comments">One Response to "Hello world!"</h3>
   <ol class="commentlist">
      <li class="alt" id="comment-1">
         <cite>
 <a href="http://example.org/" rel="external nofollow">Mr WordPress</a>
         </cite> Says:<br />
           <small class="commentmetadata">
             <a href="#comment-1" title="">Date and Time</a>
           </small>
            <p>Hi, this is a comment.</p>
      </li>
   </ol>
 <h3 id="respond">Leave a Reply</h3>
<form action="http://example.com/blog/wp-comments-post.php" method="post" id="commentform">
   <p>
       <input name="author" id="author" value="" size="22" tabindex="1" type="text">
          <label for="author">
             <small>Name (required)</small>
          </label>
   </p>
   <p>
       <input name="email" id="email" value="" size="22" tabindex="2" type="text">
          <label for="email">
              <small>Mail (will not be published) required)</small>
          </label>
   </p>
   <p>
       <input name="url" id="url" value="" size="22" tabindex="3" type="text">
          <label for="url">
             <small>Website</small>
          </label>
   </p>
   <p>
       <small><strong>XHTML:</strong> You can use these
       tags:....</small>
   </p>
   <p>
       <textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
       </textarea>
   </p>
   <p>
       <input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
       <input name="comment_post_ID" value="1" type="hidden">
   </p>
</form>
</div>

While individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added.

h3 #comments

Styles the <h3> tag for the “number of responses to the post” heading.

#commentlist ol

Styles the “ordered list” of the comments list.

.alt li and #commenet-n

The comment list items have two style references. The first one is the class alt and the second is the comment ID number signified here by the letter n. This allows them to be styled individually.

cite

The tag cite frames the “Name says:” and link to the comment author’s URL.

.commentmetadata small

The <small> tag has a class of commentmetadata which allows the date and time of the post to be styled.

ol #commentlist p

Styles the paragraph within the ordered list of comments.

#respond h3

Styles the heading for “Leave a Reply”.

#commentform

Style reference for the overall “form” for inputting comments. Each input area has it’s own ID.

#author

ID reference for the comment author’s input area.

#comments small

The <small> tag is used in several places in the Classic Theme. This usage surrounds the text in the comment submit form and the text for the list of tags’ that can be used in the comment.

#email

ID reference for the comment author’s email.

#url

ID reference for the comment author’s URL.

#comment

ID reference for the comment input textarea. It does not style the final generated comment, just the input box.

#comment #submit

There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button.

Popup Comments

The Classic and Default Themes’ comments-popup.php template file is essentially the same. They use the layout for the Classic Theme comment structure. While the Classic Theme uses <h2> headings and the Default Theme uses <h3> headings for the title headings in their comments, in the comments-popup.php template file, they both use the <h2> heading tag.

<body id="commentspopup">
<h1 id="header"></h1>
<h2 id="comments">Comments</h2>
....Classic Theme commment section.....
...Classic Theme footer....

The body tag sets the style for the overall page with #commentspopup. The h2 heading begins the comments section.

If you make modifications to the structure of the tags within the header and footer of the overall Theme, ensure those structural changes are applied to the comments popup template, especially if you will be releasing the Theme to the public.

Sidebar

As you saw with the Default Theme, the sidebar can be visible or not, depending upon the template file in use. The sidebar, in general, can be simple or complex. WordPress Themes often feature information within the sidebar in nested lists. There is a step-by-step guide for the sidebar at Customizing Your Sidebar and more information on Styling Lists with CSS, too.

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.

The Classic Theme sidebar looks like this, with the links removed for simplification:

<div id="menu">
   <ul>
      <li class="pagenav">Pages
         <ul>
           <li class="page_item">Contact</li>
           <li class="page_item">About</li>
         </ul>
      </li>
      <li id="linkcat-1"><h2>Blogroll</h2>
         <ul>
            <li>Blogroll Link 1</li>
            <li>Blogroll Link 1</li>
            <li>Blogroll Link 1</li>
         </ul>
      </li>
      <li id="categories">Categories:
         <ul>
          <li>Category Link 1</li>
          <li>Category Link 2</li>
         </ul>
       </li>
       <li id="search">
          <label for="s">Search:</label>
          <form id="searchform" method="get" action="/index.php">
      <div>
         <input type="text" name="s" id="s" size="15" /><br />
         <input type="submit" value="Search" />
      </div>
         </form>
       </li>
       <li id="archives">Archives:
         <ul>
             <li>Archives Month Link 1</li>
             <li>Archives Month Link 2</li>
          </ul>
       </li>
       <li id="meta">Meta:
         <ul>
            <li>RSS Feed Link</li>
            <li>RSS Comments Feed Link</li>
            <li>XHTML Validator</li>
            <li>XFN Link</li>
            <li>WordPress Link</li>
         </ul>
       </li>
   </ul>
</div>

Most of these are self-explanatory. Each set of links has its own CSS selector: Pages, categories, archives, search, and meta.

Pages and Link Categories

The Pages and Links category, labeled “Blogroll”, uses the <?php get_links_list(); ?> and <?php wp_list_pages(); ?> template tags which automatically generates a heading.

For the Links category, it generates an h2 heading for that set of links. This means you can style the menu h2 heading to look differently from the rest of the headings, or, if you want them to all look the same, make sure that the menu h2 style matches the rest of the category styles which are not automatically generated.

The Pages template tag generates pagenav as the heading and then identifies the pages in a new way. As a general list viewed on mutli-post and single post views, the Page list items feature a class="page_item" to style those links. When viewing an individual Page, that Page’s link will change to class="current_page_item", which can then be styled to look differently from the rest of the Page links.

Categories, Archives, and Meta

The other sidebar section titles, categories, archives, meta, and others, do not use template tags which generate their own titles. These are set inside of PHP statements which “print” the text on the page. While these could be put inside of heading tags, WordPress uses the _e() function to display or “echo” the text titles while also marking the text as a possible target for language translation. If you will be developing your theme for public release, using the echo functions is highly recommended.

You can style these individually or all the same. Some Themes, like the Default Theme, put all these in <h2> headings so the list headings will all look the same. Therefore, they may or may not use style references for each section. You may add them if you need them to change the look of each section of links.

Search Form

The search form is found within the searchform.php. It may be found in different locations within the sidebar. To style the overall search form, use the search ID. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form.

<li id="search">
  <label for="s">Search:</label>
    <form id="searchform" method="get" action="/index.php">
      <div>
         <input type="text" name="s" id="s" size="15" /><br />
         <input type="submit" value="Search" />
      </div>
     </form>

#search

The overall style for the search form.

#search label

Used to style the label tag, if necessary.

#searchform

Used to style the form itself.

#search div

This unlabeled div is a child container of the parent container search and maybe styled from within that selector.

#searchform input

To style the input area for the search, this selector combination will work.

#searchsubmit

Used by the Default Theme, this selector may be used to style the search or submit button.

The search form area, input, and button can be styled in many ways, or left with the default input and “button” look.

Meta Feed Links

The Meta links may be shown as text or icons representing the various links. The XHTML and CSS validation links may use the W3 icons. The various Feeds can also be represented as icons. Or left as text. It’s up to you. Use of the feeds within your sidebar with text or icons is covered by the article WordPress Feeds.

Footer

The footer is found within the footer.php template file. In both the Default and Classic Themes, the footer contains little information.

Classic Theme

<p class="credit">
   <!--15 queries. 0.152 seconds. -->
    <cite>
        Powered by <a href='http://wordpress.org'
        title='Powered by WordPress, state-of-the-art
        semantic personal publishing platform.'>
        <strong>WordPress</strong></a>
    </cite>
</p>
</div>

The footer’s content is styled with the credit class and the paragraph and cite tags.

The tag displays the number of mysql queries used on the page and the time it took for the page to load, in HTML commented code. It is there for the administrator’s convenience and use. It is only visible within the page’s source code. If you would like to display this visible on the page, remove the comments. It’s look will be influenced by the credit class style of the paragraph tag. On the template file, it looks like this:

<!--<?php echo $wpdb->num_queries; ?> queries.
<?php timer_stop(1); ?> seconds. -->

Default Theme

<div id="footer">
   <p>Blogging in the WordPress World
      is proudly powered by
      <a href="http://wordpress.org/">WordPress</a><br />
      <a href="feed:http://example.com/feed/">Entries (RSS)</a>
      and
      <a href="feed:http://example.com/comments/feed/">
      Comments (RSS)</a>.
    <!-- 18 queries. 0.186 seconds. -->
   </p>
</div>

The Default Theme’s footer is styled by the footer ID and the paragraph tag. While the footer area itself maybe styled by the footer, the paragraph tag controls the text within it. To style the paragraph tag differently within the footer than the rest of your page:

#footer p {styles}

I got this from codex