search box alignment

ausdigitalmedia · August 14, 2013

Hi all.

I am trying to have the search box aligned under the cart area top right of this site

thewattletree.com

I have placed the search box code inside a dv the same as the cart item but its still not happening for me.

Can anyone help?

In case you cant tell I am a php code novice.

Here's the code for the header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">

<title><?php woo_title(); ?></title>
<?php woo_meta(); ?>
<?php global $woo_options; ?>

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( $woo_options[ 'woo_feed_url' ] ) { echo $woo_options['woo_feed_url']; } else { echo get_bloginfo_rss( 'rss2_url' ); } ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
      
<?php wp_head(); ?>
<?php woo_head(); ?>


</head>

         </div>

<body <?php body_class(); ?>>
<?php global $woocommerce; ?>
 

<?php woo_top(); ?>

<div id="wrapper">


	<?php if ( function_exists( 'has_nav_menu') && has_nav_menu( 'top-menu' ) ) { ?>
    
	
	<h1> </h1>
	<div id="top">
		<div class="col-full">
        
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
	  </div>
</div><!-- /#top -->
	
    <?php } ?>
    
    <div id="custom">
	<?php global $woocommerce; ?>
 
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a><form role="search" method="get" id="searchform" action="http://www.thewattletree.com/">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
     <div>      
	<div id="header-container"> 
    
          
		<div id="header" class="col-full">
        
 		       
			<div id="logo">
		       
			<?php if ($woo_options[ 'woo_texttitle' ] <> "true") : $logo = $woo_options['woo_logo']; ?>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ); ?>">
					<img src="<?php if ( $logo ) echo esc_url( $logo ); else { echo esc_url( get_template_directory_uri() . '/images/logo.png' ); } ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
				</a>
	        <?php endif; ?> 
	        
	        <?php if( is_singular() && !is_front_page() ) : ?>
				<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></span>
	        <?php else : ?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name' ); ?></a></h1>
	        <?php endif; ?>
				<span class="site-description"><?php bloginfo( 'description' ); ?></span>
		      	
			</div><!-- /#logo -->
		       
			<div id="navigation" class="fr"> 
	
				<div class="nav">

				<?php
				if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
					wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'theme_location' => 'primary-menu' ) );
				} else {
				?>
		        <ul>
					<?php 
		        	if ( isset( $woo_options['woo_custom_nav_menu'] ) AND $woo_options['woo_custom_nav_menu'] == 'true' ) {
		        		if ( function_exists( 'woo_custom_navigation_output' ) )
							woo_custom_navigation_output();
		
					} else { ?>
		            	
			            <?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
			            <li class="<?php echo esc_attr( $highlight ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
			            <?php 
			    			wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude='); 
		
					}
					?>
		        </ul>
		        <?php } ?>
		      	</div><!-- /.nav -->
	    	    
		    </div><!-- /#navigation -->  
		    <div class="fix"></div>
       
		</div><!-- /#header -->
</div><!-- /#header-container -->

here's the code for the css

/* 
WOO CUSTOM STYLESHEET
---------------------

Instructions:

Add your custom styles in this file instead of style.css so it 
is easier to update the theme. Simply copy an existing style 
from style.css to this file, and modify it to your liking. */

body, #footer-container {
    background-image: url("http://www.thewattletree.com/wp-content/uploads/2013/06/bg-soft-white1.jpg");
}

p.demo_store {
    background: none repeat scroll 0 0 #CCCC99;
    color: #9D725E;
    left: 0;
    padding: 0.3em 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 999999;
}
a, #comments .comment-head .name, .slide-content .title {
    color: #9D725E;
}
#footer {
    color: #9D725E;
}
h1, h2, h3, h4, h5, h6, .widget h3, .post .title, .nav a, .section .post .title, .archive_header {
    font-family: 'Lora',arial,sans-serif;
	font-weight: lighter;
	text-align: left;

}
.nav a {
    color: #9D725E;
}
#footer-widgets-container {
    background-image: url("http://www.thewattletree.com/wp-content/uploads/2013/06/bg-soft-white1.jpg");
}
#footer-widgets .widget h3 {
    border-color: #263848;
    color: #9D725E;
}
.nav a {
    color: #9D725E;
}
#slides, #title-container {
    background-image: url("http://www.thewattletree.com/wp-content/uploads/2013/06/bg-soft-white1.jpg");
    border-bottom: 1px solid #D4DCE2;
    border-top: 1px solid #DCE4EB;
}
#main h2.section-title {
    font-size: 1.0em;
    font-weight: lighter;
    line-height: 1em;
    margin-bottom: 20px;
}
a:hover, .archive_header, .post .title, .page .title, h1.title, .post .title a:link, .post .title a:visited, .single .title a:link, .single .title a:visited {
    color: #9D725E;
}
.post .title a:link, .post .title a:visited, .single .title a:link, .single .title a:visited {
    color: #9D725E;
}
h1, h2, h3, h4, h5, h6 {
    color: #9D725E;
    font-family: 'Lora',arial,serif;
    font-weight: lighter;
    line-height: 1.1em;
    margin: 0;
}
.section .post .title {
    font: 16px/22px 'Lora',sans-serif;
}
#portfolio .post h3 {
    font-size: 16px;
    font-weight: regular;
    text-align: center;
}
#portfolio .post h3 {
    font-size: 15px;
    font-weight: regular;
}
.nav li ul li a {
    background: none repeat scroll 0 0 transparent;
    color: #9D725E !important;
    font-size: 0.8em;
    padding: 8px 15px;
    width: 150px;
}
.post-type-archive-product #main {width:100% !important}

