Moving Search Bar
-
Just wondering if anyone can help me with moving my search bar. I’m using the WP Premium theme free version and am basically trying to turn it into a “site” instead of a “blog”. At the top right of the original theme there is a subscribe form for a feedburner feed signup. I am trying to replace it with a search form but am having trouble getting it to line up correctly. Below is my header.php & style.css which I have made some modifications to but can’t seem to get it right. I would the search bar to be aligned with the site title on the right side. Ofcourse it looks different in ie7 and firefox. Here’s a link to my site:
https://timelessantiqueclocks.comheader.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head profile="https://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); } elseif (is_single() ) { single_post_title();} elseif (is_page() ) { single_post_title();} else { wp_title('',true); } ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/taber.js" language="javascript" ></script> <script type="text/javascript" language="javascript" src="<?php bloginfo('stylesheet_directory'); ?>/hover.js"></script> <?php wp_head(); ?> </head> <body> <div id="header"> <div id="header-in"> <p class="title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p> <p class="description"><?php bloginfo('description'); ?></p> <?php ?> <div class="searchform"> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>"> <input type="text" value="Search on this blog..." name="s" class="s" onfocus="if (this.value == 'Search on this blog...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search on this blog...';}"/> <input type="image" class="button" src="<?php bloginfo('template_url'); ?>/images/none.gif" alt="Submit button" /> </form> </div> <div id="nav"> <ul> <?php wp_list_pages('title_li=&depth=1&exclude='); ?> </ul> </div> </div> </div> </div> <div class="container-top"></div> <div id="container"> <!--header.php end-->
style.css
/* Theme Name:WP Premium (free version) Author URI:https://www.cssace.com/ Version:2.0 Author:R.Bhavesh Description:WP Premium is a free theme by <a href="https://cssace.com/">R.Bhavesh</a>. Please obtain a paid version from <a href="https://cssace.com/wp-premium-theme/">here</a> which allows all the theme settings from theme control panel and comes bundeled with 10 color schemes. Plus you get exclusive theme support for this theme. */ /* choose - WHICH COLOR SCHEME DO YOU WANT FOR THE THEME? */ /* By default, I placed set it to RED. If you wish to have black color scheme, replace "red" with "black e.g. @import url("style-black.css");" If you wish to have black color scheme, replace "red" with "brown" e.g. @import url("style-red.css"); */ @import url("css/style-brown.css"); body { font:12px Arial, Helvetica, Sans-Serif; margin:0px 0px 0px 0px; } body * { margin:0px; padding:0px; } hr { height:5px; margin:10px 0px; border:none; } blockquote { margin:0px 0px 0px 5px; padding:8px 25px 5px 40px; font-size:15px; font-style:italic; font-family:Georgia, Times New Roman, Serif; } blockquote p { margin:0px 0px 10px 0px; padding:0px; } .clearboth{ clear:both; } .alignleft { float:left } .alignright { float:right } .imgleft { float:left; margin:0 12px 12px 0; padding:2px; border:3px solid #ccc; } .imgright { float:right; margin:0 0 12px 12px; padding:2px; border:3px solid #ccc; } .imgright_n { float:right; margin:0 0 12px 12px; } .img_center { width:98%; background:#ccc; padding:5px; margin:10px 0; } code { font-size:12px; } /* -------------------------------------------------- Structure -------------------------------------------------- */ #header { overflow:hidden; height:100%; } #header-in { width:960px; padding:0px; height:132px; position:relative; margin:0px auto; } #container { width:940px; text-align:left; margin:0 auto; padding:0px 10px; border:0px solid black; clear:both; overflow:hidden; height:100%; } .container-top { clear:both; height:17px; width:960px; display:block; margin:12px auto 0 auto; } .container-bottom { clear:both; height:17px; width:960px; display:block; margin:0px auto; } #content { width:600px; float:left; padding:14px 15px 20px 22px; display:block; overflow:hidden; } #sidebar { float:right; width:280px; padding:0px 3px 0px 0px; } #l_sidebar, #r_sidebar { float:left; display:block; width:130px; margin:0px; padding:0px 0px 0px 10px; } #footer { padding:10px 0px 20px 0px; text-align:center; height:25px; clear:both; font-size:11px; } #footer-wrap { width:950px; margin:0px auto; } /************************************* Links **************************************/ a { text-decoration:none; outline:none; } a:hover { text-decoration:underline; } /************************************* Headings **************************************/ h1 { font-size:26px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; margin:0px; padding:0px; } h3.h1 { /*make homepage h3's for the first 2 stories look like H1 */ font-size:22px; text-decoration:none; } h1 a, h3 a, h1 a:visited, h3 a:visited { text-decoration:none; } h1 a:hover, h3 a:hover { text-decoration:none; } h2 { font-size:24px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:10px 0px; line-height:150%; margin:0px; } h2 a, h2 a:visited { color:#666; text-decoration:underline; } h2 a:hover { text-decoration:none; } h3 { font-size:22px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; } #sidebar h2 { margin:0px 0 5px 0; padding:5px 0px 0px 0; font-size:18px; font-family:Georgia, "Times New Roman", Times, serif; } #sidebar .popular h2 { font-size:18px; } #l_sidebar h2, #r_sidebar h2 { font-size:16px; } #sidebar h3 { font-size:18px; margin-bottom:8px; } h3 a, h3 a:visited { text-decoration:none; } h4 { font-size:18px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; } h5 { font-size:16px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; } h6 { font-size:14px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; padding:0px 0 10px 0px; line-height:150%; margin:0px; } /************************************* Header **************************************/ #header-in .title { margin:0px; padding:15px 10px 5px 10px; width:590px; float:left; } #header-in .title a { text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; font-size:33px; font-weight:normal; margin:0px; padding:0px; } #header-in .description { clear:both; font-family:Arial, Helvetica, Sans-Serif; font-size:12px; font-weight:bold; margin:0px; padding:0px 10px 4px 15px; width:850px; } #header-in img { border:none; } /************************************* Search form **************************************/ .searchform { float:right; padding:5px 0 0 18px; overflow:hidden; width:215px; position:relative;} .search p { margin:0; padding:0; font:bold 14px Arial, Helvetica, sans-serif; color:#fff; } .search .textfield { width:165px; height:18px; padding:0 5px 0 5px; margin-top:11px; margin-bottom:8px; border:none; background:none; } .button { width:8px; height:10px; line-height:26px; display:block; text-align:center; cursor:pointer; border:none; position:absolute; right:22px; top:35px; } /************************************* RSS Feed **************************************/ .rss { float:left; padding:8px 0 0 19px; margin:0px; } /************************************* Top Search Form **************************************/ #xsnazzy { margin:15px 0 10px 0; clear:both; overflow:hidden; height:100%; } * html { margin:0 0 10px 0; } /* ie6 specify css */ *+html #xsnazzy { margin:0 0 10px 0; } /* ie7 specify css */ html:first-child #xsnazzy { margin:0 0 10px 0; } html>body #xsnazzy { margin:0 0 10px 0; } .xtop, .xbottom { display:block; font-size:1px; } .xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden; } .xb1, .xb2, .xb3 { height:1px; } .xb1 { margin:0 5px; } .xb2 { margin:0 3px; } .xb3 { margin:0 2px; } .xb4 { height:2px; margin:0 1px; } .xboxcontent { display:block; padding:5px; height:100%; overflow:hidden; } /*Search box Rounded Corner End */ ul.tablist { margin:5px 0px; padding:0; list-style:none; color:#333; } ul.tablist li { margin:0 5px; padding:2px 0 3px 10px; list-style:none; border-bottom:1px dotted #959595; text-align:left; } ul.tablist li a { text-decoration:none; line-height:18px; }ul.tablist li a:hover { text-decoration:underline; } .searchform { padding:5px; height:100%; overflow:hidden; position:relative; } .searchform .s { color:#333; padding:4px 3px 4px 3px; line-height:16px; width:208px; } .button {position:absolute; top:5px; right:0; height:26px; width:33px; } * html .button { top:6px; } *+html .button { top:6px; } #ul { display:block; width:880px; margin:0px; padding:0px 0px 0px 10px; } #nav li { float:left; list-style-type:none; margin:5px -4px 0px 4px; padding:0px; } #nav ul li:hover a, #nav ul li.hover a, #nav ul li.current_page_item a { text-decoration:none; } #nav ul li.current_page_item a:hover { text-decoration:none; } #nav ul li a { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-decoration:none; display:block; padding:6px 20px 6px 0px; margin:0px 0px 0px 15px; text-transform:uppercase; } #nav ul li a:hover { text-decoration:none; } /************************************* Content **************************************/ #content ul { margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } #content li { margin:0 0 5px 0; padding:0 0 0; background:url(images/bullet4.png) no-repeat center; background-position:0 2px; } #content ul li ul { margin:8px 0 5px 0; padding:0; } #content li ul li { padding:0; background:url(images/bullet4.png) no-repeat 20px left; } #content ol { list-style-type:decimal; line-height:18px; margin:0; font-size:12px; padding:0 0 10px 0; } #content ol li ol { margin:8px 0 5px 18px; padding:0 0 0 0; } #content ol li { margin:0 0 5px 0; padding:0; background:none; } #content h1.btmspace { margin-bottom:15px; } #content p { margin:0px; line-height:18px; padding:0px 0px 10px 0px; } #content ol { list-style-type:decimal; line-height:18px; margin:0px; padding:0px 0px 10px 35px; } #content ul { list-style:none; margin:0px; padding:0px 0px 10px 0px; } #content li { margin:0px; padding:0px; } #content ul li { list-style:disc outside; margin:0px 30px 0px 30px; padding:5px 0px 0px 0; } #content .social { margin:0; padding:0; width:413px; list-style:none; float:right; } * html #content .social { width:420px; } #content .social li { margin:0 0 0 11px; padding:0 0 0 20px; list-style:none; float:left; } #content .social li.i_digg { background:url(images/i_digg.gif) no-repeat ; } #content .social li.i_stumb { background:url(images/i_stumb.gif) no-repeat ; } #content .social li.i_del { background:url(images/i_del.gif) no-repeat ; } #content .social li.i_reddit { background:url(images/i_reddit.gif) no-repeat ; } #content .social li.i_technorati { background:url(images/i_technorati.gif) no-repeat ; } /*Page navigatoin 2 ----------------------------- */ #content .wp-pagenavi { text-align:center; height:25px; font:bold 11px Arial, Helvetica, sans-serif; line-height:24px; } #content .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active { padding:3px 8px 3px 8px; margin:2px; text-decoration:none; color:#333; line-height:24px; background-color:#e7e7e7; } #content .wp-pagenavi a:hover { color:#fff; background-color:#666; } #content .wp-pagenavi span.pages { padding:3px 8px 3px 8px; margin:2px 2px 2px 2px; } #content .wp-pagenavi span.current { padding:3px 8px 3px 8px; margin:2px; line-height:25px; font-weight:bold; color:#fff; background:#de2225; } #content .wp-pagenavi span.extend { padding:3px 8px 3px 8px; margin:2px; color:#fff; line-height:25px; background-color:#314332; } #content .trackbacklist { margin:8px 0 0 0; padding:0; list-style:none; } #content .trackbacklist li { margin:0 0 8px 0; padding:0 0 5px 12px; list-style:none; border-bottom:1px solid #ccc; } .post-ratings { font-size:12px; font-style:normal; padding-left:8px; display:block; margin:8px 0; } /************************************************ * Comments * ************************************************/ #content .commentlist li .avatar { background: #FFFFFF; float: right; background:#fff url(images/gravtar.png) no-repeat center; border: 1px solid #EEEEEE; padding:5px; margin-left:10px; } #commentform input { width: 210px; padding: 2px; margin: 5px 5px 1px 0px; border:1px solid #ccc; } #commentform { margin: 5px 10px 0px 0px; height:100%; overflow:hidden; } #commentform label { font-weight:bold; } .cancel-comment-reply a { font-size:12px; } #commentform textarea { width:330px; padding: 2px; border:1px solid #ccc; } #respond:after { content: "."; display: block; height:0px; clear: both; visibility: hidden; } #content .commentlist p { font-weight: normal; text-transform: none; } #content .commentmetadata { font-weight: normal; font-size:11px; } #commentform p { margin: 5px 0px 5px 0px; } #commentform #submit { margin:0; float:left; width:100px; font:bold 14px Arial, Helvetica, sans-serif; color:#fff; cursor:pointer; background:#000; border:none; } .alt { margin: 0px; padding: 10px; } #content .commentlist { margin: 10px 0 10px 0; padding: 0px; height:100%; overflow:hidden; } #content .commentlist ol { margin: 0px; padding: 10px; } #content .commentlist li { margin: 15px 0px 10px; padding: 10px 8px 10px 10px; list-style: none; background:none; } #content .commentlist li ul li { margin-right:5px; } #content .commentlist cite { font-size:12px; font-weight:bold; font-style:normal; } #content .commentlist li a { font-weight:bold;} #content .commentlist li a:hover { color:#000; } .commentlist p { margin: 10px 5px 10px 0px; padding: 0px; } .children { margin:0px; padding:0px; } .nocomments { text-align: center; margin:0px; padding:0px; } .commentmetadata { font-size: 11px; margin: 0px; display: block; } .navigation { display: block; text-align: center; margin-top:10px; margin-bottom:10px; } .alignright { float: right; } .alignleft { float: left; } .thread-alt { background:#eee; margin: 0px; padding: 0px; } .thread-even { background:#fff; } .depth-1 { border: 1px dotted #bbb; } .even { border:1px dotted #bbb; background:#eee !important; } .alt { border:1px dotted #bbb; background:#fff !important; margin:0px; padding:0px; } .gravatar { float:right; border:2px solid #999; margin:0px 0 10px 15px; width:40px; height:40px; background:url(images/gravtar.png) no-repeat; } .commetmainauthor { background:#eee; overflow:hidden; height:100%; margin-bottom:15px; border-bottom:1px solid #ccc; } .commetmain { background:#f8f8f8; border-bottom:1px solid #ccc; overflow:hidden; height:100%; margin-bottom:15px; } #content .post-meta-top { margin:0px 0px 15px 0px; padding:5px 0px; overflow:hidden; height:100%; } #content .post-bottom { margin:0px 0px 25px 0px; padding:5px 0; clear:both; overflow:hidden; height:100%; font-size:11px; } .cat { float:left; width:25%; text-align:left; padding:0px 0px 0px 15px; font-size:11px; } .comm { float:right; width:38px; height:39px; font-size:22px; line-height:27px; text-align:center; } .comm span { text-align:center; padding:5px 0 0 0; } .comm a { text-decoration:none; } .date { float:left; text-align:left; font-size:11px; padding:0 0px 0 15px; background:url(images/i_calendar.png) no-repeat 0 1px; } #content .search404 { margin:4px 8px 0 0; padding:5px 0 0 0px; width:298px; } #content .category { float:left; width:48%; border-right:1px solid #ccc; } #content .archives { float:right; width:48%; } /* Previous/Next Page Navigation *********************************************/ .page-nav { clear:both; margin:15px 0px; padding:2px 0px; height:22px; font-weight:bold; font-size:15px; } .nav-previous { width:249px; float:left; text-align:left; margin:2px 0px; } .nav-next { width:249px; float:right; text-align:right; margin:2px 0px; } .page-nav a { text-decoration:none; } .nav-previous a { padding-left:13px; } .nav-next a { padding-right:13px; } /* Contact form --------------------------------- */ .contactform { position: static; overflow: hidden; } #content .contactleft { width:18%; text-align: left; clear: both; float: left; display: inline; margin: 5px 0; height:25px; font-weight: bold; } #content .contactright { width: 79%; text-align: left; float: right; display: inline; padding: 4px; margin: 5px 0; font-size:11px; } .contactright input, textarea { width:220px; padding:3px; font:12px Arial, Helvetica, sans-serif; } #contactsubmit { width:120px; font:bold 12px Arial, Helvetica, sans-serif; border:none; cursor:pointer; } /************************************* Sidebar **************************************/ #sidebar .sidebar-bot { display:block; height:20px; clear:both; } #sidebar ul { list-style-type:none; } #sidebar .advertise { text-align:left; padding:0; margin-left:3px; } #sidebar .advertise img { margin:5px 5px; border:none; } #sidebarwrap { padding:15px 0px 0px 0px; margin:0px; border:none; } #sidebar .aktt_tweets p { display:none; } /************************************* Popular Posts Section **************************************/ #sidebar #sidebarwrap #popular { margin:0px; padding:0px;} /*popular box Rounded Corner start */ #pxsnazzy { margin:0 0 10px 0; } .pxtop, .pxbottom { display:block; font-size:1px; } .pxb1, .pxb2, .pxb3, .pxb4 { display:block; overflow:hidden; } .pxb1, .pxb2, .pxb3 { height:1px; } .pxb1 { margin:0 5px; } .pxb2 { margin:0 3px; } .pxb3 { margin:0 2px; } .pxb4 { height:2px; margin:0 1px; } .pxboxcontent { display:block; padding:2px; } /*popular box Rounded Corner End */ .popular ul { margin:0px; padding:0px 10px 15px 10px; } .popular ul li { margin:0px; padding:0px; } .popular ul li ul { padding:0px; } .popular ul li ul li { margin:0px; padding:5px 10px; } .popular ul li ul li a, #popular ul li ul li a:visited { padding:0; margin:0px; text-decoration:none; } .popular ul li ul li a:hover { text-decoration:underline; } /************************************* Popular Posts Section **************************************/ #sidebar #sidebarwrap #popular { margin:0px; padding:0px;} /*popular box Rounded Corner start */ #pxsnazzy { margin:0 0 10px 0; } .pxtop, .pxbottom { display:block; font-size:1px; } .pxb1, .pxb2, .pxb3, .pxb4 { display:block; overflow:hidden; } .pxb1, .pxb2, .pxb3 { height:1px; } .pxb1 { margin:0 5px; } .pxb2 { margin:0 3px; } .pxb3 { margin:0 2px; } .pxb4 { height:2px; margin:0 1px; } .pxboxcontent { display:block; padding:2px; } /*widget calendar css =================================================== */ #wp-calendar { width:90%; margin:0 auto; color:#2a271c; } #sidebar .widget_calendar h2, widgettitle { display:none; } #sidebar #calendar_wrap caption { margin:8px 0 3px 0; padding:5px 0 5px 0; font:bold 12px Arial, Helvetica, sans-serif; color:#fff; text-transform:uppercase; background:url(images/sheadbg.png) no-repeat; width:100%; } /************************************* Left Sidebar **************************************/ #l_sidebar ul, #l_sidebar ul li, #r_sidebar ul, #r_sidebar ul li { margin:0px 0 15px 0; padding:0px; } #l_sidebar ul li ul li, #r_sidebar ul li ul li { margin:0px; padding:5px 3px 7px 8px; } #l_sidebar ul li ul li a, #l_sidebar ul li ul li a:visited, #r_sidebar ul li ul li a, #r_sidebar ul li ul li a:visited { margin:0px; text-decoration:none; } #l_sidebar ul li ul li a:hover, #r_sidebar ul li ul li a:hover { text-decoration:underline; } #l_sidebar ul li ul li ul li, #r_sidebar ul li ul li ul li { margin:0px; padding:0px; } #l_sidebar ul li ul li ul li a, #l_sidebar ul li ul li ul li a:visited, #r_sidebar ul li ul li ul li a, #r_sidebar ul li ul li ul li a:visited { padding:5px 3px 7px 8px; margin:0px; text-decoration:none; } #l_sidebar ul li ul li ul, #r_sidebar ul li ul li ul { border:none; padding:0px; margin:0px; } #l_sidebar ul li ul li ul li a:hover, #r_sidebar ul li ul li ul li a:hover { text-decoration:underline; } .about { overflow:hidden; height:100%; margin-bottom:15px; } #sidebar p { margin:0px; line-height:18px; padding:0px 0px 10px 0px; } /************************************* Footer **************************************/ #text-link-advertise { padding:15px; text-align:left; clear:both; } #footer .copyright { float:left; text-align:left; } .copyright a { text-decoration:none; } .copyright a:hover { text-decoration:none; } ul#nav-footer { margin:0; padding:0; float:right; font-size:11px; font-weight:bold; text-align:right; text-transform:uppercase; } ul#nav-footer li { padding:5px 8px 5px 12px; list-style:none; float:left; } ul#nav-footer li.nobg { padding:5px 8px 0px 12px; } ul#nav-footer li a { text-decoration:none; } /* Tabber Style start -------------------- */ .tabberlive .tabbertabhide { display:none; } .tabberlive { margin:0 5px; } ul.tabbernav { margin:0; padding:3px 0; font:bold 12px Arial, Helvetica, sans-serif; } ul.tabbernav li { list-style:none; margin:0; display:inline; } ul.tabbernav li a { padding:3px 0.5em; margin-left:3px; text-decoration:none; } /*---- tabbertab = the tab content---------------------*/ .tabberlive .tabbertab { padding:5px; } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab h3 { display:none; } .tabberlive#tab2 .tabbertab { height:200px; overflow:auto; } /* instruction elements -------------------------------------- */ address { font-style:italic; } #content p.alert, #content p.download, #content p.info, p.note { margin:10px 0 10px 0; padding:9px 10px 9px 36px; } #content p.alert { border-top:1px solid #f0baa2; border-bottom:1px solid #f0baa2; background:#ffd9c8 url(images/alert.png) no-repeat 12px 13px; } #content p.download { border-top:1px solid #d4ebaf; border-bottom:1px solid #d4ebaf; background:#edfcd5 url(images/download.png) no-repeat 10px 13px; } #content p.info { border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#eee url(images/info.png) no-repeat 12px 13px; } #content p.note { border-top:1px solid #efe3ae; border-bottom:1px solid #efe3ae; background:#fef6d2 url(images/note.png) no-repeat 14px 13px; margin:10px 0 10px 0; padding:9px 10px 9px 36px; } .cartlink { background:url(images/i_cart2.png) no-repeat 0 3px; padding-left:20px; } .red { color:#c00; font-size:11px; padding-left:5px; }
Any help would be greatly appreciated!
- The topic ‘Moving Search Bar’ is closed to new replies.