View the demo to see this effect.

Demo

The HTML

First were going to start off with the HTML for the navigation boxes. This consists of a wrapper div element with the boxes inside. Each of the boxes will have text for the page and an image icon to represent the page.

<div class="nav">
<div class="box home">
	<a href="#home">HOME
	<span><img src="./images/home.png" alt="" /></span></a>
     </div>
<div class="box about">
	<a href="#about">ABOUT
	<span><img src="./images/person.png" alt="" /></span></a>
      </div>
<div class="box portfolio">
	<a href="#portfolio">PORTFOLIO
	<span><img src="./images/folder.png" alt="" /></span></a>
      </div>
<div class="box services">
	<a href="#services">SERVICES
	<span><img src="./images/screw-driver.png" alt="" /></span></a>
     </div>
<div class="box contact">
	<a href="#contact">CONTACT
	<span><img src="./images/mail-back.png" alt="" /></span></a>
     </div>
</div>

Styling The Boxes

The CSS will provide all the functionality for the navigation bar. We start off by styling each of the individual boxes, we set the height and width of the boxes to what ever we want to fill the screen. Add a display: inline-block so that the box will display next to each other instead of on top of each other.

As we are going to animate in an icon we want to make sure that we hide anything that overflows this element by using the overflow:hidden property.

Then we can add the transition for the width of the box so that on the hover event we can change the width of the boxes.

.box
{
	display: inline-block;
        float:left;
	height:200px;
	overflow: hidden;
	width:20%;
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
        transition: width 1s;
}

Now we can style the background colours of the different boxes.

