Modifications

• 

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

  4
  2
  VOTES
  4
  Posts
  2218
  Views

  

  Recently I started running js mods, therefore I added the needed adjustments to the batch file. Additionally I implemented the findPath variable, @Isildur has been suggesting in the OP. Maybe someone can use parts of this for their own version, so I thought I'd share too. #!/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.css and custom.js 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.css in text editor open -a "TextWrangler" "$findPath"/Resources/vivaldi/style/custom.css # Open Vivaldi open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
• 

  [Linux] Bash script: adding the modding patch to Vivaldi installations
  

  32
  6
  VOTES
  32
  Posts
  4770
  Views

  G

  Hello guys, just wanted to share a new version I did of this script. I uploaded this together with my custom.js and custom.css to a repo in https://github.com/gregodadone/vivaldi-simple-ui. Special thanks to @Gwen-Dragon and @Christoph142 because I used your ideas to create it. Feel free to modify as you want or make suggestions to make it better. #!/bin/bash ############################################################### # Author: Grego Dadone # License: GPL V3 ############################################################### # Script to automatically patch Vivaldi browser UI in Linux # Tested on Vivaldi 2.1.1337.36 on 2018-10-29 ############################################################### function checkRoot() { if [ $UID -ne 0 ]; then echo "This script must be run as superuser" sudo $0 #Runs itself as root exit 0 fi } function checkVivaldiInstalled() { vivaldiInstallations=$(find /opt -name vivaldi-bin) vivaldiInstallationsCount=$(echo $vivaldiInstallations | wc -w) if [ $vivaldiInstallationsCount -eq 0 ]; then echo "Could not find any Vivaldi installation" exit 1 fi } function checkModFilesPresent() { if ! [ -f custom.css ]; then echo "Could not find file 'custom.css'" exit 1 fi if ! [ -f custom.js ]; then echo "Could not find file 'custom.js'" exit 1 fi } function selectVivaldiInstallation() { vivaldiInstallationsFolders=($(dirname $vivaldiInstallations)) if [ $vivaldiInstallationsCount -gt 1 ]; then option=0 while [ $option -le 0 ] || [ $option -gt $vivaldiInstallationsCount ]; do echo "Pick Vivaldi installation to patch" i=1 for vivaldiInstallationsFolder in ${vivaldiInstallationsFolders[@]}; do echo "$((i++))) $vivaldiInstallationsFolder" done echo "$i) Cancel" read option #This block transforms input into an invalid option to avoid breaking the script if we enter a letter or a symbol if [[ $(echo $option | egrep '\b[0-9]{1,2}\b') = '' ]]; then option=0 fi #If we choose to cancel we get in here if [ $option -eq $i ]; then exit 0 fi done targetDir=${vivaldiInstallationsFolders[--option]} # the -- operator is to pick correct array index else targetDir=${vivaldiInstallationsFolders[0]} fi } function patchVivaldi() { alreadyPatched=$(grep "custom.css" $targetDir/resources/vivaldi/browser.html); if [[ $alreadyPatched == '' ]]; then #Backup current browser.html cp $targetDir/resources/vivaldi/browser.html $targetDir/resources/vivaldi/browser-$(date +%Y-%m-%dT%H-%M-%S).html #Copy mod files cp custom.css $targetDir/resources/vivaldi/style/ cp custom.js $targetDir/resources/vivaldi/ #Patch browser.html sed -i -e 's/<\/head>/ <link rel="stylesheet" href="style\/custom.css" \/>\n <\/head>/' "$targetDir/resources/vivaldi/browser.html" sed -i -e 's/<\/body>/ <script src="custom.js"><\/script>\n <\/body>/' "$targetDir/resources/vivaldi/browser.html" echo -e "\nVivaldi patched successfully!" else echo "This Vivaldi installation is already patched" fi } checkRoot checkVivaldiInstalled checkModFilesPresent selectVivaldiInstallation patchVivaldi
• 

  Modding Vivaldi
  

  44
  13
  VOTES
  44
  Posts
  31902
  Views

  

  @altcode Strange, anyway – you should combine the custom.js files into one. They all just need one instance of the wait loop, you can just load all the functions at the same time. And if you wanna disable one, you just take it out of the loop.
• 

  Windows batch file for patching your mods into Vivaldi
  

  40
  2
  VOTES
  40
  Posts
  10432
  Views

  

  Hey, As far as I understand, this batch file is for Windows only. So, I wondered, shouldn't this thread be pinned instead of this one ? Mod's manager is a far more advanced tool :)
• S

  Tabs and Bookmark Bar centered
  

  6
  1
  VOTES
  6
  Posts
  590
  Views

  S

  For centering address bar : how-to-center-address-bar
