Use custom google searchbar. • BuddyBoss

Tagged: google searchbar, other searchbar, searchbar

This topic has 30 replies, 4 contibutors, and was last updated 8 years ago by Varun Dubey.

Viewing 15 posts - 1 through 15 (of 31 total)

1 2 3 →

Question
December 15, 2015 at 3:33 pm #54502

Niel
@niel96
Hi
i want to use a custom google searchbar on my website with the boss theme.
How can i do this?
regards
Answers
December 16, 2015 at 4:31 am #54529

Varun Dubey
@vapvarun
Hi @niel96
You will need to modify search form
inside searchform-header.php
Grab searchform-header.php file from boss theme to child theme and add your google search codes to it
Regards
Varun Dubey
December 25, 2015 at 8:38 pm #55045
Niel
@niel96
Hi
this is my searchcode
```
<form action="http://www.google.be" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-5585792451667139:8586346403" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="55" />
    <input type="submit" name="sa" value="Zoeken" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.be/coop/cse/brand?form=cse-search-box&lang=nl"></script>
```
Do i only put this in searchform-header.php and delete the rest?
December 25, 2015 at 8:40 pm #55046
Niel
@niel96
This is the queries code
```
<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>
<div id="queries"></div>
<script src="http://www.google.com/cse/api/partner-pub-5585792451667139/cse/8586346403/queries/js?oe=UTF-8&callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>
```
I want to use these with the searchbar from the boss theme.
December 26, 2015 at 12:19 pm #55050
Niel
@niel96
When i change
```
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div class="search-wrap">
        <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'boss' ); ?></label>
        <input type="text" value="" name="s" id="s">
        <button type="submit" id="searchsubmit"><i class="fa fa-search"></i></button>
    </div>
</form>	
```
With my custom searchcode everything is working but not on the mobile version.
December 27, 2015 at 1:41 pm #55087

Varun Dubey
@vapvarun
Hi @niel96
You can add search form inside
You can copy template-parts/header-mobile.php inside the child theme
boss-child/template-parts/header-mobile.php
Regards
Varun Dubey
December 27, 2015 at 5:26 pm #55097

Niel
@niel96
Hi
What do you mean with the last you said? So i alsk have to add the searchform in template-parts/header-mobile.php on the boss childtheme?
December 28, 2015 at 1:19 am #55109
Varun Dubey
@vapvarun
Hi @niel96
inside the template-parts/header-mobile.php
we have used the get_search_form() function
WordPress will render its built-in search form
it might be your custom js is not loading inside the mobile version
Please let me know where you have added your query codes
```
<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>
<div id="queries"></div>
<script src="http://www.google.com/cse/api/partner-pub-5585792451667139/cse/8586346403/queries/js?oe=UTF-8&callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>
```
Regards
Varun Dubey
December 28, 2015 at 9:56 am #55127

Niel
@niel96
I only put the searchcode in searchform-header.php , i will also add it to template-parts/header-mobile.php see if that solves the problem.
January 22, 2016 at 2:22 pm #56927

Niel
@niel96
Hi
i changed it on the mobile version but it’s still not working like it should.
January 25, 2016 at 8:11 am #57123

Anonymous
@
Hi @niel96, Please add the script just before closing of <head> in your header.
Regards
March 20, 2016 at 10:03 pm #64174

Niel
@niel96
It’s still not working on mobile version, please see attachment.
This is what i have in (searchform.php):
<?php
/**
* The template for displaying search forms in Boss
*
* @package Boss
*/
?>
<html>
<head>
<title>Zoekfunctie</title>
<meta name=”ROBOTS” content=”NOINDEX, NOFOLLOW” />
<!– CSS styles for standard search box –>
<style type=”text/css”>
#tfheader{
background-color:#595959;
}
#tfnewsearch{
float:right;
padding: 20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #000000; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
</head>
<body>
<!– HTML for SEARCH BAR –>
<div id=”tfheader”>
<form action=”http://google.be” id=”tfnewsearch”>
<div>
<input type=”hidden” name=”cx” value=”partner-pub-5585792451667139:4818308006″ />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” class=”tftextinput” name=”q” size=”” />
<input type=”submit” class=”tfbutton” name=”sa” value=”Zoeken” />
</div>
</form>
<div class=”tfclear”></div>
</div>
</body>
</html>
This is what i have in (template-parts/header-mobile.php):
<div id=”mobile-header” class=”table <?php echo ( boss_get_option( ‘boss_adminbar’ ) ) ? ‘with-adminbar’ : ”; ?>”>
<!– Toolbar for Mobile –>
<div class=”mobile-header-outer table-cell”>
<div class=”mobile-header-inner table”>
<!– Custom menu trigger button –>
<div id=”custom-nav-wrap” class=”btn-wrap”>

