Anda di halaman 1dari 3

Step 1 - Remove CSS related to hover overs

Appearance >> Editor >> Edit Style.css >> Under section 2.7 Portfolio, replace entire section with the follow CSS (you may use custom CSS to do so or remember to backup your previous CSS)

/* 2.7 Portfolio */#portfolio { padding: 20px 0; border-top: 1px solid #C2C2BE; border-bottom: 1px solid #DFDDDC; border-top-color:rgba(0,0,0,.2); border-bottom-color: rgba(0,0,0,.1); overflow: hidden; }.fullwidth #portfolio { border:none; padding:0; }

ol.portfolio, ol.dribbbles { list-style-type:none; margin:0; }ol.portfolio li, ol.dribbbles li { margin: 10px; width:

220px; float: left; }

.dribbbles li{font-size:15px;position:relative;width:220px;padding:0;margin:0 0 1.5em 0;}.dribbbles .dribbble{font-family:"Helvetica Nueue", Helvetica, Arial, sans- serif;position:relative;clear:left;overflow:hidden;padding:0 0 10px 0;background:url(images/dribbblesprite.png) no-repeat -10px -480px;}.dribbbles .dribbble-shot{padding:10px;background:url(images/dribbblesprite.png) no- repeat -10px -330px;}.dribbbles .dribbble-link{position:relative;z-index:2;}.dribbbles

img{margin:0;width:200px;height:auto;}

.dribbbles strong{display:block;font-weight:bold;font-size:1.4em;line-height:1.2em;color:#126661; display:none;} .dribbbles .dim{font-weight:bold;color:#666;}.dribbbles em{position: absolute;bottom:11px;left:10px;font- size:1em;line-height:1em;font-weight:normal;font-style:normal;display:none;}.dribbbles .dribbble-

img{width:200px;height:150px;overflow:hidden;}

Step 2 - Add custom link field in theme-options.php

This will enable your portfolio items to be able to link to any url when clicked.

Appearance >> Editor >> Edit theme-options.php >> Add the following code (in bold) before //Add extra metaboxes through function (the code is located all the way down)

$woo_metaboxes[] = array ( "name" => "link","std" => "","label" => "Custom Link URL",

"type" => "text","desc" => "This is the custom link url for Portfolio Images.");

// Add extra metaboxes through functionif ( function_exists("woo_metaboxes_add") )$woo_metaboxes =

woo_metaboxes_add($woo_metaboxes);

if ( get_option('woo_custom_template') != $woo_metaboxes) update_option('woo_custom_template',

$woo_metaboxes);

Step 3 - Edit Header.php & tempalte-portfolio.php to trigger lightbox

This step will make sure any portfolio items when clicked will trigger lightbox.

Appearance >> Editor >> Edit header.php >> Replace content of <div class="portfolio- img dribbble-img"> with: (the code is located all the way down)

<div class="portfolio-img dribbble-img">

<a href="<?php echo get_post_meta($id, "link", true); ?>" class="dribble-link" rel="lightbox"><?php woo_image('key=portfolio- image&width=200&height=150&link=img'); ?> </a>

<a href="<?php the_permalink(); ?>" class="dribbble-over"><strong><?php the_title(); ?></strong> <!-- <span class="dim">Your Player Name</span> --><em><?php the_time( get_option( 'date_format' ) ); ?></em> </a>

</div>

Appearance >> Editor >> Edit template-portfolio.php >> Replace content of <div class="portfolio-img dribbble-img"> with: (the code is located all the way down)

<div class="portfolio-img dribbble-img">

<a href="<?php echo get_post_meta($id, "link", true); ?>" class="dribble-link" rel="lightbox"><?php woo_image('key=portfolio- image&width=200&height=150&link=img'); ?> </a>

<!-- <span class="dim">Your Player Name</span> --><em><?php the_time( get_option( 'date_format' ) ); ?></em>

</div>

Step 4 – Finish. Putting the pieces together

It’s done! Now in order to enjoy your newly integrated lightbox.

Under every portfolio item, you have to custom link the item to the url of the image uploaded. It’s manual work but it works!

Step 4 – Finish. Putting the pieces together It’s done! Now in order to enjoy your