Latest topics
» Starred Forums
by Ange Tuteur Yesterday at 16:02

» Awards systems
by mr.abolo Yesterday at 12:54

» How to make user details like this one
by Ange Tuteur Yesterday at 12:35

» what if you asked for help to fix a problem in forum and you got this
by Ange Tuteur Yesterday at 12:07

» [GAME] Count to One Million!
by Ange Tuteur Sun 22 Jan 2017, 19:44

» Change the Path ::
by Guest Sun 22 Jan 2017, 14:22

» blah
by Andrei34 Sun 22 Jan 2017, 01:13

» How to remove these spaces
by Gin NeOs Sat 21 Jan 2017, 19:34

» Hello! I'm Prometheus.
by Guest Sat 21 Jan 2017, 08:12

» Night Mode
by Michael_vx Sat 21 Jan 2017, 00:00

» Happy Birthday Thread
by Michael_vx Fri 20 Jan 2017, 23:18

» The Happy Thread
by Guest Fri 20 Jan 2017, 08:37

» Display a Preview of Groups on Hover
by Guest Fri 20 Jan 2017, 08:32

» Race for the White House
by Guest Fri 20 Jan 2017, 08:23

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Fri 20 Jan 2017, 03:27

Recent Tutorials
Top posting users this month
Who is online?
In total there are 10 users online :: 1 Registered, 0 Hidden and 9 Guests :: 1 Bot

Valoish

[ 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 : 4213
Points : 8685
Reputation : 2109
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 http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png in the settings variable with this URL : http://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 : 577
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 : 4213
Points : 8685
Reputation : 2109
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 : 285
Points : 880
Reputation : 118
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 : 1075
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:
http://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 : 4213
Points : 8685
Reputation : 2109
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 : 1075
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 : 94
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 : 2069
Points : 2542
Reputation : 70
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 : 94
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 : 2069
Points : 2542
Reputation : 70
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 : 1040
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
Guest
Guest
View all awards

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



Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4213
Points : 8685
Reputation : 2109
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; }
Guest
Guest
View all awards

PostGuest 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
Guest
Guest
View all awards

PostGuest on Fri 09 Dec 2016, 11:38

And I've got a small tip for you regarding this code, @Ange Tuteur:





Add a line-break to that JS to avoid having 2 radio buttons sitting on that 1st line in the options Wink


#linebreak #line-break #javascript #js #search #options


Hello Samantha.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4213
Points : 8685
Reputation : 2109
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 12 Dec 2016, 11:38

Oh that was intentional. The design was meant to be similar to the default search popup.


The solution you provided will be useful for those who want it that way though, so thank you for sharing !
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2246
Points : 4212
Reputation : 263
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sat 17 Dec 2016, 00:37

I just encountered a weird issue. When I was looking in a certain area that has a topic title Thanks Silverwren, the topic would not come up in the live search for the word thanks.

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4213
Points : 8685
Reputation : 2109
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 19 Dec 2016, 10:52

@SLGray that's a problem with Forumotion. For some reason the word "Thanks" is blacklisted or something from the search keywords. Even when you search it the normal way nothing comes up, for example : http://help.forumotion.com/search?search_keywords=thanks

I'm not exactly sure why they'd want to blacklist that, because people will no doubt be searching for information on the "thanks" feature in the AP.

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