If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx (modxcms.com). 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
<li[+wf.classes+]>[+menuImage+]
[+wf.wrapper+]
</li>

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

TreasureChest is an easy to use eCommerce system for MODx CMS/F. It is a 100% MODx native shopping cart, product manager, inventory manager, shipping assistant, and sales tracking solution which uses PayPal Website Payments Standard for payment processing. Further Reading here Treasurechest

Step 1 Download Treasurechest

Please download TC using below link also read the installation guide its simple after download unzip and upload to your root directory of modx installation.

Download at TC site Download at MODX

Step 2 Install Treasurechest

Open your web browser and navigate to your MODx website url /install/ (e.g. http://www.yoursite.url/install/) and enter your MODx Manager credentials to authenticate and authorize the installation. Agree to the license then click the “Install” button. After installation is complete, log into the MODx Manager, you will see module treasurechest added.

Step 3 Create Cart Document

Create new resource (new page or document) name it cart or any name you like and follow the settings below i also set the paramater cart_template for cart layout chunk when you will click later on view cart you will see this chunk in action.

uncheck the searchable from the setting of resource or page, remember the id of the card or newly created resource it will be used in configuration of treasurechest in next step.

Step 4 Configure TreasureChest

To configure TC click on modules than on treasurechest you will see product manager and sales manager icons click on product manager on this page you will see list of products and paypal email configuration on top right corner find the Edit Configuration button and click on it. change the cart id field with your newly (cart) document id and save that’s it your cart is setup

Step 5 Create chunk for Cart

Remember i used the cart_template paramater in cart document snippet call in Step 3 now its time to create that chunk[!TreasureChest? &service=`cart` &cart_template=`tcCartItem`!]
Create new chunk name it tcCartItem and paste below code in chunk code field.
<tr id="cart_item_[+cart.id+]" class="cart_item[+cart.alt+]">
<td class="cart_item_name[+cart.alt+]">
[+cart.item_name+]
</td>
<td class="cart_item_quantity[+cart.alt+]">
<input type="text" name="[+cart.id+]"
value="[+cart.quantity+]" size="3" maxlength="3" />
</td>
<td class="cart_item_amount[+cart.alt+]">
$[+cart.amount+] ea.
</td>
<td class="cart_item_remove[+cart.alt+]">
Remove
</td>
</tr>
<tr>
<td colspan="2">
[+cart.option_name_0+] [+cart.option_value_0+]
</td>
<td colspan="2">
[+cart.option_name_1+] [+cart.option_value_1+]
</td>
</tr>

Step 6 Create a product page

Create new resourse name it product_name fill the longtitle and summary field with some dummy data and paste below code in resource content field.
[!TreasureChest?&item=`1`!]
<div>
<div class="heading_maroon">Product Details</div>
<br />
<p>[+introtext+]</p>
<div>[+treasure.image.thumb.thickbox+]</div>
<div>Item Name:&nbsp;[+treasure.item_name+]</div>
<div>Price:&nbsp;$[+treasure.amount+]</div>
<div>Shipping Cost:&nbsp;$[+treasure.shipping+]</div>
<div id="product_view">
[+treasure.add+]
</div>
</div>

Thant’s all your treasurechestcart is ready to go live

Got chance to work on modx treasurechest cart integration Thanks to scotty who built this usefull package but as read on modx forum so many people having trouble to integrate and customizing the TC mostly asking how they can change the view cart and empty cart buttons of TC (TreasureChest ) answer is they need unpacked treasurechest.js

on line 2188 replace this ‘ + cart_view + ‘ to your image path and replace this ‘ + cart_empty + ‘ for cart empty image path, That’s it

Download Here

Working With a Content Management Framework: MODx

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx (modxcms.com). 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 My619.com 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

Note: Download link at bottom

Download Twitter Birdies

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

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

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

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

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!

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

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

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

<div id="verticalSubmenu">
<ul id="navlist">
<li>Item first</li>
<li>Item one
<ul>
<li> Third Level
<ul>
<li> Third Level</li>
</ul>
</li>
<li> Third Level</li>
</ul>

</li>
<li>
Item five
<ul>
<li> Third Level</li>
<li> Third Level</li>
</ul>
</li>
<li>Item six</li>
</ul>
</div>

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;
text-transform:uppercase;
}

#verticalSubmenu li a
{
display: block;
padding: 5px 2px 2px 10px;
width: 138px;
height:16px;
border: 1px solid #f7f7f7;
background:#6c6b6b;
color:#fcfafa;
text-decoration:none;
}
#verticalSubmenu ul ul{
margin-top:2px;
position:relative;
}
#verticalSubmenu ul ul li a{
display: block;
padding: 4px 2px 2px 10px;
width: 138px;
color:#6e6e6e;
background:#dedede;
}
#verticalSubmenu ul ul ul{
margin-top:10px;
position:relative;
}
#verticalSubmenu ul ul ul li a{
display: block;
padding: 4px 2px 2px 20px;
width: 128px;
background:#f9f9f9;
color:#6e6e6e;
}

24 ways

A List A Part

jquery.pngFix.js

One of the greatest strengths of PHP is its ease of use. Unfortunately this same benifit has worked against PHP as many new coders have forgotten any security measures or lack the expertise to create a class to validate their variables from end users. PHP provides an extension to help with this process. There are many validation classes out there, some better than others, with an equal number of methods for doing the same task. The PHP filter extension has many of the functions needed for checking many types of user input. Handled locally this provides a standard method of filtering data. This makes for easier to read code as we will all be using the same functions rather than having to create our own. This will bring PHP security to fore with programmers able to easily implement simple, yet robust, filtering of data. Never again do we need to see code like this below.
Continue Reading