.box.home      { background-color: #2d89ef; }
.box.about     { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services  { background-color: #9f00a7; }
.box.contact   { background-color: #ee1111; }

As we want the entire box area to be clickable we have to change the anchor link into a block element by using the display: block property and making the height of the link 100% of the box. This will make the entire box area a clickable link.

.box a
{
	color:#FFF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	height:100%;
	display:block;
        padding-top: 20px;
}

We want to make an icon animate into the box when you hover over the box, this will use CSS transitions to change the top property of a span tag, inside the tag will be an image we can use for the icon. At the start we need to move this image outside of the element, which will make it hidden by using the overflow: hidden property on the box element. Then we can use the position: relative property with top of 100% to move the span outside of the element.

Adding a transition on to the top property will animate the icon into the box when you hover over.

.box span
{
    display:block;
    position:relative;
    top:100%;
    text-align: center;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}

The Hover Event

Creating the hover event for the navigation, when a user moves the mouse over the box 3 things will happen.

• First all the boxes are going to shrink to 10% width.
• The box that we are hovering over will be expanded to be 60% width.
• Then the box we are hovering over has a span tag inside, this will then change the top property back to 25% bringing the element back into view.

.nav:hover .box { width:10%; }
.nav .box:hover { width: 60%; }
.box:hover span{ top:25%; }

Demo

This article was originally published on Create An Animated CSS Box Menu. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

Some of the WordPress plugins can be essential to the working of your website, things like the Akismet plugin, Yoast SEO WordPress plugin or even a commenting system like Disqus. You would never want your users to deactivate any of these plugins as they are essential to the workings of your website.

Here is a WordPress snippet that will allow you to install the plugin and once it is activated it will be removed from the plugin screen so it can not be deactivated. The plugin will still be active and can be used as normal but it means that users can not deactivate these plugins.

You can add the following into the theme functions.php file or create a new plugin to handle hiding the WordPress plugins.

<?php
add_filter( 'all_plugins', 'hide_plugins');
function hide_plugins($plugins)
{
	// Hide hello dolly plugin
	if(is_plugin_active('hello.php')) {
		unset( $plugins['hello.php'] );
	}
	// Hide disqus plugin
	if(is_plugin_active('disqus-comment-system/disqus.php')) {
		unset( $plugins['disqus-comment-system/disqus.php'] );
	}
	return $plugins;
}

This article was originally published on Remove Plugins From Plugin Screen. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

One option is to just set the width and height attributes on the image tag in your HTML, this will force the image to be displayed at this size.

<img src="image.png" height="100" width="100" alt="Example of resizing an image" />

This will work perfectly fine and the image will fit in the 100px x 100px space but the problem is that when the browser loads the image it will not resize the image but will just display it in the limited size. This means that the image will still need to be downloaded at full size, if the image is very large it can take some time for you to download a large image just to be displayed in a small space.

A better solution would be to resize the image to 100px x 100px which will reduce it's size so that the browser doesn't need to download a large image just to display it in a small space.

In this tutorial we are going to create a PHP class that will allow you to resize an image to any dimension you want, it will allow you to resize while keeping the aspect ratio of the image. When the class has resized the image you can either save the image on the server or download the image.

Class Methods

First lets plan out the class we are going to create:

• We need to pass an existing image to the class, this is the image that we will use to resize.
• We need to pass in the desired image dimensions so the class can work out what's the new size of the image.
• Then we need to be able to save the image to a location on the server, and choose to download the image.

<?php
/**
 * Resize image class will allow you to resize an image
 *
 * Can resize to exact size
 * Max width size while keep aspect ratio
 * Max height size while keep aspect ratio
 * Automatic while keep aspect ratio
 */
class ResizeImage
{
	/**
	 * Class constructor requires to send through the image filename
	 *
	 * @param string $filename - Filename of the image you want to resize
	 */
	public function __construct( $filename )
	{
	}
	/**
	 * Set the image variable by using image create
	 *
	 * @param string $filename - The image filename
	 */
	private function setImage( $filename )
	{
	}
	/**
	 * Save the image as the image type the original image was
	 *
	 * @param  String[type] $savePath     - The path to store the new image
	 * @param  string $imageQuality 	  - The qulaity level of image to create
	 *
	 * @return Saves the image
	 */
	public function saveImage($savePath, $imageQuality="100", $download = false)
	{
	}
	/**
	 * Resize the image to these set dimensions
	 *
	 * @param  int $width        	- Max width of the image
	 * @param  int $height       	- Max height of the image
	 * @param  string $resizeOption - Scale option for the image
	 *
	 * @return Save new image
	 */
	public function resizeTo( $width, $height, $resizeOption = 'default' )
	{
	}
}
?>

The Constructor

This class relies on an original image being found and set on the class, without this the class will not work correctly. Because of this we should pass the image filename into the constructor of the class. This will then check if the file exists on the server, if it does then we can call the set image method where we can get the image and create a resource of the image and store this in a class variable.

/**
	 * Class constructor requires to send through the image filename
	 *
	 * @param string $filename - Filename of the image you want to resize
	 */
	public function __construct( $filename )
	{
		if(file_exists($filename))
		{
			$this->setImage( $filename );
		} else {
			throw new Exception('Image ' . $filename . ' can not be found, try another image.');
		}
	}

Set The Image

The set image method is used to create a image resource based on the image given to the class this uses the PHP functions imagecreatefromjpeg, imagecreatefromgif, imagecreatefrompng to create the image resource from the given image. We can then use this with the functions imagesx and imagesy to return the current width and height of the image.

This will allow us to resize the image easier later in the script.

/**
	 * Set the image variable by using image create
	 *
	 * @param string $filename - The image filename
	 */
	private function setImage( $filename )
	{
		$size = getimagesize($filename);
		$this->ext = $size['mime'];
	    switch($this->ext)
	    {
	    	// Image is a JPG
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// create a jpeg extension
	            $this->image = imagecreatefromjpeg($filename);
	            break;
	        // Image is a GIF
	        case 'image/gif':
	            $this->image = @imagecreatefromgif($filename);
	            break;
	        // Image is a PNG
	        case 'image/png':
	            $this->image = @imagecreatefrompng($filename);
	            break;
	        // Mime type not found
	        default:
	            throw new Exception("File is not an image, please use another file type.", 1);
	    }
	    $this->origWidth = imagesx($this->image);
	    $this->origHeight = imagesy($this->image);
	}

Resize The Image

The resize function is what we will use to calculate the new values for the image width and height. This takes 3 parameters the new width, new height and the resize option, this will allow us to resize the image to exact dimensions, use the defined width with the height and keep aspect ratio, use the define height keeping the aspect ratio or let the class decide the best way of resizing the image.

Once we have the new width and height of the image we can create a new image resource by using the PHP function imagecreatetruecolor(). Now we can create the new image from the old image resizing it to the new dimensions by using the imagecopyresampled() function.

/**
	 * Resize the image to these set dimensions
	 *
	 * @param  int $width        	- Max width of the image
	 * @param  int $height       	- Max height of the image
	 * @param  string $resizeOption - Scale option for the image
	 *
	 * @return Save new image
	 */
	public function resizeTo( $width, $height, $resizeOption = 'default' )
	{
		switch(strtolower($resizeOption))
		{
			case 'exact':
				$this->resizeWidth = $width;
				$this->resizeHeight = $height;
			break;
			case 'maxwidth':
				$this->resizeWidth  = $width;
				$this->resizeHeight = $this->resizeHeightByWidth($width);
			break;
			case 'maxheight':
				$this->resizeWidth  = $this->resizeWidthByHeight($height);
				$this->resizeHeight = $height;
			break;
			default:
				if($this->origWidth > $width || $this->origHeight > $height)
				{
					if ( $this->origWidth > $this->origHeight ) {
				    	 $this->resizeHeight = $this->resizeHeightByWidth($width);
			  			 $this->resizeWidth  = $width;
					} else if( $this->origWidth < $this->origHeight ) {
						$this->resizeWidth  = $this->resizeWidthByHeight($height);
						$this->resizeHeight = $height;
					}
				} else {
		            $this->resizeWidth = $width;
		            $this->resizeHeight = $height;
		        }
			break;
		}
		$this->newImage = imagecreatetruecolor($this->resizeWidth, $this->resizeHeight);
    	        imagecopyresampled($this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight);
	}
	/**
	 * Get the resized height from the width keeping the aspect ratio
	 *
	 * @param  int $width - Max image width
	 *
	 * @return Height keeping aspect ratio
	 */
	private function resizeHeightByWidth($width)
	{
		return floor(($this->origHeight / $this->origWidth) * $width);
	}
	/**
	 * Get the resized width from the height keeping the aspect ratio
	 *
	 * @param  int $height - Max image height
	 *
	 * @return Width keeping aspect ratio
	 */
	private function resizeWidthByHeight($height)
	{
		return floor(($this->origWidth / $this->origHeight) * $height);
	}

Save The Image

With the new image now set in a class variable we can now use this to save the image on the server. This function will take 3 parameters the save path, the image quality and if we want to download the image.

For each mime type PHP has a function imagejpeg(), imagegif(), imagepng() that will allow you to save the image by passing in the new image resource and the path the image is going to be saved.

Once this image is saved on the server and we decided to download it we can change the headers to allow the browser to download the image on the clients machine.

/**
	 * Save the image as the image type the original image was
	 *
	 * @param  String[type] $savePath     - The path to store the new image
	 * @param  string $imageQuality 	  - The qulaity level of image to create
	 *
	 * @return Saves the image
	 */
	public function saveImage($savePath, $imageQuality="100", $download = false)
	{
	    switch($this->ext)
	    {
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_JPG) {
	                imagejpeg($this->newImage, $savePath, $imageQuality);
	            }
	            break;
	        case 'image/gif':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_GIF) {
	                imagegif($this->newImage, $savePath);
	            }
	            break;
	        case 'image/png':
	            $invertScaleQuality = 9 - round(($imageQuality/100) * 9);
	            // Check PHP supports this file type
	            if (imagetypes() & IMG_PNG) {
	                imagepng($this->newImage, $savePath, $invertScaleQuality);
	            }
	            break;
	    }
	    if($download)
	    {
	    	header('Content-Description: File Transfer');
		header("Content-type: application/octet-stream");
		header("Content-disposition: attachment; filename= ".$savePath."");
		readfile($savePath);
	    }
	    imagedestroy($this->newImage);
	}

Full Resize Image Class

<?php
/**
 * Resize image class will allow you to resize an image
 *
 * Can resize to exact size
 * Max width size while keep aspect ratio
 * Max height size while keep aspect ratio
 * Automatic while keep aspect ratio
 */
class ResizeImage
{
	private $ext;
	private $image;
	private $newImage;
	private $origWidth;
	private $origHeight;
	private $resizeWidth;
	private $resizeHeight;
	/**
	 * Class constructor requires to send through the image filename
	 *
	 * @param string $filename - Filename of the image you want to resize
	 */
	public function __construct( $filename )
	{
		if(file_exists($filename))
		{
			$this->setImage( $filename );
		} else {
			throw new Exception('Image ' . $filename . ' can not be found, try another image.');
		}
	}
	/**
	 * Set the image variable by using image create
	 *
	 * @param string $filename - The image filename
	 */
	private function setImage( $filename )
	{
		$size = getimagesize($filename);
		$this->ext = $size['mime'];
		switch($this->ext)
	    {
	    	// Image is a JPG
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// create a jpeg extension
	            $this->image = imagecreatefromjpeg($filename);
	            break;
	        // Image is a GIF
	        case 'image/gif':
	            $this->image = @imagecreatefromgif($filename);
	            break;
	        // Image is a PNG
	        case 'image/png':
	            $this->image = @imagecreatefrompng($filename);
	            break;
	        // Mime type not found
	        default:
	            throw new Exception("File is not an image, please use another file type.", 1);
	    }
	    $this->origWidth = imagesx($this->image);
	    $this->origHeight = imagesy($this->image);
	}
	/**
	 * Save the image as the image type the original image was
	 *
	 * @param  String[type] $savePath     - The path to store the new image
	 * @param  string $imageQuality 	  - The qulaity level of image to create
	 *
	 * @return Saves the image
	 */
	public function saveImage($savePath, $imageQuality="100", $download = false)
	{
	    switch($this->ext)
	    {
	        case 'image/jpg':
	        case 'image/jpeg':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_JPG) {
	                imagejpeg($this->newImage, $savePath, $imageQuality);
	            }
	            break;
	        case 'image/gif':
	        	// Check PHP supports this file type
	            if (imagetypes() & IMG_GIF) {
	                imagegif($this->newImage, $savePath);
	            }
	            break;
	        case 'image/png':
	            $invertScaleQuality = 9 - round(($imageQuality/100) * 9);
	            // Check PHP supports this file type
	            if (imagetypes() & IMG_PNG) {
	                imagepng($this->newImage, $savePath, $invertScaleQuality);
	            }
	            break;
	    }
	    if($download)
	    {
	    	header('Content-Description: File Transfer');
			header("Content-type: application/octet-stream");
			header("Content-disposition: attachment; filename= ".$savePath."");
			readfile($savePath);
	    }
	    imagedestroy($this->newImage);
	}
	/**
	 * Resize the image to these set dimensions
	 *
	 * @param  int $width        	- Max width of the image
	 * @param  int $height       	- Max height of the image
	 * @param  string $resizeOption - Scale option for the image
	 *
	 * @return Save new image
	 */
	public function resizeTo( $width, $height, $resizeOption = 'default' )
	{
		switch(strtolower($resizeOption))
		{
			case 'exact':
				$this->resizeWidth = $width;
				$this->resizeHeight = $height;
			break;
			case 'maxwidth':
				$this->resizeWidth  = $width;
				$this->resizeHeight = $this->resizeHeightByWidth($width);
			break;
			case 'maxheight':
				$this->resizeWidth  = $this->resizeWidthByHeight($height);
				$this->resizeHeight = $height;
			break;
			default:
				if($this->origWidth > $width || $this->origHeight > $height)
				{
					if ( $this->origWidth > $this->origHeight ) {
				    	 $this->resizeHeight = $this->resizeHeightByWidth($width);
			  			 $this->resizeWidth  = $width;
					} else if( $this->origWidth < $this->origHeight ) {
						$this->resizeWidth  = $this->resizeWidthByHeight($height);
						$this->resizeHeight = $height;
					}
				} else {
		            $this->resizeWidth = $width;
		            $this->resizeHeight = $height;
		        }
			break;
		}
		$this->newImage = imagecreatetruecolor($this->resizeWidth, $this->resizeHeight);
    	imagecopyresampled($this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight);
	}
	/**
	 * Get the resized height from the width keeping the aspect ratio
	 *
	 * @param  int $width - Max image width
	 *
	 * @return Height keeping aspect ratio
	 */
	private function resizeHeightByWidth($width)
	{
		return floor(($this->origHeight/$this->origWidth)*$width);
	}
	/**
	 * Get the resized width from the height keeping the aspect ratio
	 *
	 * @param  int $height - Max image height
	 *
	 * @return Width keeping aspect ratio
	 */
	private function resizeWidthByHeight($height)
	{
		return floor(($this->origWidth/$this->origHeight)*$height);
	}
}
?>

Using The Resize Image PHP Class

Because we have created this to allow you to resize the image in multiple ways it means that there are different ways of using the class.

• Resize the image to an exact size.
• Resize the image to a max width size keeping aspect ratio of the image.
• Resize the image to a max height size keeping aspect ratio of the image.
• Resize the image to a given width and height and allow the code to work out which way of resizing is best keeping the aspect ratio.
• You can save the created resize image on the server.
• You can download the created resize image on the server.

Resize Exact Size

To resize an image to an exact size you can use the following code. First pass in the image we want to resize in the class constructor, then define the width and height with the scale option of exact. The class will now have the create dimensions to create the new image, now call the function saveImage() and pass in the new file location to the new image.

$resize = new ResizeImage('images/Be-Original.jpg');
$resize->resizeTo(100, 100, 'exact');
$resize->saveImage('images/be-original-exact.jpg');

Resize Max Width Size

If you choose to set the image to be an exact size then when the image is resized it could lose it's aspect ratio, which means the image could look stretched. But if you know the max width that you want the image to be you can resize the image to a max width, this will keep the aspect ratio of the image.

$resize = new ResizeImage('images/Be-Original.jpg');
$resize->resizeTo(100, 100, 'maxWidth');
$resize->saveImage('images/be-original-maxWidth.jpg');

Resize Max Height Size

Just as you can select a max width for the image while keeping aspect ratio you can also select a max height while keeping aspect ratio.

$resize = new ResizeImage('images/Be-Original.jpg');
$resize->resizeTo(100, 100, 'maxHeight');
$resize->saveImage('images/be-original-maxHeight.jpg');

Resize Auto Size From Given Width And Height

You can also allow the code to work out the best way to resize the image, so if the image height is larger than the width then it will resize the image by using the height and keeping aspect ratio. If the image width is larger than the height then the image will be resized using the width and keeping the aspect ratio.

$resize = new ResizeImage('images/Be-Original.jpg');
$resize->resizeTo(100, 100);
$resize->saveImage('images/be-original-default.jpg');

Download The Resized Image

The default behaviour for this class is to save the image on the server, but you can easily change this to download by passing in a true parameter to the saveImage method.

$resize = new ResizeImage('images/Be-Original.jpg');
$resize->resizeTo(100, 100, 'exact');
$resize->saveImage('images/be-original-exact.jpg', "100", true);

This article was originally published on Resize Image Class With PHP. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

The main environments you will find in any website project are:

• Development Server - The developers local machine to development the website.
• Testing Server - Once development is finished this will be where all testing takes place.
• User Acceptance Testing Server - Where the client will review the changes to the website.
• Production Server - The live website.

The two environments you will always need to have is a development environment and a production environment. You will normally only have these two environments if the client doesn't need to view the site before it goes live. This means that once the developer has finished working on the site they can simply put this onto the production server. These are normally for the very basic of projects where the developer can simply test on their local development server before going live.

If you have a client that needs to review your development before the site goes live then you have a user acceptance testing server (UAT server), this environment should match the production server as close as possible. When the developer has finished testing locally then they can upload the site to the UAT server for the client to review. Once the user has accepted the changes made by the developer then the site can be moved to the production site.

For multiple developer projects there will be a need for you to have an additional testing server inbetween development and UAT. You need this server because as the developer is creating the website and checking in the code to source control they will only be testing on their own environment, over time this environment could become out of step with the other developers environments. Once the developer has checked in their code to source control they should then deploy this to the testing server. This is where all the developers will push their changes so it can be tested with all the other developer changes. Once this server is stable and has past testing then you can push these changes to the UAT server, where the client will review these changes and if accepted will be pushed to the production server.

Multi Environment With WordPress

If you have a WordPress project then you want to make it easy to switch between different environments, the easiest way is to allow you to upload everything to do with your project to the server. This will mean that all the changes you make will be uploaded not just the changes to your plugins or themes. But if you upload everything you will also upload the wp-config.php file, this file will tell WordPress how to connect to the underlining database.

The wp-config.php file is just a PHP file so you can change it to get the credentials for the database depending on what server it is being served from, simply by using the $_SERVER global variable to differ the environments.

The variables you need to change between environments are:

• DB_NAME - Name of the database
• DB_USER - User to connect to the database
• DB_PASSWORD - Password to conenct to the database
• DB_HOST - The host name of the database
• WP_HOME - The location of the WordPress Home URL
• WP_SITEURL - The location of the WordPress Site URL, most of the time for will be the same as WP_HOME depending on if WordPress is installed in a sub-directory.
• WP_DEBUG - To display an PHP errors or warnings.
• WP_CACHE - To cache the WordPress output.

<?php
if( stristr( $_SERVER['SERVER_NAME'], "dev" ) ) {
 	// Dev Environment
	define( 'DB_NAME', 'project_dev' );
	define( 'DB_USER', 'project_dev_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.dev');
	define( 'WP_SITEURL', WP_HOME);
	// Dev will always want debug on and caching off
	define( 'WP_DEBUG', true );
	define( 'WP_CACHE', false );
} elseif( stristr( $_SERVER['SERVER_NAME'], "test" ) ) {
	// Test Environment
	define( 'DB_NAME', 'project_test' );
	define( 'DB_USER', 'project_test_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.test');
	define( 'WP_SITEURL', WP_HOME);
	// Testing will always want debug on and caching off
	define( 'WP_DEBUG', true);
	define( 'WP_CACHE', false);
} elseif( stristr( $_SERVER['SERVER_NAME'], "uat" ) ) {
	// UAT Environment
	define( 'DB_NAME', 'project_uat' );
	define( 'DB_USER', 'project_uat_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.uat');
	define( 'WP_SITEURL', WP_HOME);
	// UAT Environment will always be the same as production so turn off debug and turn on caching
	define( 'WP_DEBUG', false );
	define( 'WP_CACHE', true );	
} else {
	// Production Environment
	define( 'DB_NAME', 'project_live' );
	define( 'DB_USER', 'project_live_user' );
	define( 'DB_PASSWORD', 'password' );
	define( 'DB_HOST', 'localhost' );
	define( 'WP_HOME', 'http://project.com');
	define( 'WP_SITEURL', WP_HOME); 
	// Live Environment will always be the same as production so turn off debug and turn on caching
	define( 'WP_DEBUG', false );
	define( 'WP_CACHE', true );
}
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
?>

This article was originally published on Multi Environment WordPress wp-config.php. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

This effect can be used to hide content from the user until they hover over the board this will then display the hidden board.

View the demo to see the effect.

Demo

There are a number of CSS3 properties we need to use to achieve this effect.

• backface-visibility
• transition
• transform
• transform-style

The HTML

First we start off with the HTML for the boards. Each board is made up of a div element with another 2 div elements inside, these are elements we are going to use as the front board and the flipped board.

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>

Styling The Boards

To create the effect of the flipped board we are first going to style the boards.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
}

