History Clock - Instructions - how to activate



  • In this tutorial I show how to activate the history clock in the panel


  • Moderator

    Not, same columns as in Chromium 74.
    You can resize the window or maximize and will get 3 cols.
    //EDIT: If window with is greater 1350 the extensions page will show 3 cols.



  • Many Thanks. Otherwise, I am very satisfied with Vivaldi. Thanks to you all I have the Comic Sans MS font in the address bar, a red highlight color in the address bar, in the panel an analog clock with seconds and on it show a digital clock. And even with the settings I could change the font to Comic Sans MS and black red colorize the ScrollBar.

    1_1559284846421_2019-05-31 08_40_10-Vivaldi's extension page has only two columns _ Vivaldi Forum - Vivaldi.jpg 0_1559284846419_2019-05-31 08_40_23-Vivaldi's extension page has only two columns _ Vivaldi Forum - Vivaldi.jpg

    0_1559297955187_2019-05-31 12_16_34-Greenshot.jpg



  • @stardepp Look very well



  • @Phosphorus If you interest have in these changes, then say it to me and I help with pleasure. However, I must mark that one must produce these changes with every Vivaldi update again new, but I have thought a trick how one this ring and simply manages.



  • @stardepp I like that you use MusicBee. Uhmm... I'm interested in the mod of digital clock.



  • @Phosphorus It was luetage his idea:

    https://forum.vivaldi.net/topic/36080/history-clock-keeping-easter-egg-alive/48

    Step 1:

    You copy this code into a text file and change the extension from .txt to .js

    function historyClock() {
        const clock = document.querySelector('#switch button.history');
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        if (clock) {
            clock.style = '--timeHourRotation: rotate(' + Math.floor(hours*30+minutes/2) + 'deg); --timeMinuteRotation: rotate(' + minutes*6 + 'deg); --timeSecondRotation: rotate(' + seconds*6 + 'deg)';
            clock.title = String(hours).padStart(2,0) + ':' + String(minutes).padStart(2,0) + ':' + String(seconds).padStart(2,0);
            if (!document.getElementById('opClock')) {
                const cnp = document.querySelector('#switch button.history span svg');
                cnp.id = 'opClock';
                cnp.innerHTML = '<rect x="12" y="8.5" width="2" height="5" rx="1" ry="1" style="transform-origin: center; transform: var(--timeHourRotation, rotate(130deg))"></rect><rect x="12" y="8" width="2" height="6" rx="1" ry="1" style="transform-origin: center; transform: var(--timeMinuteRotation, rotate(0deg))"></rect><rect x="12" y="8" width="1.5" height="6.5" rx="1" ry="1" style="transform-origin: center; transform: var(--timeSecondRotation, rotate(280deg))"></rect><path fill-rule="evenodd" d="M5 13C5 11.1401 5 10.2101 5.20445 9.44709C5.75925 7.37653 7.37653 5.75925 9.44709 5.20445C10.2101 5 11.1401 5 13 5C14.8599 5 15.7899 5 16.5529 5.20445C18.6235 5.75925 20.2408 7.37653 20.7956 9.44709C21 10.2101 21 11.1401 21 13C21 14.8599 21 15.7899 20.7956 16.5529C20.2408 18.6235 18.6235 20.2408 16.5529 20.7956C15.7899 21 14.8599 21 13 21C11.1401 21 10.2101 21 9.44709 20.7956C7.37653 20.2408 5.75925 18.6235 5.20445 16.5529C5 15.7899 5 14.8599 5 13ZM13 19C11.0113 19 10.4093 18.9828 9.96472 18.8637C8.58436 18.4938 7.50617 17.4156 7.1363 16.0353C7.01718 15.5907 7 14.9887 7 13C7 11.0113 7.01718 10.4093 7.1363 9.96472C7.50617 8.58436 8.58436 7.50617 9.96472 7.1363C10.4093 7.01718 11.0113 7 13 7C14.9887 7 15.5907 7.01718 16.0353 7.1363C17.4156 7.50617 18.4938 8.58436 18.8637 9.96472C18.9828 10.4093 19 11.0113 19 13C19 14.9887 18.9828 15.5907 18.8637 16.0353C18.4938 17.4156 17.4156 18.4938 16.0353 18.8637C15.5907 18.9828 14.9887 19 13 19Z"></path>';
            }
        }
    };
    
    setInterval(historyClock, 1000);
    

    1_1559563708258_2019-06-03 14_07_37-C__Users_Tom_Documents_Fritzbox Sicherung_Vivaldi_Vivaldi - History Clock - Clov.jpg 0_1559563708257_2019-06-03 14_07_59-C__Users_Tom_Documents_Fritzbox Sicherung_Vivaldi_Vivaldi - History Clock - Clov.jpg

    You add this script to the following folder, see screenshot:

    0_1559563890427_2019-06-03 14_09_34-C__Program Files (x86)_Vivaldi_Application_2.5.1525.48_resources_vivaldi - Clove.jpg



  • Step 2:

    You open the editor with administrator rights and navigate to:

    C:\Program Files (x86)\Vivaldi\Application\2.5.1525.48\resources\vivaldi

    and open 'browser.html'

    0_1559567001789_2019-06-03 15_02_51-.jpg

    And now you insert this line exactly at the point, as you can see in the screenshot:

    <script src = 'bundle.js'> </ script>

    0_1559567239888_2019-06-03 15_06_47-browser.html - Editor.jpg

    Then you save the file brower.html and close it.



  • Step 3 (The last step) Since after each Vivaldi update these files are overwritten again, it is best to make a backup. To do this, you copy the files 'Browser.html' and 'history_clock.js' and paste them in a backup folder, preferably on an external memory stick.

    After a Vivaldi update, add both files again in the named folder.



  • @Phosphorus There is also an Android remote for MusicBee:

    https://mbrc.kelsos.net/

    0_1559568846319_IMG_20190603_152828.jpg


Log in to reply
 

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