How to make a responsive wordpress theme using twitter bootstrap

Getting started responsive wordpress theme Before you begin creating a twitter bootstrap enabled responsive wordpress theme layout, you need to create the same basic theme layout using css/html. Let’s download the latest twitter bootstrap version. Once you download it, extract it into a folder where you going to create your responsive wordpress theme basic layout. Once you extract you will see a folder structure as follows;           […]

How to convert PSD to HTML

A PSD file or an Adobe Photoshop image which has been created and saved in the PSD (Photoshop) format is basically the origin of a website, and sometimes a complex thing to deal with. A web designer gives birth to this origin of a website by layering the design and saving it in PSD formats. Afterward a webmaster jiggles around with each and every part of the design by slicing […]

How to create liquid gradient rounded corner box

Slicing a gradient rounded corner box is not an easy task in psd to html, especially if you want to make it expandable. You can create gradients in different ways. Let’s consider how to convert below design to css, a gradient box with top to bottom spreading gradient. In this slicing psd scenario the box can be expanded from top to bottom and it is the general way of expand […]

How to create HTML forms using Lists

With this article I’m gonna show you how to create html forms using un-ordered lists. When you slice photo shop designs into css/html layouts, you can use list for greater extend to build your html layouts. Power of lists cannot measure, I would say it can even replace divs. Some css coders think lists are to show billeted content and menus, wrong assumption. I feel since a list gives more […]

CSS-Sprite image

CSS Sprites

What are CSS Sprites? It is a way of combining small image pieces into one image, to reduce the number of HTTP calls made for image resources from your server while browsing the page. This process is call css sprites. When combining images into css sprites, you need to look into the fact of final combined larger image, that should not be bigger. Next step assigns this generated image to […]

CSS Sprites for Rounded Corners

In HTML coding rounded corners boxes are frequently encountered. Over the years CSS/HTML coders have used DIVs to implement rounded corners. In my article Rounded Corners Without DIVs, I have shown how to implement rounded corners using unordered Lists (ul).  In this article, I’m going to show how to use an advance concept of Css Sprites and html to code a rounded corner box. Lets Plan Assume you are supposed […]

PSD to HTML Slicing Hack

I believe PSD to HTML is an art rather coding. Great designers always should not think of how to implement there designs in HTML/XHTML. They should think of lucrative designs for the business. If you are new to PSD slicing and HTML coding or even an experienced coder, doesn’t matter. I have seen many experienced HTML coders use big images in HTML coding. May be they find it difficult to […]

How to Align Unordered List bullet Image

This an article about how to align bullet image of an unordered list(ul). When you start slicing a PSD to html you will come across a number of times to align bullet images in an unordered list(ul). This will be a nail biting if you don’t know the correct css/xhtml trick. Once you read this article you will not scratch your head thinking how to align bullet image using CSS/HTML. […]

Two Column Layout with Unordered List

Here is another demonstration of building a two column layout using the unordered list <ul> tag. Assume that you’ve been asked to code the following layout. We can code the above layout using the unordered list <ul> tag. Let us now take a look at the way of coding it. Initially you need to declare the HTML code as below. <ul> <li><h2>Header Content</h2></li> <li> <ul> <li><h2>Left column</h2></li> <li><h2>Right column</h2></li> </ul> […]

How to create a Rounded Corner Box without DIVs

When we talk about table-less HTML/xHTML coding, the first thing that comes to your mind is DIV.  To create rounded corners, coders have  been depending on DIVs all the time. Yes of course, it’s been the best in the de facto standard in html coding business. However I’d like to give you an idea about another way of building a rounded corner box without using DIVs. Assume that you’ve been […]

World of CSS/HTML!

Welcome to WeCodeYourSite – Articles. This is an effort to share css/html and JQuery findings. When we code css/html, we come across with various issues with the browsers, especially in IE6. You have to be really smart to make your css layout compatible with IE6. expidoms Some companies charge more to make the layout IE6 compatible. I had defects in my first layout in IE9 Beta. Well, IE9 is going […]