Archives for March 2010 | Developer Code book

How to write inline conditional css

Posted by sony On March - 31 - 2010 ADD COMMENTS

We all know what is conditional css and how to write the conditional css.
Here is few examples about conditional css.

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<![endif]–>

With in style.css file

 a.button_active, a.button_unactive {
 display: inline-block;
 [if lte Gecko 1.8] display: -moz-inline-stack;
 [if lte Konq 3.1] float: left;
 height: 30px;
 [if IE 5.0] margin-top: -1px;
 text-decoration: none;
 outline: none;
 [if IE] text-decoration: expression(hideFocus='true');
 }

When we are use the inline css in document. If in that case we need to use conditional css then there is way

// Following is hack for all IE, including 7. It must go first, or it overrides the following hack
<div style="width:15px;^width:13px;">
some dynamic content
</div>
// Following is hack for all IE6 + browsers
<div style="width:15px;_width:14px;">
some dynamic content
</div>

Css

How to do word wrap with css

Posted by sony On March - 31 - 2010 23 COMMENTS

Many times we need to do word wrap using lanugages. I recommend use css for word wrapping.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
This is a problem with CSS layouts that use floated divs.
Use following code for fix the word wrap with all divs.

div { word-wrap: break-word }

instead of this we always use following css code:

overflow:hidden;

But this is not good practice. Use word-wrap css property.
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

Css

Download the wp-bluemagic wordpress theme

Posted by sony On March - 28 - 2010 5 COMMENTS

We Created the very professional blue color based wordpress theme. User can download wp-bluemagic wordpress theme form here.

wp-bluemagic

Demo | Download

Wordpress Themes wordpress

How to create wordpress theme

Posted by sony On March - 28 - 2010 54 COMMENTS

First choose or create your html template from photoshop. For creating the html template you can refer following screen shots for creating photoshop image. This is very common layout for creating any webpage.

Here for this tutorial I am using following image for creating the wordpress theme.

After creating image in photoshop you need to create the html according to this image. Here I created the one index.html file and style.css file.
You can download the HTML from here:

wp-bluemagic-html

Now we can start creating the wordpress theme.
First create style.css file and in top section copy paste the following code:

/*
Theme Name: wp-bluemagic
Theme URI: wordpressapi.com
Description: two column, blue color wordpress theme
Author: wordpressapi
Author URI: wordpressapi.com
Version: 1.0

*/

You can change the information as per your requirement.

For creating the wordpress theme following minimum files are needed in wordpress theme folder.
1.   index.php
2.   header.php
3.   footer.php
4.   sidebar.php
5.   comments.php
6.   functions.php – not necessary
7.   screenshot.png

Here is my html code from index.html file rename that file to base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WordPressapi.com - wp-bluemagic</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">
 <h1><a href="#">wp-bluemagic   </a></h1>

 </div>
 </div>
 <!-- header end -->
 <div id="menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Photos</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 <!-- menu end-->
 <div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!--content end-->
 <div id="sidebar">
 <ul>
 <li>
 <h2>Author Information</h2>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 </li>
 <li>
 <h2>Categories</h2>
 <ul>
 <li><a href="#">wordpress </a></li>
 <li><a href="#">wordpress theme</a></li>
 <li><a href="#">wordpress plugins</a></li>
 <li><a href="#">wordpress tips</a></li>
 <li><a href="#">wordpress hacks</a></li>
 <li><a href="#">wordpressapi</a></li>
 <li><a href="#">wordpress tutorials</a></li>
 </ul>
 </li>
 <li>
 <h2>Blogroll</h2>
 <ul>
 <li><a href="#">wordpress.com</a></li>
 <li><a href="#">wordpress.org</a></li>
 <li><a href="#">wordpressapi.com</a></li>
 <li><a href="#">google.com</a></li>
 <li><a href="#">yahoo.com</a></li>
 <li><a href="#">live.com</a></li>
 <li><a href="#">facebook.com</a></li>
 </ul>
 </li>
 <li>
 <h2>Archives</h2>
 <ul>
 <li><a href="#">march 2010</a></li>
 <li><a href="#">feb 2010</a></li>
 <li><a href="#">january 2009</a></li>
 <li><a href="#">december 2009</a></li>
 <li><a href="#">november 2009</a></li>
 <li><a href="#">september 2009</a></li>
 <li><a href="#">july 2009</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <!-- end #sidebar -->
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
</div>
 <div id="footer">
 <p>Copyright (c) 2010 wordpressapi.com. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
 </div>
 <!-- end #footer -->
