WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to put the search box in a particular position (24 posts)

  1. massy74
    Member
    Posted 10 months ago #

    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

  2. mcfitzsatx
    Member
    Posted 10 months ago #

    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.

  3. massy74
    Member
    Posted 10 months ago #

    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

  4. alchymyth
    Forum Moderator
    Posted 10 months ago #

    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

  5. massy74
    Member
    Posted 10 months ago #

    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.

  6. massy74
    Member
    Posted 9 months ago #

    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

  7. massy74
    Member
    Posted 9 months ago #

    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.

  8. alchymyth
    Forum Moderator
    Posted 9 months ago #

  9. massy74
    Member
    Posted 9 months ago #

    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.

  10. Dave Naylor
    Member
    Posted 9 months ago #

    Where is the mark up for your search form?

  11. massy74
    Member
    Posted 9 months ago #

    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.

  12. Dave Naylor
    Member
    Posted 9 months ago #

    So, when you say:

    But still no search box is being shown.

    how is that actually going to happen?

  13. massy74
    Member
    Posted 9 months ago #

    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?

  14. Dave Naylor
    Member
    Posted 9 months ago #

    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?

  15. massy74
    Member
    Posted 9 months ago #

    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).

  16. Dave Naylor
    Member
    Posted 9 months ago #

    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

  17. massy74
    Member
    Posted 9 months ago #

    Sorry but the code I have put above is the search box itself. There is nothing else in the code. That code is to create the search box I guess.

  18. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    You are in the wrong forum - click that link above and post in the theme's own forum, please.

  19. massy74
    Member
    Posted 9 months ago #

    I don't understand - I completely modified the theme and now it is another theme. Why should the author answer? My question is the basic of php development and nothing to do with theme. Also why should author give me support if they are interested in selling the pro version? I would not be interested in buying the pro version as it does not meet my requirements.

  20. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    This is a theme-specific question and it's not just about you. Volunteers here answer theme forums and it helps keep the forums organized and other people to make use of previous answers.

    Perhaps you need to read this:

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  21. massy74
    Member
    Posted 9 months ago #

    In which theme forum should I post it? It is not analytical anymore as I have changed it completely.

  22. esmi
    Forum Moderator
    Posted 9 months ago #

  23. massy74
    Member
    Posted 9 months ago #

    Ok - I give up. I kept saying that it is NOT analytical any more.

  24. deanquenton
    Member
    Posted 5 months ago #

    Okay, I have been itching to give my two cents as I know the frustrations and time it takes figuring this one out if you are using a custom built template - like the one I am using.

    I wanted to position the Search bar bottom right position in the Header section, so:

    First thing: go to Widget area and drag the Search widget into the Header section - you will see it appear on the top left on the actuall website, then

    Go to CSS. style sheet and do a search (CTRL + F) and type in the actual word 'Search', you will then be taken to the section where your custom template has put the search criteria, then

    Find the section where it has something like this:

    form.art-search (This is my custom template default coding)
    {
    background-image: none;
    border: 0;
    display:block;
    position:relative;
    top:90px;
    padding:0;
    margin:5px;
    left:1180px;
    line-height: 0;
    }
    Okay, as above, depending on the width of template, play around with the 'left' criteria and the 'top' criteria as I have done above. Remember, key here is put a 'px;' infront of your numbers. Play around with the numbers until you get your desired location. This worked like a charm for me as all templates are different from the next. Good luck

Reply

You must log in to post.

About this Topic

Tags

No tags yet.