Topic: Search Bar | Themeco Community

Tagged: x

1 2 →

Author

Posts

May 16, 2016 at 2:32 pm #994203

ylpl

Participant

Hi,

My website is: http://dev.ylpl.net/wordpress/

What I’m trying to do is put a search bar underneath my navbar. I was trying to get it inline where search catalog, search bar, and find button are all in a row but was unable to. I’d also like to minimize the gap between the search bar and navbar. Also, would there be any way to get the radio buttons (search catalog, search website) inline instead of stacked? I would place them right under the search bar.

I appreciate all the help you’ve given me so far.

Thank you,

Daniel

May 16, 2016 at 5:03 pm #994452

Darshana

Moderator

Hi there,

Thanks for writing in! Could you please post the code that you have used, as I can see some incorrect usage of HTML (Eg: your input texts are wrapped within a H3 tag and you have used line breaks).

Once you post the code, we can help you to sort it out. Make sure to wrap your code within the code tag of the forum toolbar.

Thanks!

May 17, 2016 at 11:37 am #995763

ylpl

Participant

<div id="search-2" class="widget widget_search"><span style="float: left;"><span style="float: left;">
</span></span><form id="searchform" action="http://www.ylpl.net/catalog-search" method="get">
<h3>Search Catalog <input id="lookfor" style="width: 650px; margin-bottom: 0; margin-top: 0px; height: 30px;" name="lookfor" type="text" value="" placeholder="Type your search here" />
<input name="submit" type="button" value="Find" />
<input name="type" type="hidden" value="AllFields" /></h3>
</form></div>
<p class="choose"><input id="fe1" class="radio standard" checked="checked" name="searchtype" type="radio" value="books" />search catalog

Above is the code for the search bar that is underneath the navbar on my website.

Thank you,

Daniel

May 17, 2016 at 11:38 am #995764

ylpl

Participant

I’m sorry, use this instead. I forgot some code previously.

Daniel

<div id="search-2" class="widget widget_search"><span style="float: left;"><span style="float: left;">
</span></span><form id="searchform" action="http://www.ylpl.net/catalog-search" method="get">
<h3>Search Catalog <input id="lookfor" style="width: 650px; margin-bottom: 0; margin-top: 0px; height: 30px;" name="lookfor" type="text" value="" placeholder="Type your search here" />
<input name="submit" type="button" value="Find" />
<input name="type" type="hidden" value="AllFields" /></h3>
</form></div>
<p class="choose"><input id="fe1" class="radio standard" checked="checked" name="searchtype" type="radio" value="books" />search catalog
<input id="fe2" class="radio standard" name="searchtype" type="radio" value="" />search website</p>

May 17, 2016 at 1:09 pm #995927

Thai

Moderator

Hi There,

Please try with this HTML code instead:

<div id="search-2" class="widget widget_search">
	<form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
		<h3 style="display: inline-block">Search Catalog</h3> 
		<input style="width: 510px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block;" value="" name="lookfor" id="lookfor" placeholder="Type your search here" type="text">
		<input style="display: inline-block" name="submit" value="Find" type="submit">
		<input name="type" value="AllFields" type="hidden">
		<p class="choose" style="text-align: right;padding-right: 80px;">
			<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
			<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
		</p>
	</form>
</div>

Hope it helps 🙂

May 18, 2016 at 11:45 am #997691

ylpl

Participant

Thank you. However, the Search Catalog is still above the Search Bar and the Find button is still below the Search Bar. Is there any way to get them on the same line?

Also, I put this in the Cornerstone box because it was closest to the Navbar. Is there any way to put it outside the Cornerstone Box and put it right underneath the Navbar? That way it can fully extend from one end to the other and would be in-between the Navbar and Slider/Calendar.

Thank you again,

Daniel

May 18, 2016 at 1:31 pm #997879

Rupok

Member

Hi Daniel,

Let’s update the code a bit :

<div id="search-2" class="widget widget_search">
	<form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
		<h3 style="display: inline-block">Search Catalog</h3> 
		<input style="width: 450px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block; float: left" value="" name="lookfor" id="lookfor" placeholder="Type your search here" type="text">
		<input style="display: inline-block; margin-left: 10px; margin-top: -38px;" name="submit" value="Find" type="submit">
		<input name="type" value="AllFields" type="hidden">
		<p class="choose" style="text-align: right;padding-right: 80px;">
			<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
			<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
		</p>
	</form>