</body>
</html>

Now we are going start to create the wordpress theme from html file which we created earlier.

First create the header.php file and copy paste the following code in that file. I taken the top header HTML code from base.html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">
 <h1><a href="<?php bloginfo('siteurl');?>/"><?php bloginfo('name');?> </a></h1>
 </div>
 </div>
 <!-- header end -->
 <div id="menu">
 <ul>
 <licurrent_page_item";}?>" ><a href="<?php echo get_settings('home'); ?>">Home</a></li>
 <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order&exclude=827'); ?>
 </ul>
 </div>
 <!-- menu end-->
<!-- end header -->

Create the index.php file and copy paste the following code in that file. I taken the middle or inner part of HTML code from base.html file.

<?php get_header(); ?>
<div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div>
 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <p><span><?php the_time('F - j - Y'); ?></span><span>Posted by <a href="<?php the_author_link(); ?>"><?php the_author(); ?></a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p><?php the_content(); ?></p>
 <p><a href="<?php the_permalink(); ?>">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<?php comments_popup_link('COMMENTS', '1 COMMENT', '% COMMENTS'); ?></p>
 </div>
 </div>
 <?php comments_template(); // Get wp-comments.php template ?>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>
<?php posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!--content end-->
 <?php get_sidebar(); ?>
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
<?php get_footer(); ?>

Create the footer.php file and copy paste the following code in that file. I taken the bottom footer HTML code from base.html file.

</div>
 <div id="footer">
 <p>Copyright (c) 2010 wordpressapi.com. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
 </div>
 <!-- end #footer -->
<?php wp_footer(); ?>
</body>
</html>

Create the sidebar.php file and copy paste the following code in that file. I taken the only the sidebar HTML code from base.html file. I taken only sidebar div from html and li tags and other widgets will be provided by wordpress admin, so you dont worry about that part.

<div id="sidebar">
<ul>
<?php     /* Widgetized sidebar, if you have the plugin installed. */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->

Create the comments.php file and copy paste the following code in that file. I did not taken HTML code or php from base.html file. This is common wordpress comments template. If you are designer then you dont need to worry about comments code. you just need to copy paste the following code into comments.php file

<?php

if ( post_password_required() ) : ?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>

<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<?php if ( comments_open() ) : ?>
 <a href="#postcomment" title="<?php _e("Leave a comment"); ?>">&raquo;</a>
<?php endif; ?>
</h2>

<?php if ( have_comments() ) : ?>
<ol id="commentlist">

<?php foreach ($comments as $comment) : ?>
 <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
 <?php echo get_avatar( $comment, 32 ); ?>
 <?php comment_text() ?>
 <p><cite><?php comment_type(_x('Comment', 'noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
 </li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
 <p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>

<p><?php post_comments_feed_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.')); ?>
<?php if ( pings_open() ) : ?>
 <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Universal Resource Locator">URL</abbr>'); ?></a>
<?php endif; ?>
</p>

<?php if ( comments_open() ) : ?>
<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>

<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() ) );?></p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( is_user_logged_in() ) : ?>

