Program: Adobe Photoshop CS5
Difficulty: Advanced
Estimated Completion Time: 4 Hours

View this article here

Ultimate Web 2.0 Gradients – FREE Download

Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient – As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff… I hope v2.0 was helpful a lot. Now this current version includes almost all the possible gradients… Feel free to use these cool set of gradients anywhere but please don’t forget to share this too…

• UPDATE 03 May 2007 : v3 Release with around 130 Web 2.0 Gradients.
• UPDATE 16 Apr 2007 : v2 Release with some more gradients. Click on the image below to download.

Above is how you should be importing the .GRD file into Photoshop.

View and Download the file here

Ultimate Web 2.0 Layer Styles

Photoshop Layer Styles are the easiest way to speed up the design process. I found that my previous article – Ultimate Web 2.0 Gradients v3.0 was a lot helpful to many.

Coming to the Layer Styles, I found a lot of styles on the Web to download but none of them were of the today’s trend of Web 2.0. So here is a set of 131 Photoshop Layer Styles I created in .ASL ( Photoshop Layer Style ) format.

As explained in the below image, I feel this set of Layer Styles could be the fastest way to create Web Elements like Buttons, headers, Content Backgrounds and a lot other stuff…

Installation:

View and Download the file here

1. Latest version of Joomla!.
2. All files from your own Joomla! site that you wan to package.
3. mysql database dump of your site.
4. Compression tool e.g Winrar, winzip, stuffit

Procedure:
Step 1
Create an empty folder and name it to whatever you like e.g ‘Joomla quickstart package’.

Step 2
Copy all the files from your own Joomla! site that you want to package. You can use a ftp agent to download your package. I would suggest to use filezilla, because there’s over 10,000 files. You will definitely need to know if all the file came through.

Step 3
Delete the configuration.php file

Step 4
Unzip the Original Joomla! quickstart package where you can obtain here.

Step 5
Copy the installation directory from the Joomla! quickstart package that you had just unzip.

Step 6
Get the mysql dump of your database and rename the file to ‘sample_data.sql’. If you only want data, you will do a data dump. But if you have extra components, modules, and plugins. You will want to export along with data structure.
a) Select your joomla tables

b) Click on the Export tabs on the top

c) Click on the Custom radio button. Make sure you had “Select All” table, click on the structure and data radio button, and be sure to Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT statement.

d) Find and replace your database prefix to #__. gjdok_ should be your own prefix.
Find gjdok_
Replace with #__

Step 7
Open the sql file you had just export. Now do a search for where you look for
`gjdok_users` replace the gjdok_ to your own prefix
You will now see the following code.

INSERT INTO `gjdok_users` (`id`, `name`, `username`, `email`, `password`, `usertype`, `block`, `sendEmail`, `registerDate`, `lastvisitDate`, `activation`, `params`) VALUES
(42, 'Super User', 'admin', your@email.com', '', 'deprecated', 0, 1, '2012-02-08 06:19:17', '2012-05-08 03:08:58', '', '{}');

If the quickstart package are for development use, where you share this to others. You will need to delete the following like below.

Step 8
Open up your own ‘Joomla quickstart package’ and go inside your installation folder
installation > sql > mysql > sample_data.sql
Replace the sample_data.sql with the one you had just export.

Step 9
Compress (zip) the folder ‘Joomla quickstart package’ Compression tool e.g Winrar, winzip, stuffit

Now, this is all you need to do, to package a Joomla! 2.5 QuickStart Package.
Joomla! 2.5 QuickStart Package Tutorial DONE.

When you started your Joomla 2.5 package, if you start your package with empty content while you install.
You may run into this situation. You are not able to create new menu item.

When you try to save your menu item, you will get this message.

Save failed with the following error: MenusTableMenu: :_getNode Failed –

The Problem: The issue is that in the menu table the record with id = 1 is missing and not migrated over. This record is important to the creation of new menu items.

The Solution: Add the record back into the database.

For example:

• My database name = MyJoomlaDatabase
• My prefix is = mjd17_

Follow the steps below to fix this Joomla error message:

1. Login to your webhosting control panel.
2. Click on the phpMyAdmin, login to your database
3. Click on the SQL tab
4. Copy the query below and paste it in the textbox. REPLACE the database name and prefix in italics with your own.
5. 5. Click on the ‘GO’ button.

INSERT INTO `DATABASE_NAME`.`c7gzy_menu` (`id` ,`menutype` ,`title` ,`alias` ,`note` ,`path` ,`link` ,`type` ,`published` ,`parent_id` ,`level` ,`component_id` ,`ordering` ,`checked_out` ,`checked_out_time` ,`browserNav` ,`access` ,`img` ,`template_style_id` ,`params` ,`lft` ,`rgt` ,`home` ,`language` ,`client_id` ) VALUES ( '1', '', 'Menu_Item_Root', 'root', '', '', '', '', '1', '0', '0', '0', '0', '0', '0000-00-00 00:00:00', '0', '0', '', '0', '', '0', '0', '0', '*', '0')

Easiest way to centering a div using pure CSS

The trick to center the div is to shift the outer and inner div, with the use of position:relative and display:block. Shift the outer block 50% left relative, and then next is to move the inner block back to -50% left. Hope this make sense. This code will work on all browser.

DEMO

<body class="ds">
    <div class="wrapper">
        <div class="outer">
            <div class="inner">Centering the DIV</div>
        </div>
    </div>
</body>

.ds {
    margin:0;
    padding:0;
}
div.wrapper{
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    background:#00F;
    padding:10px;
    margin:0 -20px;
}
div.outer{
    clear: left;
    float: left;
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}
div.inner{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    color:#FFF;
    padding:5px 20px;
    background:#900;
    border:1px dotted #cccccc;
}

Aller

Download Here

Sansation

Download Here

Droid Sans

Download Here

District Thin

Download Here

Bebas Neue

Download Here

Museo Sans

Download Here

Calluna

Download Here

ChunkFive

Download Here

Ballpark

Download Here

Museo Slab

Download Here

CodeBold

Download Here

CodeLight

Download Here

Edelsans

Download Here

Evolution

Download Here

Giro

Download Here

Kilogram

Download Here

League Gothic

Download Here

Miso

Download Here

Nevis

Download Here

QuickSand

Download Here

Vegur

Download Here

Designing for the Web: Resolution and Size

To design a proper website, first you will need to know the resolution and size you are heading toward. Here are some article to stronger your knowing.

Designing for the Web: Resolution and Size by Felix Mak

Best Screen Resolution to Design Websites

Optimal Screen Resolution for Web Design (2010 Update) by Mark Thompson in Design/Development

Designing for the Web by Joshua David McClurg-Genevese

Screen Resolution And Page Design by Larisa Thomason

This is some amazing design, love this poly project by feeldesain.
To see more of this amazing art, you can view the original post by clicking here.
Original Post by feeldesain

Freedcamp

This is absolutely awesome! Compare to other project management tools out there Freedcamp is one of the easiest one ever, and with https enable all the way I am 100% happy with the security they had offered.

Freedcamp offers an extremely easy, yet fully customizable user permission system. Choose what your co-workers and clients can see, or create a custom group to manage permissions. Each application can be separately managed allowing you to track each and every user role.

Receive instant notifications of everything happening within Freedcamp. Reply to email notifications directly from your inbox. Receive SMS alerts about newly created items or modifications to existing ones. With the ability to customize the level of notifications, you will receive just the right amount of information.
Freedcamp