This will style the boards the same size and will position them in the same space so that they overlap each other.

You can change the background of the boards to make it easier to see the difference between the two boards.

.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250);
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238);
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}

With the flip board we need to hide the second board from view until it can be flipped around to see it. For this we use the CSS property backface-visibility, this property is related to the 3D transforms of the element. Using 3D transforms you can flip an element on the y-axis so that the front of the element is now facing in the opposite direction. Using the backface-visibility you can hide any elements that are not facing the front of the screen.

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  backface-visibility:     hidden;
}

This code spins the element 180 degrees so that the front is now facing away from screen and now the element can be hidden by using the backface-visibility property. Now we can add this to our page by using the following CSS.

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

Now the flipped board will be hidden from view, the way we display this again is to flip the board on the hover event.

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

We should also add a transition effect so that there is a smooth flip when rotating the board, this is done by using CSS transition, we also need to make sure that when the boards transforms it will preserve the 3D space by using the property transform-style.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

That's all you need to create a flip board look which will have a hidden div which will be flipped into view when you hover over the board.

View the demo to see it in action.

Demo

Full Code Of The Flip Board

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
<div class="board left">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>
<div class="flip-boards">
<div class="board top">
<div class="front">
				<img src="http://placedog.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placekitten.com/g/200/200" />
			</div>
