BuddyBoss Home – Web Support Forums Themes Boss. theme Use custom google searchbar.

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

    #54502
    @niel96

    Hi

    i want to use a custom google searchbar on my website with the boss theme.
    How can i do this?

    regards

    Answers

    #54529
    @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

    #55045
    @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?

    #55046
    @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.

    #55050
    @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.

    #55087
    @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

    #55097
    @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?

    #55109
    @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

    #55127
    @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.

    #56927
    @niel96

    Hi

    i changed it on the mobile version but it's still not working like it should.

    #57123

    Anonymous
    @

    Hi @niel96, Please add the script just before closing of <head> in your header.

    Regards

    #64174
    @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&#8221; 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?

    #64222
    @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

    #64379
    @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 */

    #64464
    @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

Viewing 15 posts - 1 through 15 (of 31 total)
  • The question ‘Use custom google searchbar.’ is closed to new replies.