The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Customizing the search box

View previous topic View next topic Go down

Solved Customizing the search box

Post by Diana on December 9th 2015, 6:43 pm

I set up the search box like on this forum. I have a few questions though:
1. How do I move the search box a little bit? It's kinda in the wrong place.
I want to move it to the right corner, like it is on here.
2. How do I add the little menu with the little gear image?
3. How do I replace the "Otsi" button with another image?

i have phpbb2


Last edited by Diana on December 19th 2015, 10:34 pm; edited 1 time in total

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace on December 9th 2015, 6:56 pm

Hi there Diana,

What's your forum's URL please?

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 9th 2015, 7:00 pm

I'm doing it on my test forum at the minute so... http://test.forumpro.eu/
I want it working properly before I put it on my real forum

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace on December 9th 2015, 7:02 pm

@Diana wrote:I'm doing it on my test forum at the minute so... http://test.forumpro.eu/
I want it working properly before I put it on my real forum

Sure no problem. Very Happy

Can you provide me with a test account? I can't register and therefore can't see topics and stuff. Razz

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 9th 2015, 7:47 pm

do you need an admin account?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace on December 9th 2015, 7:48 pm

@Diana wrote:do you need an admin account?

Nope. Just a regular one should do Smile

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 9th 2015, 7:52 pm

Okay
user: Jesy
password: Test123

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace on December 9th 2015, 7:59 pm

Hi again,

Try this one:

Code:
p.nomargin {
    margin-left: 1000px;
}

About number 3, isn't it in your images on the Admin CP? If not, then just look for the URL of that image on your CSS.

Can you explain a little bit more what do you want in your second question?

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 9th 2015, 8:32 pm

About 3. I only changed the template and that's the image that showed up. I haven't done anything else. I'd like to change the image.


About 2. There's the little gear in the search bar, that let's you search topics/posts and hashtags. How do I get that?


edit: thanks for the code though, it worked

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace on December 9th 2015, 8:45 pm

Hi,

About the Engine:

Code:
#fa_search_opts {
    background: url(http://i21.servimg.com/u/f21/18/45/41/65/opts_m10.png) 0 0 no-repeat;
    height: 17px;
    position: absolute;
    right: 35px;
    top: 9px;
    width: 16px;
}

Do you want the JS to make it work as well or just the background?

About the 3, would you like something like this forum's search button?

Regards.


Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 9th 2015, 8:57 pm

Thanks but the code didn't do anything. I don't just want the gear, I want the function of it. When it open the little search menu.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 10th 2015, 9:23 pm

anyone know how to get the extra search option there?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 11th 2015, 10:33 pm

can anyone help me please?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by SLGray on December 12th 2015, 2:15 am



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36692
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 12th 2015, 2:18 pm

Yes and I got it but it doesn't have the same features. So now I'm aking how to get that advanced search options on it. And how to change the look of it.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 13th 2015, 3:41 pm

can anyone help me with this?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 14th 2015, 7:14 pm

@Diana wrote:can anyone help me with this?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 15th 2015, 9:32 pm

@Diana wrote:
@Diana wrote:can anyone help me with this?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 16th 2015, 10:23 pm

@Diana wrote:
@Diana wrote:
@Diana wrote:can anyone help me with this?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 18th 2015, 12:06 am

@Diana wrote:
@Diana wrote:
@Diana wrote:
@Diana wrote:can anyone help me with this?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 19th 2015, 12:11 am

So... anyone? Or did the search box magically appear on here? Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by SLGray on December 19th 2015, 2:25 am

You need to understand that somethings on the support forum can not be shared. You will have to wait until @Ange Tuteur sees this topic.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36692
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 19th 2015, 3:39 pm

Oh I wasn't aware of that. I thought it was as usual as asking for help with something else.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ange Tuteur on December 19th 2015, 7:58 pm

Hi,

I apologize for the late reply. For the search options, you need to create a new JavaScript via Modules > JS codes management

Placement : In all the pages
Code:
/* additional options for the main phpbb3 search bar */
$(function() {
  // 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 = document.getElementById('search'),
  settings = document.createElement('DIV'),
  opts = document.createElement('A');
 
  if (search) {
    settings.style.display = 'none';
    settings.id = 'fa_search_settings';
 
    // general settings
    settings.innerHTML = '<p>' + lang.display_as + '</p><p><input id="searchOptsPosts" type="radio" name="show_results" value="posts"/><label for="searchOptsPosts">' + lang.posts + '</label><input id="searchOptsTopics" type="radio" name="show_results" value="topics" checked="true"/><label for="searchOptsTopics">' + lang.topics + '</label></p><p><label for="searchOptsTags">' + lang.tags + '</label> <input id="searchOptsTags" type="checkbox" name="is_tag" value="tags"/></p><hr class="dashed"/><p><a href="/search">' + lang.advanced + '</a></p>';

    opts.href = '#';
    opts.title = lang.options_title;
    opts.id = 'fa_search_opts';

    // toggle display state of settings
    opts.onclick = function(e) {
      e.preventDefault();
      var settings = document.getElementById('fa_search_settings');
      settings.style.display = /none/.test(settings.style.display) ? 'block' : 'none';
    };

    // hide settings on search bar focus
    search.search_keywords.onfocus = function() {
      var settings = document.getElementById('fa_search_settings');
      if (!/none/.test(settings.style.display)) settings.style.display = 'none';
    };

    search.appendChild(opts);
    search.appendChild(settings);
  }
});
// par ange tuteur

Then you need to add a bit of CSS to your stylesheet :
Display > Colors > CSS stylesheet
Code:
/* Main search bar options ( main_search_options JS required ) */
#search { position:relative }

#fa_search_opts {
  height:17px;
  width:16px;
  background:url('http://i21.servimg.com/u/f21/18/45/41/65/opts_m10.png') 0px 0px no-repeat;
  position:absolute;
  top:9px;
  right:35px;
}

#fa_search_opts:hover { background-position:-16px 0px }

#fa_search_settings {
  color:#333;
  text-align:center;
  background:#FFF;
  border:1px solid #DDD;
  border-radius:3px;
  box-shadow:0 3px 9px rgba(0, 0, 0, 0.175); 
  position:absolute;
  top:45px;
  right:0;
  z-index:1;
  padding:3px;
  width:175px;
}

#fa_search_settings:before {
  content:url(http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png);
  position:absolute;
  top:-10px;
  right:32px;
}

#fa_search_settings p { font-size:11px }
#fa_search_settings label {
  padding:0px 6px 0px 3px;
  vertical-align:middle;
  cursor:pointer;
}

FYI the options are only optimized for the phpbb3 search bar, however, it can be modified to work for any search bar so long as it has the id
Code:
#search
.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Customizing the search box

Post by Diana on December 19th 2015, 10:33 pm

@Ange Tuteur thanks! That's what I needed.

I still don't understand why it's such a secret though.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by SLGray on December 20th 2015, 2:00 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36692
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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