</div>
<div class="board left">
<div class="front">
				<img src="http://placekitten.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placedog.com/g/200/200" />
			</div>
</div>
</div>

.flip-boards{ position: relative; }
.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
	margin-top:80px;
	font-size: 1em;
}
.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.left:hover
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

This article was originally published on CSS Flip Boards. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

Some of the most popular boilerplates you would of heard of are Twitter bootstrap and HTML5 boilerplate. These projects are both available on Github for you to fork and modify for your own use and both are very useful projects to use when you first start any new website project.

One of the problems that web developers have is getting email newsletters to look correct in most of email clients. This is where the HTML email boilerplate can be useful, it will provide you with helpful code snippets to aid in developing all your HTML emails. This will take care of the correct doctype to use, how to reset the styling to work in all clients, how to display images correctly and how to style HTML tables to align correctly in your email.

HTML Doctype

While many email clients will strip out the doctype, it's good practice to add a doctype so that when we are testing we know that the HTML will render correctly. When popular clients remove the doctype from the email it will be replaced by XHTML 1.0 strict doctype, this is why we make sure we set it as XHTML 1.0 strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Images

The HTML boilerplate will help you in setting up your images correctly, if you have links around your images then a border will be placed around the images, adding these styles will remove all borders around your images.

<style>
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
a img {border:none;} 
.image_fix {display:block;}
</style>
<img class="image_fix" src="full path to image" alt="Your alt text" title="Your title text" width="x" height="x" />

