The Holy Grail

So I thought it was easy to have three columns, with both sidebars static widths; while the center column is the only one that expands according to the browser. Boy I was wrong – I couldn’t figure it out for the life of me! And through some serious searching I finally discovered “the Holy Grail” – from A List Apart. The funny thing is – I’m probably one of the last ones to find this “sacred” code. Thanks to Matthew Levine’s article – I achieved my layout.

Breadcrumbs, Buttons and CSS3

I started to implement my own breadcrumb function – but discovered Dimox’s solution – was far more complete. I needed a breadcrumb navigation that doesn’t require a plugin and Dimox did the job very well. Zurb’s Super Awesome buttons are what’s styling all the buttons in Maximus. You should notice the resemblance for each button – with only the base color that is different from one another.

Lastly, I’ve adopted quite a few CSS3 techniques from all over the net. From box shadows, text shadows and overlays – all contribute to the visual effects of Maximum.

Conclusion

I hope you find good use for Maximum. I did enjoy experimenting and discovering new ways of doing things. I imagine this type of theme would suit the serious content writers (ones who need all the real estate they can get). It may also be used for ecommerce, or “wiki” types of layouts – who knows. If you do decide to use it, don’t forget to leave your url in the comments section below! Happy Blogging!

First, take a look of what we’re making:

Ready to get started? Let’s begin:

Set up the Environment:

In order for our PHP scripts to run, you need to have a web server. A good example is XAMPP, which is free and can be downloaded from http://www.apachefriends.org/en/xampp.html. Create a root folder – name it anything, and inside it, create the following folders:

• Images – this is where the image of the gallery will go.
• Scripts – this is where our scripts will go

Download Timthumb script: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/. Timthumb is an image resizer script that is written in PHP. Save timthumb.php inside scripts.

Let’s create a new HMTL file inside the root, name it index.php. Add this line of code:

1
2
3
4

<?php 
$path =  'http://' . $_SERVER['SERVER_NAME'] . '/root/images/'; 
$files = scandir('images/'); 
?>

The above code creates 2 variables:

• $path – is the full image path of our images
• $files – is an array of filenames from a specified folder that we’ve scanned through the scandir() function

Then add the code below:

1
2
3
4

<?php foreach ($files as $file){ ?>
<li ><a href="<?php echo $path . $file; ?>"><img src="scripts/timthumb.php?src=<?php echo $path . $file; ?>&h=134&w=264&zc=1&q=100" /></a></li>
<?php }?>
</ul>

This loops through each item in the array $files – and assign it to another variable $file. For each one found, we’re printing a list item with an anchor and image tags. Within these tags you’ll notice the variables we’ve created earlier. The timthumb script is inserted at the beginning of the src attribute of our thumbnails. The width and the height parameters are hard coded in there as well. Note that we are going to randomize this section a little bit later.

Assuming that you already have photos in your image folder – fire up your web browser and navigate to index.php. You should have something like the screenshot below:

As you can see – we’re swiftly on our way. Our thumbnails are resizing right. Once clicked, the larger image appears. Though there are mysterious images that are returning empty (file name is shows as “.” and “..”). This may not be the case with yours – but with me, I just decided to fix this by wrapping our list items inside an ‘if – else’ statement:

1
2
3
4
5
6
7
8
9

<ul>
<?php foreach ($files as $file){ 
	if ($file == '.' || $file == '..'){ 
		echo ''; 
	} else {
?>
<li ><a href="<?php echo $path . $file; ?>"><img src="scripts/timthumb.php?src=<?php echo $path . $file; ?>&h=194&w=224&zc=1&q=100" /></a></li>
<?php } }?>
</ul>

Now we move on to the Fancy Box script:

Add Fancy Box

I almost always use jQuery for all my projects. It is one of the most versatile and powerful javascript libraries to date. Download the latest version from http://jquery.com/ and include it in your document:

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

Download the Fancybox files from http://fancybox.net/. Once again, include the script right under the jQuery one. Note that Fancy box comes with its own image folder and css file. You need to include that css as well:

1
2

<script type="text/javascript" src="scripts/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.1.css" />

Now let’s add a “rel” attribute to our anchor tag, with a value of “lightbox”. This makes it easier for our script to target which elements to add an effect on.

