Remove search box & add search icon in navbar.

Looking for an Extension? Have an Extension request? Post your request here for help. (Note: This forum is community supported; while there is an Extensions Development Team, said team does not dedicate itself to handling requests in this forum)
Scam Warning
User avatar
Mick
Support Team Member
Support Team Member
Posts: 21662
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Remove search box & add search icon in navbar.

Post by Mick » Thu Feb 12, 2015 8:08 pm

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 1686 times
Cheers

-Mick
"The more connected we get the more alone we become" - Kyle Broflovski

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4052
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

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

Post by HiFiKabin » Thu Feb 12, 2015 8:19 pm

5 min and I should have something

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4052
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

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

Post by HiFiKabin » Thu Feb 12, 2015 8:24 pm

OOPS! Thought I could adapt my Google Search Ext, but it won't work. No idea why though *scratches head*

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4052
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

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

Post by HiFiKabin » Thu Feb 12, 2015 8:49 pm

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/
Last edited by HiFiKabin on Fri Feb 20, 2015 10:42 am, edited 2 times in total.

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21662
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

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

Post by Mick » Thu Feb 12, 2015 8:57 pm

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.
"The more connected we get the more alone we become" - Kyle Broflovski

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4052
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

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

Post by HiFiKabin » Thu Feb 12, 2015 9:02 pm

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

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21662
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

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

Post by Mick » Thu Feb 12, 2015 9:12 pm

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?
"The more connected we get the more alone we become" - Kyle Broflovski

User avatar
david63
Registered User
Posts: 16669
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

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

Post by david63 » Thu Feb 12, 2015 9:32 pm

In the core.page_header_after event send S_IN_SEARCH = false - that will remove the search box.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21662
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

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

Post by Mick » Mon Feb 16, 2015 11:50 am

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.
"The more connected we get the more alone we become" - Kyle Broflovski

User avatar
Lumpy Burgertushie
Registered User
Posts: 66816
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Mon Feb 16, 2015 4:15 pm

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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Dragosvr92
Registered User
Posts: 1450
Joined: Sat Sep 12, 2009 7:27 am
Location: Romania
Name: Dragos Valentin Rădulescu
Contact:

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

Post by Dragosvr92 » Thu Feb 19, 2015 5:31 am

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.
Formerly known as TheKiller
3.0| Avatar on Memberlist 1.0.3

User avatar
Lumpy Burgertushie
Registered User
Posts: 66816
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Thu Feb 19, 2015 5:58 am

sure:
http://phpbbusers.com/support/31_styles/prowood_sc.zip

not validated but not much could be wrong with it.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Dragosvr92
Registered User
Posts: 1450
Joined: Sat Sep 12, 2009 7:27 am
Location: Romania
Name: Dragos Valentin Rădulescu
Contact:

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

Post by Dragosvr92 » Thu Feb 19, 2015 6:05 am

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 :)
Formerly known as TheKiller
3.0| Avatar on Memberlist 1.0.3

User avatar
Dragosvr92
Registered User
Posts: 1450
Joined: Sat Sep 12, 2009 7:27 am
Location: Romania
Name: Dragos Valentin Rădulescu
Contact:

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

Post by Dragosvr92 » Thu Feb 19, 2015 7:11 am

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;
Formerly known as TheKiller
3.0| Avatar on Memberlist 1.0.3

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21662
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

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

Post by Mick » Thu Feb 19, 2015 8:29 am

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?
"The more connected we get the more alone we become" - Kyle Broflovski

Locked

Return to “Extension Requests”

cron