Position Search Box right & bottom & floating in prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Position Search Box right & bottom & floating in prosilver

Post by Arclon »

Hello,
I'm trying to change position of Search box in Prosilver to be positioned bottom & right & floats (maintain it's position) when scaling down to smaller displays.
Przechwytywanie.PNG
Przechwytywanie.PNG (9.93 KiB) Viewed 1389 times
I'm trying to play with position:absolute; bottom:0; but this brings the field down of the page :o even if I though it's inside "inner" div.

Can anybody advise me how to solve it?
User avatar
Mick
Support Team Member
Support Team Member
Posts: 22444
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Position Search Box right & bottom & floating in prosilver

Post by Mick »

Navbar Search may be an easier solution for you.
"The more connected we get the more alone we become" - Kyle Broflovski©
Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon »

Yes. I know it. But I'm trying. It's also interesting for me because I'm learning a lot with it.
User avatar
pit-PL
Registered User
Posts: 3091
Joined: Sat Nov 21, 2009 12:24 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by pit-PL »

https://github.com/phpbb/phpbb/blob/mas ... #L374#L378
Just increase 30px to around 130px or another value that suits you.
Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon »

Thx. This I know - problem with it begins when You want to display on smaller displays. In some cases this settings doubles the hight of navbar.
User avatar
pit-PL
Registered User
Posts: 3091
Joined: Sat Nov 21, 2009 12:24 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by pit-PL »

Use media queries in responsive.css to apply different height for different devices.
User avatar
Talk19Zehn
Registered User
Posts: 494
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Position Search Box right & bottom & floating in prosilver

Post by Talk19Zehn »

Hello, correctly - or test perhaps this way: TEST, TEST (custom.css(!)
original: common.css

Code: Select all

.site-description {
     float: none;
     width: auto;
}
... and possibly even the margin-top to: 30px to 20px ???
original: forms.css

Code: Select all

.search header {
     border-radius: 4px;
     display: block;
     float: right;
     margin-right: 5px;
     margin-top: 20px;
}
Your individual case decides, maybe it works according also to your wishes.

Note: I´ve had it only tested with the browser tool (F12).
Regards
Respect and thanks going to Sir Tim Berners-Lee
My own works: Ongray-Design-de | Rhea, Ongray-Design-de | Proteus
Take a look into some bundles: VT-Theme
Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon »

THX
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1003
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Position Search Box right & bottom & floating in prosilver

Post by Hanakin »

If the container is positioned relatively and the search field is floated you may get what you want with verticals-align bottom on the search field just add some margin to the bottom of the search field or some padding to the container. Sorry on my phone so can not test it.
Post Reply

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