header.php with search and social icons built in - HTML Snipplr Social Repository

Revision: 53084

at November 13, 2011 01:50 by guitarman2uk

Initial Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION < 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
wp_enqueue_script('jquery');
if ( is_singular() && get_option( 'thread_comments' ) ) {
	wp_enqueue_script( 'comment-reply' );
}
wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<div id="main">
    <div class="cleared reset-box"></div>
   
    <div class="header">
    <div class="header-wrapper">
    <div class="header-inner">
        <div class="headerobject"><a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_bloginfo('stylesheet_directory'); ?>/images/header-object.png" alt="Soul Care Aesthetics covering Staffordshire and the West Midlands" title="Soul Care Aesthetics" /></a>
        
        </div>
      
        <!-- Contact Details -->
	<div id="contact">
	
	        <div id="search"> 
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> 
<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="art-searchbox" /> 
<input type="submit" id="searchbutton" value="SEARCH" /> 
</form>

</div> <!-- #end of search -->
	
    <div id="contact-areas"><h2>Soul Care Aesthetics</h2>Cheslyn Hay, Great Wyrley, Bloxwich, Essington, Cannock, Rugeley and Wolverhampton</br>
    <div id="contact-details"><span>Tel:</span> 07501 459 453</br><span>Email:</span> [email protected]
    </div> <!-- end of #contact-areas -->
    </div> <!-- end of #contact-details -->
        
        <div id="social">
        	<ul>
        		<li><a href="http://www.facebook.com" target="_blank" title="Facebook"><img src = '<?php bloginfo('template_directory'); ?>/images/facebook.png' alt = 'Picture' /></a></li>
        		<li><a href="http://www.google.com" target="_blank" title="Google"><img src = '<?php bloginfo('template_directory'); ?>/images/google.png' alt = 'Picture' /></a></li>
        		<li><a href="http://www.linkedin.com" target="_blank" title="LinkedIn"><img src = '<?php bloginfo('template_directory'); ?>/images/linkedin.png' alt = 'Picture' /></a></li>
        		<li><a href="http://www.google.com" target="_blank" title="RSS"><img src = '<?php bloginfo('template_directory'); ?>/images/rss.png' alt = 'Picture' /></a></li>
        	</ul>
        
        </div> <!-- end of #social -->
         </div> <!-- end #contact div -->
        
        <div class="logo">
        <?php if(theme_get_option('theme_header_show_headline')): ?>
        <h1 class="logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <?php endif; ?>
        <?php if(theme_get_option('theme_header_show_slogan')): ?>
            <h2 class="logo-text"><?php bloginfo('description'); ?></h2>
        <?php endif; ?>
        </div>
    </div>
    </div>
    </div>

    <div class="cleared reset-box"></div>
    <div class="nav">
    	<div class="nav-l"></div>
    	<div class="nav-r"></div>
        <div class="nav-outer">
        <div class="nav-wrapper">
        <div class="nav-inner">
    	<?php 
    		echo theme_get_menu(array(
    				'source' => theme_get_option('theme_menu_source'),
    				'depth' => theme_get_option('theme_menu_depth'),
    				'menu' => 'primary-menu',
    				'class' => 'hmenu'	
    			)
    		);
    	?>

        </div>
        </div>
        </div>
    </div>
    <div class="cleared reset-box"></div>
    <div class="sheet">
        <div class="sheet-cc"></div>
        <div class="sheet-body">
        
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>



CSS Here:
/*begin page content styles*/
#col1 {
	width: 60%;
	float: left;
}

#col2 {
	width: 36%;
	float: right;
	margin-left: 10px;
}

/* begin search */ 
#search { 
position: absolute;
	margin-top: 0;
	bottom: 175px;
} 

.searchbox { 
background:#FFF !important; 
color: #004b5c; 
font-weight: normal; 
padding:2px 0px 2px 2px; 
margin:0 2px 0 10px; 
border:1px solid #6B6B6B; 
width:140px;
	display: inline;
	position: relative;
	font-size: 10px;
} 

#searchbutton { 
font-weight: bold; 
background: #004b5c; 
color: #f1f6f5; 
margin:0; 
padding:1px 2px 1px 2px; 
border:1px solid #000000; 
display:inline; 
width:auto; 
cursor:pointer;
	position: relative;
	font-size: 10px;
} 

/* end Search */

div.staffname {
	padding-bottom: 6px;
	padding-top: 0;
}

div.blurb {
	margin-top: 10px;
}

#contact {
	width: 300px;
	position: absolute;
	left: 677px;
	height: 120px;
	margin-top: 88px;
}

div#contact-areas h2 {
	font-size: 16px;
	font-weight: bold;
	line-height: 23px;
}

div#contact-areas {
	display: inline;
	float: right;
	color: #004b5c;
	font: 12px/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: relative;
}

div#contact-details span {
	font-weight: bold;
	font-size: 12px;
}

div#contact-details {
	display: inline;
	float: right;
	width: 300px;
	right: 0;
	bottom: -15px;
	height: 10px;
	color: #004b5c;
	font: 17px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: relative;
}

#social {
	float: left;
	width: 200px;
	position: absolute;
	bottom: 120px;
}

#social ul {
	height: 50px;
	width: 50px;
	display: inline;
	position: relative;
}

#social ul li {
	float: left;
	height: 50px;
	margin: 0px;
	position: relative;
}

#social ul li a {
	float: left;
	height: 50px;
	margin: 0px;
	position: relative;
}

#social ul li a:hover {
	top: 5px;
}

#social img {
	float: left;
	height: 50px;
	margin: 0px;
	width: 50px;
}

#offers a img {
	padding: 0;
	margin: 0;
}

Initial URL

Initial Description

This is the header.php file from Soul Care Aesthetics - complete with CSS and social icons spaces

Initial Title

header.php with search and social icons built in

Initial Tags

css, php, header

Initial Language

HTML

Choose a language for easy browsing: