ausdigitalmedia Posted October 13, 2013 Share Posted October 13, 2013 Hi all. So here is my site. http://www.thewattletree.com I want to add a different background behind the search box. Here's the back ground http://www.thewattletree.com/Searchbg.jpg I just cant get the coding right. I have created a new style on my custom css sheet. .input, searchbg { padding: 5px; border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC; border-width:1px; border-style:solid; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; color: #777;background:url("/Searchbg.jpg") ; font: 300 1em/1em 'Cardo',arial,sans-serif;} Here's my header.php that contains the search box code. <!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 style="text-align:right"><label class="screen-reader-text" for="s"></label> <input type="text" value="search here..." name="s" id="s"> </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 class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> </div><!-- /#header --> </div><!-- /#header-container --> I've tried reasigning the new style to the form but it's not overiding what seems to be the current style of "input, textarea". Can anyone tell me what I am doing wrong? Quote Link to comment https://forums.phpfreaks.com/topic/282943-need-help-with-basic-css-please/ Share on other sites More sharing options...
Solution Ch0cu3r Posted October 14, 2013 Solution Share Posted October 14, 2013 You wan to apply the css styling to forms input field, not the form. The input field is this <input type="text" value="search here..." name="s" id="s"> Add class="searchbg"; attribute to the input field change searchbg in your css to .searchbg. CSS Styling should now apply. Quote Link to comment https://forums.phpfreaks.com/topic/282943-need-help-with-basic-css-please/#findComment-1453824 Share on other sites More sharing options...
ausdigitalmedia Posted October 14, 2013 Author Share Posted October 14, 2013 Thank you very much. Thats solved it. Quote Link to comment https://forums.phpfreaks.com/topic/282943-need-help-with-basic-css-please/#findComment-1453888 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.