Skip to content

Instantly share code, notes, and snippets.

@syahrasi
Forked from sevenspark/styles.css
Created December 20, 2011 15:47
Show Gist options
  • Save syahrasi/1502018 to your computer and use it in GitHub Desktop.
Save syahrasi/1502018 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;
}
<?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