Skip to content

Instantly share code, notes, and snippets.

@Pedro147

Pedro147/social- roll modified HTML child-theme header php

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pedro147/9446595 to your computer and use it in GitHub Desktop.
Save Pedro147/9446595 to your computer and use it in GitHub Desktop.
Download ZIP
social-roll / social-popout & social-slide css and header php files
Raw
social- roll modified HTML child-theme header php
?>
<!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">
<link rel="shortcut icon" href="http://www.pedrosdigitalsolutions.com/wp-content/cheat_1.ico" type="image/x-icon">
<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' ); ?>"/>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- This is where I added a custom header container as shown here - http://www.youtube.com/watch?v=TkmRs-6zkQE-->
<div id= "pedros-header-container">
<?php responsive_header(); // before header hook ?>
<div id="header">
<?php responsive_header_top(); // before header content hook ?>
<a href="http://www.youtube.com/watch?v=XouWDnNZpfs"_blank">
<div class="social-roll"><img src="http://pedrosdigitalsolutions.com/wp-content/youtube.png" /></div>
</a>
<a href="https://plus.google.com/112528303698714189854/posts"_blank">
<div class="social-roll"><img src="http://pedrosdigitalsolutions.com/wp-content/google.png" /></div>
</a>
<a href="https://www.facebook.com/peter.newman.794"_blank">
<div class="social-roll"><img src="http://pedrosdigitalsolutions.com/wp-content/facebook.png" /></div>
</a>
<a href="http://forum.arduino.cc/"_blank">
<div class="social-roll"><img src="http://pedrosdigitalsolutions.com/wp-content/arduino.png" /></div>
</a>
<a href="http://www.reddit.com/r/arduino"_blank">
<div class="social-roll"><img src="http://pedrosdigitalsolutions.com/wp-content/reddit.png" /></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_container(); // before container hook ?>
<div id="container" class="hfeed">
<?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 ?>
Raw
social-popout Css posted into Responsive child-theme style css
.social-popout {
padding: 0;
height: 48px;
width: 48px;
margin: 15px;
float: right;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img {
border-radius: 50%;
margin: 8px 4px;
width: 100%;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.social-popout img:hover {
margin: 0px;
box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.5);
Raw
social-popout modified HTML child-theme header php
?>
<!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">
<link rel="shortcut icon" href="http://www.pedrosdigitalsolutions.com/wp-content/cheat_1.ico" type="image/x-icon">
<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' ); ?>"/>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- This is where I added a custom header container as shown here - http://www.youtube.com/watch?v=TkmRs-6zkQE-->
<div id= "pedros-header-container">
<?php responsive_header(); // before header hook ?>
<div id="header">
<?php responsive_header_top(); // before header content hook ?>
<a href="http://www.youtube.com/watch?v=XouWDnNZpfs"_blank">
<div class="social-popout"><img src="http://pedrosdigitalsolutions.com/wp-content/youtube.png" /></div>
</a>
<a href="https://plus.google.com/112528303698714189854/posts"_blank">
<div class="social-popout"><img src="http://pedrosdigitalsolutions.com/wp-content/google.png" /></div>
</a>
<a href="https://www.facebook.com/peter.newman.794"_blank">
<div class="social-popout"><img src="http://pedrosdigitalsolutions.com/wp-content/facebook.png" /></div>
</a>
<a href="http://forum.arduino.cc/"_blank">
<div class="social-popout"><img src="http://pedrosdigitalsolutions.com/wp-content/arduino.png" /></div>
</a>
<a href="http://www.reddit.com/r/arduino"_blank">
<div class="social-popout"><img src="http://pedrosdigitalsolutions.com/wp-content/reddit.png" /></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_container(); // before container hook ?>
<div id="container" class="hfeed">
<?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 ?>
Raw
social-roll Css posted into Responsive child-theme style css
.social-roll {
background-image: url('path/to/gray/image.png');
height: 48px;
width: 48px;
margin: 10px;
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('path/to/color/image.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-slide Css posted into Responsive child-theme style css
.social-slide {
height: 48px;
width: 48px;
margin: 20px 10px;
float: right;
-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-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.google-hover {
background-image: url('http://www.pedroduino.com/wp-content/google-hover.png');
}
.facebook-hover {
background-image: url('http://www.pedroduino.com/wp-content/facebook-hover.png');
}
.youtube-hover {
background-image: url('http://www.pedroduino.com/wp-content/youtube-hover.png');
}
.arduino-hover {
background-image: url('http://www.pedroduino.com/wp-content/arduino-hover.png');
}
.reddit-hover {
background-image: url('http://www.pedroduino.com/wp-content/reddit-hover.png');
}
Raw
social-slide modified HTML child-theme 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">
<link rel="shortcut icon" href="http://www.pedroduino.com/wp-content/favicon.ico" type="image/x-icon">
<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' ); ?>"/>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- This is where I added a custom header container as shown here - http://www.youtube.com/watch?v=TkmRs-6zkQE-->
<div id= "pedros-header-container">
<?php responsive_header(); // before header hook ?>
<div id="header">
<?php responsive_header_top(); // before header content hook ?>
<a href="http://www.youtube.com/watch?v=XouWDnNZpfs" target="_blank"><div class="youtube-hover social-slide"></div></a>
<a href="https://www.facebook.com/peter.newman.794" target="_blank"><div class="facebook-hover social-slide"></div></a>
<a href="https://plus.google.com/112528303698714189854/posts" target="_blank"><div class="google-hover social-slide"></div></a>
<a href="http://forum.arduino.cc/" target="_blank"><div class="arduino-hover social-slide"></div></a>
<a href="http://www.reddit.com/r/arduino" target="_blank"><div class="reddit-hover social-slide"></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_container(); // before container hook ?>
<div id="container" class="hfeed">
<?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