</div>

If you need more adjustment, kindly adjust the inline CSS. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

If you want to put it outside of Cornerstone then you will need to create a page template and edit this which is more troublesome.

Thanks

May 18, 2016 at 3:28 pm #998067

ylpl

Participant

Ok no problem, thank you. I moved the code to the Topbar so it would be consistent on every page of the site. It does look better but it is still not inline. I was tweaking some CSS but still could not put it in this order: Search – Searchbar – Find Button. Not sure if this would be going into further customization but would that be possible?

I’ve also added some extra text above. Would there be any way to have it divided but going across? It would then be:
Yorba Linda Public Library – Contact Us – Library Hours

Thank you so much again,

Daniel

May 18, 2016 at 3:31 pm #998073

ylpl

Participant

I forgot to mention that the Search Bar would then be underneath the text.

Thanks,

Daniel

May 18, 2016 at 8:06 pm #998505

Rad

Moderator

Hi there,

Beneath which text? The search is already under text but below the menu.

And please change the code to this,


<div id="search-2" class="widget widget_search">
<form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
		 
		<input style="width: 550px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block;" value="" name="lookfor" id="lookfor" placeholder="Search books, movies, etc." type="text">
		<h4 style="display: inline-block;margin: 0px;">Search </h4><input style="display: inline-block;margin-left: 10px;margin-top: 0px;" name="submit" value="Find" type="submit">
		<input name="type" value="AllFields" type="hidden">
		<p class="choose" style="text-align: right;padding-right: 500px;">
			<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
			<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
		</p>
	</form>
</div>

And that should make them inline.

Thanks!

May 19, 2016 at 3:16 pm #1000200

ylpl

Participant

Thank you, that did the trick! In regards to the text, you’re right, it is where it should be; right below the company name, contact info, and library hours and right above the menu. However, I’m just trying to move library hours to the right of contact info. Currently, it is right underneath it. Would there be any way to do that? If I wanted to add any CSS properties to Contact Information or Library Hours, what would be my identifier? Would I be able to add it in my Custom Global CSS or would it have to be in my Topbar Content?

Thanks again,

Daniel

May 19, 2016 at 8:18 pm #1000598

Rue Nel

Moderator

Hello Daniel,

You have inserted an invalid html code in your topbar content. Please use this instead:

<header id="header">
  <div class="x-container">
    <div class="x-column x-1-2">
      <h1 class="logo vcard"><a rel="index" class="fn url" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h1>
    </div>

    <div class="x-column x-1-2 last">
      <h4 class="block__title">Contact Us</h4>
      <div class="block__content">
    	<p>18181 Imperial Highway<br />Yorba Linda, CA 92886 <br />714- 777-2873<br /></p>
 	  </div>

	  <h4 class="block__title">Library Hours</h4>
      <div class="block__content">
    	<p>Monday - Thursday:  9:00 a.m. - 9:00 p.m.<br/>
        Friday - Saturday: 9:00 a.m. - 5:00 p.m.<br/>
        Closed Sunday<br /></p>
	   </div>
    </div>
  </div>

  <div class="x-container">
    <div id="search-2" class="widget widget_search">
      <form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
		 
		<input style="width: 900px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block;background-color: #EFF2FB;" value="" name="lookfor" id="lookfor" placeholder="Search books, movies, etc." type="text">
		<h4 style="display: inline-block;margin: 0px;float:left;">Search </h4><input style="display: inline-block;margin-left: 10px;margin-top: 0px;" name="submit" value="Find" type="submit">
		<input name="type" value="AllFields" type="hidden">
		<p class="choose" style="text-align: right;padding-right: 500px;>
			<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
			<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
		</p>
	  </form>
    </div>
  </div>

</header>

With this new code, you must remove this block of css code in your customizer:

header#header h1 {
    width: 40%;
    float: left;
    margin-top: 0;
}

And it should look like this:

And if the search bar needs some work, please clarify how it should look like. Thanks.

May 21, 2016 at 4:10 pm #1003207

ylpl

Participant

Thank you, it does look much neater now. However, is there any way to move Library Hours next to Contact Us? They would be on the same plane if that makes sense. We kind of want to model our site after http://www.pulaskicounty.lib.in.us/

