Freebie: The Web Factory – an astonishing WordPress based PSD template

The Web Factory - Homepage

After a bit of absence around the blog, I may announce the slowly but steady come-back of our blog via an excellent freebie: The Web Factory. This is a free PSD template with a focus to WP theme integration. It can be used as a company website or why not, with a bit of creativity, it can be transformed to anything you want.

I hope you will enjoy it and if you do don’t forget to share it with you connections. WDC would really appreciate it!

Download

Inspiration: League of Legends game artworks

League of Legends

Hello WDC readers. Need some inspiration for you work? Let’s find some today from game artworks. Following we gonna present you an inspirational roundup from a trending game called “League of Legends”. Maybe some of you are familiar with this game but anyhow the bottom line is the art and inspiration here.

These are fan artworks, so all the credits go to these excellent and talented artists. Enjoy this article and don’t forget to share it!

Freebie: Usermenu design

Usermenu PSD

Hello WDC readers. Today we gonna offer you a PSD freebie of an excellent usermenu. This design was inspired by the main navigation menu from the official page of “Apple” and we really hope that it will help you out in your next project. Let us have your feedback in the comment section and please don’t forget to spread the word if you enjoy this.

The archive contains 3 PSD files of the menu (800×40 px) in 3 color palletes (grey, blue and brown). You are free to use it for any purpose (free or commercial). Either way, we would appreciate a link back to our site. Enjoy and stay tuned for more excellent resource!

Download

10 remarkable female web designers

Claire Baxter

We can all agree that web design can be categorized as an art form, so we can assume that it can be strongly linked to the adjective “beautiful”. And what can be more beautiful then a piece of art handcrafted by the “beautiful gender”. Their creativity is out of the ordinary, the attention to details and hard work make every design an unique and outstanding piece of art.

To quote from a famous national author “we love them because they smile at every child of the street [...] we love them because of their accessories which they wear by some rules known only by them [...] we love them because they put accent on their make-up like an artist does with his masterpiece [...] we love them because they love gossip [...] we love them because they play games without the care of who will win” - Mircea Cartarescu.

And before we continue to our roundup let us add that we love them, because of their creativity. Enjoy this article!

1. Claire Baxter

 

2. Letícia Motta

 

3. Mia Pallas

 

4. Lauren Thompson

 

5. Larissa Meek

 

6. Nicole Hanusek

 

7. Melissa Hie

 

8. Marija Zaric

 

9. Meagan Fisher

 

10. Naomi Atkinson

How to set a YouTube video as your website background

Youtube video as website background

Browsing GitHub a while ago, we came across an excellent script which can really spice up any website. How would you like to add a YouTube video as your website background? Or maybe you just want an awesome header for you website? Sure, why not … Embed a YouTube video directly as background.

Why is this script so excellent? It’s just great, you can free your creative side, you can accomplish great things with it and of course it’s cross-browser compatible (from FireFox to Chrome,  Safari and Opera, and all Internet Explorer versions – yes, even IE6; not that we care that much about it, right?).  Now let’s into it.

About

The official name of this script is “jquery.mb.YTPlayer“ is a jQuery component that let you play a Youtube® movie in a chromeless player and use a movie as background of your HTML page.

Browser support:

  • Mozilla Firefox 2+
  • Google Chrome
  • Opera
  • Safari
  • IE 6+

Dependencies

  • jquery.metadata.js

The JS call

$(function(){
    $(".movie").mb_YTPlayer();
});

HTML constructor

<a id="bgndVideo" href="http://www.youtube.com/watch?v=uG2tV-X5NiQ"></a>

Meta data settings

*metadata are parameters setted in the class attribute of the TAG.

  • opacity: (int) 0 → 1;
  • isBgndMovie: {width:‘1990’,mute:false} // or false or true (in this case the movie will be width: ‘100%’ and mute:true by default);
  • ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
  • quality: ‘default’ // or “small”, “medium”, “large”, “hd720”; (not implemented yet);
  • muteSound: true // or false (not implemented yet);
  • hasControls: true // or false (not implemented yet);
  • bufferImg: (string) Path to an image you whant to show while buffering;
  • ID: (string) the ID of the DOM element where you want the video background; if not specified it takes the “body”.

Using jquery.mb.YTPlayer

To initialize a YTPlayer as simple player:

  • set the meta data isBgndMovie of A tag to false;
  • set as HREF the url of the Youtube movie;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as background:

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute and the quality as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as element background (from v. 1.2.1):

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute, the quality and the ID of the element you want as target of the background movie as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer().

Download, Demo and Links

Finally, we have setup for 2 very simple demos of this spectacular jQuery component and a downloadable *.zip file to have the code prepared for you.

Also, here are some useful links:

We hope you will enjoy this component and once you implement it somewhere in your projects we would love to take a look at it. So let us know via de comment section your projects URL or your feedback, questions and so on. Also don’t forget to share with your friends if you like this and stay tuned for more awesomeness on WDC.

Download

WordPress plugin: Latest Tweets Tooltip

Latest Tweet Tooltip

We are going to start our “projects” series today with an experiment related to Twitter and WordPress, a free plugin which will make your website more engaging and certainly will stand out of the crowd. WebDesignCrate proudly present a new WordPress plugin: Latest Tweets Tooltip.

About

“Latest Tweets Tooltip” or just simply LTT is a wordpress plugin which will allow you to show the latest tweets about a certain word or phrase in a draggable and resizable jQuery tooltip window. It’s really easy to install and use it and the most important thing, it will bring some user interactivity to your website or blog.