<a href="<?php echo $path . $file; ?> rel=”lightbox” ">…

Finally, create a new script tag and add our line of code:

1
2
3
4
5
6

$(document).ready(function(){
	$("a[rel=lightbox]").fancybox({
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic'		
	});
});

The above code states that when the document is ready – grab all the anchor tags with an attribute value of “lightbox” and hook it up with the fancybox function. I’ve chosen the effect ‘Elastic’ for the transitions – you can replace this with your own liking.

Now go back to the browser and hit F5 to refresh. Click on a thumbnail – you should see Fancy Box in action with smooth and eye popping animation added to your photo gallery.

Next up – some styling with CSS.

Pretty ‘er up.

Now it is always good practice to separate your formatting and markup. Create a new file named style.css, go back to index.php and link the stylesheet as follows:

<link rel="stylesheet" type="text/css" href="style.css"  />

In the last screenshot you notice that I marked the little buttons. That’s because of two things – if you’ve configured Fancybox correctly – those icons should be visible. The other thing is, I’ve created an icon that is very identical to those of Fancybox’s – and we’ll include in our thumbnails. Take a look at the couple of images below:

These images (available in the download) I’ve saved inside the root folder. In your style.css – add these lines of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body {
	background:url(bg.jpg);
	}
ul li {
	list-style:none; 
	float:left; 
	position:relative; 
	}
ul li a img {
	border:0;
	padding:10px 10px 9px 10px; 
	background:#ffffff; 
	margin-bottom:20px;
	margin-left:24px;
	}

The code above adds a nice texture to our gallery background. Next, it floats each item to the left – aligning them all side by side. Then it adds a nice white background to each image, along with proper paddings and margins:

Remember our custom script tag just above our closing head tag? – add, this line of code just in between the $(document).ready() function:

$("ul li").append('<span></span>');

This will insert an empty span tag inside each of our list items (this is for the small magnifying glass icon). If you’re thinking – why not just add an inline span tag in our “for each” loop inside index.php – that’s an excellent question. This is because for users without javascript enabled – they won’t see this magnifying button.

Add these lines of code inside our style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ul li span {
	background:url(magnify.png); 
	width:27px; 
	height:26px; 
	position:absolute; 
	left:290px; 
	top:-3px; 
	}
ul li img {
	box-shadow: 0 0 7px #807a72; 
	-moz-box-shadow: 0 0 7px #807a72; 
	-webkit-box-shadow: 0 0 7px #807a72;
	border-radius:4px; 
	-moz-border-radius:4px; 
	-webkit-border-radius:4px;
}

The above styles adds the subtle details that will make our thumbnails beautiful. This includes – of course our magnify.png, CSS3 box shadows (box-shadow) and rounded corners (border-radius).

Our gallery looks really good so far, but not good enough. Let’s add some embellishments.

Randomize the Images and Orientation:

Let’s make the thumbnail images be mixed orientation – some tall and some wide. Remember our thumbnail dimensions declared right after the timthumb script? All we need to do is switch the height and width values. So let’s create a PHP function. Append this code on top of index.php (right before the html tag):

1
2
3
4
5
6
7
8
9

<?php 
	function random_orientation(){		
		$orientation = array('&h=194&w=224', '&h=224&w=194' );
		shuffle($orientation);
		foreach($orientation as $o){
			return $o;
		}		
	};
?>

The code above randomizes the two strings (‘&h=194&w=224‘ and ‘&h=224&w=194’). Then we call this function where our image tag is:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; <?php echo random_orientation();?>&zc=1&q=100" />

Now our thumbnails have different orientation each time we refresh. But as you can see, we need to fix the float – some thumbnails get stuck where portrait ends. We also need to fix the magnify icon positioning.

We need a way to tell what the current thumbnail orientation is, and somehow apply a class to that specific list item. This way we can fix the padding and margins accordingly. Add this line of code inside our “else” statement:

1
2
3
4
5
6
7

