Skip to content

Instantly share code, notes, and snippets.

@sevenspark
Created December 20, 2011 04:58
Show Gist options
  • Save sevenspark/1500326 to your computer and use it in GitHub Desktop.
Save sevenspark/1500326 to your computer and use it in GitHub Desktop.
ThemeSwitcher + Preview
/* Preview hover styles */
#theme_list ul li {
position:relative;
}
.product-preview{
position:absolute;
left:100%;
top:-1px;
margin-left:1px;
background:#222;
padding:3px;
display:none;
}
.product-preview img{
display:block;
opacity:0;
}
#theme_list ul li a:hover .product-preview{
display:block;
}
#theme_list ul li a:hover .product-preview img{
display:block;
opacity:1;
}
/* Product Type Styles */
.product-type{
position:absolute;
right:6px;
top:8px;
padding:3px;
color: #222;
background: #e6e6e6; /* Old browsers */
background: #e6e6e6 -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(0,0,0,.1) 100%); /* FF3.6+ */
background: #e6e6e6 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(0,0,0,.1))); /* Chrome,Safari4+ */
background: #e6e6e6 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Chrome10+,Safari5.1+ */
background: #e6e6e6 -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Opera11.10+ */
background: #e6e6e6 -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* IE10+ */
background: #e6e6e6 linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* W3C */
background: #e6e6e6 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Chrome10+,Safari5.1+ */
box-shadow:inset 0px 1px 1px rgba(255,255,255,.6);
text-transform:uppercase;
font-size:9px;
opacity:.9;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
#theme_list ul li a:hover .product-type{
opacity:1;
}
<?php
//Theme Array
$theme_array = array (
'Agility-HTML' => array (
"id" => "Agility",
'type' => "Responsive HTML5",
"url" => "http://agility-html.sevenspark.com",
"themeforest" => "http://themeforest.net/item/agility-responsive-minimal-html5/1054063",
"preview" => "agility_html.jpg",
"mobile_redirect" => true,
),
'UberMenu' => array(
"id" => "UberMenu - Mega Menu",
"type" => "WP Plugin",
"url" => "http://wpmegamenu.com",
"themeforest" => "http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703",
"preview" => "http://0.s3.envato.com/files/1967560/megamenupreview.1.1.2.jpg"
),
'ScrollCheckpoint' => array(
"id" => "Scroll Checkpoint",
"type" => "WP Plugin",
"url" => "http://scrollcheckpoint.sevenspark.com",
"themeforest" => "http://codecanyon.net/item/scroll-checkpoint-animated-content-panel-plugin/234882",
"preview" => "scroll_checkpoint.jpg",
),
'MenuManager' => array(
"id" => "Menu Management Enhancer",
"type" => "WP Plugin",
"url" => "http://menumanager.sevenspark.com",
"themeforest" => "http://codecanyon.net/item/menu-management-enhancer-for-wordpress/529353",
"preview" => "menu_manager.jpg",
),
);
//List Loop
?>
<ul>
<?php
foreach ($theme_array as $i => $theme) :
echo '<li><a href="#" rel="' . $theme['url'] . ',' . $theme['themeforest'] . '?ref=sevenspark">' .
ucfirst($theme['id']) .
' <span class="product-type">'.$theme['type'].'</span>';
if(isset($theme['preview'])){
echo '<span class="product-preview"><img src="';
if(strpos($theme['preview'], 'http://') === false){
echo 'product_previews/'.$theme['preview'];
}
else echo $theme['preview'];
echo '" /></span>';
}
echo '</a></li>';
endforeach;
?>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment