Live skin editor for vivaldi



  • As you may already know, vivaldi can be customized by modifying common.css, but it's sometimes quite tiring, for you have to restart vivaldi every time to see the effect. So I made this little extension to make the process a bit easier. For instance, if you want to hide rewind and fast forward button, a full procedure would be like this: [ol] [li]Download the extension, extract it to the same directory as browser.html, then paste the following line to the body of browser.html: [/li] [li]Open vivaldi, click the extension button[/li] [li]If you don't know what the two buttons are called, you can type :b and enter to get the current broser.html. From the file, you will be able to see that the buttons are called .rewind and .next and is a child Element of .toolbar[/li] [li]Type ".toolbar .rewind" (the rewind button should now be flashing), then press enter[/li] [li]Type "display:none" and enter, the rewind button is now hidden. If you miss-typed anything, enter ":c" and type again.[/li] [li]Type ":q" to quit[/li] [li] Hide the fast-forward button in the same way [/li] [li] Type ":e" to get the CSS file [/li] [li] Add the CSS file to browser.html. Done :lol: [/li] [/ol] [attachment=640]selector.png[/attachment] update: DOM viewer [attachment=642]hfc525b1.png[/attachment] Command list: :q quit current selector :c clear all contents in current selector :b save browser.html for reference :e [filename] export as css Attachments: [img]https://forum.vivaldi.net/uploads/attachments/697/selector.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/697/hfc525b1.png[/img]





  • I'm glad you like it :)
    Check out the new version with a DOM viewer

    @RRR13:

    I… I... think I love you. :blush:

    If I may, I would like to make a little suggestion.
    Could you please try and make the whole process more visual? I mean, add the ability to select the button with the mouse and also display the operations that are allowed on that item somewhere where they can be selected with the mouse.
    This would greatly increase the user-friendliness.
    I have no idea if it can be done, though...

    Did I mention that I think I love you? :lol:

    EDIT:
    If the item cannot be selected with the mouse by directly clicking on the item in the Vivaldi GUI, a list of available items could be displayed for the user to select the item and see a highlight (as it currently does) of the selected item.




  • Nice work!



  • @widget:

    2. Open vivaldi, click the extension button

    when i do this nothing is happening. :huh:

    edit:
    it does work now in new snapshot.



  • Wow that's pretty cool! Thanks for the work! This seems exactly like something that should be included in the production version.



  • Doesn't work on TP3 :(



  • Still not working in Snapshot v 1.0.233.3 :(



  • I think I fix it.

    Just open the main.js in the vivaldi-customizer folder and delete this piece of code in the begining

    (function(){
    	'use strict';
    
    ```and this in the end
    

    }());

    Then paste the after the in the body
    
    Tested in 1.0.233.3 (Build para desarrolladores) dev (64 bits) Linux


  • Hi! I started using Vivaldi and I like its engine and all that, but the button layout isn't very nice, so I searched for a way to move things around like in Firefox' customization mode, and eventually found this thread. I want to make it as compact, beautiful, and usable as I have Firefox while still using its engine. Here's a screenshot of my Firefox setup:

    Unfortunately, I can't seem to get this "extension" working with Vivaldi 1.1.443.3. I tried to do everything that was said to do in the first post and the last post here, but there were some snags, such as the second step, "Open vivaldi, click the extension button". As far as I can tell, there's no such button even after I properly execute step 1, and I've been to vivaldi://extensions (looks like the url tag isn't working for vivaldi:// urls) to look for it. I was able to install 2 Chrome extensions already including one that adds its own extension button to Vivaldi (uBlock Origin). It works nicely. I tried to put this in Extensions, but doing that caused an error saying there was no manifest.json, which makes sense, as that's necessary for an extension to identify itself.

    How do I make this work for me? I'm very excited to get Vivaldi up to speed with Firefox.


Log in to reply
 

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