<?php foreach ($files as $file){ 
	if ($file == '.' || $file == '..'){ 
		echo ''; 
	} else {	
	//this is the new code to be added:
	$current_o = random_orientation();		
?>

This grabs the current orientation and assigns it to a variable. Now, inside our li tag – paste this line of code:

1
2
3
4
5

<?php 	
	if ($current_o == '&h=224&w=194'){
		echo 'class="tall"';
	}
?>

This adds a class name of “tall” for each list item – if the $current_o variable equals to the portrait dimension. We also need to replace our image thumbnail script:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; <?php echo random_orientation();?>&zc=1&q=100" />

to this new code:

<img src="scripts/timthumb.php?src=<?php echo $path . $file; ?><?php echo $current_o;?>&zc=1&q=100" />

Refresh your browser and if we inspect our code – you should see list items with a class of “tall” for images that have 224 x 194 dimensions:

Also, add these lines of code to our style.css file:

1
2
3
4
5

ul li {height:250px; width:250px; margin:8px;}
ul li img {margin:15px 0 0 0;}
ul li.tall img{margin:0 0 0 15px;}
ul li span {left:222px; top:8px;}
ul li.tall span {left:210px; top:-6px;}

The above code overrides the default styling for the list items.
Note that you also have to delete some previous styling for our list items (see the comments in the download). If you’re following this tutorial – I apologize for the replacements. As you see, I’m developing this as I go.

Lastly, add this code inside index.php:

1
2
3
4
5
6

<?php 
$path =  'http://' . $_SERVER['SERVER_NAME'] . '/root/images/';
$files = scandir('images/'); 
//this is the new code:
shuffle ($files);
?>

This will randomize the images. So now we’ve fixed the list items, magnify icon – as well as randomized the images:

Final Touches:

So our gallery is so done. Except I like to add those final details that make it really good. Let’s add a pre-loader image. This is when you see a “loading” message for each thumbnail before they appear. To do this, we go back to jQuery. Inside our document ready event, add this line of code:

$('img, span').hide().animate({opacity: 1.0}, 3000).fadeIn('slow');

The above code delays our images just a tad bit – just enough to see a preloader image. Save your “loading.png” image in the root directory. In your styles.css, add these lines of code:

1
2
3
4

ul li {
background:url(loading.png) no-repeat;
background-position:100px 100px;
}

This just sets a background image to our list items. So next time you load the page – you should see our preloaders:

Finally, download the fancy box mousewheel.js pack inside your scripts folder and include in your document:

<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.2.pack.js"></script>

You should now be able to view next and previous images once you scroll your mouse wheel.

Conclusion:

Well now, I think our gallery is ready for prime time. The good thing about this is you never have to re-size a thumbnail again. All you need to do is add the large image inside the “images” folder and presto! Another good thing is that your gallery doesn’t look the same all the time. With our randomized order and orientation, the gallery looks fresh at each refresh. So go ahead and grab the download files. Play around with it – and maybe even improve the code. Be sure to include your comments below:

Features

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

The .psd file itself is grouped, layered and organized. Feel free to use – under creative commons license. I would like to know if this type of design still suit clients out there. If you feel it’s a bit “played out”, out dated – whatever, Please let me know in the comments section. Download the file from this link.

Corporate Blue Home Page

The design is a modern layout ideally for a financial or business institution (anywhere a progress chart can be represented). A large feature area with a colorful bar graph sits right below the header. Underneath this area are three even columns with large thumbnails that can house summaries of your company profile, links or even the latest news.

Finally, the page includes a mid-size footer with a grayscale version of the logo, page navigation and copyright information. All buttons are vector shapes for easy customization. Page elements are professionally spaced using the 960 grid system, while text layers are anti-aliased to represent how real web fonts look in a live browser. You can download Corporate Blue from this link

Bang Business Cards

This second template is a submission from one of my followers: G S Vineeth. The Bang Business Cards is ideal for start ups, graphic designers or even a product. The design features bright rays of green as a background, topped with a rounded container with subtle gradients. The text elements are beautifully etched, also with the same green shade.

The fonts used are called 20th Century which can be downloaded from this link. You can view additional work from GS Vineeth from his Graphic River portfolio. Download the Bang Business Card template from this link.

Conclusion

So it has been a good couple of years. I have a steady rate of readership, a number of downloads as well as a few followers. My posts keep coming, client work is steady – all is good. Once again, I ask you to keep me going – by simply leaving a nice comment below or follow me in twitter and facebook. I hope you make use of the .psd files and maybe make your next project a little bit easier.

Step 1: Set the groundwork

In Photoshop, create a new document, 800 pixels width x 340 pixels height. Add a new guide – 70 percent from the top border of the document:

Add a dark background (I chose #292929), add a text layer and type out your words. The text settings are: 100 pt in size, color #ffffff, and type is “Myriad Pro – Black Italic”. Note that if you don’t have the same font – use something a similar italic, block type font.

Now, delete all the letters in your text layer and duplicate the layer for each letter. What we’re trying to do is have a layer in its own layer like below. Nudge each letter so they’re quite close to each other:

Step 2: Create the Text Effects

Now we’re ready to create the text effects. Double click the first letter and apply the following effects:

Drop Shadow:

Inner Shadow

Gradient Overlay

Add the following colors for the gradient (to do this click the gradient box from above). Move the color handles in the bottom bar to the position indicated. Leave the colors at #000000 and #ffffff.

Step 3: Copy and Paste the Layer Styles

Right click the first letter layer, select “Copy Layer Style”

Go to the next letter layer, right click and select “Paste Layer Style”

Continue doing this process to all the layers.

Step 4: Final Touches

Adjust your letter positioning according to your text content. The point is to just have enough spacing for subtle shadows to appear onto the next letter. I also decided to change the font color to the word “flyer” to #d30000 to match my color schema – choose your own color for yours.

Finally, create a new layer just above the background layer. Using the brush tool with these presets: (choose a really soft tip, adjust to 300 pt, with color #ffffff, opacity level to 24 percent). With just one click – daub right in the center of the document to give it that really soft glow in the background.

Conclusion

There you have it, a simple yet beautiful logo from nothing more than layers of text subtly overlapping each other. Play with the effects to your heart’s desire. You can even adjust the vertical positioning of each letter – just to add a bit more kick. Feel free to Download the PSD file.

The Websites:

Verizon Wireless

Sprint.com

Blackberry.com

Palm Pre

Sony Ericsson Xperia X10

Nexus One

WireFly.com

Of course -The iPhone

HTC

T-Mobile

The Free PSD:

Below is a preview of the Photoshop mock up free for download. It was inspired by the list above.

Here is the download link. Feel free to check out my downloads page for other free stuff you can use in your design projects. Follow me in Twitter or leave a comment below – That’s all I ask.

What is FlowPlayer?

FlowPlayer is an open source video player for the web. It is a way for you to stream videos in your pages, from your own server. Thus, eliminating the need for external video serving services such as YouTube. FlowPlayer is highly extensible and customizable. Though it may take a little more than a few clicks – the benefits far outweigh the work needed to get it running. Consider these pros and cons:

Pros:

Cons:

How to use FlowPlayer

What I really liked about FlowPlayer is their extensive documentation. It includes walkthroughs for beginners, as well as in depth instructions for the expert programmers. To start using FlowPlayer – all you need is to do the following:

1) Download the FlowPlayer Files – This download includes the actual FlowPlayer .swf files as well as the .js file to get you started. It also includes an HTML page that demonstrate the basic installation of FlowPlayer.

2) Include the flowplayer.js in your HTML:

<script src="path/to/the/flowplayer-3.1.4.min.js"></script>

3) Setup the player container – Simply add an anchor tag with 3 important attributes: a) href – the pointer to the video file, b) style: determines the size and basic display properties of the player and c) id: very important – this acts as a selector for the javascript to target to load the player.

