We will be updating the Forum on Tuesday, 19th of March between 09:00 and 11:00 (UTC) (see the time in your time zone). During this time you may experience some downtime. Thanks in advance for your patience. đ
Vivaldi UI Customisations
-
I've been helping a lot of folks on customising their Vivaldi UI, I believe it would be good to have a central discussion place where we can discuss, show our discoveries and ask for help.
This first post will serve as an index for all the important tips and tricks.
How Vivaldi UI Works
Vivaldi UI works exactly like a website, it's structured with HTML, styled with CSS and has JavaScript to run functions and modify the first two.
More In-Depth
Being more specific, Vivaldi UI HTML is empty, all elements are added by the JS. There are a lot of elements that simply do not exist until you request them, the advantage here is to not waste resources for stuff that would be hidden most of the time; it's also good for adding the elements where it's easier to show them and where they need to be.
The files that compose the Vivaldi UI are easily accessible under
/$VivaldiInstallDir$/resources/vivaldi/
On Mac they are under
/Applications/Vivaldi.app/Contents/Versions/$last version$/Vivaldi Framework.framework/Resources/vivaldi/
(Thanks greybeard for the info)What Does This All Means?
This means that messing with the HTML file is 'useless', it contains nothing worth editing. The magic is all inside the JS and the real customisation is in the CSS.
Editing the JS is not really worth if you plan giant stuff, it may all be broken on a new release, you may break the whole browser and there's no easy way on merging your edits.
The CSS on the other hand is easy to maintain, easy to work with and you can modify the position of everything without the need of JS.
It's worth noting that the JS adds a lot of classes depending on state, preferences and OS. For example, the body has a class with the OS name and one with the window state, like maximized, normal (restored) or fullscreen.
If you want to edit the CSS there are two ways:
- Open
common.css
and add this at the beginning of the file:
@import "custom.css";
- Open
browser.html
and add this line after the first<link>
tag:
<link rel="stylesheet" href="style/custom.css">
And add all your CSS edits in a
custom.css
file. This way you can just copy your old custom file and add this line again, this way you'll always keep the original common file intact.How To Inspect With Dev Tools
You can use the Developer Tools to inspect the Vivaldi UI and do live edits on it.
To do so you'll have to run Vivaldi with this command line:
--debug-packed-apps --silent-debugger-extension-api
, once you run Vivaldi you should be able to right click anywhere on the UI and choose Inspect.On Windows you can right-click a shortcut and open its properties. If you are familiar with Opera Dragonfly you'll soon think about shooting yourself after some minutes of Chrome Dev Tools, but that's all we got.
Tips & Tricks Index (Broken and outdated links)
Make empty tab bar space to right of tabs "grabbable" to allow moving window (by An_dz)
Edit Vivaldi UI font sizes in common.css (by Tiamarth, by An_dz two comments below) [modify path appropriate to current installation]
New tab on double click in tab bar
Modifying number of columns in Speed Dial
Customise Speed Dial Thumbnails
Tweak to improve appearance of tab previews- Useless now
Coloured selection in text boxes (e.g. address box, search box)
Mac Graphite Window Actions Buttons
The first reply here contains a lot of small edits that you may find useful. - Open
-
Small Edits
Hiding the tab close button
.tab .close { display: none !important; }
Tab height as Presto Opera
#tabs-container.bottom .tab, #tabs-container.top .tab, #tabs-container .newtab, #tabs-container .toggle-trash { min-height: 26px !important; height: 26px !important; } .tab-strip .tab .tab-header { flex: 0 0 26px; }
Adding window borders (for those who do not like the borderless look)
#browser.normal { padding: 0 5px 5px !important; }
-
So Thanks muchly for the help, which also gave me a template of some of the syntax needed for UI tweaking, and you will see in the attached screenshot that I did make some additional adjustments, to remove the Rewind and Fast Fwd buttons, after which I moved the Main Menu over to fill the space and not overlap the address box , as I discovered that you had had to hard-code the position of a lot of elements in order to make things work at all.
As you could see CSS is super powerful, but most don't know how to use it.
The worst part was trying to prevent the tabs being over the address bar drop-down menu. But some z-index tweaking managed it.
By the way, have you noticed the border below the tabs change the colour with the site too? It was not intentional, total luck on this.
But how to you adjust the height to make the top bar in my screenshot a bit slimmer ?
.addressfield, .searchfield, .searchfield .searchfield-input, .addressfield form input { height: 24px !important; } .button-tabbar, .addressfield .pageload-indicator, .button-addressfield.bookmark { height: 22px !important; } .toolbar.toolbar-addressbar .button-toolbar { min-width: 30px !important; height: 30px !important; } .addressfield .addressfield-siteinfo, .button-addressfield.bookmark { min-width: 20px !important; height: 20px !important; } .button-tabbar.input-search { width: 22px !important; height: 22px !important; }
Keep the pixel difference the same, the second must always be 2px less, the third 6px more, and so on.
You'll still need to change background-position and background-size of these:
.addressfield .addressfield-siteinfo, .button-addressfield.bookmark, .button-tabbar.input-search -
@An_dz: I'm glad you started this thread. Great idea.
I started a cumulative list of links to Vivaldi UI Customization (& Skinning) tips/discussions in the pinned Tips & Tricks thread a while back that I'm trying to keep updated.
So far, 3 of the 6 links listed point to tips you've posted, and you have a significant percentage of the posts in the White Skin thread also listed there.
This thread may rapidly take over the purpose of that list (which would be fine), but let me know if you come across anything else you think is worth adding to the list.
-
I started a cumulative list of links to Vivaldi UI Customization (& Skinning) tips/discussions in the pinned Tips & Tricks thread a while back that I'm trying to keep updated.
This thread may rapidly take over the purpose of that list (which would be fine), but let me know if you come across anything else you think is worth adding to the list.
I saw it. I decided to create this thread as the "A white skin" thread was getting polluted with questions not regarding the original topic.
So you mean that if I choose to tweak the first parameter smaller, that I will need to reduce the others by the same number of pixels as the first, to keep them all in step ?
Yes.
You'll still need to change background-position and background-size of these :
.addressfield .addressfield-siteinfo, .button-addressfield.bookmark, .button-tabbar.input-searchAnd I will not know by how much until I am happy with the new hard-coded positions of the top bar's elements, correct ?
Yes, it requires a lot of tweaking on those values to fit the new areas.
-
For those used to Presto Opera feature of opening a new tab by double clicking the tab bar, here's how to add this feature on Vivaldi.
Open bundle.js and search for this string, should be near the beginning of line 19:
r.createElement("div",{classname:"tab-spacer", ```And add this right after it:
onDoubleClick:this.createTab,
r.createElement("div",{classname:"tab-spacer",onDoubleClick:this.createTab,onClick:
Because of this I also learned that middle clicking the tab bar also opens a new tab. @Vivaldi Devs: This could be added with an option, so if the feature is enabled it opens a new tab, if disabled it calls the function to toggle maximised/restored (chrome.app.window.current()). For dragging capability I believe doing a click-drag check and then adding the _-webkit-app-region:drag_ should work.
-
@An_dz: With all the work you've done customizing Vivaldi CSS, do you have any particular suggestions for reformatting/beautifying the common.css code to make it more human-readable and easier to work with?
I tried each of the following web-based reformatters on Vivaldi v1.0.151.7 common.css, using their default settings:
⢠http://www.cleancss.com/css-beautify/
⢠http://www.lonniebest.com/formatcss/
⢠http://www.styleneat.com/
⢠http://www.cssportal.com/format-css/index.php
⢠http://www.codebeautifier.com/
^ (codebeautifier.com also provided list of invalid properties, optimized number changes, an invalid @-rule removed, and an invalid color name change)âŚand they all seemed to do a good job from my ignorant perspective.
Most or all of these have settings that can be modified before reformatting, but I just used the default settings for each. Output appears to be similar for each, with roughly similar file size (original Vivaldi common.css 161 KB; reformatted ouputs 163-199 KB) except the lonniebest.com output is is only 38 KB and appears to be truncated for some reason. (?) (I didn't investigate that further as I'm not familiar enough with CSS, but you might be able to tell at a glance.)
I imagine any of the above web-based utilities might be adequate for occasional investigation/tweaking of Vivaldi's common.css, but I would appreciate knowing if you prefer one of the above (or any other) and maybe a brief explanation why. Also, if you recommend any particular web-based utility would be fine with me, but if you know of a good standalone/portable local machine utility I would probably prefer that. Finally, if you have any suggestions about the settings/options on any of the above (or any other), I'd also appreciate your thoughts on that.
-
Here's how you can set a maximum of Speed Dial thumbs. Vivaldi maximum number is 6 right now.
Since the CSS must be different for each number of columns, I'll try to explain how to adapt the strips for the number you want.
In all strips C is number of columns you want. J may be read kind like C! it must start as 1 and end as C, it's like a for().The selectors, which are the first line of the strips, must remove the numbers from C and below. For example, if you want C=3 you should remove .speeddial.cols2, .speeddial.cols3 in the first strip, and this should follow on all strips.
Whatever inside brackets {} should become a number without brackets, so {220+[250*(C-1)} for C=2 must be 470.
This sets the width of the holder of the dials:
.speeddial.cols2, .speeddial.cols3, .speeddial.cols4, .speeddial.cols5, .speeddial.cols6 { width: {220+[250*(C-1)]}px !important; }
This is to set the left position of the dials, you should do this for each J, so if you want three columns you should add this strip for J=1, J=2 and J=3. For programmers read this as for(int J=1; J<=C; J++)
.speeddial.cols2 .dial:nth-of-type({C}n+{J}), .speeddial.cols3 .dial:nth-of-type({C}n+{J}), .speeddial.cols4 .dial:nth-of-type({C}n+{J}), .speeddial.cols5 .dial:nth-of-type({C}n+{J}), .speeddial.cols6 .dial:nth-of-type({C}n+{J}) { left: {0+(250*J)}px !important; }
This is to set the top position of the dials, again do for every J, but here you might want to go slightly more, add as much as needed until all lines are ok. Remember J starts as 1.
.speeddial.cols2 .dial:nth-of-type({C}n+{(C*J)+1}), .speeddial.cols3 .dial:nth-of-type({C}n+{(C*J)+1}), .speeddial.cols4 .dial:nth-of-type({C}n+{(C*J)+1}), .speeddial.cols5 .dial:nth-of-type({C}n+{(C*J)+1}), .speeddial.cols6 .dial:nth-of-type({C}n+{(C*J)+1}) { top: {240*J}px !important; }
-
@An_dz: With all the work you've done customizing Vivaldi CSS, do you have any particular suggestions for reformatting/beautifying the common.css code to make it more human-readable and easier to work with?
I imagine any of the above web-based utilities might be adequate for occasional investigation/tweaking of Vivaldi's common.css, but I would appreciate knowing if you prefer one of the above (or any other) and maybe a brief explanation why. Also, if you recommend any particular web-based utility would be fine with me, but if you know of a good standalone/portable local machine utility I would probably prefer that. Finally, if you have any suggestions about the settings/options on any of the above (or any other), I'd also appreciate your thoughts on that.
I do not use web-based minifiers/beautifiers. For minifying JS I use a plugin on Sublime Text, the rest I minify myself. To beautify I do it manually if good old search and replace, since that's what any beautifier do. I use regular expressions to beautify the code and the advantage is that I get exactly what I must. You can use them for occasional investigation as you said, no problem.
Any beautifier that removes or join selectors and properties is not a good beautifier on my view. If the code is minified it means that's what the dev wants, if you change it you might be changing the dev and the page view and behaviour of some selectors since the order of them is important in CSS. Removing "invalid" things is relative. It's invalid where? I can create a software that reads CSS and has a unique property called bg-color. It's invalid for all browsers but not for my software. The ::selection selector for example is invalid by the CSS standard, but not for any modern browser.
Also I have not beautified my common.css as I find it useless. I rather just add stuff in custom.css and use the dev tools to only read the CSS I need, in rare cases I read it minified or beautify only what seems important at the moment.
It seems that speaking in understatements appeals to you !
If you feel this wayâŚ
I did get SOME influence over the position of .button-addressfield.bookmark by using some other commands
This should be sufficient for it:
.button-addressfield.bookmark { background-position-y: -4px !important; }
I did get the 3 navigation buttons resized and positioned ok, but the ones for which you said Ii would need to tweak the background-position and background-size are completely ignoring my attempts to do so by using those commands.
Here is an example of my syntax which is being ignored :
.addressfield .addressfield-siteinfo
I found that the correct selector is
.addressfield .addressfield-siteinfo:before
BTW, the width and height commands in that example may also have been ignored, IIRC.
It's not ignoring, It's defining the sizes of the button. It's not changing the size of the image because the image is not tied to the element. If you let the sizes the same as before you'll see that the button is clickable outside where it should.
Also, I cannot determine the element names for the icons on the bookmarks bar and on each of the tabs, so that i could try a similar nudge upwards on those too, as they stayed put when I trimmed the height of the bars on which they reside.
Use this:
.bookmark-bar button::before { height: 28px !important; }
You should start using the dev tools as explained in the first post here rather than trying to guess stuff.
-
@An_dz: Thanks for your reply re CSS "beautifier" reformatters. So if I need to visually browse the CSS code, I'll just use one of the ones I mentioned, but make any actual changes in common.css as formatted by the developers or (more likely) in custom.css as you recommended.
I haven't yet had a chance to try the Developer Tools with âremote-debugging-port=XXXX, but it sounds like maybe I won't even need a "beautifier" reformatter once I'm set up to go that route.
Thanks again!
-
So if I understand correctly, these 'beautifier' apps are just to help make legible sense of the proverbial 'wall-o-code' which seems to be how many program files end up getting compiled ? ⌠Possibly using them just as viewers would serve me well enough, and might yield similar results to my below method.
Exactly. But notice An_dz's cautionary remark, "Any beautifier that removes or join selectors and properties is not a good beautifier on my view."
At least one web-based reformatters I listed above automatically "corrects" errors (IIRC correctly, whether it does this and how much may be selectable, but I just ran the default settings) and some have options sort CSS elements, etc. If I understand An_dz correctly, those changes might goof up something developers have intentionally implemented.
So my idea is just to use them (if needed) as a "viewer" to make the code more readable/understandable while I'm trying to learn a bit more about CSS. (Or more accurately, to reformat online, then copy and paste results into a text editor used as a "viewer", so I can also save the output, search for text (and then maybe search and replace same text in the original) and maybe even annotate the reformatted output for future use if that turns out to be helpful.)
So far for Vivaldi, I had been doing searches in a duplicate of the common.css file while loading it into NotepadâŚ
If you're really just using Notepad, you might want to check out the freeware Notepad2 with numerous features not included in Notepad, with automatic syntax highlighting being particularly notable in this CSS editing context. It also has unlimited undo/redo (not in Notepad) and isn't plagued by Notepad's annoying quirk of adding non-existent line endings when you copy and paste from a word-wrap view.
There are other much more powerful freeware options as well (e.g., Notepad++, which also has a very nice tabbed MD interface and a much more active developer), but as a non-coder Notepad2 has far more than everything I normally need.
-
So if I understand correctly, these 'beautifier' apps are just to help make legible sense of the proverbial 'wall-o-code' which seems to be how many program files end up getting compiled ? ⌠Possibly using them just as viewers would serve me well enough, and might yield similar results to my below method.
Exactly.
No, not exactly. Compiled and minified are two completely different things.
-
So if I understand correctly, these 'beautifier' apps are just to help make legible sense of the proverbial 'wall-o-code' ⌠Possibly using them just as viewers would serve me well enough...
Exactly. [to make more human readable]
No, not exactly. Compiled and minified are two completely different things.
Good point about the distinction between 'compiled' and 'minified'. Although I know the difference, I wasn't thinking much about it and just took 'compiled' as imprecise terminology from another non-coder (like me) to describe the way Vivaldi's common.css (for example) is formatted.
So I wasn't exact enough in my original quote selection, which I've edited here to clarify what I agreed with_"Exactly"_.
-
Uglify? What a coincidence! Steffie and I were JUST talking about going down the rabbit hole, disembodied smiles, and treacle, and here you bring up one of the four operations of arithmetic, Ambition, Distraction, Uglification, and Derision.
It would appear we are ALL down the rabbit hole! Welcome to wonderland everyone!
-
It would appear we are ALL down the rabbit hole! Welcome to wonderland everyone!
! [attachment=1096]were-all-mad-here-15728.png[/attachment]
Oh, and I DO regard myself as a coder, albeit an inexperienced one in this particular language.
My faulty assumption then, sorry!
I took it from most of the thread that you were just an "amateur" like me :P, except more ambitious and accomplished.
But now I'm thinking I better ask for clarification from An_dz, because I was thinking of code being "compiled" to run as an executable, but now I notice in the Wikipedia Minification (programming) article a reference to Google's Closure Compiler which appears to do the same thing I think of as minification of JavaScript done here and here.
So perhaps in some contexts minification and compiling are used more synonymously?
Attachments:
-
But having said all of that, I really feel that considering the nickname of that group of apps is 'beautifier', that the term 'minify' should actually be 'uglify', in such context.
The term minify came first, since we already write in an human readable way, only weirdos write CSS directly minified, so the wrong guys here are the beautifiers. Also we would not call them unminifiers or expandifiers.
But now I'm thinking I better ask for clarification from An_dz, because I was thinking of code being "compiled" to run as an executable, but now I notice in the Wikipedia Minification (programming) article a reference to Google's Closure Compiler which appears to do the same thing I think of as minification of JavaScript done here and here.
So perhaps in some contexts minification and compiling are used more synonymously?
No, it's just Google ******* everything, just ignore.
A compiler will translate a higher-level programming language to a lower-level language (generally Assembly [programming language] or machine code[not a programming language]). There also exist the source-to-source which translate between same-level languages.
The more correct term would be Rewriter since it's not converting languages, it's just modifying code to be smaller. Think as in mathematics where we rewrite our functions to be smaller. It could also be a Rewriter if it made more human readable, just like mathematics.
Still minifiers and beautifiers may not be Rewriters. A Rewriter is only a Rewriter if it rewrites programming-languages. JavaScript is a programming language, but CSS and HTML are not. So if you minify or beautify JavaScript only and you modify functions, it's a Rewriter, but if you do so on CSS and HTML it becomes only a minifier or beautifier.
-
Is possible to add a GO button on the right of address field, trough a custom CSS?
-
@The_Solutor
Maybe, but it would do nothing. CSS is a style sheet, it can't add functions. It can only adjust what's already in. -
@The_Solutor
Maybe, but it would do nothing. CSS is a style sheet, it can't add functions. It can only adjust what's already in.Ok, thanks
Then, what about the paste and go menu? That's already there (in the vivaldi menu, I mean) is just not visible in the contextual menu.
Sorry for the question but that's a part of the IT almost unknown to me.
-
No, it's just Google ******* everything, just ignore.
A compiler will translate a higher-level programming language to a lower-level language (generally Assembly [programming language] or machine code[not a programming language]). There also exist the source-to-source which translate between same-level languagesâŚ
OK, good, we're on the same page! I'm all for precision in terminology whenever possible!
[âŚand don't even get me started on the ubiquitous relative timestamps, not only all over the Internet, but even in Windows Explorer file properties !!! :pinch: ]âŚA Rewriter is only a Rewriter if it rewrites programming-languages. JavaScript is a programming language, but CSS and HTML are not. So if you minify or beautify JavaScript only and you modify functions, it's a Rewriter, but if you do so on CSS and HTML it becomes only a minifier or beautifier.
I think I get what you mean here. But then, in a sense, aren't the beautifier/reformatters that Discard invalid properties (CSS1.0, CSS2.0, or CSS2.1) also functioning in a limited way as a "Rewriter"? (âŚor what would be a better term for that functionality that implies more than just CSS minification?)
But having said all of this, I have to wonder - If the CSS does not actually get compiled as, then why does it get minified, and to what advantage, and is it done as an explicitly intentional operation, or what ?
From Wikipedia Minification article: "removing all unnecessary characters from source code without changing its functionality (âŚwhite space characters, new line characters, comments, and sometimes block delimiters used to add readability to the code but not required to execute)...especially useful for interpreted languages deployed and transmitted on the Internet (such as JavaScript), because it reduces the amount of data that needs to be transferred. Minified source code may also be used as a kind of obfuscationâŚ" (emphasis mine)
In comparison, when I manually write/edit code (usually in Notepad), part of the process it to manually insert all of the appropriate tab stops and carriage returns, so that I can read it later if I need to do so.
And if I was a proper professional, I would be doing a lot more coding, and as such would surely grow weary of doing it that way, and would choose better tools, such as possibly those other editors which you mentioned upthread.
And if they even got rid of that annoying (also to me) side effect of inserting false carriage returns when coping from Notepad to somewhere else, they would be worth it for that ALONE.
Your last phrase is enough to sell you on Notepad2, then! :lol: But it does so much more (e.g., just off the top of my head):
â˘unlimited undo-redo (Edit: lack of this feature alone makes Notepad impossible for me to use for any serious editing)
â˘auto-syntax-highlighting (for dozens of programmings/filetypes or customize your own)
â˘highlight paired brackets {[()]}
â˘display (or not) line endings/spaces/tabs/wrap symbols
â˘change line endings (LF, CR, CR+LF) just by double-clicking on status bar "button"
â˘change file encoding
â˘simple regex
â˘backslash functions (e.g., include line endings in Find and Replace)
â˘customize tab-key settings (tabs or spaces of n-space length)
â˘numerous block options (strip first character, strip trailing blanks, remove blank lines, etc.)
numerous conversion options (Uppercase, Lowercase, Invertcase, Title case, Sentence case, etc.)
â˘remember recent files (or not)
â˘remember recent searches (or not)
â˘display line numbers (or not)
â˘zoom (+-)
â˘URL encode/decode
â˘Char to Hex/Hex to Char
â˘etc., etc.
â˘[Edit: I've actually been using v5.0.26-beta4 for a couple years; it has a couple of minor bugs that weren't in v4.2.25, but it's also possible 1-2 of above features aren't in v4.2.25. I've also tried a couple of the forks mentioned on the homepage (e.g., the code.kliu.org one with code-folding and the rlvision.com Bookmark Edition), but just didn't have a need for those extra features myself.]Edit: If all those Notepad2 features seem like too much but you'd still like proper line-ending behavior with copy and paste, unlimited undo/redo, configurable tabs, auto-indent, block indent/unindent, active hyperlink support, and a few other nifty features, have a look at metapad. I've used both of these editors for at least 12-13 years and been very pleased with them. (In fact, I usually have multiple instances of Notepad and Notepad2, plus sometimes metapad, open on my desktop, just for the convenience of different levels of editing functions as needed, and to have different locations on screen for each to better keep track of different tasks/projects.)
BTW, why does Vivaldi flag the Notepad2 Win32 executable from that site as dangerous ?
Yes, I noticed that, too, but forgot to mention it. That would be a Google malware protection false positive (enabled by default at Settings > Privacy > Enable Google phishing and malware protection) and I'm not sure why/how it would ever have gotten flagged. It isn't even UPX "packed", a common reason why many small developers' utilities get false positive identifications. Also, I hashed it and it's the exact same file I've used since it was released in 2011 (you can check yourself by downloading and hashing an older copy at the Wayback machine.)