.post-type-archive-product #sidebar {display:none !important}
#mycustomwidgetarea aside {
   display: inline-block;
};
#mycustomwidgetarea aside {
width: 300px;
display: inline-block;
margin-left: 20px;
}

.onsale {
left: 6px;
top: 6px;
}

.homepage-widget-area { float: left; width: 100%; clear: both;text-align: center; }
.homepage-widget-area aside { width: 50%; float: left; }
#mc_embed_signup{background-image: url("http://www.thewattletree.com/wp-content/uploads/2013/06/bg-soft-white1.jpg"); clear:left; font:14px Lora; }
#mc_embed_signup h2 {
    font-size: 1.4em;
    font-weight: lighter;
}
#footer-widgets .widget h3 {border-bottom:1px dotted #9D725E; color:#9D725E;font-weight: lighter;}
#footer-widgets .widget p {color:#9D725E;}
#footer-widgets { text-align: left; }
.widget_woo_twitter p { padding: 10px 0 0 5px; font-weight: lighter; color:#777; }
.slide .slide-content.video p  { color: #9D725E;font: 13px/1.5em sans-serif; }
#logo { text-align: center; }
#content{ padding:20px 0; min-height: 150px; }
.single-product #title-container {display:none !important}
.styled-select {
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    border: 1px solid #27292c;
    border-radius: 3px;
    background: url('bg.png') no-repeat right #494849;
    box-shadow:inset 0 0 1px #393939;
    -moz-box-shadow:inset 0 0 1px #393939;
    -webkit-box-shadow:inset 0 01px #393939;
}
.styled-select select {
    -webkit-appearance: none;
    -moz-appearance: window;
    background: transparent;
    width: 100%;
    wid\th: 112%;   /* IE hack */
    padding: 1px 20px 0 3px;
    border: 0;
}
#logo  { float:left; }
#top { background-image: url("http://www.thewattletree.com/wp-content/uploads/2013/06/bg-soft-white1.jpg"); } 

#top .nav a {
    border: medium none;
    color: #9D725E;
    line-height: 18px;
    padding: 8px 10px;
    text-decoration: none;
    text-shadow: none;
}
#navigation #searchform{
display:none;
}
#top-nav{
width:100%;
}

#top-nav li.wcmenucart-display-right, #top-nav li{
float:right;
}

#top-nav li.menu-item{
float:left;
}
#custom { width: 960px;margin: 0 auto; text-align: right;}

PravinS · August 14, 2013

search this code

<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>

replace it with

<div align="right"><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>

may this works for you

ausdigitalmedia · August 14, 2013

Thanks for replying but that change made no effect.

Here is the new code with the change.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">

<title><?php woo_title(); ?></title>
<?php woo_meta(); ?>
<?php global $woo_options; ?>

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( $woo_options[ 'woo_feed_url' ] ) { echo $woo_options['woo_feed_url']; } else { echo get_bloginfo_rss( 'rss2_url' ); } ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
      
<?php wp_head(); ?>
<?php woo_head(); ?>


</head>

         </div>

<body <?php body_class(); ?>>
<?php global $woocommerce; ?>
 

<?php woo_top(); ?>

<div id="wrapper">


	<?php if ( function_exists( 'has_nav_menu') && has_nav_menu( 'top-menu' ) ) { ?>
    
	
	<h1> </h1>
	<div id="top">
		<div class="col-full">
        
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
	  </div>
</div><!-- /#top -->
	
    <?php } ?>
    
    <div id="custom">
	<?php global $woocommerce; ?>
 
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a><form role="search" method="get" id="searchform" action="http://www.thewattletree.com/">
<div align="right"><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
     <div>      
	<div id="header-container"> 
    
          
		<div id="header" class="col-full">
        
 		       
			<div id="logo">
		       
			<?php if ($woo_options[ 'woo_texttitle' ] <> "true") : $logo = $woo_options['woo_logo']; ?>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ); ?>">
					<img src="<?php if ( $logo ) echo esc_url( $logo ); else { echo esc_url( get_template_directory_uri() . '/images/logo.png' ); } ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
				</a>
	        <?php endif; ?> 
	        
	        <?php if( is_singular() && !is_front_page() ) : ?>
				<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></span>
	        <?php else : ?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name' ); ?></a></h1>
	        <?php endif; ?>
				<span class="site-description"><?php bloginfo( 'description' ); ?></span>
		      	
			</div><!-- /#logo -->
		       
			<div id="navigation" class="fr"> 
	
				<div class="nav">

				<?php
				if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
					wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'theme_location' => 'primary-menu' ) );
				} else {
				?>
		        <ul>
					<?php 
		        	if ( isset( $woo_options['woo_custom_nav_menu'] ) AND $woo_options['woo_custom_nav_menu'] == 'true' ) {
		        		if ( function_exists( 'woo_custom_navigation_output' ) )
							woo_custom_navigation_output();
		
					} else { ?>
		            	
			            <?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
			            <li class="<?php echo esc_attr( $highlight ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
			            <?php 
			    			wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude='); 
		
					}
					?>
		        </ul>
		        <?php } ?>
		      	</div><!-- /.nav -->
	    	    
		    </div><!-- /#navigation -->  
		    <div class="fix"></div>
       
		</div><!-- /#header -->
</div><!-- /#header-container -->

PravinS · August 14, 2013

try this

<div style="text-align:right"><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>

ausdigitalmedia · August 14, 2013

Thank you so much

Sign In

search box alignment

Recommended Posts

ausdigitalmedia

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

ausdigitalmedia

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

ausdigitalmedia

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information