Installation

1. Download and extract the latest-tweets-tooltip.zip archive to your /wp-content/plugins/ directory (or simple use the WordPress admin panel and upload it there: Plugins -> Add New)

2. Activate the plugin from your admin panel (Plugins)

3. To use it on a word or phrase just include the word/phrase between the shortcodes [ltt] and [/ltt]

[ltt]this is a phrase[/ltt]

Version, Credits and Further information

This is the first stable version of the plugin (1.0.0). It has been tested on WordPress 3.1 along with some widely used and popular WP plugins. From our tests, this plugin should work perfectly with any other plugins. If you find any bugs or problems please don’t forget to report them using the comment section bellow. The code which powers this excellent plugin (jQuery based) was provided by CODY using the jQuery Twitter Search Plugin. The WP port it’s our way to thank you our reader for following our blog. Enjoy it and don’t forget to share it with other!

Rate this plugin on the official WordPress Plugin Directory

NOTE: Some user have reported some small issues regarding the plugin. The most of them are encountered because of the main wrapper div ID. The div ID used by the plugin is the most common one used by WP themes (see ltt.php line 52)

<script type="text/javascript">// <![CDATA[
$(function() {
$('#content').find('.twitter_search').twitterpopup();
});
// ]]></script>

If you have this problem try change the #content definition to your wrapper’s ID. For any support related issues don’t hesitate to use the comment section of this article.

Download

Magento: Display related products block on checkout step

Related products in cart - Magento

Let’s show some love for the Magento developers with a quick but really useful tip: How to display a related products block on checkout step, or more precisely how to a show related products block on the cart view (first step of the checkout process).

1.) Edit the cart.phtml file located at /app/design/frontend/your_template/default/template/checkout

2.) Find getChildHtml(‘crosssell’) ?>

3.) Add the following code right before:

<!-- Related products block START -->
<div>
<?php
	$array_added_product = array();
	$total_product= "";
	$last_product= "";
?>

<?php foreach($this->getItems() as $_item):
	$array_added_product[]=$_item->getProductId();?>
<?php endforeach ?>

<?php
	//print_r($array_added_product);
	$total_product=sizeof($array_added_product);
	//echo "<br>".$total_product;
	if($total_product > 0){
		$last_product=$array_added_product[($total_product-1)];
	}
?>

<?php
	$nProducts = $total_product;
	$_product = Mage::getModel('catalog/product')->load($total_product-1);
	$ids = array();
		while ((count($ids) < 5) && ($nProducts > 0)){
			$nProducts --;
			$last_product=$array_added_product[($nProducts)];
			$_product1 = Mage::getModel('catalog/product')->load($last_product);

			if (!$_product1->hasRelatedProductIds()) {
				foreach ($_product1->getRelatedProducts() as $product) {
					if (count($ids) < 5) $ids[] = $product->getId();
					else break;
				}
				$_product->setRelatedProductIds($ids);
			}
		}
?>

<?php $product_per_row=5; //how many product show in a row ?>

<table width="100%" align="center" cellpadding="0" cellspacing="0" style="margin-bottom:10px; border:1px solid #dbdbdb;">
<tr>
	<td  width="100%" align="left" valign="middle" colspan="<?php echo $product_per_row; ?>">Related Items</td>
</tr>

<?php
$product_counter=0;
foreach ($_product->getData('related_product_ids') as $r_productid) {
$_product = Mage::getModel('catalog/product')->load($r_productid);
?>

<?php if(($product_counter%$product_per_row)==0){ ?>
<tr>
<?php } ?>

<td valign="top" style="padding:15px;" width="21%">
	<div>
		<a href="<?php echo $_product->getProductUrl() ?>" style="text-decoration:none;margin-left:30px;text-align:center;">
		<img src="<? echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(50, 50); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="50" />
		</a>
		<a href="<?php echo $_product->getProductUrl() ?>" style="text-decoration:none; font-size:11px; color:#0076a3; font-weight:bold; text-align:left; ">
		<br />
		<?php
		if (strlen($this->helper('catalog/output')->productAttribute($_product, $_product->getName(), 'name')) > 32) {echo substr($this->helper('catalog/output')->productAttribute($_product, $_product->getName(), 'name'),0,32)."...";}
		else echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName(), 'name');
		?>
		</a>
		<div style="font-size:11px; color:#6b6a6a; font-weight:bold; text-align:left;margin-top:7px;">
		List:<?php $price_mine= (float) $_product->getPrice();
		$price_mine= number_format($price_mine,2);
		?>
		<?php echo "$". $price_mine; ?>
		</div>
		<div style="font-size:11px; color:#ff5907; font-weight:bold; text-align:left;">
		Our Price:<?php $final_price= (float) $_product->getFinalPrice();
		$final_price= number_format($final_price,2);
		?>
		<?php echo "$". $final_price; ?>
		</div>
		<div style="margin-top:7px; text-align:left; font-size:11px !important;text-decoration:underline;color:#959595;">
		<a href="<?php echo $_product->getProductUrl() ?>" title="more info">more info</a>
		</div>
	</div>
</td>
<?php
$product_counter++;
if(($product_counter%$product_per_row)==0){
?>
</tr>
<?php } ?>
<?php } ?>
</table>
</div>
<!-- Related products block END -->

Of course you can always alter the code to achieve what you exactly want. And before rushing to refresh the page to see if the code snippet works double check if the products added to the cart have any related items configured.

Good luck, share this article if you find it useful and stay tunned for more CMS goodies!