Tables

The HTML boilerplate gives you a starting point to deal with tables, this will provide you with a starting point of defaults to use on your table to avoid any formatting problems.

<style>
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
</style>
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="200" valign="top"></td>
<td width="200" valign="top"></td>
<td width="200" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>

Resetting Your Styles

Use the following snippet to reset the styles in the email clients, this will also help with font sizes on mobile devices.

/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
p { margin: 1em 0; }
/* End reset */

Use the HTML boilerplate the next time you need to create a HTML email newsletter.

HTML Email Boilerplate

This article was originally published on The HTML Email Boilerplate. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

These are simply meta tags you can add to the head tag of your page, when Facebook scans your page to get the title, description and images it will search for these tags, if they are there then it will use the contents of these tags instead of the page title. These means you can fully customise the page titles just for Facebook.

Twitter also has meta tags which you can use to customise the message on Twitter. These are called Twitter cards, it allows website owners to add more descriptive text on their links when they are shared on Twitter.

When a link is shared on Twitter it is limited to the 140 character limit on all tweets, but on all tweets you can expand the tweet to find out more about it. This section is where you find information on how many people have replied to the tweet, re-tweeted it and added it to their favourites. But if you have the Twitter meta tags added to your head tag then instead of just seeing the information about re-tweets and favourites you will also see a snippet of the page by showing you the title, description and an image.

