Skip to content

Instantly share code, notes, and snippets.

@Pedro147

Pedro147/social roll css

Last active August 29, 2015 13:57
Show Gist options
  • Save Pedro147/9560843 to your computer and use it in GitHub Desktop.
Save Pedro147/9560843 to your computer and use it in GitHub Desktop.
Download ZIP
(Final) social roll header php & css code
Raw
social roll css
.social-roll {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/youtube-grey.png');
height: 48px;
width: 48px;
margin: 20px;
float: right;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-roll:hover {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/youtube-colour.png');
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.social-googleplus {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/googleplus-grey.png');
height: 48px;
width: 48px;
margin: 20px;
float: right;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-googleplus:hover {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/googleplus-colour.png');
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.social-arduino {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/arduino-grey.png');
height: 48px;
width: 48px;
margin: 20px;
float: right;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-arduino:hover {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/arduino-colour.png');
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.social-reddit {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/reddit-grey.png');
height: 48px;
width: 48px;
margin: 20px;
float: right;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-reddit:hover {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/reddit-colour.png');
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.social-facebook{
background-image: url('http://pedrosdigitalsolutions.com/wp-content/facebook-grey.png');
height: 48px;
width: 48px;
margin: 20px;
float: right;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-facebook:hover {
background-image: url('http://pedrosdigitalsolutions.com/wp-content/facebook-colour.png');
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
Raw
social roll header php
<?php
// Exit if accessed directly
if( !defined( 'ABSPATH' ) ) {
exit;
}
/**
* Header Template
*
*
* @file header.php
* @package Responsive
* @author Emil Uzelac
* @copyright 2003 - 2014 CyberChimps
* @license license.txt
* @version Release: 1.3
* @filesource wp-content/themes/responsive/header.php
* @link http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
* @since available since Release 1.0
*/
?>
<!doctype html>
<!--[if !IE]>
<html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title( '&#124;', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
<link rel="shortcut icon" href="http://www.pedrosdigitalsolutions.com/wp-content/cheat_1.ico" type="image/x-icon">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php responsive_container(); // before container hook ?>
<div id="container" class="hfeed">
<?php responsive_header(); // before header hook ?>
<div class="skip-container cf">
<a class="skip-link screen-reader-text focusable" href="#main"><?php _e( '&darr; Skip to Main Content', 'responsive' ); ?></a>
</div><!-- .skip-container -->
<div id="header">
<?php responsive_header_top(); // before header content hook ?>
<a href="http://www.youtube.com/user/MrPnew1"_blank">
<div class="social-roll"></div><div class="social-roll:hover"</div>
</a>
<a href="https://plus.google.com/112528303698714189854/posts"_blank">
<div class="social-googleplus"></div><div class="social-googleplus:hover"</div>
</a>
<a href="http://forum.arduino.cc/"_blank">
<div class="social-arduino"></div><div class="social-arduino:hover"</div>
</a>
<a href="http://www.reddit.com/r/arduino"_blank">
<div class="social-reddit"></div><div class="social-reddit:hover"</div>
</a>
<a href="https://www.facebook.com/"_blank">
<div class="social-facebook"></div><div class="social-facebook:hover"</div>
</a>
<?php if( has_nav_menu( 'top-menu', 'responsive' ) ) { ?>
<?php wp_nav_menu( array(
'container' => '',
'fallback_cb' => false,
'menu_class' => 'top-menu',
'theme_location' => 'top-menu'
)
);
?>
<?php } ?>
<?php responsive_in_header(); // header hook ?>
<?php if( get_header_image() != '' ) : ?>
<div id="logo">
<a href="<?php echo home_url( '/' ); ?>"><img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if( !get_header_image() ) : ?>
<div id="logo">
<span class="site-name"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
<span class="site-description"><?php bloginfo( 'description' ); ?></span>
</div><!-- end of #logo -->
<?php endif; // header image was removed (again) ?>
<?php get_sidebar( 'top' ); ?>
<?php wp_nav_menu( array(
'container' => 'div',
'container_class' => 'main-nav',
'fallback_cb' => 'responsive_fallback_menu',
'theme_location' => 'header-menu'
)
);
?>
<?php if( has_nav_menu( 'sub-header-menu', 'responsive' ) ) { ?>
<?php wp_nav_menu( array(
'container' => '',
'menu_class' => 'sub-header-menu',
'theme_location' => 'sub-header-menu'
)
);
?>
<?php } ?>
<?php responsive_header_bottom(); // after header content hook ?>
</div><!-- end of #header -->
<?php responsive_header_end(); // after header container hook ?>
<?php responsive_wrapper(); // before wrapper container hook ?>
<div id="wrapper" class="clearfix">
<?php responsive_wrapper_top(); // before wrapper content hook ?>
<?php responsive_in_wrapper(); // wrapper hook ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment