Archive for the ‘Tutorials’ Category:
Nifty Rounded Edges Using Only CSS
Written by Jai on May 10, 2008 – 1:25 pm - 1,719 viewsIf you have a Google Analytics account, you must have seen that Google uses slightly rounded edges in the menu buttons on the left. See the picture below :-
Today, I will teach you how to give these nifty little rounded edges to your menu. Given below is the CSS code. This goes into the head section of your HTML file. :-
CSS
<style>
ul {
width:180px;
list-style-type:none;
margin:0 auto;
padding:0;
}
li a {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
color:#555;
text-decoration:none;
margin:4px 1px;
}
li a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
background-color:#eee;
padding:2px 6px;
}
li a:hover {
border-color:#aaa;
color:#333;
}
li a:hover span {
border-color:#aaa;
background-color:#ddd;
}
</style>
If you enjoyed this post, make sure you subscribe to my RSS feed!How to Make Random Header Images?
Written by Jai on May 2, 2008 – 12:14 pm - 1,880 views
You are using a neat WordPress theme with an image header but want to have multiple images that you can randomize on your blog? Here is how to go about it…
STEP 1 - Editing Images
Make all your header images that you want to randomize of the same size (dimensions) and format. For example, if you have GIF images then all should be of the same extension. I hope you get the point.
STEP 2 - Naming Images
All the names of your header images should follow a similar pattern. Here is an example we will use :-
blogtop-1.gif
blogtop-2.gif
blogtop-3.gif
blogtop-4.gif
We do this because when writing the code, we will try to randomize the number part (logically, randomization is done by numbers in any programming language) and keep the text part similar for all.
If you enjoyed this post, make sure you subscribe to my RSS feed!Understanding Floats in CSS - Making a 3-column layout
Written by Jai on April 11, 2008 – 2:41 pm - 2,779 views
Sharing knowledge is cool and if your audience is willing to learn - its Uber cool! 
With that note, here is my little contribution towards the code monkeys.
This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the most difficult problem that I faced was using floats and how to align and position the divisions (DIVs) in a page.
In a pure CSS based design, the formula for coding your layout lies in the fact, as to how best you can position your DIV tags. In this article, I will try and give you a better understanding of using the float property of CSS to position your elements.
Let us assume that we want to create a 3-column layout for our new WordPress theme. I am taking up this example because many people do not understand how to do this and have asked me questions in the past about this technique. In this tutorial, I am assuming that you know the basics of HTML. Read more »
If you enjoyed this post, make sure you subscribe to my RSS feed!Retrieving Posts from a Particular Category
Written by Jai on December 2, 2007 – 5:38 pm - 2,159 views
Many people have asked me how to show posts on their homepage only from a particular category or categories. So here is a simple and quick solution for doing this.
Getting Posts from a Single Category
Go and open your index.php file from your theme folder. Now search for this string :-
<?php if (have_posts()) : ?>
Now just below this line, add the following piece of code:-
<?php
if (is_home()) {
query_posts('category_name=General');
}
?>
The above code will display posts only from the category called “General” on your home page. You can change this to any of your category names. Read more »
If you enjoyed this post, make sure you subscribe to my RSS feed!Adding Extra Sidebar to your Wordpress Theme
Written by Jai on November 23, 2007 – 7:58 pm - 8,166 views
You like a Wordpress theme on the Internet but Oh!… What’s this?? The theme has only one sidebar! You need more than one and are on the verge of switching to some other theme with more sidebars. But wait!! Let me teach you how to add an extra sidebar or sidebars to your favorite theme. People who know PHP will find it easy to follow but even novices can easily do it using the code that I have provided in this tutorial. I am assuming that you already know HTML and a bit of CSS.
To begin the tutorial, extract your theme into a folder and open it to see all the files. If your theme has only one sidebar, then most probably you will NOT find a file called functions.php in your theme folder. In that case you will have to create this file yourself. Just open notepad or any other code editor to start a new file. Put this code into that file :-
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>
Read more »
If you enjoyed this post, make sure you subscribe to my RSS feed!Tutorial : Making Wordpress Theme by examples #1
Written by Bob on October 9, 2007 – 2:53 pm - 4,921 viewsFirst Step :
- You should to have Webmaster editing tool (I use Dreamweaver)
- You should to have Graphcis editing tool (I use Adobe Photoshop)
- Important here, you should to have local webserver for a testing mode. (I use Xampp) Download and install Xampp now.
Second Steps :
- Draw your Wordpress theme layout. (Single column or 2 column or 3 column or 4 column)
- Choose color (blue?, black?, white?, orange? etc)
- Ok? done? now we go to the next steps. (I picked 3 column theme) Here is my layout.
Open your Dreamweaver and create new HTML file and it should be like this.
If you enjoyed this post, make sure you subscribe to my RSS feed!