• 

  How to center address bar?
  

  7
  1
  VOTES
  7
  Posts
  86
  Views

  S

  This is related thread : Tabs and Bookmark Bar centered
• 

  -Experiment- Hide nicknames/descriptions in vivaldi://bookmarks
  

  2
  1
  VOTES
  2
  Posts
  48
  Views

  

  @hadden89 I never use nickname so for hiding them in editor (in panel, too): .manager-editor .lower-half > div:nth-of-type(2) { display: none !important; }
• 

  Improved extension toggle
  javascript modding •

  47
  10
  VOTES
  47
  Posts
  4505
  Views

  

  I tested the new extension toggle in snapshot and it's quite decent with a few simple css modifications. First of all extension toggle needs to be disabled in settings, then just hide the buttons you want to toggle – to make it look good with color behind tabs on and off, to give all buttons the same background and to fix some focus issues you can use following code: button.button-toolbar.toggle-extensions-group:focus:not(:hover), .extensions-wrapper .actionVisibility-hidden:not(:hover) { background-color: unset; } .color-behind-tabs-off .toolbar-addressbar .button-toolbar.browserAction-button.popup-visible { background-color: var(--colorAccentBgDark); } The only remaining downside is that you can't have it all: keep buttons visible, keep buttons hidden and toggle the rest. Either you toggle all, or you toggle the hidden ones. If you want more, a js modification is still the way to go. Personally I'll probably be switching over to Vivaldi's version, because I only had one button permanently hidden and it doesn't bother me that much.
• 

  Missing Stop button
  

  28
  1
  VOTES
  28
  Posts
  510
  Views

  

  Vivaldi Browser makes your surfin' easier.
• V

  Speed Dial Links in New Tab
  

  3
  1
  VOTES
  3
  Posts
  95
  Views

  V

  @luetage - thank you for your reply. I ended up recreating my Speed Dial (single HTML file with CSS inside) and for the links, I used a JavaScript link to force the links into a new tab : <a href="javascript:window.open('https://forum.vivaldi.net/category/2/vivaldi-browser','_blank')"> <img src="custom_sd.png" style="width:200px;height:150px;" /> </a> I added the custom_speeddial.html to my script that updates my files after each upgrade. For now, this will work for me since I don't update the links often, but I do like having them right there front and center on my "start tab". Visually everything is spot on and now with added bonus that I can tweak as needed.
• 

  Hide tab when only one is open
  

  6
  1
  VOTES
  6
  Posts
  193
  Views

  

  Awesome <3 I love this.
• T

  Address Bar at very top
  

  76
  1
  VOTES
  76
  Posts
  8944
  Views

  

  Is anybody experiencing a white line at the bottom of the browser while in full screen video mode? I have other mods but I am mostly sure it is caused by this one.
• 

  Enhance active panel button visibility
  

  1
  2
  VOTES
  1
  Posts
  87
  Views

  No one has replied

• 

  Favorites button in favorites bar
  

  8
  0
  VOTES
  8
  Posts
  208
  Views

  

  @ayespy Perfect, I understood what you are suggesting. Thank you
• 

  Highlight border on favicons
  tabs favicons •

  1
  4
  VOTES
  1
  Posts
  92
  Views

  No one has replied

• 

  Semi-transparent background on favicons
  

  1
  5
  VOTES
  1
  Posts
  104
  Views

  No one has replied

• K

  Custom CSS for dropdown menus?
  

  7
  0
  VOTES
  7
  Posts
  241
  Views

  

  My guess is they're not even written in HTML, hence it's not possible to customize them with CSS...
• 

  Tab Size
  

  3
  0
  VOTES
  3
  Posts
  135
  Views

  

  Doesn't really work great on pinned tabs, but should do the trick: Installed as a CSS mod: #tabs-container { height: 40px !important; } .tab-position .tab .tab-header { flex: 0 0 40px !important; } .tab .title { font-size: large; padding-left: 20px !important; } .tab .favicon { transform: scale(2) !important; position: relative; top: 5px; left: 5px; } If some sites don't have a large enough favicon it will look blurry, not much can be done about that.
• D

  Tab Loading State Styling?
  

  17
  0
  VOTES
  17
  Posts
  496
  Views

  D

  @hadden89 it’s a FontAwesome svg — https://fontawesome.com/icons/sync-alt?style=solid Edit the color in the svg to taste — I think I did #666666. There are a few additional FA options that work well.
• 

  Better Notes Mod
  panels notes javascript modding •

  15
  12
  VOTES
  15
  Posts
  1962
  Views

  

  I've pushed an update that fixes an issue where the notes tab wouldn't open after you close it.