Vivaldi.NET customizations


  • Moderator

    This is not feedback, per se, (although the customizations people show interest in might be useful to note for future changes to the site). This thread is for people who want to customize their Vivaldi[b].[/b]net experience without waiting for official changes to Vivaldi[b].[/b]net -- just as the "Vivaldi UI Customisations" thread is a DIY way to go ahead and change things for the [i]browser[/i]. This seemed to me like the most relevant forum category in which to post this, but if a mod disagrees, feel free to move it to a category you think is more appropriate. Disclaimer: As with customizations to the browser, changes to Vivaldi[b].[/b]net site, applied through the method described below, may get broken by updates to the site, so use at your own risk, for this and other reasons. [b]Very important: Don't blindly install any extension javascript if you don't understand it. I mean it. Please, please, please don't use any script code posted in this thread if you can't interpret from the code itself what it does, because that would be an easy route to a security catastrophe.[/b] I first started modifying Vivaldi.[b][/b]net's behavior as a result of an issue raised by 3Phase (see [url=/en-US/forum/all/3073-vivaldi-ui-customisations?start=200#39353]this post[/url] in the "Vivaldi UI Customisations" thread). Since then, I've added a few more tweaks for myself. The route I took was to make an extension, but if you don't want to make your own extension, you could use something like the Tampermonkey extension to assign the js code in #2 below to vivaldi.net, or use a CSS extension like Stylus to assign the CSS in #3. To make an extension like I did: 1. Make a new folder "VivaldiNetExtension" 2. In the folder, create a vivaldiForum.js file: [code] /* I thought of this to resolve the problem described by 3Phase -- see ......./en-US/forum/all/3073-vivaldi-ui-customisations?start=200#39353 / (function() { function reorderTitle() {window.document.title= window.document.title.replace(/^(Vivaldi Web Browser Community)( - Vivaldi Forum)? - (.)/ , '$3$2 - $1');} reorderTitle(); //execute on first run setInterval(reorderTitle, 5000); //execute again every 5 seconds, in case Vivaldi occasionally flips it back to the original text enclosed by the TITLE element })(); [/code] That does a regex replace in the window.document.title string's value, moving the parenthesized search terms around. This corrected the problem raised by 3Phase, that Vivaldi.[b][/b]net tab titles all just showed up as "Vivaldi Web Browser Comm...". [color=#ff0000]2016.05.20 edit: The JS code above is no longer necessary, because [url=https://vivaldi.net/en-US/forum/suggestion-box/9825-site-title-change-for-the-forums]the forum titles have been fixed[/url] by a Vivaldi.net admin.If you were previously using this, you can now just make it a blank vivaldiForum.js file or delete the [i]"js": [ "vivaldiForum.js" ],[/i] line in the manifest file below.[/color] 3. In the same folder, make a vivaldiForum.css file. I added some CSS rules that make a few thing clearer, like the input box borders and where the preview box begins. [code] /* forum post input and preview tweaks */ #Kunena table#kpostmessage .ktxtarea { border: 1px solid #ccc !important; } #Kunena #kbbcode-preview { overflow: auto !important; border: 1px solid #ccc !important; } #Kunena #kbbcode-preview:before { content: 'Preview:'; display: block; background: #ccc; } /*Quick Reply wasn't showing up enough, as reported by danielson -- see ....../en-US/forum/suggestion-box/8621-vivaldi-forum-is-slow/reply/47984#47984 / #Kunena .kreply-form .inputbox { border: 1px solid lightgrey !important; } [/code] 4. In the same folder, make a manifest.json file [code] { "manifest_version": 2, "content_scripts": [ { "js": [ "vivaldiForum.js" ], "css": [ "vivaldiForum.css" ], "matches": [ "https://vivaldi.net/" ], "run_at": "document_end" } ], "converted_from_user_script": true, "description": "Vivaldi.net customized", "name": "Vivaldi.net Customizing Extension", "version": "1.04" } [/code] 5. In vivaldi://extensions , enable developer mode, Go to vivaldi://extensions , enable developer mode, go to "Pack Extension..." select the extension folder, click "Pack Extention", and in drag the .crx file that gets created (it should appear in the parent directory of the extension directory you created) from Finder/File Manager into the vivaldi://extensions page. That's what I have so far. Feel free to make your own suggestions. Again, if you don't understand any script code that is posted to this thread, please don't use it!


Log in to reply
 

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