src="https://update.vivaldi.com/stats/piwik.php?idsite=1&rec=1&bots=1" style="border:0;" alt=""

Address bar background colour.



  • Is there any css code to change the address bar input field background colour?



  • I have

    .addressfield .pageload-indicator {
    background-color: var(--colorAccentBgDark) !important;
    }
    .addressfield form input.url {
        color: var(--colorAccentFgFaded) !important; opacity: 0.6 !important;
    }
    .addressfield .addressfield-siteinfo .siteinfo-ssl-issuer {
        display: none !important;
    }
    
    

    And the actual colors can be found in element.style using the Inspect tool:

    element.style {
        --colorBg: #444444;
        --colorFg: #000010;
        --colorHighlightBg: #ed773d;
        --colorHighlightBgDark: #d15f27;
        --colorHighlightFg: white;
        --colorHighlightBgAlpha: rgba(237,119,61,0.25);
        --colorAccentBg: #444440;
        --colorAccentBgDark: #343430;
        --colorAccentBgDarker: #1d1d1a;
        --colorAccentFg: white;
        --colorAccentFgAlpha: rgba(255,255,255,0.5);
        --colorAccentFgFaded: #a1a19f;
        --colorAccentBgFaded: #51514c;
        --colorAccentBgFadedMore: #595955;
        --colorAccentBgFadedMost: #62625d;
        --colorFgIntense: #3b3c46;
        --colorFgFaded: #14141f;
        --colorFgFadedMore: #28282f;
        --colorBgIntense: #3e3e3e;
        --colorBgIntenser: #383838;
        --colorBgFaded: #515151;
        --colorBgLight: #595959;
        --colorBgLighter: #666666;
        --colorBgLightIntense: #555555;
        --colorBgDark: #363636;
        --colorBgDarker: #2e2e2e;
        --colorBorderHighlight: #c06e45;
        --colorBgAlpha: rgba(68,68,68,0.8);
        --colorBorder: #2e2e2e;
        --colorBorderDisabled: #030303;
        --colorBorderIntense: #363639;
        --radiusRound: 100px;
        --radiusRounded: 2px;
        --radius: 0px;
        --radiusHalf: 0px;
        --radiusFifth: 0px;
        --radiusRoundedLess: 0;
        --radiusThird: 0;
    }
    


  • @aesouza
    Thanks. I don't write css code so I need a copy and paste solution
    or
    how do you find the different css terms like .addressfield .pageload-indicator used by vivaldi.



  • @CantankRus
    Ok ....just added .addressfield

     .addressfield {
    background-color: #BBCDDE !important;
    }
    .addressfield .pageload-indicator {
    background-color: #2B4661 !important;
    }
    .addressfield form input.url {
        color: black !important; opacity: 0.6 !important;
    }
    .addressfield .addressfield-siteinfo .siteinfo-ssl-issuer {
        display: none !important;
    }
    

    Peek 2017-02-17 11-30.gif

    What does this affect .addressfield .addressfield-siteinfo .siteinfo-ssl-issuer ?
    Is there a way not to show the green text?



  • @CantankRus said in Address bar background colour.:

    ...
    Is there a way not to show the green text?

    Totally possible. This is my screenshot. I'm having other things to do but I'll post an image so you can be convinced:

    0_1487308775187_no-text.png

    My set-up is a bit freaky, but I don't mind sharing my custom.css if you want. I've gone for a very minimal "one-liner" UI (plus a bookmarks bar).



  • @aesouza
    Yes, share please.
    More info the better.



  • @CantankRus I mislead you :(

    I didn't post the full code related to the address bar. This is it now:

    
    .addressfield .pageload-indicator {
    background-color: var(--colorAccentBgDark) !important;
    }
    .addressfield form input.url {
        color: var(--colorAccentFgFaded) !important; opacity: 0.6 !important;
    }
    .addressfield .addressfield-siteinfo .siteinfo-ssl-issuer {
        display: none !important;
    }
    
    .siteinfo-symbol {
        opacity: 0.5 !important;
    }
    /*
    .addressfield .addressfield-siteinfo .siteinfo-text {
        display: none !important;
    }
    */
    

    If you uncomment the last part (.addressfield .addressfield-siteinfo .siteinfo-text { display: none !important;}), you won't see the green text. If it is commented out, you will.



  • @CantankRus said in Address bar background colour.:

    ...
    how do you find the different css terms like .addressfield .pageload-indicator used by vivaldi.

    I'm still feeling my way around, but, after reading this, I start the browser like this:

    vivaldi-snapshot --disable-gpu --debug-packed-apps --silent-debugger-extension-api

    though you may not need --disable-gpu.

    With the browser started that way, you can right-click on virtually anything to "inspect" it.

    You'll get a new window showing the nitty-gritty. If I right-click on the green text you mentioned and select Inspect from the context menu, the new window looks like this:

    0_1487322940805_Inspect.png

    There are two vertical panes each with its own scrollbar. In the larger left panel, there's a line which highlights siteinfo-text etc. That's hint #1.

    Right at the bottom, there's another line in which only the last bit is highlighted. And that is span.siteinfo-text.

    Now, with that in mind, look at the right panel, the narrower one. Nearly at the top, you'll find the element you want:

    .addressfield .addressfield-siteinfo .siteinfo-text. You can easily select it by double-clicking. Copy and paste it into your custom.css stylesheet and follow that up with { display: none !important }. After saving custom.css and restarting Vivaldi, you won't see the green text any more.



  • @aesouza
    Thanks for the info.
    Gives me something to play around with.



  • Hi @aesouza
    Do you know how to change the colour of the page loading info?
    I have changed the url input to black with...

    .addressfield form input.url {
        color: black !important; !important;
    }
    

    but the page loading info remains white.
    0_1487370246516_170.jpg



  • @CantankRus said in Address bar background colour.:

    Hi @aesouza
    Do you know how to change the colour of the page loading info?
    ...
    but the page loading info remains white.
    ...

    If you mean the 0 and 0/0 in the image below, I've tried my best to change it from what I have but haven't succeeded. So the answer, for now, is IDK :(

    0_1487385154249_page-load.png



  • @aesouza said in Address bar background colour.:

    ...
    If you mean the 0 and 0/0 in the image below, I've tried my best to change it from what I have but haven't succeeded. So the answer, for now, is IDK :(

    ...

    Okay, I think it's this:
    .addressfield .pageload .pageload-ticker{color:#ed773d!important}

    0_1487388744465_GotIt1.png

    0_1487388758849_GotIt2.png

    0_1487389280851_GotIt3.png



  • @aesouza
    Yes... that works.
    Peek 2017-02-18 12-26.gif

    I tried using the startup command and inspect but got lost in the css forrest.
    I'll see if I can find using your pic as guide.
    Thanks again.



  • @CantankRus said in Address bar background colour.:

    @aesouza
    ...
    Thanks again.

    You're most welcome! You have been a great help to me elsewhere :)


Log in to reply
 

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