Because you can post different types of links to Twitter like images and videos there are different types of Twitter cards you can have, one will give you a snippet of the page, another will display an image, the last one is a media play to play music or video.

Which type of card that is displayed can also be defined by a meta tag.

<meta name="twitter:card" content="summary">

To display a snippet of the page the value of the content attribute will need to be summary. For an image the value will need to be changed to photo. To change this to display the media player for a video or music set the value to be player.

Twitter Card Meta Tags

There are different meta tags you can use depending on the type of Twitter card you are using.

Summary Card

• twitter:card - The card type, which will be one of "summary", "photo", or "player".
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image representing the content.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta name="twitter:url" content="http://www.paulund.co.uk">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page Description">
<meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Photo Card

• twitter:card - Set this value to photo
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image representing the content.
• twitter:image:width - Define the original width of the image, this may not be the size Twitter use to display it but it will help twitter keep the aspect ratio of the image if it needs to resize the image.
• twitter:image:height - Define the original height of the image.

<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta name="twitter:url" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
<meta name="twitter:title" content="Image Title">
<meta name="twitter:description" content="Image Description">
<meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
<meta name="twitter:image:width" content="500">
<meta name="twitter:image:height" content="500">

Player Card

• twitter:card - Set this value to player
• twitter:url - Canonical URL of the card content.
• twitter:title - The title of your content as it should appear in the card.
• twitter:description - A description of the content in a maximum of 200 characters.
• twitter:image - A URL to the image to be used as the thumbnail of the video
• twitter:player - The URL of the player
• twitter:player:stream - The URL of the video to stream on the player
• twitter:player:width - The width of the IFRAME to display the player
• twitter:player:height - The height of the IFRAME to display the player

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:url" content="http://www.paulund.co.uk/example-video.mp4">
<meta name="twitter:title" content="Title Of Video">
<meta name="twitter:description" content="Description of the video">
<meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg">
<meta name="twitter:player" content="https://www.paulund.co.uk/example-player">
<meta name="twitter:player:stream" content="http://www.paulund.co.uk/example-video.mp4">
<meta name="twitter:player:width" content="500">
<meta name="twitter:player:height" content="250">