<p><?php printf(__('Logged in as %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account') ?>"><?php _e('Log out &raquo;'); ?></a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" />
<label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" />
<label for="email"><small><?php _e('Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small><?php _e('Website'); ?></small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->

<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>

Create the functions.php file and copy paste the following code in that file. In this file we are just registering the sidebar widgets, using following function.

<?php
automatic_feed_links();

if ( function_exists('register_sidebar') )
 register_sidebar();

?>

Here is my style.css file. You can create this file as per your theme. We are using the same css which we created for base.html, We just added some of extra code for wordpress theme and img alignment.

/*
Theme Name: wp-bluemagic
Theme URI: wordpressapi.com
Description: two column, blue color wordpress theme
Author: wordpressapi
Author URI: wordpressapi.com
Version: 1.0

*/

body {
 margin: 0;
 padding: 0;
 background: #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #787878;
}

h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 color: #32639A;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 2.4em;
}

h3 {
 font-size: 1.6em;
}

p, ul, ol {
 margin-top: 0;
 line-height: 180%;
}

ul, ol {
}

a {
 text-decoration: none;
 color: #4486C7;
}

a:hover {
}

#wrapper {
 width: 960px;
 margin: 0 auto;
 padding: 0;
}

/* Header */

#header {
 width: 940px;
 height: 148px;
 margin: 0 auto;
 background: #4169E1;
}

/* Logo */

#logo {
 float: left;
 margin: 0;
 padding-top: 30px;
 color: #000000;
}

#logo h1, #logo p {
 margin: 0;
 padding: 0;
}

#logo h1 {
 float: left;
 padding-left: 80px;
 letter-spacing: -1px;
 text-transform: lowercase;
 font-size: 3.8em;
}

#logo p {
 float: left;
 margin: 0;
 padding: 26px 0 0 10px;
 font: normal 14px Georgia, "Times New Roman", Times, serif;
 font-style: italic;
 color: #FFFFFF;
}

#logo a {
 border: none;
 background: none;
 text-decoration: none;
 color: #FFFFFF;
}
/*img align*/
img.centered  {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 padding: 0px;
 }

img.alignnone {
 padding: 5px 5px;
 margin: 0px 0px 10px 0px;
 display: inline;
 background:#E3E8E0;
 border: 1px solid #C7CFC2;
 }

img.alignright {
 padding: 5px 5px;
 margin: 5px 0px 5px 5px;
 display: inline;
 background:#E3E8E0;
border: 1px solid #C7CFC2;
 }

img.alignleft {
 padding: 5px 5px;
 margin: 5px 5px 5px 0px;
 display: inline;
 background:#E3E8E0;
border: 1px solid #C7CFC2;
 }

.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 }

.alignright {
 float: right;
 margin: 0px 0px 10px 10px;
 }

.alignleft {
 float: left;
 margin: 0px 10px 10px 0px;
 }

.wp-caption {
 border: 1px solid #C7CFC2;
 text-align: center;
 background-color: #E3E8E0;
 padding: 4px 0px 5px 0px;
 color:#222;
 }

.wp-caption img {
 margin: 0px 0px 5px 0px;
 padding: 0px;
 border: 0px;

 }

.wp-caption p.wp-caption-text {
 margin: 0px;
 padding: 0px 0px 0px 0px;
 font-size: 11px;
 font-weight: normal;
 line-height: 12px;
 }

/* Search */

#search {
 float: right;
 width: 280px;
 height: 60px;
 padding: 20px 0px 0px 0px;
 background: #4169E1;
 border-bottom: 4px solid #FFFFFF;
}

#search form {
 height: 41px;
 margin: 0;
 padding: 10px 0 0 20px;
}

#search fieldset {
 margin: 0;
 padding: 0;
 border: none;
}

#search-text {
 width: 170px;
 padding: 6px 5px 2px 5px;
 border: none;
 background: #FFFFFF;
 text-transform: lowercase;
 font: normal 11px Arial, Helvetica, sans-serif;
 color: #5D781D;
}

#search-submit {
 width: 50px;
 height: 23px;
 border: 1px solid #89B056;
 background: none;
 font-weight: bold;
 font-size: 10px;
 color: #FFFFFF;
}

