Its really hard to see details in the progress bar if Page Theme Color is disabled.



  • [attachment=1569]Image1.jpg[/attachment] Please fix the color from blue to gray to match the color of URL. Attachments: [img]https://forum.vivaldi.net/uploads/attachments/16424/Image1.jpg[/img]


  • Moderator

    I use the light theme so everything is extremely visible.



  • @saudiqbal:

    Please fix the color from blue to gray to match the color of URL.

    ``
    Add a few lines to your custom.css file:

    .ui-dark .addressfield .pageload .pageload-ticker {
        color: #fff !important;
    }
    ```This will change the color to white. You can change it to any color to your liking.

  • Vivaldi Team

    We're fixing this as we speak B)



  • @Sajadi:

    How about making the color picking user customizable? Would that be possible? :D I really would love to chose my own background url progress loading colors, that would be amazing :D

    If you don't mind editing the CSS, this already entirely possible.

    1. Open directory %localappdata%\Vivaldi\Application\1.0.249.12\resources\vivaldi\style\
    2. Open "common.css"
    3. At the very top of the file, add:```
      @import "custom.css";
    5) Paste this code into the file:
    
    

    .pageload-indicator {
    background-color: #FF3300 !important;
    }

    ^That will change your progress bar to red as an example. Change it to whatever you want.
    You can also adjust the opacity of the progress bar:
    
    

    .pageload-indicator {
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.9) 2px,rgba(0,0,0,0.9) 2px) !important;
    }

    ^That will make the address bar almost completely opaque.
    You can make it completely opaque by changing the 0.9 to a 1.0
    
    This how I chose to have my progress bar look:
    
    

    .pageload-indicator {
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.9) 2px,rgba(0,0,0,0.3) 2px) !important;
    }

    It's slightly more solid than the default, which makes it more easily seen.
    
    >! 
    [attachment=1574]Screenshotfrom2015-08-19144433.png[/attachment]
    
    And there's also what brook said above:
    
    @brook:
    
    > Add a few lines to your custom.css file:
    > ```
    > .ui-dark .addressfield .pageload .pageload-ticker {
    >     color: #fff !important;
    > }
    > ```This will change the color to white. You can change it to any color to your liking.
    
    ā€“---------------
    
    But, assuming you meant a way to do it from in the browser: I agree, that would be awesome.
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/16277/Screenshotfrom2015-08-19144433.png)


  • Widget made this live skin editor for Vivaldi - but I don't know if it works with more recent versions.


Log in to reply
 

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