Support » Fixing WordPress » How to put the search box in a particular position

  • Resolved massy74

    (@massy74)


    Hi

    I would like to put the search box (either the default one or by plugin) in a particular position. Would anyone be so kind as to advice about how I can do that?

    Thank you
    M

Viewing 15 replies - 1 through 15 (of 23 total)
  • Massy, you’re not giving us enough information to be able to help. What theme are you using, for instance? Where is the Search box now and where do you want to put it? What is the URL for the site? More data would allow us to help.

    Hi

    I thought the theme is regardless as I need to be able to put the search box in a particular position using any theme. Now the search box should appear in the center (I use “should” as it does not show at all now as I downgrade the version of theme as the latest does not work properly for me. The latest show it in the middle of the blog area.).

    My website is http://www.ultimech.com/wordpress
    I would like to put the search box on top right hand side.

    Thank you
    Massy

    put the search box in a particular position using any theme

    positioning is generally done with CSS – http://www.w3schools.com/css/css_positioning.asp – and CSS is typically theme specific.

    if you would like to get specific information for your currently used theme, please post in http://wordpress.org/support/theme/analytical-lite

    I prefer going for the former and understand how I can put the search box in a particular area of my website.

    Now I am not sure that I fully understood the link you have just sent to me. It is still unclear how I can put the search box in a position I want according to your link.

    Hi

    It is still unclear how I can put my search box on top right hand side. As explained, the theme I am using now allow the search box to be positioned in the middle of blog. I want it on the top instead.

    Would anyone be so kind as to advice how I can do that?

    Thanks

    I also tried to delete all lines related to search and added this top search code in my style.css:

    /* top search
    =======================================*/
    .search-box {
    	margin:0;
    	padding:0;
    	max-width:100%;
    	height:30px;
    	margin-bottom:0px;
    }
    .search-box .searchform {
    	background-color:#fff;
    	width:235px;
    	height:30px;
    	border:none;
    	position:relative;
    	margin-top:10px;
    	margin-bottom: 10px;
    	margin-bottom:0;
    }
    .search-box .searchform input[type="text"] {
    	width:200px;
    	height:29px;
    	background:#fff;
    	border:none;
    	padding:1px 0px 0px 7px;
    	color:#343434;
    }
    .search-box .searchform input[type="submit"] {
    	position:absolute;
    	right:6px;
    	top:7px;
    	background:url(images/search.png) no-repeat;
    	width:18px;
    	height:18px;
    	border:none;
    	cursor:pointer;
    	text-indent: -9999px;
    }
    .top-search {
    	float: right;
    }
    #sider-bar .searchform ,#siderbar .searchform{
    	background: none repeat scroll 0 0 #F7F7F8;
    	border: 1px solid #DFDDDD;
    	margin-bottom: 20px;
    	margin-right: 5px;
    	position: relative;
    	width: 97%;
    }
    #siderbar .searchform input[type="text"]{
    	background: none repeat scroll 0 0 #F7F7F8;
    }
    #sider-bar .search-box.searchform input[type="text"] {
    	background-color:#f8f8f8;
    	border:none;
    	padding:1px 0px 0px 7px;
    	color:#666;
    }
    #sider-bar .searchform input[type="text"] {
    	/*width:272px;*/
    	width:97%;
    	height:29px;
    	/*height:34px;*/
    	background-color:#f8f8f8;
    	border:none;
    	padding:1px 0px 0px 7px;
    	color:#666;
    }
    #sider-bar .searchform input[type="submit"] {
    	background: url("images/search.png") no-repeat scroll 0 0 transparent;
    	border: medium none;
    	cursor: pointer;
    	height: 23px;
    	position: absolute;
    	right: 0;
    	top: 7px;
    	width: 28px;
    }
    .error-search .searchform {
    	background: none repeat scroll 0 0 #F7F7F8;
    	border: 1px solid #DFDDDD;
    	float: left;
    	margin-bottom: 20px;
    	margin-right: 5px;
    	position: relative;
    	width: 210px;
    }
    .error-search .searchform input[type="text"] {
    	background: none repeat scroll 0 0 #F8F8F8;
    }

    But still no search box is being shown.

    Hi

    The theme has been completed modified so it is not appropriate to put it onto the theme forum.

    There should be a way to put a search box anywhere on the screen.

    Where is the mark up for your search form?

    Hi

    I have deleted all items related to search and added the code above therefore I don’t have a mark up. The box search is nowhere.

    So, when you say:

    But still no search box is being shown.

    how is that actually going to happen?

    That’s exactly what I am asking why it is not happening. The box search is no where.

    Maybe it is better to put the question in other way round. How can I insert a search box in a theme?

    You need to provide some HTML elements in your theme. Maybe add a widgetised area somewhere, perhaps a header element containing the code for a search form?

    Above, it is the code for search box that I copied from a theme belonging to the same family of one I am using now. I added it just after the header style. I assumed that this code was going to show the search box on the top right hand site (that’s where it is located on the theme where I copied the code from).

    No. That’s CSS, it would style your search form. It defines where your search box would appear and how it would look, if you had one, but you haven’t. It’s a bit like having a pot of paint without the painting.

    So, you need to create a search form on your site and I’m thinking you’re not sure how to do that. If you’ve stripped a lot of stuff out of your theme, including the search form, you need to retrace your steps. If you don’t know how, the best place to ask is in your theme’s forum as has already been pointed out.

    http://wordpress.org/support/theme/analytical-lite

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘How to put the search box in a particular position’ is closed to new replies.