Transparent speed dial thumbs



  • Just jumped into Vivaldi from Opera, feels like home ❤

    Anyway, is there a possibility to make speed dial icons semi-transparent?

    I know I can set transparent .png thumbs, but it would be perfect to make icon not transparent when moving mouse over it.

    I thinkm, this could be easisy achieved with css.

    Is there any css file that responsible for theme and/or the speed dial ?

    Thanks in advance.


  • Vivaldi Translator

    You can add your own CSS to do it, see here: https://forum.vivaldi.net/topic/10549/modding-vivaldi

    If you enable vivaldi://flags/#silent-debugger-extension-api and vivaldi://flags/#debug-packed-apps and restart the browser you will be able to right-click the speed dials and inspect them. That way you can find the relevant HTML elements and CSS classes to change.



  • Easy way.
    Go to vivaldi://experiments/ and allow for using css mods.
    Then in settings search for css and chose a folder for your css file.
    Create file.css in your chosen folder and put this inside :

    .thumbnail-image {
        opacity: 0.5;
    }
    .thumbnail-image:hover {
        opacity: 1;
    }
    


  • @greenenemy said:

    Go to vivaldi://experiments/ and allow for using css mods.
    Then in settings search for css and chose a folder for your css file.

    This is only in snapshot…



  • Does anyone even use stable version? 🤪
    You're right, I forgot to mention that.



  • Ok, so I've found the way to do it:

    The CSS file responsible is here
    C:\Users\%USER%\AppData\Local\Vivaldi\Application\2.5.1525.48\resources\vivaldi\style\commons.css

    I've applied these styles:

    .thumbnail {
      transition: opacity 0.3s linear;
      opacity: 0.5;
    }
    .thumbnail:hover {
      opacity: 1;
    }
    

    Apperently, they won't work when animation setting is disabled (Appearance -> [v] Use animation).
    But this can be tweaked too, I think.

    The only thing that bothers me is the version number in file path.
    It seems like it's going to be overwritten on next update.

    Much thanks to @Komposten for flags. Maybe these flags will allow me to mess with styles from extension, so my changes would be permanent.



  • @jackhammer said:

    The only thing that bothers me is the version number in file path.
    It seems like it's going to be overwritten on next update.

    And isn't it?


  • Vivaldi Translator

    @jackhammer said in Transparent speed dial thumbs:

    The only thing that bothers me is the version number in file path.
    It seems like it's going to be overwritten on next update.

    Yes, all CSS and JS mods are currently removed in each update. This is why it's recommended to add your own CSS and JS files instead of changing common.css, because then you can simply copy your files back (and edit browser.html to load them) after each update.


Log in to reply
 

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