Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Search Bar Options

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 18 Apr 2016, 08:18

This plugin installs additional options on the search bars in your Forumotion forum. Allowing you to choose between posts, topics, and tags. There's also a link to the search page for more advanced searches.


Click to view demo

This plugin can work on any version so long as you have a search bar installed on your forum similar to phpbb3's. If your version is not phpbb3 you should see the spoiler below, otherwise just proceed with the installation as normal.


Installing a Search Bar:

Insalling a Search Bar

If you're reading this, then your forum version is not phpbb3 and you're looking to install a search bar on your forum.

To install the search bar go to Admin Panel > Display > Templates > General > overall_header and find the following line of code based on your forum version :

phpbb2 :
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

punbb :
Code:
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

invision :
Code:
            <!-- BEGIN switch_user_logged_out -->
            <div id="userlinks" class="not-connected clearfix">
               <span class="guest">{L_NOT_CONNECTED}</span> <span>{L_LOGIN_REGISTER}</span>
            </div>
            <!-- END switch_user_logged_out -->

Once you find one of the snippets of code above, paste this code after it :
Code:
<!-- BEGIN switch_search_box -->
<div id="search-box" style="float:right;">
  <form method="get" action="{ACTION_SEARCH}" id="search">
    <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
    {JS_SESSION_ID_INPUT}
    <input class="button2" type="submit" value="{L_SEARCH}" /></p>
  </form>
</div>
<div class="clear"></div>
<!-- END switch_search_box -->

Once you're finished, make sure to save and publish the template. After this, you'll have a search bar at the top of your forum ! However, if you want additional search options please continue with the following tutorial. Wink


Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Search Options
Placement : In all the pages
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t493-search-bar-options#6588';

  // language config
  var lang = {
    display_as : '<b>Display results as : </b>',
    posts : 'Posts',
    topics : 'Topics',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Advanced Search</b>',

    options_title : 'Search options'
  },

  // search options layout
  settings = $(
  '<div class="fa_search_options" style="display:none;">'+

    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow

    '<p>' + lang.display_as + '</p>'+

    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+

      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+

    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+

    '<hr class="dashed"/>'+

    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+

  '</div>'),

  // search options toggler
  cog = $('<a href="#" class="fa_search_cog" title="' + lang.options_title + '"><i class="fa fa-cog"></i></a>').click(function() {
    var settings = this.nextSibling,
        arrow = $('.fa_search_arrow', settings)[0];

    settings.style.display = /none/.test(settings.style.display) ? 'block' : 'none'; // toggle options display

    // popup position
    if (!arrow.style.right) {
      var width = this.getBoundingClientRect().width;
      arrow.style.right = width + 'px';
      settings.style.right = $(this).closest('form').find('input[type="submit"]')[0].getBoundingClientRect().width - width + 'px';
    }

    return false;
  }),

  search = $('form[action^="/search"]'), // all search forms
  i = 0, j = search.length, frag;

  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }

  for (; i < j; i++) {
    var keywords = search[i].search_keywords;

    if (keywords && search[i].name != 'searchform' && search[i].parentNode.id != 'search_menu') {
      frag = document.createDocumentFragment();
      frag.appendChild(cog.clone(true).attr('style', 'left:' + keywords.getBoundingClientRect().width + 'px;')[0]);
      frag.appendChild(settings.clone()[0]);

      search[i].className += ' fa_search_form';
      keywords.onfocus = function() {
        var settings = $(this).closest('form').find('.fa_search_options')[0];
        if (!/none/.test(settings.style.display)) settings.style.display = 'none';
      };

      search[i].appendChild(frag);
    }
  }
});

document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;margin-left:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');
When you're finished, save the script and the plugin will be installed ! After this you'll be able to access the search options by clicking the cog in the search area.

If you'd like to make modifications to this plugin please see the next section.


Modifications

Below is a list of modifications that you can make to this plugin.


1. Lanugage
If you want to change the wording or language of this plugin, find the lang object in the script.
Code:
  var lang = {
    display_as : '<b>Display results as : </b>',
    posts : 'Posts',
    topics : 'Topics',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Advanced Search</b>',

    options_title : 'Search options'
  },
This way you can change the text to whatever you like. Wink


