prosilver: move the search box on the right side of the breadcrumbs row

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
-=ET=-
Registered User
Posts: 745
Joined: Sun May 25, 2003 5:32 pm

prosilver: move the search box on the right side of the breadcrumbs row

Post by -=ET=- » Wed Jun 12, 2019 9:20 am

Hi,

For a board with prosilver 3.2.27 part of a website with already existing logo, menus, etc., I want to make the phpBB header lighter.
So exactly like on the phpBB.com support forums, I've removed the headerbar (the div that includes logo, site description and search box).

BUT... I want to keep the search box and transfer it on the right side of the breadcrumbs row.

So I've copied the code of the search box and pasted it in navbar_header.html, right before the last </ul>, also replacing the <div> by <li> and adding rightside to the search-box class...

Code: Select all

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li id="search-box" class="rightside search-box search-header" role="search">
				<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 button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</li>
			<!-- ENDIF -->
The result is close to be perfect. The search box works fine and is displayed in the blue frame on the right side, but... on a row right below the breadcrumbs row. Not on the same one.

So do you know how to fix it?
Have it on the same row as breadcrumbs, on the right side?

Thanks for your help! :)
Eternal newbie

User avatar
-=ET=-
Registered User
Posts: 745
Joined: Sun May 25, 2003 5:32 pm

Re: prosilver: move the search box on the right side of the breadcrumbs row

Post by -=ET=- » Wed Jun 12, 2019 10:09 am

Found!
Just had to remove search-header in the search box class as well :P

It's now really clean and compact on a computer, but... still need to make it hidden on smartphones :roll:
Eternal newbie

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

Re: prosilver: move the search box on the right side of the breadcrumbs row

Post by Lumpy Burgertushie » Wed Jun 12, 2019 3:26 pm

might be better to undo your changes and use this: https://www.phpbb.com/customise/db/exte ... ar_search/

I believe it will be responsive as well.


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
-=ET=-
Registered User
Posts: 745
Joined: Sun May 25, 2003 5:32 pm

Re: prosilver: move the search box on the right side of the breadcrumbs row

Post by -=ET=- » Wed Jun 12, 2019 3:39 pm

Thanks for the info! :)
I'll have a look regarding how they manage the responsiveness.

But this extension is only doing half of what I need:
- it does not remove the blue headerbar
- but indeed it does exactly what I did regarding the search box...
Image
Eternal newbie

User avatar
-=ET=-
Registered User
Posts: 745
Joined: Sun May 25, 2003 5:32 pm

Re: prosilver: move the search box on the right side of the breadcrumbs row

Post by -=ET=- » Wed Jun 12, 2019 4:07 pm

Ok. I had a look and I just needed to add responsive-hide to the search-box class.

I also tried the extension. It works fine but the result is not exactly like on the screen shot. The breadcrumbs/search box row becomes a bit higher while with my modification by hand, the result is exactly like on the screen shot.
I don't know why. Maybe the screen shot is from an older version of the extension, now the CSS has been modified and the result is not exactly like this any more :-/
Eternal newbie

Post Reply

Return to “[3.2.x] Styles Support & Discussion”