Modifications to Vivaldi are not officially supported

Modifications

• 

  Modding Vivaldi
  • Christoph142  

  81
  19
  Votes
  81
  Posts
  50165
  Views

  I

  @luetage Oh. Well then that's not the mistake that caused my second mod not to work at first, nor what fixed it. Oh well. My spiffy mods are working, and now I know there's an option. Thanks!
• 

  [Linux] Bash script: adding the modding patch to Vivaldi installations
  • Gwen-Dragon  

  33
  8
  Votes
  33
  Posts
  7937
  Views

  M

  In this script i can only use one custom.css and one custom.js file. What to do hen there are multiple files. I'm trying to install betterNotes Mod ehich have 5 files.
• 

  OS X batch files for patching in CSS (update: and JS)
  • Isildur  

  5
  2
  Votes
  5
  Posts
  3753
  Views

  

  I wanted to share my current setup. Don't know how many Vivaldi modders are out there using macOS, but I hope it will help at least some of you automate the most repetitive tasks. Following a complete rundown of the steps required: Get your files ready. Personally I'm using 3 individual ones. upviv.sh to patch the application whenever an update has finished installing. modviv.sh to startup Vivaldi when you want to inspect its UI. bakviv.sh to backup the files you are currently working on outside the browser The files use the extension .sh so they get opened by your default text editor automatically. I keep them on Dropbox just like custom.css and custom.js for backup. To run these scripts we will have to make them executable and change the file extension. In Terminal open the directory you have saved the bash scripts to and issue following commands: chmod +x upviv.sh chmod +x modviv.sh chmod +x bakviv.sh Now copy them and change the extension to .command instead of .sh. By default this will run them in your Terminal. We could leave it like that and just double click the files to execute, but a more elegant solution is to run them directly from the terminal as commands… After making each file executable copy all of them to this directory /usr/local/bin/ Delete the filename extension .sh Optionally tag each file so you can find it more easily. Now each command can be run from terminal by just typing its name. Below are the example files. Exchange PATH_TO_FILE for your own path. To get a full path you can drag and drop a file into terminal. Adapt these examples to your needs, make your own. upviv.sh #!/bin/bash # Quit Vivaldi osascript -e 'quit app "Vivaldi.app"' # Find path to Framework folder of current version and save it as variable findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`" # Copy custom files to Vivaldi.app cp /PATH_TO_FILE/custom.css "$findPath"/Resources/vivaldi/style/ cp /PATH_TO_FILE/custom.js "$findPath"/Resources/vivaldi/ # Save path to browser.html as variable browserHtml="$findPath"/Resources/vivaldi/browser.html # Insert references, if not present, and save to temporary file sed 's| </head>| <link rel="stylesheet" href="style/custom.css" /></head>|;s| </body>| <script src="custom.js"></script></body>|' "$browserHtml" > "$browserHtml".temp # Backup original file cp "$browserHtml" "$browserHtml".bak # Overwrite mv "$browserHtml".temp "$browserHtml" # Pause script read -rsp $'Press [Enter] to restart Vivaldi...\n' # Open custom files in text editor open "$findPath"/Resources/vivaldi/style/custom.css open "$findPath"/Resources/vivaldi/custom.js # Open Vivaldi open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api modviv.sh #!/bin/bash osascript -e 'quit app "Vivaldi.app"' read -rsp $'Press [Enter] to restart Vivaldi...\n' open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api bakviv.sh #!/bin/bash findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`" cp "$findPath"/Resources/vivaldi/style/custom.css /PATH_TO_FILE/custom.css cp "$findPath"/Resources/vivaldi/custom.js /PATH_TO_FILE/custom.js echo Backup completed.
• 

  Windows batch file for patching your mods into Vivaldi
  • Christoph142  

  47
  3
  Votes
  47
  Posts
  15079
  Views

  

  @Jack9 I did mention that the original script and the one I posted are two separate things. Don't try to combine. Use one or the other, depending on what you want to do.
• 

  Import and Export Themes
  themes modding javascript • • luetage  

  85
  19
  Votes
  85
  Posts
  4606
  Views

  

  @Hadden89 I like ChrOp, is it supposed to mean Chropera? Here are two I made recently: {"colors":{"accentBg":"#f8fdfe","baseBg":"#1f2628","baseFg":"#86a4ac","highlightBg":"#fa3f2c"},"name":"Japan","settings":{"accentFromPage":false,"accentOnWindow":true,"borderRadius":7,"tabsTransparent":true},"version":0.1} {"colors":{"accentBg":"#353535","baseBg":"#292929","baseFg":"#a9a9a9","highlightBg":"#8bbbb5"},"name":"Code","settings":{"accentFromPage":false,"accentOnWindow":true,"borderRadius":2,"tabsTransparent":false},"version":0.1}
• 

  Backup Search Engines
  modding search engines javascript backup • • luetage  

  48
  27
  Votes
  48
  Posts
  2537
  Views

  C

  @luetage Thank you so much for this post! I just used to migrate my search engines from Vivaldi that I had in Windows to a new one in Linux