/* Menu */

#menu {
 width: 940px;
 height: 49px;
 margin: 0 auto;
 padding: 0;
 background:#4169E1;
}

#menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: normal;
}

#menu li {
 float: left;
}

#menu a {
 display: block;
 width: 155px;
 height: 33px;
 padding-top: 16px;
 text-decoration: none;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #FFFFFF;
 border: none;
}

#menu a:hover, #menu .current_page_item a {
 background: #659CEF;
 text-decoration: none;
}

#menu .current_page_item a {
 background: #FBFBFC;
 padding-left: 0;
 color: #30476A;
}

/* Page */

#page {
 width: 940px;
 margin: 0 auto;
 padding: 0;
}

#page-bgtop {
 padding: 20px px;
}

#page-bgbtm {
}

/* Content */

#content {
 float: left;
 width: 620px;
 padding: 30px 0px 0px 0px;
}

.post {
 margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
 margin-bottom: 10px;
 padding: 12px 0 0 0px;
 letter-spacing: -.5px;
 color: #000000;
}

.post .title a {
 color: #32639A;
 border: none;
}

.post .meta {
 height: 30px;
 background: #D8E7FE;
 margin: 0px;
 padding: 0px 0px 0px 0px;
 text-align: left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
}

.post .meta .date {
 float: left;
 height: 24px;
 padding: 3px 15px;
 color: #4A81DE;
}

.post .meta .posted {
 float: right;
 height: 24px;
 padding: 3px 15px;
 background: #4169E1;
 color: #FFFFFF;
}

.post .meta a {
 color: #FFFFFF;
}

.post .entry {
 padding: 0px 0px 20px 0px;
 padding-bottom: 20px;
 text-align: justify;
}

.links {
 padding-top: 20px;
 font-size: 12px;
 font-weight: bold;
}

/* Sidebar */

#sidebar {
 float: right;
 width: 280px;
 padding: 0px;
 color: #787878;
 background: #FFFFFF;
}

#sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#sidebar li {
 margin: 0;
 padding: 0;
 border-left: 1px solid #E2E2E2;
}

#sidebar li ul {
 margin: 0px 0px;
 padding-bottom: 30px;
}

#sidebar li li {
 line-height: 35px;
 border-bottom: 1px dashed #D1D1D1;
 margin: 0px 30px;
 border-left: none;
}

#sidebar li li span {
 display: block;
 margin-top: -20px;
 padding: 0;
 font-size: 11px;
 font-style: italic;
}

#sidebar h2 {
 height: 38px;
 padding-left: 30px;
 letter-spacing: -.5px;
 font-size: 1.8em;
}

#sidebar p {
 margin: 0 0px;
 padding: 0px 30px 20px 30px;
 text-align: justify;
}

#sidebar a {
 border: none;
}

#sidebar a:hover {
 text-decoration: underline;
 color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
 padding: 20px;
}

#calendar table {
 width: 100%;
}

#calendar tbody td {
 text-align: center;
}

#calendar #next {
 text-align: right;
}

/* Footer */

#footer {
 height: 50px;
 margin: 0 auto;
 padding: 0px 0 15px 0;
 background: #D8E7FE;
 border-top: 1px solid #D3DEF0;
 font-family: Arial, Helvetica, sans-serif;
}

#footer p {
 margin: 0;
 padding-top: 20px;
 line-height: normal;
 font-size: 10px;
 text-transform: uppercase;
 text-align: center;
 color: #A0A0A0;
}

#footer a {
 color: #5389E0;
}

Now wordpress theme is complete. You can upload this whole folder the wp-content/themes directory and activate the theme.

You can download this wordpress theme code form here
Wp-bluemagic

Wordpress Themes tutorials wordpress wordpress api

how to use captcha code in wordpress registration

Posted by sony On March - 27 - 2010 19 COMMENTS

