Page 1 of 2

Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 8:08 pm
by Mick
I'd like to remove the search box from the header and put a search box, search icon with link or even a simple link in the navbar. Basically I'm wanting to do similar to this 3.0 KB article: Knowledge Base - Remove search box & add search icon in navbar.

Something like this would be ideal: :)
search.png
search.png (3.53 KiB) Viewed 1695 times
Cheers

-Mick

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 8:19 pm
by HiFiKabin
5 min and I should have something

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 8:24 pm
by HiFiKabin
OOPS! Thought I could adapt my Google Search Ext, but it won't work. No idea why though *scratches head*

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 8:49 pm
by HiFiKabin
OK, I have 'sort of' got there.

Image
image post

... but you need to comment out/remove the search in overall header. So its not a 'real' extension but I don't know if you can get the search off of the overall_header 'legally'

http://phpbb.hifikabin.me.uk/

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 8:57 pm
by Mick
That is the issue, I've done it by hard-coding but it's too much of a potch to consider it a quick tweak like adding a banner to your header. It probably needs a new event so you can disable the header search box. In any case, it needs an extension.
HiFiKabin wrote:I don't know if you can get the search off of the overall_header 'legally'
phpBB doesn't have storm troopers patrolling to see if users are messing with their code. You can pretty much do what you want with it so long as you don't cross any copyright boundaries.

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 9:02 pm
by HiFiKabin
I have requested events either side of the search box in overall_header (so as to have the google search below the existing search) but I guess you'll need more than that to disable the search appearing there

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 9:12 pm
by Mick
Not knowing that much about events I would have thought that if the search box code was surrounded by an event you should be able to ignore the search box code?

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 12, 2015 9:32 pm
by david63
In the core.page_header_after event send S_IN_SEARCH = false - that will remove the search box.

Re: Remove search box & add search icon in navbar.

Posted: Mon Feb 16, 2015 11:50 am
by Mick
FWIW - I've done this in the meantime plus adding a banner to the header:

This is what I've done to add the search box to the navbar in the meantime:

Always back up any files you intend editing before you edit them.

Open /styles/prosilver/template/navbar_header.html and find:

Code: Select all

<!-- EVENT overall_header_breadcrumbs_after -->
After add:

Code: Select all

<!-- start of new search box -->

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
      <div id="search-box" class="search-box search-header" style="margin-top:5px;box-shadow:none">
            <form action="{U_SEARCH}" method="get" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
               <button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
               <a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
               {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
   <!-- ENDIF -->

<!-- end of new search box -->
Purge the cache and refresh your browser.

If you like the result you can delete the search box from overall_header.html as below:

To remove the search box from the header open /styles/prosilver/template/overall_header.html (prosilver_se is /styles/prosilver_se/template/overall_header.html) find and remove:

Code: Select all

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
Purge the cache and refresh your browser - job done!

[How to] Add a banner:

Assuming prosilver upload your image to the /styles/prosilver/theme/images/ folder. (For prosilver_se /styles/prosilver_se/theme/images/ folder)

Open styles/prosilver/theme/colours.css and find: (prosilver_se is styles/prosilver_se/theme/stylesheet.css)

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("./images/bg_header.gif");
	color: #FFFFFF;
}
Change bg_header.gif to suit your header image and add height: 100px; edit the height to reflect the height of your image.

So it would look similar to:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("./images/your_image.gif");
	color: #FFFFFF;
	height: 100px;
}
Purge the cache and refresh your browser.

Re: Remove search box & add search icon in navbar.

Posted: Mon Feb 16, 2015 4:15 pm
by Lumpy Burgertushie
what I have been doing is to start with prosilver_se since it only has a few files to begin with and a stylesheet.css file.
then, I make the changes to the overall_header.html and the navbar_header.html files and to the stylesheet.css file and then rename it and install it as a new style inheriting from prosilver.

that solves most of the problems of not having the right events in the html.

you would still have to update those two files if needed during an update.

for instance, this :
http://phpbbusers.com/testboard/index.php
is a custom style with only overall_header.html , navbar_header.html and the stylesheet.css file.
of course the images folder contains the new images in this case.

robert

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 19, 2015 5:31 am
by Dragosvr92
Lumpy Burgertushie wrote: for instance, this :
http://phpbbusers.com/testboard/index.php
is a custom style with only overall_header.html , navbar_header.html and the stylesheet.css file.
of course the images folder contains the new images in this case.

robert
I like the system you've come up with. It makes it much easier to update styles as you only need to change the changed files of your style. If your changed files arent changed in the next release, you wont have to do any updates to your style, other than overwriting the prosilver directory, as well as the core files.

I believe this concept of modifying styles should be made popular by phpbb, to notify all users it is more fit to do it this way. It saves a lot of headache when phpbb makes major changes to prosilver.

By the way, could you please send me the style you are using on that board?
I would like to see how you arranged files and to see how you moved the search bad out of the header.
The zip that HiFiKabin provided is no longer working. Thanks.

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 19, 2015 5:58 am
by Lumpy Burgertushie
sure:
http://phpbbusers.com/support/31_styles/prowood_sc.zip

not validated but not much could be wrong with it.


robert

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 19, 2015 6:05 am
by Dragosvr92
Lumpy Burgertushie wrote:sure:
http://phpbbusers.com/support/31_styles/prowood_sc.zip

not validated but not much could be wrong with it.


robert
Thanks Robert, but its not the one you are running on the site.
I need it more to figure out how you moved the search box into the nav bar. Thanks :)

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 19, 2015 7:11 am
by Dragosvr92
Nevermind... i got my nose inside your source files and got it...

I'll leave instructions here in case others need them, as the instructions file is no longer working...
Open nav_header.html
Find: <!-- EVENT overall_header_breadcrumbs_after -->

Add after:

Code: Select all

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->

Open: forms.css
Find: .search-header {
Inside that class, find margin-top: 30px; and replace with margin-top: 2px;

Re: Remove search box & add search icon in navbar.

Posted: Thu Feb 19, 2015 8:29 am
by Mick
I'm surprised you had to edit margin-top when moving the search box, I didn't with the way I did mine - see above. I didn't have to edit anything apart from deleting the header search box and adding the new search box to the navbar. Was that with the default prosilver or a modified style?