2. Search Options Popup
If you want to edit the structure of the popup, find and edit the HTML of the settings variable.
Code:
  settings = $(
  '<div class="fa_search_options" style="display:none;">'+

    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow

    '<p>' + lang.display_as + '</p>'+

    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+

      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+

    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+

    '<hr class="dashed"/>'+

    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+

  '</div>'),


3. The Theme
If you want to edit the theme for the search options, find and edit the stylesheet at the bottom of the script.
Code:
document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');

If you want a dark theme, replace the above stylesheet with this one :
Code:
document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#333;font-size:16px;position:absolute;margin-top:-8px;top:50%}.fa_search_cog:hover{color:#CCC}.fa_search_options{color:#CCC;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#111;border:1px solid #333;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');
and make sure to replace https://i18.servimg.com/u/f18/18/21/41/30/arrow11.png in the settings variable with this URL : https://i86.servimg.com/u/f86/18/45/41/65/arrow110.png so the arrow is dark as well.


These are all the modifications you can make ! If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! cheers


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Tue 19 Apr 2016, 17:50; edited 1 time in total
omarpop23

Title :
Gender : Male
Age : 22
Posts : 130
Points : 530
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Mon 18 Apr 2016, 08:27

Thanks alot Ange Tuteur i was waiting This tutorial Thumb left
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 18 Apr 2016, 08:37

You're welcome ! Wink
skouliki

Title :
Gender : Female
Posts : 274
Points : 781
Reputation : 107
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Mon 18 Apr 2016, 11:53

add it thanks Like a Star @ heaven

--------

schiggysboard

Title :
Gender : Male
Posts : 79
Points : 1028
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.schiggysboard.com/

Postschiggysboard on Sun 22 May 2016, 11:11

Since today it looks like that:
https://i86.servimg.com/u/f86/16/43/86/96/fhjnsm10.png

Any idea why, @Ange Tuteur?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 22 May 2016, 13:11

@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :
Code:
a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"
Guest
Guest
View all awards

PostGuest on Sun 22 May 2016, 13:31

@Ange Tuteur wrote:@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :
Code:
a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"

What does that cog stand for?


Last edited by Samantha on Sun 22 May 2016, 18:36; edited 1 time in total
schiggysboard

Title :
Gender : Male
Posts : 79
Points : 1028
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.schiggysboard.com/

Postschiggysboard on Sun 22 May 2016, 13:55

@Ange Tuteur wrote:@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :
Code:
a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"
Thank you, it's working. Smile
Ency
New Member
Title :
Gender : Unspecified
Posts : 7
Points : 47
Reputation : 0
Language : English, French
Browser : Browser : Safari Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostEncy on Mon 31 Oct 2016, 11:47

Hi !

How can I remove the search bar please ? (hiding it with CSS being the most practical option i guess, but I don't know how....)

Thank you guys!
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 31 Oct 2016, 11:59

CSS:

Code:
#search-box, .search-box { display: none; }
Ency
New Member
Title :
Gender : Unspecified
Posts : 7
Points : 47
Reputation : 0
Language : English, French
Browser : Browser : Safari Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostEncy on Mon 31 Oct 2016, 12:12

thanks!
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 31 Oct 2016, 12:54

Yeah no prob just tag me in the future if you need something.
Beyonder
Member
Title :
Gender : Male
Age : 20
Posts : 18
Points : 993
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://narutorpguniverse.forumotion.com

PostBeyonder on Wed 02 Nov 2016, 23:51

Nice! Very Happy
Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 170
Points : 395
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Fri 02 Dec 2016, 14:56

Hmm... This plug-in doesn't seem to be working right with our Edge, @Ange Tuteur. Though the icon is showing, when clicking it, it doesn't show the options ...




--------


Lovely




Satisfy




World
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 05 Dec 2016, 11:23

@Samantha NL try adding the following CSS rule to your stylesheet.
Code:
#main-search { overflow:visible; }
Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 170
Points : 395
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Tue 06 Dec 2016, 02:12

@Ange Tuteur wrote:@Samantha NL try adding the following CSS rule to your stylesheet.
Code:
#main-search { overflow:visible; }

Thanks! Working now. Smile

--------


Lovely




Satisfy




World

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum