Advanced Search

header.php with search and social icons built in

/ Published in: HTML
Save to your folder(s)
This is the header.php file from Soul Care Aesthetics - complete with CSS and social icons spaces

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
  5. <title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
  6. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
  7. <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
  8. <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
  9. <?php if(WP_VERSION < 3.0): ?>
  10. <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
  11. <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
  12. <?php endif; ?>
  13. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  14. <?php
  15. remove_action('wp_head', 'wp_generator');
  16. wp_enqueue_script('jquery');
  17. if ( is_singular() && get_option( 'thread_comments' ) ) {
  18. 	wp_enqueue_script( 'comment-reply' );
  19. }
  20. wp_head(); ?>
  21. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
  22. </head>
  23. <body <?php if(function_exists('body_class')) body_class(); ?>>
  24. <div id="main">
  25.     <div class="cleared reset-box"></div>
  26.  
  27.     <div class="header">
  28.     <div class="header-wrapper">
  29.     <div class="header-inner">
  30.         <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>
  31.  
  32.         </div>
  33.  
  34.         <!-- Contact Details -->
  35. 	<div id="contact">
  36.  
  37. 	        <div id="search"> 
  38. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> 
  39. <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" /> 
  40. <input type="submit" id="searchbutton" value="SEARCH" /> 
  41. </form>
  42.  
  43. </div> <!-- #end of search -->
  44.  
  45.     <div id="contact-areas"><h2>Soul Care Aesthetics</h2>Cheslyn Hay, Great Wyrley, Bloxwich, Essington, Cannock, Rugeley and Wolverhampton</br>
  46.     <div id="contact-details"><span>Tel:</span> 07501 459 453</br><span>Email:</span> [email protected]
  47.     </div> <!-- end of #contact-areas -->
  48.     </div> <!-- end of #contact-details -->
  49.  
  50.         <div id="social">
  51.         	<ul>
  52.         		<li><a href="http://www.facebook.com" target="_blank" title="Facebook"><img src = '<?php bloginfo('template_directory'); ?>/images/facebook.png' alt = 'Picture' /></a></li>
  53.         		<li><a href="http://www.google.com" target="_blank" title="Google"><img src = '<?php bloginfo('template_directory'); ?>/images/google.png' alt = 'Picture' /></a></li>
  54.         		<li><a href="http://www.linkedin.com" target="_blank" title="LinkedIn"><img src = '<?php bloginfo('template_directory'); ?>/images/linkedin.png' alt = 'Picture' /></a></li>
  55.         		<li><a href="http://www.google.com" target="_blank" title="RSS"><img src = '<?php bloginfo('template_directory'); ?>/images/rss.png' alt = 'Picture' /></a></li>
  56.         	</ul>
  57.  
  58.         </div> <!-- end of #social -->
  59.          </div> <!-- end #contact div -->
  60.  
  61.         <div class="logo">
  62.         <?php if(theme_get_option('theme_header_show_headline')): ?>
  63.         <h1 class="logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
  64.         <?php endif; ?>
  65.         <?php if(theme_get_option('theme_header_show_slogan')): ?>
  66.             <h2 class="logo-text"><?php bloginfo('description'); ?></h2>
  67.         <?php endif; ?>
  68.         </div>
  69.     </div>
  70.     </div>
  71.     </div>
  72.  
  73.     <div class="cleared reset-box"></div>
  74.     <div class="nav">
  75.     	<div class="nav-l"></div>
  76.     	<div class="nav-r"></div>
  77.         <div class="nav-outer">
  78.         <div class="nav-wrapper">
  79.         <div class="nav-inner">
  80.     	<?php 
  81.     		echo theme_get_menu(array(
  82.     				'source' => theme_get_option('theme_menu_source'),
  83.     				'depth' => theme_get_option('theme_menu_depth'),
  84.     				'menu' => 'primary-menu',
  85.     				'class' => 'hmenu'	
  86.     			)
  87.     		);
  88.     	?>
  89.  
  90.         </div>
  91.         </div>
  92.         </div>
  93.     </div>
  94.     <div class="cleared reset-box"></div>
  95.     <div class="sheet">
  96.         <div class="sheet-cc"></div>
  97.         <div class="sheet-body">
  98.  
  99. <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
  100.  
  101.  
  102.  
  103. CSS Here:
  104. /*begin page content styles*/
  105. #col1 {
  106. 	width: 60%;
  107. 	float: left;
  108. }
  109.  
  110. #col2 {
  111. 	width: 36%;
  112. 	float: right;
  113. 	margin-left: 10px;
  114. }
  115.  
  116. /* begin search */ 
  117. #search { 
  118. position: absolute;
  119. 	margin-top: 0;
  120. 	bottom: 175px;
  121. } 
  122.  
  123. .searchbox { 
  124. background:#FFF !important; 
  125. color: #004b5c; 
  126. font-weight: normal; 
  127. padding:2px 0px 2px 2px; 
  128. margin:0 2px 0 10px; 
  129. border:1px solid #6B6B6B; 
  130. width:140px;
  131. 	display: inline;
  132. 	position: relative;
  133. 	font-size: 10px;
  134. } 
  135.  
  136. #searchbutton { 
  137. font-weight: bold; 
  138. background: #004b5c; 
  139. color: #f1f6f5; 
  140. margin:0; 
  141. padding:1px 2px 1px 2px; 
  142. border:1px solid #000000; 
  143. display:inline; 
  144. width:auto; 
  145. cursor:pointer;
  146. 	position: relative;
  147. 	font-size: 10px;
  148. } 
  149.  
  150. /* end Search */
  151.  
  152. div.staffname {
  153. 	padding-bottom: 6px;
  154. 	padding-top: 0;
  155. }
  156.  
  157. div.blurb {
  158. 	margin-top: 10px;
  159. }
  160.  
  161. #contact {
  162. 	width: 300px;
  163. 	position: absolute;
  164. 	left: 677px;
  165. 	height: 120px;
  166. 	margin-top: 88px;
  167. }
  168.  
  169. div#contact-areas h2 {
  170. 	font-size: 16px;
  171. 	font-weight: bold;
  172. 	line-height: 23px;
  173. }
  174.  
  175. div#contact-areas {
  176. 	display: inline;
  177. 	float: right;
  178. 	color: #004b5c;
  179. 	font: 12px/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  180. 	position: relative;
  181. }
  182.  
  183. div#contact-details span {
  184. 	font-weight: bold;
  185. 	font-size: 12px;
  186. }
  187.  
  188. div#contact-details {
  189. 	display: inline;
  190. 	float: right;
  191. 	width: 300px;
  192. 	right: 0;
  193. 	bottom: -15px;
  194. 	height: 10px;
  195. 	color: #004b5c;
  196. 	font: 17px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  197. 	position: relative;
  198. }
  199.  
  200. #social {
  201. 	float: left;
  202. 	width: 200px;
  203. 	position: absolute;
  204. 	bottom: 120px;
  205. }
  206.  
  207. #social ul {
  208. 	height: 50px;
  209. 	width: 50px;
  210. 	display: inline;
  211. 	position: relative;
  212. }
  213.  
  214. #social ul li {
  215. 	float: left;
  216. 	height: 50px;
  217. 	margin: 0px;
  218. 	position: relative;
  219. }
  220.  
  221. #social ul li a {
  222. 	float: left;
  223. 	height: 50px;
  224. 	margin: 0px;
  225. 	position: relative;
  226. }
  227.  
  228. #social ul li a:hover {
  229. 	top: 5px;
  230. }
  231.  
  232. #social img {
  233. 	float: left;
  234. 	height: 50px;
  235. 	margin: 0px;
  236. 	width: 50px;
  237. }
  238.  
  239. #offers a img {
  240. 	padding: 0;
  241. 	margin: 0;
  242. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.