January 29, 2015 at 15:06The first steps in changing the Vivaldi browser interface
Just yesterday, the first test version of Vivaldi was shown , and my hands began to itch already to remove some elements I did not need.
So, the first thing I didn’t like was the useless Home button, which Opera also had (15+) under the title Home Page.
Next come the Return and Transition buttons.
Well, in the end, I would not want to see an additional search bar on the right.
The first is pretty simple. In the folder \ Application \ 1.0.83.38 \ resources \ vivaldi \ resources \ we find the icon of the house and see the name "symbol-home.png".
In the comments on the Vivaldi article, they suggested that there is a style file called common.css. Here we will look for our line "symbol-home.png".
Search returns a single result. All we need to do is write before / after / instead . It turns out: Save, check. Now the stupid button is really gone. Regarding the return and transition buttons: a quick search for thumbnails produced images “symbol-next.png” and “symbol-rewind.png”. We are doing the same procedure. We find a snippet of code: And after "! Important" we add . Return button code. Before: After: Everything really works: The search field on the right remains.
Searching for resources gave only "input-search.png" and this did not help me solve the problem of finding the name of the field I needed in the code.
Then I decided to go a bit clumsy way. I noticed that when resizing a window, the size of the field does not change, from which I concluded that the size is clearly written in the code. And then in ordinary MSPaint I measured and found out the field length - 175 pixels.
Search on this number and brought me to the right line. Here we write instead . We save, run and see the result that I pursued. Yes, the interface is not native, it does a hit on performance, but at the same time we have such a plus as full customization.
In this article, I just wanted to show that in Vivaldi there is the possibility of finer tuning. Due to the fact that js and css files are in open form, the user has full access and control over the interface. If desired, you can add your own buttons to the panel with your own icons and functions. If the user needs something for his comfort, then he can do it.
I really hope that Vivaldi developers will not hide these files in containers with any * .pak extension in future versions and will not check their checksums at startup, as Opera did, but still leave this wonderful opportunity for users.
So, the first thing I didn’t like was the useless Home button, which Opera also had (15+) under the title Home Page.
Next come the Return and Transition buttons.
Well, in the end, I would not want to see an additional search bar on the right.
The first is pretty simple. In the folder \ Application \ 1.0.83.38 \ resources \ vivaldi \ resources \ we find the icon of the house and see the name "symbol-home.png".
In the comments on the Vivaldi article, they suggested that there is a style file called common.css. Here we will look for our line "symbol-home.png".
Search returns a single result. All we need to do is write before / after / instead . It turns out: Save, check. Now the stupid button is really gone. Regarding the return and transition buttons: a quick search for thumbnails produced images “symbol-next.png” and “symbol-rewind.png”. We are doing the same procedure. We find a snippet of code: And after "! Important" we add . Return button code. Before: After: Everything really works: The search field on the right remains.
(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{background-image:url(/resources/symbol-home.png)}@media
display:nonebackground-image:url(/resources/symbol-home.png)(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{display:none}@media
(-webkit-min-device-pixel-ratio:2){.button-addressfield.forward,.button-tabbar.forward,.button-toolbar-small.forward,.button-toolbar.forward{background-image:url(/resources/symbol-forward@2x.png)}}.button-addressfield.next,.button-tabbar.next,.button-toolbar-small.next,.button-toolbar.next{background-image:url(/resources/symbol-next.png);min-width:24px!important;max-width:24px!important}@media
;display:none.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important}@media
.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important;display:none}@media
Searching for resources gave only "input-search.png" and this did not help me solve the problem of finding the name of the field I needed in the code.
Then I decided to go a bit clumsy way. I noticed that when resizing a window, the size of the field does not change, from which I concluded that the size is clearly written in the code. And then in ordinary MSPaint I measured and found out the field length - 175 pixels.
Search on this number and brought me to the right line. Here we write instead . We save, run and see the result that I pursued. Yes, the interface is not native, it does a hit on performance, but at the same time we have such a plus as full customization.
.searchfield{margin:4px 4px 4px 0;background:#fff;position:relative;height:26px;flex:0 1 175px;display:flex}.searchfield
display:flexdisplay:noneIn this article, I just wanted to show that in Vivaldi there is the possibility of finer tuning. Due to the fact that js and css files are in open form, the user has full access and control over the interface. If desired, you can add your own buttons to the panel with your own icons and functions. If the user needs something for his comfort, then he can do it.
I really hope that Vivaldi developers will not hide these files in containers with any * .pak extension in future versions and will not check their checksums at startup, as Opera did, but still leave this wonderful opportunity for users.