Vivaldi UI Customisations


  • Moderator

    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. [b]How Vivaldi UI Works[/b] 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. [b]More In-Depth[/b] Going more specific, Vivaldi UI HTML is empty, all elements are added by the JS. There are a lot of elements that simply does 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 to add the element where it's easier to show it where it needs 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) [b]What Does This All Means?[/b] 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 positions 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: 1. Open [i]common.css[/i] and add this at the beginning of the file: [code]@import "custom.css";[/code] 2. Open [i]browser.html[/i] and add this line after the first <link> tag: [code]<link rel="stylesheet" href="style/custom.css">[/code] And add all your CSS edits in a [i]custom.css[/i] file. This way you can just copy your old custom file and add this above line again and you'll always keep the original common file intact. [b]How To Inspect With Dev Tools[/b] 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: [b]--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end[/b], once you run Vivaldi you should be able to right click anywhere in the UI and choose Inspect. On Windows you can right-click a shortcut and open its properties. If you are familiar with Dragonfly you'll soon think about shooting yourself after some minutes of Chrome Dev Tools, but that's all we got. [size=5][b]Tips & Tricks Index[/b][/size] [url=https://vivaldi.net/en-US/forum/vivaldi-browser/3030-i-can-t-move-window-of-vivaldi-using-empty-tab-space#24242]Make empty tab bar space to right of tabs "grabbable" to allow moving window[/url] (by [url=https://vivaldi.net/en-US/unity/profile/15939]An_dz[/url]) [url=https://vivaldi.net/en-US/forum/all/2994-adjustable-default-font-icon-size#23849]Edit Vivaldi UI font sizes in common.css[/url] (by [url=https://vivaldi.net/en-US/unity/profile/16277]Tiamarth[/url], by An_dz two comments below) [modify path appropriate to current installation] [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24520]New tab on double click in tab bar[/url] [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24533]Modifying number of columns in Speed Dial[/url] [url=https://vivaldi.net/en-US/forum/all/2777-adding-custom-thumbs-in-speed-dial]Customise Speed Dial Thumbnails[/url] [s][url=https://vivaldi.net/en-US/forum/vivaldi-browser/3127-a-connection-between-size-of-preview-and-size-of-thumbnail#24804]Tweak to improve appearance of tab previews[/url][/s] - Useless now [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations?start=80#27057]Coloured selection in text boxes[/url] (e.g. address box, search box) [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations?start=80#27612]Mac Graphite Window Actions Buttons[/url] The first reply here contains a lot of small edits that you may find useful.


  • Moderator

    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;
    }
    


  • ~
    Thanks ! :cheer: :woohoo: B)

    I was considering starting a thread such as this one, because of the major help which you have been in regard to my queries about :

    (1) How to put the Tabs Bar into the legacy position - meaning immediately above the web page content, below the rest of the top bars

    (2) How to Hide the Title Bar to save vertical space (also without losing the 'window controls' as plagues Mozilla browsers when hiding theirs)

    (3) How to merge the elements of the Menu Bar and Address Bar into one bar, to save vertical space

    Your last post of CSS (in the 'A White Skin' thread) was successful, not only with the Tabs Bar position, but also it covered my earlier questions, mentioned in (2) and (3), which means that you must also have closely examined the screenshots of my Opera 12 fiddling to see what I had had in mind, and that your earlier-posted CSS became unnecessary (though I did try it separately to see what it would do, and it worked to some degree, but one toolbar was partially obscuring the others - unimportant because your newer post fixed it all anyway).

    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.

    I will be acknowledging and thanking you in the other thread too (where my questions were actually OT, to be truthful).

    So here is the screenshot of the latest look for my Vivaldi :

    [attachment=1063]VIVALDIBrowserwithAn_dzsCSSMyFurtherTweaks-01.jpg[/attachment]

    And here is the current code (your code with a few tweaks from me) which gave this look :

    (Note that Vivaldi's settings must be configured to put Tabs Bar, Bookmarks Bar, and Address Bar each at the TOP, in order to get along with it).
    ~

    #header {
    	min-height: 0 !important;
    	z-index: auto !important;
    }
    
    .win .topmenu {
    	color: #fff;
    	position: absolute;
    	top: 5px;
    	left: 98px;
    }
    
    .topmenu+#tabs-container.top {
    	border-bottom: 1px solid;
    	position: absolute;
    	top: 62px;
    	width: 100%;
    	z-index: 1 !important;
    }
    
    #tabs-container.bottom #tabs, #tabs-container.top #tabs {
    	height: 30px !important;
    }
    
    .toolbar.toolbar-addressbar {
    	padding-right: 100px;
    }
    
    .button-toolbar.rewind{
    	display: none;
    }
    
    .button-toolbar.next{
    	display: none;
    }
    
    .button-toolbar.home{
    	display: none;
    }
    
    #pagetitle{
    	display: none;
    }
    
    .addressfield {
    	margin-left: 280px !important;
    }
    
    .bookmark-bar {
    	margin-bottom: 37px;
    }
    
    .window-buttongroup {
    	z-index: 2;
    }
    
    

    Cheers ! B)
    ~
    Attachments:



  • ~
    I can see good reason to try a couple of these smaller tweaks, such as for the tab height and width, and maybe the borders.

    Saved me asking.

    But how to you adjust the height to make the top bar in my screenshot a bit slimmer ?

    I tried some tweaking already, also to the Tabs bar, but without success - though I was guessing, based upon what code you had offered earlier, and what I had learned about syntax and element names during past similar episodes with Mozilla browsers and Opera 12.

    Thanks once again. B)
    ~


  • Moderator

    @davesnothere:

    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.

    @davesnothere:

    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.



  • @An_dz:

    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.

    ~
    Powerful indeed, as I have experienced to some degree in Mozilla-Land, mostly during the process of developing/improving extensions and themes.

    And MY hardest task was to GUESS the element name of the Fast Forward button - Rewind was obvious, but in the end, I had to open the 'common.css' file, and search in it for elements whose names I already DID know, and it was nearby - called 'next'. :blink:
    ~

    @An_dz:

    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.

    ~
    No I had not, but I see it now. - I wasn't using the coloured tabs option, but tried it again with your code, because I did not care for the default white on black.

    I plan to play with CSS to influence the colours soon too.
    ~

    @An_dz:

    @davesnothere:

    But how to adjust the height to make the top bar in my screenshot a bit slimmer ?

    .addressfield....
    
    ```Keep the pixel difference the same - the second must always be 2px less, the third 6px more, and so on.
    

    ~
    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 ?
    ~

    @An_dz:

    You'll still need to change background-position and background-size of these :

    .addressfield .addressfield-siteinfo, .button-addressfield.bookmark, .button-tabbar.input-search

    ~
    And I will not know by how much until I am happy with the new hard-coded positions of the top bar's elements, correct ?
    ~


  • Moderator

    @gdveggie:

    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.

    @davesnothere:

    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.

    @davesnothere:

    @An_dz:

    You'll still need to change background-position and background-size of these :
    .addressfield .addressfield-siteinfo, .button-addressfield.bookmark, .button-tabbar.input-search

    And 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.


  • Moderator

    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.



  • @An_dz:

    @davesnothere:

    @An_dz:

    You'll still need to change background-position and background-size of these :
    .addressfield .addressfield-siteinfo, .button-addressfield.bookmark, .button-tabbar.input-search

    And 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.

    ~
    UPDATE :
    ~
    No kidding about the tweaking ! :ohmy:

    Thanks for the last round of templates.

    Further below is my next screenshot, where I have managed to slim down all 3 of the current bars to perhaps 30% less overall height, but not without consequences, as you can see.

    I did get the 3 navigation buttons resized and positioned ok, as well as the main menu, but the ones for which you said that I would need to tweak the background-position and background-size are completely ignoring my attempts to do so by using those commands.

    I did get SOME influence over the position of .button-addressfield.bookmark by using some other commands, but still achieve insufficient travel upwards to reach the vertical centre of the slimmer address box, else I would have settled for whatever worked.

    Here is an example of my syntax which is being ignored :

    .addressfield .addressfield-siteinfo {
    	background-position: 0px 5px !important;
    	min-width: 16px !important;
    	height: 16px !important;
    }
    
    

    The 5px value made no difference to the position, nor did a larger number nor a negative one.

    BTW, the width and height commands in that example may also have been ignored, IIRC.

    Also, I cannot determine the element names for the icons and text labels 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.

    It could be something silly like a missing punctuation mark or such, but I'm burning out from trying things.

    Any guidance would be appreciated. :unsure: :)

    Here is the screenshot :

    [attachment=1073]VIVALDIBrowserwithAn_dzsCSSMyFurtherTweaks-02.jpg[/attachment]
    Attachments:


  • Moderator

    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;
    }
    

  • Moderator

    @gdveggie:

    @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.

    @davesnothere:

    It seems that speaking in understatements appeals to you ! ;)

    If you feel this way…

    @davesnothere:

    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;
    }
    

    @davesnothere:

    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
    

    @davesnothere:

    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.

    @davesnothere:

    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! ;)



  • @An_dz:

    @davesnothere:

    It seems that speaking in understatements appeals to you ! ;)

    If you feel this way…

    It was a feeble attempt at a joke, and BTW I changed it while you were composing your reply.

    @davesnothere:

    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;
    }
    ```Thanks - will try it.
    ~
    
    @davesnothere:
    
    > 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

    Thanks - Just a few characters can make all the diff.
    ~
    
    @davesnothere:
    
    > 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 [be].
    ~
    Indeed, I get it now, and depending upon whether hovering and/or clicking makes the button area stand out or not, I can sometimes actually see the areas defined as you said.
    ~
    
    @davesnothere:
    
    > 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.
    

    Yes, I have been meaning to do that. - If it is anything like DOM Inspector for Mozilla's architecture, it will be quite useful.

    I had been mining the common.css file and whatever few other Vivaldi-specific examples that exist, for element names and tweaks, plus picking brains such as yours, but I agree that a tool similar to DOM Inspector would be a huge help in and of itself, and would surely scale back the volume of questions.

    Thanks again, and I will report back after investigating all of these things. :)
    ~



  • @gdveggie:

    @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....

    ~
    [My Reply :]

    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.

    So far for Vivaldi, I had been doing searches in a duplicate of the common.css file while loading it into Notepad, then copying and pasting a few relevant-looking lines at a time into a second text file in another instance of Notepad, and manually reformatting just those lines there, and further copying anything which seemed useful as a template for whatever I was trying to code, into a further instance of Notepad, where my actual development and mods would take place.

    I have successfully used the same process with Mozilla browsers' code, except also using the DOM Inspector extension to learn the names of existing UI elements and their associated commands, and as I was saying above to An_dz, that area is where I hope that the Vivaldi Dev Tools mode shines for me.
    ~



  • @davesnothere:

    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.


  • Moderator

    @gdveggie:

    @davesnothere:

    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.



  • @An_dz:

    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: –remote-debugging-port=XXXX where XXXX is a port number of your choice. On Windows you can right-click a shortcut and open its properties. Then enter http://localhost:XXXX in Vivaldi and search for the one with address ending with browser.html.

    If you are familiar with Dragonfly, you'll soon think about shooting yourself after some minutes of Chrome Dev Tools, but that's all we got.

    ~
    [My Reply :]]:</strong><br />
~<br />
Well I'm NOT familiar with Dragonfly, and I'm thinking that way nonetheless.</p>
<p><strong>Methinks that it might be worthwhile to also have a tutorial/help thread for using these Dev Tools.</strong></p>
<p>I know some about DOM Inspector in Mozilla-Land, and how to get it to display the names of UI elements and their connected commands and such.</p>
<p>My first thought has been how to get the <strong>Dev(il) Tools</strong> to do the same, but I'm getting nowhere rather quickly.</p>
<p>My earlier approach to Vivaldi has been more fruitful - examining the common.css file, as I mentioned earlier, combined with some semi-educated guessing, and of course some much appreciated hints and tips from more experienced folks such as yourself.</p>
<p>I have already gotten quite a lot more done with my UI tweaking, based on those ways, but today I wanted to try the dev tools too.</p>
<p>So does anyone know how to tame this beast, or at least get it to cooperate ? :unsure: :confounded[:S :ohmy:
    ~



  • @An_dz:

    @gdveggie:

    @davesnothere:

    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 :P enough in my original quote selection, which I've edited here to clarify what I agreed with_"Exactly"_. ;)


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.