I would like if possible how to create a search bar that

I would like if possible how to create a search bar that increases the size as that of Twenty Eleven see Screeen Shot.
the demo: http://twentyelevendemo.wordpress.com/

  • mondoha13

    I do not know how to put it, here is the code for the header.php:

    <!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' ); ?>" />
    		<?php if ( current_theme_supports( 'bp-default-responsive' ) ) : ?><meta name="viewport" content="width=device-width, initial-scale=1.0" /><?php endif; ?>
    		<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
    		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    
    		<?php bp_head(); ?>
    		<?php wp_head(); ?>
    
    	</head>
    
    	<body <?php body_class(); ?> id="bp-default">
    
    		<?php do_action( 'bp_before_header' ); ?>
    
    		<div id="header">
    			<div id="search-bar" role="search">
    				<div class="padder">
    					<h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php _ex( 'Home', 'Home page banner link title', 'buddypress' ); ?>"><?php bp_site_name(); ?></a></h1>
    
    						<form action="<?php echo bp_search_form_action(); ?>" method="post" id="search-form">
    							<label for="search-terms" class="accessibly-hidden"><?php _e( 'Search for:', 'buddypress' ); ?></label>
    							<input type="text" id="search-terms" name="search-terms" value="<?php echo isset( $_REQUEST['s'] ) ? esc_attr( $_REQUEST['s'] ) : ''; ?>" />
    
    							<?php echo bp_search_form_type_select(); ?>
    
    							<input type="submit" name="search-submit" id="search-submit" value="<?php _e( 'Search', 'buddypress' ); ?>" />
    
    							<?php wp_nonce_field( 'bp_search_form' ); ?>
    
    						</form><!-- #search-form -->
    
    				<?php do_action( 'bp_search_login_bar' ); ?>
    
    				</div><!-- .padder -->
    			</div><!-- #search-bar -->
    
    			<div id="navigation" role="navigation">
    				<?php wp_nav_menu( array( 'container' => false, 'menu_id' => 'nav', 'theme_location' => 'primary', 'fallback_cb' => 'bp_dtheme_main_nav' ) ); ?>
    			</div>
    
    			<?php do_action( 'bp_header' ); ?>
    
    		</div><!-- #header -->
    
    		<?php do_action( 'bp_after_header'     ); ?>
    		<?php do_action( 'bp_before_container' ); ?>
    
    		<div id="container">

    and the Style.css

    /*--------------------------------------------------------------
    2.2 - Header
    --------------------------------------------------------------*/
    
    #header {
    	background: none; /* Old browsers */
    	background: none; /* FF3.6+ */
    	background: none; /* Chrome,Safari4+ */
    	background: none; /* Chrome10+,Safari5.1+ */
    	background: none; /* Opera11.10+ */
    	background: none; /* IE10+ */
    	background: none; /* W3C */
    	-moz-border-radius-bottomleft: 0px;
    	-webkit-border-bottom-left-radius: 0px;
    	border-bottom-left-radius: 0px;
    	-moz-border-radius-bottomright: 0px;
    	-webkit-border-bottom-right-radius: 0px;
    	border-bottom-right-radius: 0px;
    	color: #fff;
    	height: auto;
    	margin-bottom: 15px;
    	padding-top: 15px;
    	position: relative;
    	z-index: 1000;
    
    }
    
    #header #search-bar {
    	margin-top: 0px;
    	text-align: right;
    	width: 51%;
    	float: left;
    	height: 40px;
    
        	/* ------------ Background Menu ------------- */
    	background: #1fb3dd; /* Old browsers */
    	background: -moz-linear-gradient(top, #1fb3dd 0%, #1fb3dd 15%, #394c79 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1fb3dd), color-stop(15%,#1fb3dd), color-stop(100%,#394c79)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* IE10+ */
    	background: linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* W3C */
    	}
    
    		/* ------------ Background Menu  ------------- */
    
    #header #search-bar input[type=text] {
    	border: 2px inset #888;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 0px;
    	margin-right: 3px;
    	padding: 2px;
    	font-size: 14px;
    	width: 35%;
    	}
    
    #header #search-bar input[type=submit] {
    	font-size: 14px;
    	padding: 1px 4px;
    	margin-left: 4px;
    }
    #header #search-bar input[type=submit] {
    	font-size: 12px;
    	font-weight: bold;
    	padding: 1px 4px;
    	margin-left: 4px;
    }

    I want to know how to enable javascript:

    this is my Web site link : http://www.ikomor.com
    i have a demo account:
    username: demo
    password: demo

    the screen shot:
    thankyou

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.