Archive for 'css'

CSS3 - The future now

if you are involve in psd to xhtml or front end development you know css1 and css2 did you ever used css3 yes you heard of this but did’t try to use it yet as not all browser support but webkit.

Today i have to create a css based menu again ( pure css no js ) hide and show like effect although transition was not necessary to implment and idea came into my mind i should try CSS3 and to be honest i’m stun to see what css3 is offering and sharing here with you guys.

Please visit below link to see CSS3 in action.


Please Comment what you like in CSS3 :)

Image base navigation with modx wayfinder menu

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx ( In this tutorial i will explore how we can use or create image based modx wayfinder menu, we can create or generate standard ul based menu calling wayfinder snippet and than style this menu using css, but sometime we don’t require standard ul base menu or ul list with images in, so below are the steps following we can create image base menu.

Step - 1

Create a template variable name it “menuImage” and attached to your desired or active template set the values use the following settings - ‘Input Type: Image’ and ‘Widget: Image’.

Step - 2

Edit your home page assign any desired image to menuImage TV.

Step - 3

In your active template call wayfinder snippet with rowtpl and outertpl papamater for detail about paramater please visit this site MuddyDogPaws

Step - 4

For your rowtpl chunk use this chunk

Your are Done

View your page in browser and you will see image in place of your home link, create css to indent the link text, we can also do it using only classes and using rowtpl chunk wf.docid wf.classes together in rowtpl chunk now you will have known classes name like 1nav, 2nav where 1 and 2 are page id’s so hard code it in css create class name 1nav and add background attribute to this class you are done if you guys facing any difficulty please write in comment hopefully i will answer within day or with in hour ;)

MODx Tutorial and Resources