Facebook Open Graph Tags

If you are already using the Facebook open graph tags then you will have something like this in the head of your HTML.

<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Because the Twitter cards meta tags were based on the open graph tags, Twitter will actually use these as a fall back. It will first search for the Twitter card tags, if they are not there then it will search for the open graph tags and use them for the title, description and images. This is so you don't need to duplicate the tags with the same information as the open graph tags.

This means that you can have this in the head of your website and it will search work perfectly fine.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

To view updated information about the Twitter card visit the Twitter documentation.

Twitter Cards

This article was originally published on Add Twitter Cards To Your Website. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

Center Images Horizontally

To center something on the horizontal in CSS it's quite easy all you need to do is set the width on the element and apply an auto margin-left and margin-right on to the image. The browser will work out the exact margin on both the right and left side of the image. This will position the image in the center of the parent element just by using the width and the margin properties.

<img src="example.html" alt="Center Images" />

img {
     width:250px;
     margin: 0 auto;
}

Center Images On Horizontal and Vertical

Setting the image to be center on the horizontal is easy you just need to set an auto on the left and right margin. But to set the image on the vertical and on the horizontal you need to set the margin on the top and left of the element.

The following technique is something you can use to display a pop-up window to show an image gallery in the center of the screen.

This example will center the image with a width of 250px, first to set the image to be absolute positioned and set the top and left property to be 50%. This will position the image in the middle of screen, but the image won't be exactly center.

img {
   height: 250px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 250px;
}

The top left corner of the image will be the exact center of the screen, to move this point to the center of the image we need to move the image half it's width and half it's height. To move the image on half it's width and half it's height you need to add a margin-top which is negative half the height of the image and a margin-left which is negative half the width of the image.

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;
}

This article was originally published on Absolute Center Images With CSS. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

This will allow you to use an image to display the post instead of just the content. The main use of this image is to be used on the index page or the search results page of your WordPress site.

Enable Theme Support For Featured Post

By default themes do not support this feature you need to add some code to the functiona.php file.

add_theme_support( 'post-thumbnails' );

Set Featured Image

There is a meta box on the post screen where you can set an image to be the featured image on the post.

Display The Featured Image

To display the featured image on your WordPress theme you need to use the function the_post_thumbnail(), but first you need to check if the post currently has a thumbnail image by using the has_post_thumbnail().

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail();
}

Validate Featured Image On Post

If you theme requires that a post has a featured image then you need to make sure that your post has a featured image before you allow your users to publish the post.

If you need to validate a post you can do this on the saving the post action save_post, this action will be ran when you save the current post.

For us to validate this correctly we need to to check if the post has a post thumbnail by using the has_post_thumbnail() function. If the post doesn't have a post thumbnail then we need to set the post back to be a draft status and display an error message on the screen.

Validate Post Thumbnail

The following code can be used to validate the post thumbnail.

This code will run on the save action of the post, first we check that the post type is for a post. If the post type is not a post then we return from the function so we don't continue.

Then we check to see if the post has a thumbnail if it doesn't have a thumbnail then we set a new transient so that we can display an error message. Then we reset the post status to draft so the post doesn't displayed on the website. If the post has a thumbnail then we can just delete the transient so the error message isn't displayed anymore.

add_action('save_post', 'pu_validate_thumbnail');
function pu_validate_thumbnail($post_id)
{
    // Only validate post type of post
    if(get_post_type($post_id) != 'post')
        return;
 	// Check post has a thumbnail
    if ( !has_post_thumbnail( $post_id ) ) {
    	// Confirm validate thumbnail has failed
        set_transient( "pu_validate_thumbnail_failed", "true" );
        // Remove this action so we can resave the post as a draft and then reattach the post
        remove_action('save_post', 'pu_validate_thumbnail');
        wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
	add_action('save_post', 'pu_validate_thumbnail');
    } else {
    	// If the post has a thumbnail delete the transient
        delete_transient( "pu_validate_thumbnail_failed" );
    }
}

Next we use the admin_notices action to display an error message if the transient is set. Once the message is displayed then we can delete the transient.

add_action('admin_notices', 'pu_validate_thumbnail_error');
function pu_validate_thumbnail_error()
{
    // check if the transient is set, and display the error message
    if ( get_transient( "pu_validate_thumbnail_failed" ) == "true" ) {
        echo "
<div id='message' class='error'>
<strong>A post thumbnail must be set before saving the post.</strong>
</div>
";
        delete_transient( "pu_validate_thumbnail_failed" );
    }
}