WordPress is becoming very popular for these days. So many people are using wordpress as a CMS and networking website. With wordpress doing registration or commenting on post is so easy. So for stopping the automated computer spam we need to use captcha code in wordpress.

What is Captcha Code?

CAPTCHA code was created to stop automated computer spam robots from filling out forms, harvesting email addresses, and then sending out countless spam emails.

The CAPTCHA security image works by asking the website visitor to type in a code they see correctly. A human can do this, but an automated computer program cannot.In wordpress there are so many free wordpress plugins are available. Here in this article I am going to tell you, how to use captcha code in wordpress website.

1. Simple CAPTCHA

A CAPTCHA for your comment system to prevent unwanted spams. Prevent automated spams by bots and most important naughty peoples. It’s simple and yet secure.

2. Security Captcha

Prevent registration spam and bots login by adding custom captcha tests in the registration page and/or login page

3. WP Captcha-Free

WP Captcha-Free blocks automated comment spam without resorting to CAPTCHAs. It does so by validating a hash based on time (and some other parameters) using AJAX when the form is posted. Comments posted via automated means will not have a hash or will have an expired hash and will be rejected. Unlike using a captcha, this does not place any burden on the commenter.

4. Raz-Captcha

Prevent registration spam and bots login by adding custom captcha tests in the registration page and/or login page

Featuring 5 different and customizable captcha algorithms with possibility to set your own random characters font, styles, colors background and more

5. Really Simple CAPTCHA

Really Simple CAPTCHA does not work alone and is intended to work with other plugins. It is originally created for Contact Form 7, however, you can use it with your own plugin.

Note: This product is “really simple” as its name suggests, i.e., it is not strongly secure. If you need perfect security, you should try other solutions.

6. WPMU Super CAPTCHA

This plugin was developed primarily for the WordPress Muti-User edition and now works with Buddypress, however it works on the regular single domain version as well. It combats spam bots from flooding you with sign-ups and blog creations and it keeps bots from brute- force attacking your site with the admin username by forcing a visual confirmation CAPTCHA in order to login. Most CAPTCHA systems for WordPress gives you a very templated layout and read-out, many that can be programmed into a bot to bypass. With Super CAPTCHA, you can personalize and control the very way the CAPTCHA is rendered so every site that displays the CAPTCHA will be diffrent, making it so each bot has to be pre-configured, just for your site, in order to achieve a successful attack making Super CAPTCHA the MOST SECURE free anti-spam system available for WordPress.

Wordpress Plugins Wordpress Themes tutorials wordpress wordpress api wordpress hacks wordpress tutorials

How to get the website loading time in a browser

Posted by sony On March - 27 - 2010 ADD COMMENTS

If you want to get the webpage loading time through javascript. This very easily achievable using javascript.

You just need to use following code in your head tag


var starttime = new Date().getTime();
window.onload=function() {
 var loading_time = new Date().getTime()-starttime;

 alert('Webpage loading time in ' + loading_time + 'ms - milisecond');
}

javascript

When a photograph tells different story

Posted by sony On March - 27 - 2010 ADD COMMENTS

When we shoot photo that is all passion. Photography is big and very subject. Check some very nice pictures.

news photoshop

How do we protect our WordPress admin panel

Posted by sony On March - 25 - 2010 1 COMMENT

Now many people are using the wordpress cms for there website. Many people are always take a shared hosting for publishing the wordpress website.

With shared hosting or dedicated you should always think about hack proof wordpress admin panel. So no one can misuse your worepress admin panel. Here in this article I will give you some very nice tips about, how to protect our wordpress admin panel.

1. Create very strong password

Always create a very strong password for your admin user. You should add some special characters and numbers in your password. Your password should be 10 digit minimum and not related to your name or surname.

Main important think is dont disclose your password to anyone.

2. Limit wordpress admin access via IP address

You can use the .htaccess file for limiting the wordpress admin panel for specific ip addresses only. Use following code for that.