Working With a Content Management Framework: MODx

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx ( MODx is not just an extremely flexible CMS that makes managing website content a breeze, it is also a powerful Content Management Framework with an extensive API that makes it a developer’s dream.
“MODx is an open source PHP Application Framework with Powerful Features that help you take control of your online content. It empowers developers and advanced users to give as much control as desired to whomever they desire for day-to-day website content maintenance chores.”

Official Link

Where to find MODx Help? – MODx Resources and Tutorials on the Web

Today I’m going to start on a new series of tutorials that will teach you how to build a website using MODx CMS. As always, I invite you to add comments and share your knowledge as we learn and build together. I also encourage you, as you follow these tutorials, to work along with me, installing a local copy of MODx on your computer so that you can follow along and see MODx in action.

Official Link

Exploring MODx from the inside

MODx is dead! Long live MODx!
Well, no, not really. MODx as we know it now, MODx Evolution, is far from becoming obsolete.
While MODx 2.0 Revolution is in its first public beta, being used initially to support a new generation MODx CMS and representing a quantum leap in web application frameworks, its older brother MODx Evolution will continue to be a sturdy supporter of web developers everywhere for a long time.
You could say that MODx Evolution is a content manager with application framework support, while MODx Revolution is an application framework with content management support.

Official Link

The MODx Content Management System

MODx is a content management system that helps you create superlative web sites. There are two key benefits to MODx. First, it makes web sites easy for you and others you designate as site admins to maintain. Second, once you get used to it, it allows you to create very complex web sites in a very short time. Things that would take many lines of code for you to do yourself can often be accomplished with a line or two in MODx. Of course there are many other benefits as well, but we’ll get to those later.

Official Link

MODx Cheat Sheet

an excellent resource to have as you work with MODx, developed by Brandon Booth, This document applies to Modx 0.9.6.

Official Link

The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

Those who know me from the forums probably know that my favourite snippet is Wayfinder. This e-book started out as a tutorial that I thought I’d post in the wiki but it ended up as an e-book! This is the culmination of about 5-6 months writing and is quite detailed. The e-book explains the logic behind and the workings of almost all the Wayfinder parameters. This is all done practically by building a fictitious Restaurant website. The e-book also provides examples of building some common menus such as an accordion menu, using UltimateParent with Wayfinder, etc. Because of this, it makes for quite some long reading, 148 pages! However, there’s lots of graphics so it is not all text and boring, at least I hope not. I hope it serves newbies and experts a like, either as a guide, a reference, an inspiration or just a challenge to contribute to the MODx project in one way or the other.

Official Link

How to Build a Beautiful Site With MODx CMS (Content Management System)

I spent months testing out various content management systems (CMS), and have to admit that no other software came close to the flexibility of MODx. I will have you know that I am by no means a MODx CMS guru, but I have built several sites on this beautiful piece of software and thought I’d share this treasure.

Official Link

How to make website with MODx CMS in 10 minutes

In this MODx CMS tutorial, I will show you how to install MODx, find and install MODx template, add or modify your content. On the way you will explore the backend interface and a number of the standard MODx features. In the end you should get a MODx driven website with your own content. It’s just the beginner MODx guide, so don’t expect I’ll go too much into the details: the purpose is to quickstart your first MODx site as soon and as easy as possible. In the next MODx tutorials I’ll go deeper into building websites with this powerful CMS, so stay tuned.

Official Link

Basic Integration of Foxy Cart into MODx

This is the first of several Screencast I’m going to do to explain how to integrate Ecommerce into MODx using Foxy Cart. MODx is our favorite CMS at and we have found that Foxy Cart allows us to set up Ecommerce for our clients at a very affordable price.

Official Link

Multiple domains / sub sites with MODx

In this tutorial, I would like to show how multiple domains can be managed with one MODx installation (one database and one manager). You need only a few plugins, snippets, chunks, a template variable (TV) an some entries to the .htaccess. For advanced users or for lazy people I also will show how to use only one template for handling individual designs for each domain.

Official Link

Basic Blog with modx

Here’s how to use the MODx CMF to create a simple blogging system with comments, and an easy to use method of adding “blog” entries. In this tutorial, we will use two chunks, and two documents.

Official Link

Friendly URLs Guide: modx

This article covers various techniques and methods for representing these parameters in the URL in a clean and “friendly” manner, as well as then how to read the parameters.

Official Link


Advantage and Disadvantages of CSS Frameworks

You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone.

Official Link

A Closer Look At the Blueprint CSS Framework

css framework

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.

Official Link

BlueprintCSS 101

When one builds out many designs with HTML and CSS, one finds that there are a handful of the same of problems you solve each and every time. Among them: Resetting browser defaults to create a blank slate. Setting up layout and baseline grids for your design to adhere to. Creating sane defaults for type sizes, alignment, and spacing. And more. Wouldn’t it be handy to have this stuff taken care of ahead of time, so you can get to the really fun stuff designers love?

Official Link

Prototyping With The Grid 960 CSS Framework


Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

Official Link

A Detailed Look at the 960 CSS Framework

If you’ve ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. My guess is that the majority of these comments are stemmed from slight ignorance. Once you take the opportunity to spend some time with 960, you’ll be amazed at how much time can potentially be saved when developing your web applications. At the very least, take ten minutes to review the framework. You can always press the delete key…though I doubt you will!

Official Link

Top Articles and Tutorials on PSD TO XHTML

From PSD to HTML, Building a Set of Website Designs Step by Step

Creating a CSS layout from scratch

Design a Beautiful Website From Scratch

psd to xhtml tutorial

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

Design and Code Your First Website in Easy to Understand Steps

psd to xhtml tutorial
In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It’s a brand new week; maybe it’s time to learn a new skill!

psd to xhtml tutorial

In this tutorial, we’re going to be designing and coding a simple blog-style web-page. We’ll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

How to Convert a PSD to XHTML

psd to xhtml tutorial

screencast about psd to xhtml by Jeffrey Way, shows you exactly how to convert a PSD into perfect XHTML/CSS.

Build a Sleek Portfolio Site from Scratch

psd to xhtml tutorial

Multi level vertical list menu

in this post i want to show how i built multilevel vertical menu, first i tried to find solution but i could’t find so i started building my own above is result what i built.

css xhtml for the multilevel vertical menu

and here is css that will convert above xhtml to multilevel vertical menu
#verticalSubmenu ul
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;

#verticalSubmenu li {
margin: 0 0 3px 0;

#verticalSubmenu li a
display: block;
padding: 5px 2px 2px 10px;
width: 138px;
border: 1px solid #f7f7f7;
#verticalSubmenu ul ul{
#verticalSubmenu ul ul li a{
display: block;
padding: 4px 2px 2px 10px;
width: 138px;
#verticalSubmenu ul ul ul{
#verticalSubmenu ul ul ul li a{
display: block;
padding: 4px 2px 2px 20px;
width: 128px;

IE6 Transparency

24 ways

Transparent PNGs in Internet Explorer 6

A List A Part

transparent image not working in ie6


jquery plugin for image transparency in IE6