Design Gala

10 Free WordPress Theme To Make You Forget About Premium Theme

Anwar Hussain — Wed, 02 May 2012 02:01:12 +0000

High quality and good looking theme is backbone for the any website, specially the blogger never wants to design or to have their website with poor and misleading theme. The theme of your website describe how much you are creative and what is the propose of your website. When it comes for choosing the best theme that matches your website, must bloggers move to the premium themes. However, some of bloggers still want to go for free theme first to try.

It will be quite difficult to find high quality and very professional free wordpress theme for your blog or website. However with thousands of free wordpress theme, you will able to find the best suitable theme for your website. Here we have compiled 10 out of thousand wordpress theme with amazing design and functionality. I hope our readers will find the wordpress theme of their of choice from the list.

Red Captik - More Info | Demo | Download
iPhone Denati - More Info | Demo | Download
Boxified - More Info | Demo | Download
Design - More Info | Demo | Download
Video - More Info | Demo | Download
Placeholder - More Info | Demo | Download (Register at theme info page to download)
JournalCrunch - More Info | Demo | Download
Paragrams - More Info | Demo | Download
ZoroSan - More Info | Demo | Download
Causal - More Info | Demo | Download

3 Helpful Tools to Test Cross Browser Compatibility of Webpage

Rabi Shrestha — Fri, 02 Mar 2012 13:21:26 +0000

Apart from teaching at KCC, I sometimes do crossbrowing testing to help my team at 76miles tech. And I must admit that its the most tedious task to view web pages in different browsers under different platforms. Below are my list of 3 helpful tools to test crossbrowser compatibility of page.

1. BrowserShots

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.

2. IETester

I have found testing under IE is lot of headache. Fortunately, IETester, a free WebBrowser allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

3. NetRenderer

This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.

Whats your favorite tools? Please share.

Top 5 Plugins to Build Contact Form for WordPress

Anish Lama — Fri, 02 Mar 2012 12:04:52 +0000

Each site needs a contact form, or a form to communicate with site owner and the user of site. Being WordPress developer, I’ve been like an ostrich while using contact forms for the client’s projects. In early days of my career, I always used CformsII, and then I started using Contact Form 7. Now, it has been shifted to Gravity Forms (Premium). Its own preferences and each of them have their own pros and cons. Here are list of top 5 contact form plugins to use.

CformsII

CformsIICFormsII is a contact form that has an incredible amount of features and is very customizable. CFromsII offers lots of features. And some of the unique and notable features are “tell a friend” functionality, database tracking of submitted data, backup & restore, submission limitations (for registration etc) and widget support.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Fast Secure Contact Form

Fast Secure Contact Form lets site visitors send a quick E-mail message. It claims to blocks all common spammer tactics. Includes a CAPTCHA and Akismet support. Additionally, the plugin has a multi-form feature, optional extra fields, and an option to redirect visitors to any URL after the message is sent. Very much customizable.

Contact Me

The quickest and easiest way to put a contact form on your WordPress blog. Use the ContactMe button and contact form to turn visitors into customers. Visitors click eye-catching ContactMe button. The button opens a contact form in popup.

Tiny Contact Form

Tiny Contact Form is minimalist form that allows site visitors to contact you by email.

Did I missed any best ones? Please share which ones are your bests.

CSS 3 Transitions

manish — Sat, 11 Jun 2011 02:38:19 +0000

Its been sometime since CSS3 has been introduced, bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions to add an extra layer of polish.

Let’s create a simple example of animating a pop out sign.

First Create a Div with images

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Create the bounding box for the signpost, and give it a relative positioning context to ensure that we can position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now we place sign underneath the Post and rotate it with our CSS3 transform property

#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
 
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
         -moz-transform:rotate(0deg); }

Reference: http://net.tutsplus.com

Web Development Tools Work On Mac

S@R0Z — Fri, 18 Mar 2011 05:47:44 +0000

Mac OS X, well know for their simplicity and performance.

If you’re a web developer using a Mac you may have used many applications. Finding the best Apps for Freelance Web Designers is one challenging task. So in this post I have listed best Mac Apps designed for code editing, file and data transfer, database management, image editing etc. Some of them are free and most of them are relatively inexpensive.

1.VirtualHostX – VirtualHostX is the best way to host multiple websites on your Mac. It lets you easily create Apache virtual hosts on Mac OS X.

2. MAMP – MAMP is a quick and painless way to set up Macintosh, Apache, MySQL and PHP in the same environment. Instantly you’ve got a fully-functional web testing environment for your PHP applications.

3. phpMyAdmin – phpMyAdmin is the kindly old grandfather of database management scripts. Not necessarily hip to an attractive user interface, phpMyAdmin still has the skills to pay the bills.

4. Yummy FTP – Yummy FTP is an FTP and SFTP client application for the Apple Macintosh, built as native Mac OS X software from the ground up, with the goal of providing a reliable, powerful, yet easy to use file transfer utility.

5. Transmit - It offers almost all of the same functionality as Cyberduck, but adds a little more robustness for advanced user. For example, you can edit any remote file (even a picture or graphic) in any software using Transmit.

6. Coda – It is a complete web development solutions that fulfills all your coding needs, you will love to use its code editor that has support for various programming languages like HTML, XHTML, CSS, PHP, ASP, Ruby, Java and XML etc.

7. CSSEdit - cssedit is a CSS editor with a fantastic user interface. It has the look and feel of a Mac application, which makes the experience of editing CSS much more enjoyable.

8. Changes – Changes is a nifty application that lets you visually browse changes to your code base. Instead of having to use a subversion to manage your code base (though Changes works with svn and other repository software), you can use Changes.

9. TextExpander - TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings, code snippets and images.

10. TextMate - A popular text-editing tool for Apple Mac OS. It offers number of useful features, like search and replaces text, clipboard history, file tabs when working with projects.

Rotating DIV block using jQuery

Design Gala — Sat, 05 Feb 2011 08:02:36 +0000

I have taken this article from csstricks.com and is written by By Chris Coyier . Sometimes we need to give an interactive look to a webpage and this could be one of the good option for that. If you have a simple idea about the html,CSS and jquery ,then you can use this features in your webpage.

To use the rotating div block in your webpage you have to follow three steps

1. HTML Section
2. CSS Section
3. jQuery Section

Click here to download the demo file.

Five Cool jQuery Plugins for Displaying Images

Design Gala — Mon, 24 Jan 2011 08:00:46 +0000

Write less , do more. the slogan of the jquery proves its significance. According to jquery.com .”jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” I am always fascinated by the jquery plugins.In this article , i have compiled some jquery plugins which i have used in my projects and hope it will be useful to other’s too.The jquery plugins, here i am discussing are specially focused for handling the images.

1.Slick Auto-Playing Featured Content Slider