The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Customizing the search box

4 posters

Go down

Solved Customizing the search box

Post by Diana 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.
Customizing the search box Ors10 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Hi there Diana,

What's your forum's URL please?

Regards.
Ace
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 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace 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
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 December 9th 2015, 7:47 pm

do you need an admin account?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Diana wrote:do you need an admin account?

Nope. Just a regular one should do Smile
Ace
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 December 9th 2015, 7:52 pm

Okay
user: Jesy
password: Test123
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace 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
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 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.
Customizing the search box 1110

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?
Customizing the search box 2210

edit: thanks for the code though, it worked
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by Ace 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
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 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

anyone know how to get the extra search option there?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

can anyone help me please?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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



Customizing the search box Slgray10

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

Male Posts : 51597
Reputation : 3527
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Customizing the search box

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

can anyone help me with this?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Diana wrote:can anyone help me with this?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Diana wrote:
Diana wrote:can anyone help me with this?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Diana wrote:
Diana wrote:
Diana wrote:can anyone help me with this?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Diana wrote:
Diana wrote:
Diana wrote:
Diana wrote:can anyone help me with this?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

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

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

Post by SLGray 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.


Customizing the search box Slgray10

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

Male Posts : 51597
Reputation : 3527
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Customizing the search box

Post by Diana 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
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 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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Customizing the search box

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Customizing the search box

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

Topic solved and archived


Customizing the search box Slgray10

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

Male Posts : 51597
Reputation : 3527
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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