[/code]
<Files "wp-login.php">
Order Deny,Allow
Deny from all
Allow from Your.IP.Address

allow from 192.168.2.45

</Files>
[/php]

3. Avoid the “admin” Username

You should always avoid the admin username to login. You can easily achieve this. First create another super admin with another name and open your functions.php file from wordpress theme folder and use following code.


add_filter(‘login_errors’,create_function(‘$a’, “return null;”));

There are some very nice plugins also available for providing the wordpress security your wordpress website. Here are few:

http://wordpress.org/extend/plugins/one-time-password/

http://wordpress.org/extend/plugins/semisecure-login-reimagined/

http://www.bad-neighborhood.com/login-lockdown.html

http://wordpress.org/extend/plugins/stealth-login/

wordpress wordpress api wordpress hacks wordpress tutorials

how to pull sticky post from wordpress

Posted by sony On March - 25 - 2010 1 COMMENT

From wordpress 2.7 version wordpress introduced the new feature called sticky post. Sticky post will give you ability to show the most popular or your favorite post always top of the posts.

Sticky post feature is very nice for wordpress theme developer. Here I will show you how to create sticky post in wordpress.

When you are creating the new post or editing the wordpress post you can choose the stick ths post option. This is very simple way to create the sticky post.

If you want to some good styling to post then use following css code. Just open your style.css file from your template.


.sticky {
 background: #ccc;
 border: 5px solid blue;
}

If you want to show the sticky post in any specific page then use following code.


is_page('sticky page') {
query_posts(array('post__in'=>get_option('sticky_posts')));
}

Wordpress Themes tutorials wordpress wordpress api wordpress hacks wordpress tutorials

how to install vim on linux

Posted by sony On March - 25 - 2010 7 COMMENTS

If you are using linux so you are very much familiar with vim editor. Some time when you are doing new setup of server like for linux distribution. There is lot is coming cloud hosting and centos and fedora. My most favorite is fedora.

If your OS does not have vim then use following command.


[root@siwan]# yum install vim-X11 vim-common vim-enhanced vim-minimal
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * addons: hpc.arc.georgetown.edu
 * base: mirrors.netdna.com
 * extras: mirrors.greenmountainaccess.net
 * updates: mirror.cogentco.com
Setting up Install Process
Package 2:vim-X11-7.0.109-6.el5.i386 already installed and latest version
Package 2:vim-common-7.0.109-6.el5.i386 already installed and latest version
Package 2:vim-minimal-7.0.109-6.el5.i386 already installed and latest version
Resolving Dependencies
--> Running transaction check
---> Package vim-enhanced.i386 2:7.0.109-6.el5 set to be updated
--> Finished Dependency Resolution

Dependencies Resolved

===========================================================================================================================================================================================================
 Package                                             Arch                                        Version                                                 Repository                                   Size
===========================================================================================================================================================================================================
Installing:
 vim-enhanced                                        i386                                        2:7.0.109-6.el5                                         base                                        1.2 M

Transaction Summary
===========================================================================================================================================================================================================
Install      1 Package(s)
Update       0 Package(s)
Remove       0 Package(s)

Total download size: 1.2 M
Is this ok [y/N]: y
Downloading Packages:
vim-enhanced-7.0.109-6.el5.i386.rpm                                                                                                                                                 | 1.2 MB     00:00
Running rpm_check_debug
Running Transaction Test
Finished Transaction Test
Transaction Test Succeeded
Running Transaction
 Installing     : vim-enhanced                                                                                                                                                                        1/1

Installed:
 vim-enhanced.i386 2:7.0.109-6.el5

Complete!

Following are the common commands for doing editing with vim editor.

#vim somefile

some keys

i – for insert the text

escape – going to back

:18 – for going to line no 18

:w - write and save the file

:q! - quit the file, without saving

:wq! - saving and closing the file

shift +g – going to bottom of file

page up – page up

page down - page down

Open source

wp-bluemagic

Who am I?