How to make Vivaldi's search bar bigger?

TBKR

Hi all, I just want to know if there's a way to make Vivaldi's search bar (not the URL bar) larger in width and height or even custom is not a problem. The search bar is too small for me.

mib2berlin

@TBKR
Hi, you can slide the search bar bigger making the address bar smaller.
If you move the mouse between A and S bar a arrow shows up, move it to your size.
There are several mods out there about the address bar but I cant find a suitable one at moment.

Cheers, mib

TBKR

@mib2berlin
Please could you be more specific? Between the Address bar and Search bar I have the thing showing the Categories: Speed Dial, History, Notes.

BUt an arrow doesn't show when I hover my mouse near the search bar.

Ornorm

@TBKR It seems you're referring to the SpeedDial search box. If so, you could want to mod the CSS (900px as an example):

.sdwrapper .iconmenu-container.SearchField {
      max-width : 900px;
}

From this :

To that :

TBKR

@Ornorm How to make it bit larger in vertical width?

Ornorm

@TBKR

Example with 50px (instead of auto which is the default value).

.sdwrapper .iconmenu-container.SearchField {
      max-width: 900px;
      height: 50px;

Ornorm

@TBKR Don't hesitate to go to the modifications section of this forum to find out more (and lots of explanations on how to proceed).
Certainly the two first posts :

Inspecting the Vivaldi UI with DevTools

Modding Vivaldi

TBKR

@Ornorm How to create a mod file? Instructions unclear in that page.

TBKR

@Ornorm Do you create a CSS file with notepad? Or some other?

Pesala

@TBKR Notepad will do fine. It is just a plain text file with extension *.css

Firlej

It is still better than it was in the past. I was fighting with Vivaldi's team for possibility of nicknames in search bar, because they were so stubborn and wanted this only in URL bar(which was ridiculous).

Now you can us any hotkey, than nickname shortcut and type what do you want.
Only issue is, that this is useless, when you need some suggestions. Because your nickname(doesn't matter if it is only one letter or full word) is affecting suggestion. I wrote about it yesterday here.

So if you need bigger bar, use quick commands. This bar is large and situated in the center of your screen. Suggestions also doesn't work here, so there is no difference.

TBKR

@Pesala The only thing is, after I saved it as a .css file from notepad and when I open Vivaldi and try to select the "Custome UI modification" option, it says to choose a folder, and the .css file I saved is not in the list. Why? Am I doing it wrong?

Ornorm

@TBKR You just need to select the folder where your CSS file is, not the CSS file itself.
Vivaldi will launch all the CSS files contained in that folder (in your case, only one).

Concrete example :
I have : E:\My Vivaldi Tweaks\Custom Vivaldi (the folder containing my css file(s)) referenced in the Custom UI Modifications

TBKR

@Ornorm Thanks for your information! I set my search bar height to 700, for that case and selected the folder. And after restarting Vivaldi changes have been taken place.

Thanks for everyone who tried to help me!

Ornorm

@TBKR Hey! Good news!
So happy you could achieve your first mod. Congratulations!
(be careful because, the once you start, you won't stop... )