• S

  [Help] Move the Recently Closed button to the status bar/panel bar
  • supra107  

  6
  0
  Votes
  6
  Posts
  76
  Views

  K

  @skribb said in [Help] Move the Recently Closed button to the status bar/panel bar: is it possible for you to modify this JS to move the Vivaldi button to the right side of the extension buttons? Try this. You may need to set CSS styles. function MoveButon() { setTimeout(function wait() { /* Extension panel */ var toolbar = document.querySelector(".toolbar.toolbar-mainbar.toolbar-extensions.toolbar-large"); /* Sidebar */ /* var toolbar = document.querySelector("#panels-container.left #switch"); */ /* The panel navigation buttons */ /* var toolbar = document.querySelector(".toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-noflex.toolbar-large"); */ /* Statusbar */ /* var toolbar = document.querySelector(" .toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium"); */ var panel = ["button.vivaldi"]; panel.forEach(function(element, index, panel) { if (document.querySelector(panel[index]) != undefined) { if (panel[index] != null) { toolbar.appendChild(document.querySelector(panel[index])); document.querySelector(panel[index] + ' > button').removeAttribute('draggable'); } else { setTimeout(wait, 300); } } }); }, 300); } function DelButon() { setTimeout(function wait() { /* Extension panel */ var toolbar = document.querySelector(".toolbar.toolbar-mainbar.toolbar-extensions.toolbar-large"); /* Sidebar */ /* var toolbar = document.querySelector("#panels-container.left #switch"); */ /* The panel navigation buttons */ /* var toolbar = document.querySelector(".toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-noflex.toolbar-large"); */ /* Statusbar */ /* var toolbar = document.querySelector(" .toolbar.toolbar-droptarget.toolbar-statusbar.toolbar-medium"); */ var panel = ["button.vivaldi"]; panel.forEach(function(element, index, panel) { toolbar.removeChild(document.querySelector(panel[index])); }); }, 300); } MoveButon(); vivaldi.windowPrivate.onFullscreen.addListener(function(x, status) { if (status === false) { DelButon(); MoveButon(); } });
• S

  Changing the history page
  • skribb  

  1
  0
  Votes
  1
  Posts
  19
  Views

  No one has replied

• K

  How do I create my own dashboard and menu in native JS?
  • kichrot  

  25
  0
  Votes
  25
  Posts
  130
  Views

  K

  @potmeklecbohdan Thank you very much. I'll figure it out, try it, and write back about the results.
• 

  Changing icons with css
  • luetage  

  27
  4
  Votes
  27
  Posts
  6072
  Views

  

  @luetage Still better than what happens when I have to edit a bigger SVG—I open it in Inkscape, select the path I need and then edit it from the XML editor… (and sometimes I get angry that IS tries to reduce the paths to the shortest possible form).
• 

  Save All Tabs to Speed Dial Folder
  bookmarks speed dial modding button • • nomadic  

  6
  1
  Votes
  6
  Posts
  45
  Views

  

  @potmeklecbohdan Thanks. Didn't even know about these Vivaldi APIs. I never made it out of @LonM 's VivaldiMods folder on his Github. Should have known he would have figured something out.
• 

  Addressfield theming
  address bar modding css • • luetage  

  8
  6
  Votes
  8
  Posts
  54
  Views

  

  @luetage Ah, I was (also) thrown by the message in the pop up, it's exactly the same for both Your connection to this site is not secure.
• P

  Understanding the themes
  themes colours • • Perplexe  

  2
  0
  Votes
  2
  Posts
  34
  Views

  

  You should be asking this question in the original topic, because people, who posted there in the past will get notified, whereas now users can only find your request by chance. Anyway, I did a theme for tree tabs relatively early on and I think it's still up in the cloud. Install and take a look at the code of other themes, then you will find out how to do it. The point is it's work, you can't just set it up in ten minutes and be done with it, because there are just too many values to control.
• 

  Improved FavIcon Contrast in Tab Bar
  modding tab bar icons favicon contrast • • nomadic  

  2
  6
  Votes
  2
  Posts
  68
  Views

  

  @nomadic It's a good idea, github is indeed an issue.
• 

  [Extension] (23/03/20) Dark Chrome CSS 2.3
  extension themes modding • • Hadden89  

  21
  5
  Votes
  21
  Posts
  3087
  Views

  

  Updated to chromium 80.0.3987.88 / Vivaldi 2.11.1811.28 (RC)
• 

  How to change colors of dropdown menu? {form autofill}
  themes autofill gtk • • EvilSpark  

  6
  0
  Votes
  6
  Posts
  57
  Views

  

  Happens for me on Debian 10.3, too, with Dark GTK3 themes.
• 

  Better extension drop down menu!
  • EvilSpark  

  1
  1
  Votes
  1
  Posts
  30
  Views

  No one has replied

• 

  Safari style
  • thomaswerner  

  3
  6
  Votes
  3
  Posts
  64
  Views

  

  @thomaswerner oh nice work dude, looks great
• 

  Markdown Editor for Notes
  modding javascript notes • • tam710562  

  16
  18
  Votes
  16
  Posts
  1204
  Views

  

  @Pesala Thanks. It's still missing some of the functions of this toolbar though, so I'll use both
• 

  How to change colors of current tab tooltip?
  • EvilSpark  

  8
  0
  Votes
  8
  Posts
  36
  Views

  

  @potmeklecbohdan Ah ok. Yeah, so I have the chromium ones.