How to move "Search in page" bar to the bottom?

[vladimirg]

+1, I also would like to know that…

[snertev]

@vladimirg:

+1, I also would like to know that…

Indeed, it's rather annoying that the page shifts when the bar appears.

In Gecko browsers I can move it by adding plain CSS code to userChrome.css, but I'm still learning how Vivaldi customization works.

I've spent 2 hours before discovering that I can change the fake titlebar background color by adding a custom.css file in Vivaldi folder…

[The_Solutor]

There's a customization thread.

Likely you can find a solution there, or at least you can ask to people expert on such things.

[snertev]

I've asked there.

I'll report the answer here, if there will be one.

[admm]

.find-in-page {margin-top:auto;}
.find-in-page~.internal-page>div, .find-in-page~.webpage webview { top: 0;}

[snertev]

@admm:

.find-in-page {margin-top:auto;}
.find-in-page~.internal-page>div, .find-in-page~.webpage webview { top: 0;}

It works.

Thanks!

[EHM]

@admm Hello admm and all- What file were you editing to achieve this? And do we know if this applies to version 1.12?
Eric

[iAN CooG]

@ehm Refer to the modifications subforum
https://forum.vivaldi.net/category/52/modifications
you'll find instructions on how to add your custom.css in the sticky threads on top

[EHM]

@ian-coog Hi Ian, and thanks for replying. Are you talking about creating a custom.css in the style directory? (by default in ...resources\vivaldi\style in Windows 10). I have already done that. Is that what @admm is editing above? I tried adding that code to the bottom of my custom.css, to no effect.
Eric

[iAN CooG]

@ehm follow the instructions in
https://forum.vivaldi.net/topic/10549/modding-vivaldi

[EHM]

@ian-coog I had already done that before I posted here, for a different modification. I see nothing there about relocating the find-in-page bar.

[dude99]

Hi all, i use the below code to move the find bar to bottom & remove the empty placeholder.

/* find bar */
.find-in-page {bottom:0; margin-top:auto;}
#webpage-stack .webpage { top: 0;}

It works, but is it the correct way to do it? Will it cause any problem by forcing the .webpage with top:0 without .find-in-page as condition?

[luetage]

@dude99 Your code just works. Couldn't find any problem with it so far.

[dude99]

@luetage OK. Thanks for confirm.

[EHM]

@dude99 Works fine for me so far. Thanks for this!

And now a new find bar question: Anyone know how to set the bar, once invoked, to stay visible in all tabs, including new ones, until it is turned off manually?
Thanks in advance,
Eric

[dude99]

Update!!!

I just find out the proper code is better, because it won't affect other mods:

.find-in-page { bottom: 0; }
.find-in-page + .devtools-container .webpage { top: 0; }

[Tipouet]

Is this solution still working? I can't get the search bar to pop at the bottom in Vivaldi 3.4

[dude99]

@Tipouet My current CSS mod version, still work with v3.4: https://forum.vivaldi.net/post/222571

Im working on new version with glass effect when off focus, it should be done soon... pls check back later.

[naporitan0sushi]

Hello, nice to meet you!

I'm Japanese and I'm using Google Translate. I'm sorry if there's anything wrong!

Does this CSS still work now?

It didn't work on Vivaldi 4.4.2473.3 (snapshot)!

It didn't work on Vivaldi 4.3.2439.65 (stable) either!

Please let me know if there is a way to make the "search in page" appear at the bottom, if possible!

[Nebu]

Now that Vivaldi has such powerful customisation options – is there a way to move the search field to the bottom now?