</div>
<?php
if ( boss_get_option( ‘boss_search_instead’ ) && is_user_logged_in() ) {
echo get_search_form();
} else {
if ( boss_get_option( ‘logo_switch’ ) && boss_get_option( ‘boss_logo’, ‘id’ ) ) {
?>
<div id=”mobile-logo” class=”table-cell”>
” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”>

</div>
<?php } else { ?>
<h1 class=”table-cell”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
<?php
}
}
?>
<!– Profile menu trigger button –>
<?php if ( is_user_logged_in() || (!is_user_logged_in() && buddyboss_is_bp_active() && !bp_hide_loggedout_adminbar( false ) ) ) { ?>
<div id=”profile-nav-wrap” class=”btn-wrap”>
<span id=”ab-pending-notifications-mobile” class=”pending-count no-alert”></span>
</div>
<?php } ?>
</div>
</div>
</div><!– #mobile-header –>
How can i make this searchbar responsive?
March 21, 2016 at 5:01 am #64222
Anve S.
@anve
Hi @niel96,
Try adding following css in custom css of child theme.
```
#header-search #tfheader {
  background:none!important;
}
#header-search #tfnewsearch {
  padding:0px!important;
}
#header-search #tfheader #tfnewsearch .tfbutton {
  max-width: 115px!important;
}
@media screen and (max-width:1100px) and (min-width:767px){
#header-search .tftextinput {
  float: left;
  width: 55%!important;
  margin-right:2%!important;
}
}
@media acreen and (max-width:767px) and (min-width:645px){
#header-search .tftextinput {
  margin-bottom: 10px !important;
}
.site-header .left-col {
  min-width: 180px!important;
}
}
```
Regards
Anve
March 21, 2016 at 2:37 pm #64379

Niel
@niel96
Hi i tried to add in custom.css from child theme but nothing changed.
Where should i add it. This is what i have in custom css:
/*————————————————————–
This is your custom stylesheet.
Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.
Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
You’re the boss, so have fun editing!
————————————————————–
>>> TABLE OF CONTENTS:
—————————————————————-
1.0 – Global Styles
2.0 – Responsive media queries (mobile styles)
2.1 – MAXIMUM width of 720 pixels (phones landscape)
2.2 – MAXIMUM width of 350 pixels (phones portrait)
2.3 – MINIMUM width of 721 pixels (tablets+)
2.4 – MINIMUM width of 1040 pixels (desktops and laptops)
————————————————————–*/
/*————————————————————–
1.0 – Global Styles
————————————————————–*/
/*
.just_an_example {
color: black;
}
*/
/*————————————————————–
2.0 – Responsive media queries (mobile styles)
————————————————————–*/
/*————————————————————–
2.1 – MAXIMUM width of 720 pixels (phones landscape)
————————————————————–*/
@media screen and (max-width: 720px) {
/*
.just_an_example {
color: black;
}
*/
}/* don’t delete this closing bracket */
/*————————————————————–
2.2 – MAXIMUM width of 350 pixels (phones portrait)
————————————————————–*/
@media screen and (max-width: 350px) {
/*
.just_an_example {
color: black;
}
*/
}/* don’t delete this closing bracket */
/*————————————————————–
2.3 – MINIMUM width of 721 pixels (tablets+)
————————————————————–*/
@media screen and (min-width: 721px) {
/*
.just_an_example {
color: black;
}
*/
}/* don’t delete this closing bracket */
/*————————————————————–
2.4 – MINIMUM width of 1040 pixels (desktops and laptops)
————————————————————–*/
@media screen and (min-width: 1040px) {
/*
.just_an_example {
color: black;
}
*/
}/* don’t delete this closing bracket */
March 22, 2016 at 1:17 am #64464

Anve S.
@anve
Hi @niel96,
Please try adding the css in custom css option in boss theme option panel . Go to Buddyboss > Boss theme > custom codes . There you can see custom css option , enable it and add the css code.
Regards
Anve