When you save the post and it doesn't have a featured image then you will see the post is set back to a draft and an error message is displayed on the screen.

This article was originally published on Validate Featured Image On Post. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe

Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces is the script marketplace CodeCanyon and the theme marketplace ThemeForest.

Here are the files which you can get for free for May 2013.

PHPWebServer with WebSockets Upgrade

18 purchases at the price of $5.

This item is a suite of PHP classes that define a HTTP web server with WebSockets upgrade possibility. It runs in PHP CLI , and you can do everything you want with it thanks to the low-end access of HTTP protocol.

Get It Free Now

Skywalker - Powerful Template for Joomla!

95 purchases at the price of $40.

The man behind the T3 Framework Wikies proudly presents Skywalker for Joomla! 2.5! My first template on Themeforest! A powerful and fully featured template and featuring all the things you need.

Skywalker template comes with real Quickstart Installation Pack for Joomla! 2.5 and is a unique template, with consistent typography, no one million colors or unlimited features, just simple to use features packed up and ready for you!

• Unique, XHTML valid and typographically consistent design.
• Skitter Slider the best javascript based slider for Joomla!.
• K2 Content Component used for the Blog Page.
• GK News Show Pro with awesome styling.
• Ajax search with awesome styling.
• The Piecemaker 2 – my own extension, the smartest out there.
• DNP Tabs – my own smart tabs module for Joomla!, light and very easy to use.
• Simple Blank Module – my own extension for using custom code snipets.
• Google Maps Plugin support.
• Custom Form Elements – another unique feature powered by CSS3 & jQuery, to add more style to your checkboxes, radio boxes and select elements.
• DNP White Social Icons – Custom Social Icons to match the template design.
• Link Cooltips – hovering links the titles look great finally.
• 8 styles based on beautiful colors: turquoise blue, green, orange, yellow, red, purple, magenta, grey.
• Fullscreen Background Images with AJAX load.
• Custom error and offline pages.
• Beautiful CSS3 powered typography with price tables, bubbles, blockquotes, lists and everything you need for your content.
• 30+ Module Positions on 3 very flexible desktop layouts.
• jQuery 1.7 minimized included & running in “no-conflict” mode for various template features and your code snipets.
• Mobile Ready Layouts – reforged of course – demo here
• Smooth scroll to top – a unique feature that can be used to create navigation for one page website.
• A new Tools top panel jQuery powered easy to customize for your needs.
• Various code snipets with the Joomla! 2.5 Quickstart
• Automatic Adjustments to enhance template typography
• Complete Documentation
• Forum Support
• That’s it ?!

Get It Free Now

HIGH QUALITY - TEXT ANIMATED CONTENT AD - 300x250

546 purchases at the price of $3.

This ist the first Series of professional Advertising Banner on activeden. You get an easy to customize 300×250px Content Ad.

This is just typo animation, so you can put your own logo and you own text.

Everything is xml based, you so can individualize this banner in the way you want without flash or actionscript knowledge.

Get It Free Now

Determination

24 purchases at the price of $13.

Determination is an uplifting and motivational track, designed for business or corporate projects such as presentations or advertising!

The track begins with a subtle, emotive piano loop that continues throughout the piece, as a staccato violin section introduces an inspiring and positive repeating pattern. A steady, punchy drum beat evolves throughout the track, while everything is held together with a simple, solid bass line and electric guitars provide a powerful chord progression throughout the piece.

Modern production techniques keep the track sounding fresh, and perfect for a number of uses. Includes a 320 mp3 and 16-bit wav.

Get It Free Now

Creative Minds

156 purchases at the price of $20.

Top quality design, full customization and video instructions will help improve your styling. The best thing is that you don’t need 3rd party plug-ins.

• 5 Image placeholders
• 11 Text placeholders
• Logo placeholder
• 9 Background’s
• Original sountrack, included in project!
• Every project element customizable
• Detailed video help
• No plug-ins
• Full HD – 1920×1080 – 24fps (Instructions included how to change these settings if needed)
• Font can be downloaded free at http://www.dafont.com/geek-a-byte.font

Get It Free Now

Business eNewsletter Design

82 purchases at the price of $3.

• Fully layered 12 .PSD file
• Easy to customize :colors, sets of news
• Proffesional and clean style
• Juicy colours
• Made in 6 colour versions and in 2 layout options
• Perfect for business use like mobile apps but not only
• Easy to code, dedicates to table or div coding
• All layers are fully editable and organized in groups
• All you need to do is just change text and pictures
• Fonts used (not included): Arial, Helvetica Neue LT Std, Helvetica Inserat LT Std

Get It Free Now

Lowpoly Wrench

0 purchases at the price of $4.

This is Lowpoly Wrench, Model has 218 Tris and texture map 256-256

Get It Free Now

Beautiful Woman Wearing Jewellery

15 purchases at the price of $5.

Get It Free Now

This article was originally published on Free Premium Files For May 2013. Remember Google Reader is shutting down soon, get the latest Tutorials and Snippets straight to your email Subscribe