As far as the Search Bar, we were hoping to have some padding surround it. Once again, we love how http://www.pulaskicounty.lib.in.us/ has done theirs. The big difference between the two is that we would have radio buttons underneath instead of on the left how they have it. Is there any way to add a radio button for Search Catalog as well? Currently, there is just a button for Search Website.

Thank you again,

Daniel

May 21, 2016 at 10:52 pm #1003517

Rue Nel

Moderator

Hello Daniel,

You can update the code and use this:

<header id="header">
  <div class="x-container">
    <div class="x-column x-1-2">
      <h1 class="logo vcard"><a rel="index" class="fn url" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h1>
    </div>

    <div class="x-column x-1-2 last">
      <div class="x-container">
        <div class="x-column x-1-2 last">
          <h4 class="block__title">Contact Us</h4>
          <div class="block__content">
            <p>18181 Imperial Highway<br />Yorba Linda, CA 92886 <br />714- 777-2873<br /></p>
          </div>
        </div>  
        
        <div class="x-column x-1-2 last">
          <h4 class="block__title">Library Hours</h4>
          <div class="block__content">
            <p>Monday - Thursday:  9:00 a.m. - 9:00 p.m.<br/>
            Friday - Saturday: 9:00 a.m. - 5:00 p.m.<br/>
            Closed Sunday<br /></p>
          </div>
        </div>
      </div>
      
    </div>
  </div>

  <div class="x-container">
    <div id="search-2" class="widget widget_search">
      <form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
		 
		<input style="width: 900px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block;background-color: #EFF2FB;" value="" name="lookfor" id="lookfor" placeholder="Search books, movies, etc." type="text">
		<h4 style="display: inline-block;margin: 0px;float:left;">Search </h4><input style="display: inline-block;margin-left: 10px;margin-top: 0px;" name="submit" value="Find" type="submit">
		<input name="type" value="AllFields" type="hidden">
		<p class="choose" style="text-align: right;padding-right: 500px;>
			<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
			<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
		</p>
	  </form>
    </div>
  </div>

</header>

Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      
      <header id="header">
		  <div class="x-container">
		    <div class="x-column x-1-2">
		      <h1 class="logo vcard"><a rel="index" class="fn url" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h1>
		    </div>

		    <div class="x-column x-1-2 last">
		      <div class="x-container">
		        <div class="x-column x-1-2 last">
		          <h4 class="block__title">Contact Us</h4>
		          <div class="block__content">
		            <p>18181 Imperial Highway<br />Yorba Linda, CA 92886 <br />714- 777-2873<br /></p>
		          </div>
		        </div>  
		        
		        <div class="x-column x-1-2 last">
		          <h4 class="block__title">Library Hours</h4>
		          <div class="block__content">
		            <p>Monday - Thursday:  9:00 a.m. - 9:00 p.m.<br/>
		            Friday - Saturday: 9:00 a.m. - 5:00 p.m.<br/>
		            Closed Sunday<br /></p>
		          </div>
		        </div>
		      </div>
		      
		    </div>
		  </div>

		  <div class="x-container">
		    <div id="search-2" class="widget widget_search">
		      <form method="get" id="searchform" action="http://www.ylpl.net/catalog-search" _lpchecked="1">
				 
				<input style="width: 900px;margin-bottom:0;margin-top: 0px;height:30px;display: inline-block;background-color: #EFF2FB;" value="" name="lookfor" id="lookfor" placeholder="Search books, movies, etc." type="text">
				<h4 style="display: inline-block;margin: 0px;float:left;">Search </h4><input style="display: inline-block;margin-left: 10px;margin-top: 0px;" name="submit" value="Find" type="submit">
				<input name="type" value="AllFields" type="hidden">
				<p class="choose" style="text-align: right;padding-right: 500px;>
					<span><input class="radio standard" id="fe1" type="radio" name="searchtype" value="books" checked="checked">search catalog</span>
					<span><input class="radio standard" id="fe2" type="radio" name="searchtype" value="">search website </span>
				</p>
			  </form>
		    </div>
		  </div>

		</header>
	

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

3] Save the file named as _topbar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

This is much better in management your customization in the topbar to prevent any small mistake in the customizer which may further create incompatibility issues.

May 23, 2016 at 1:49 pm #1005762

ylpl

Participant

Thank you, I’ll definitely look into it.

Daniel

Author

Posts

1 2 →

<script> jQuery(function($){ $("#no-reply-994203 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>