Posts Tagged ‘Tutorial’
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!