1
2
3
4
5

<a  
    href="http://www.mywebsite.com/myVideo.flv"  
    style="display:block;width:425px;height:300px;"  
    id="player"> 
</a>

4) Install Flowplayer – The final code tells FlowPlayer to install in our anchor tag:

<script language="JavaScript"> 
flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); 
</script>

FlowPlayer and WordPress:

Oh yes – you can actually embed Flowplayer inside your posts. The beauty of it is – there are actually several Flowplayer plugins already available for WordPress. Though I’m just going to cover the two most popular:

FV WordPress Flowplayer - developed by Foliovision, is a straight forward FlowPlayer plugin made exceptionally easy. All you need is to install, upload your video and add the plugin shortcode to your posts. Note that this is the plugin I’m using for my video demo above. The screenshot below shows the plugin options page:

Flowplayer for WordPress – created by David Busby of Saiweb, this plugin also includes player customization features as well as commercial license key input for advanced settings:

Embed FlowPlayer in your Theme:

If you’re like me, you may come across a website project that requires videos hosted in their own server. Of course WordPress and FlowPlayer is a good combination. What about if the requirements for the player are so extensive that may not be achieved with any sort of plugin? This is when you’d want to embed FlowPlayer in your theme.

The process is pretty much the same as the basic FlowPlayer installation. The only difference is we’re using custom fields for the href attribute of our player. In your theme folder, edit single.php and include this code inside the loop:

1
2
3
4
5
6

<?php if (get_post_meta($post->ID, 'movie', true)){?>
<a href="<?php echo get_post_meta($post->ID, 'movie', $single = true); ?>"  
			 style="display:block;width:590px;height:278px"  
			 id="player"> 
</a>
<?php }?>

This sets up a default player for each post, wrapped in an “if” block. This way you customize the page to your client’s extensive requirements. A screenshot of my page mockup is shown below:

Don’t forget the call to install FlowPlayer:

1
2
3

<script>
flowplayer("player", "<?php bloginfo('template_directory'); ?>/flow-player-files/flowplayer-3.1.5.swf");
</script>

Now all you need to do is upload the movie using the default WordPress media uploader, and plug in the url in a custom field set to “movie”

Conclusion

If you haven’t already noticed – almost every aspect of FlowPlayer can be customized. Having this much control over video content is invaluable and cannot compare to services like YouTube. Best of all, the basic version is free under the GPL license which you can use for personal or commercial purposes. Note that there are also paid versions that determine the amount of branding you can as well as legal domain usage. Head on over to FlowPlayer’s website for more information.

So much for a name change. Nonetheless, Aparatus is packed with features and design delight that aims to tickle your innermost web mag fancy. I have included extensive theme options that will leave you not needing to touch a single line of HTML. I have cufonized fonts for the headings and the site logos – that you need not create your own. I have modified the WordPress loop so much that it covered almost all possible looping scenario. Last of all, Aparatus comes with four different stylesheets targeted to suit your color schema.

Updated Twitter Badges!

I received enough comments on the Twitter badge to say “Follow ON Twitter” as supposed to “Follow IN Twitter“. So here they are:

• Maroon Badge
• Blue Badge
• Green Badge
• Black Badge

Simply replace the existing badge image in the Theme’s images folder.

The Slide Show

As for many magazine styled websites – a slideshow is a must have. Thanks to JonDesign’s Smooth Gallery – which made this possible. The slideshow by default pulls your five latest posts. The loop then continues to present the remaining of your posts directly below. The theme options allow total exclusion of the slideshow, as well as automatic slide. You can also specify a specific category to be pulled into the slideshow – without ever duplicating the posts in the bottom. All while the default loop logic is still acknowledged and functional. What this means is that – the loop still recognizes the options you enter in WordPress admin – not just in the theme (i.e. number of posts to show, etc); in addition, the paging system (next page etc) still works and automatically hides the slideshow in the inner pages. Oh, I also re-styled the WP-Navi Plugin (the right way), by de registering it’s default stylesheet.

WP 2.9 Thumbnail Ready!

The images in the slideshow as well as the thumbnails per post can be set by using the new “set as thumbnail” feature in WP 2.9!. This supersedes the old school way of inserting “custom-fields” – but will still work with either! You can use the thumbnail feature or custom fields set to “image”.

Ads, Twitter, Widgets and Everything else

The sidebar comes with advertising blocks which you can set up in the theme options panel. When you enter your Twitter account in the options, this will dictate the @replies in the Tweet Me buttons, the big “Follow my Updates” in the header, as well as the last tweet in the sidebar. The popular posts and recent comments tabbed area are all non-plugin driven – which means the code is all inclusive with the theme, without needing to install a plugin. Lastly, the sidebar supports widgets, the comments are threaded, gravatar – ready, as well as suckerfished drop down menus for the categories in the header.

That’s Enough! Download Already!

