Archive for the ‘Code’ Category:
Understanding Floats in CSS - Making a 3-column layout
Written by Jai on April 11, 2008 – 2:41 pm - 2,764 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!5 Cool CSS Hacks & Tricks
Written by Jai on February 17, 2008 – 2:15 pm - 3,783 views
1. Create a stunning 3D push button…
Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.
The main CSS commands you’ll need are:
<font color="#0000ff"><code>a.pushbut {</code></font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">display:block; </font><font color="#0000ff">border:1px solid; </font><font color="#0000ff">border-color:#aaa #000 #000 #aaa; </font><font color="#0000ff">text-decoration:none;</font><font color="#0000ff"> </font><font color="#0000ff">width:8em; text-align:center;</font><font color="#0000ff"> </font><font color="#0000ff">height:2em; line-height:2em;</font><font color="#0000ff"> </font><font color="#0000ff">background:#fc0; font-weight:bold</font><font color="#0000ff"> </font><font color="#0000ff">}</font><font color="#0000ff">a.pushbut:hover</font><font color="#0000ff"> </font><font color="#0000ff">{</font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">background:#ffd633;</font><font color="#0000ff"> </font><font color="#0000ff">position:relative;</font><font color="#0000ff"> </font><font color="#0000ff">top:1px;</font><font color="#0000ff"> </font><font color="#0000ff">left:1px;</font><font color="#0000ff"> </font><font color="#0000ff">border-color:#000 #aaa #aaa #000 </font><font color="#0000ff">}</font>
^^These must be within <style> tag.
Off course, you can change any settings you want like back color, alignment etc.
Now to create a button, we must specify the class object as push but within the <BODY> tag…that’s all
Ex:
<p><a href=”http://www.blogohblog.com/” onclick=”return false” onkeypress=”return false” title=”visit my blog” class=”pushbut”>Visit blogohblog</a></p>
In order to view how the above example looks, click here
To view the complete source of the above example, click here
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,155 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!