To view a live preview of Aparatus – click here. You can purchase the theme for $10 through Paypal.

Don’t forget to check on PsPrint Online Printing for high quality printing services.

It looks like the only thing it has in common with Kubrick is the rounded corners and the slim page width of 728 pixels. Anywho, you can take Kubrick on Crack! and install it in your WordPress site for free.

Home Page with a Feature Post

Unlike the original Kubrick – this theme automatically takes your latest post and converts it to a Feature post. It sits atop of a dark fading background with a custom image field that looks like its on top of a stash of photographs. It uses the custom field key: “image“. To learn how to use custom fields (which I strongly recommend) – read it from the codex. No image resizing is required – they’re all automatically cropped, thanks to the TimThumb script by Darren Hoyt. But for best results – upload an image that is wider than 424 pixels and longer than 284 pixels in height.

The search form magically appears in a fade in box. This script is “Thickbox” and provided by jQuery. The spectacular smoke art background is by Applse Actually of Deviantart.com.

Theme Options

Kubrick on Crack! comes with a control panel so you don’t have to touch the code in order to customize for your website. The options include the following:

1 – Header Logo, once your logo is uploaded, enter the url here. I recommend using a transparent .png to preserve the look.

2 – Twitter account, this will save to the link that is behind the twitter icon in the header.

3 – Custom Feed, this will save to the RSS icon in the header. If no value is provided – the default blog rss will be used.

4 – Google Ad Sense, this will create an ad space right below the single post page. (use the the 728 leatherboard style). To learn more about Adsense, click here

5 – Google Analytics, this saves your Analytics code below the footer – which of course is invisible. To learn more about Analytics – click here

You can see Kubrick On Crack! in action at my Demo site. Download the theme from this link.

Update: the original PSD files can be now be dowloaded from this link. *There are 3 photoshop files in the zip – one for the main layout which contains all of the elements except two buttons – which are in the other psd files.

All I ask is for you to leave me a comment, Retweet or Digg this article, or follow me in Twitter.

Also, visit PsPrint.com to get the best deals in commercial printing!

Usage

Blue Rooster is ready to use out of the box. The standard blog template will work with or without assigning thumbnails to your posts. In order to use thumbnails – you would have to assign custom fields to your posts with name: “image“. To learn more about custom fields – check this link from the WordPress Codex. You DO NOT have to resize your images for the thumbnails, thanks to the Darren Hoyt for his TimThumb script which made this all possible. The thumbnails are also powered by jQuery: PrettyPhoto – which is a lightbox clone where the larger images are displayed when clicked. A link to the single post is also included with the larger image.

The Bonus Templates

If you want to use the slide show in the front page – just apply the template “template-home” to your home page. Then make this page the static page of your site. To customize the slide show – simply replace the images in the images folder. Note that there are two sets of images: the larger image and the bottom bar. The active state and non-active state of the bottom bar matches the larger image. The Testimonials section in the template are actual posts under a category: testimonials. Simply create this category and start creating posts under it. The testimonial author works as the title for this section.

The Photo Gallery page is as simple as applying “photo gallery” to a page. The images in this gallery are automatically populated from your custom field thumbnails. So in order for this to populate – you must use thumbnails in your post.

Other Stuff

A custom login form is built in the header which is also jQuery powered. Once logged in will give you quick access to the dashboard, as well as quick “Edit” links after each post. The single post page includes an author information which feeds information from your user profile and Gravatar. So to utilize this section – your user information and gravatar must be filled out. The comments section support threading and pagination.

How to add links inside the Slideshow

In the template file called “template-home.php” is a section called “rotate” (means a div with an id named “rotate”). Within this rotate section, is a series of empty divs that have different ids – namely: fragment-1, fragment-2 and fragment-3. Even though these fragments are empty – they are styled with a background image in the stylesheet – so they appear that they have a large image.

You can enter anything inside these fragments as you wish (text, other images and even links).

Save the template and view

Now it’s totally up to you to change the background image, to fit the new link. It is also up to you to change the “style” of the link – to make it into a button, a large image – whatever you wish.
As mentioned, these div fragments are empty – so you can add anything you want.

Visit PsPrint Online Printing to get the best deals in commercial printing!