extension tray theme background colour

  • Just wondering how i can set the extension tray background colour to the same as the rest of the bar that i have managed to get looking just how i like it?
    Makes the theme look untidy and id love to sort it, I know i can hide the tray but i dont like to. thx.
    On Mint 18.1 KDE plasma 5

    alt text

  • thats great but over my head, I do tinker with user styles and have written my own. I can create a simple user-style for stylish but i dont know how to get the element name for the GUI parts like the tray background ?

  • ok thank you, this will take me some time to figure out (like weeks) and im busy atm.

    Cheers though.

  • ok well i had a little time and so i took a look at this but even though i have figured how to change the extensions icons background color i still cant change to the color i need?

    So this works fine, i get a red background to the tray
    .extensions-wrapper {
    display: flex;
    background: #FF0000;
    alt text

    But this just does not work, it not showing the correct color and its driving me mad with frustration cos it makes no sense. I know 100% that the rest of the panel is #2F3235

    .extensions-wrapper {
    display: flex;
    background: #2F3235;
    alt text

    Cheers all.

  • @JackDinn said in extension tray theme background colour:


    The red color doesn't work either. Use a colorpicker tool and check your screenshot 😉

  • hmmm its not what i set it as ?

    .extensions-wrapper {
    display: flex;
    background: #FF0000;

    but color picker says its #FF1A1A

    scratches head

    Anything to do with web safe colors or something like that ? am i going to be able to set the "tray" background colour to match the toolbar properly ?

  • I'm taking a look at it now. Can you give me all the colors you use in your theme so i can recreate it?

  • background #2f3235
    foreground #e4e4dc
    highlight #ed773d
    accent #2f3235


    tum te tum... cant post due to new user post restrictions ...... 2 mins left .....:)

  • I gave you 3 upvotes, this should take care of the restrictions I hope. It seems like there is some kind of additional background on the extension wrapper. Probably only on dark themes, I never noticed it before. I looked into it, but I couldn't find anything that can change it, there is no background image or box shadow in the way, it seems to be the background color? It doesn't really make sense. Maybe I can ask someone, but this might take some time.

  • o well many thx for having a look for me (and whoever else might want the same info). Iv got to go for a hospital visit now so i wont be about until tonight but by what your saying it could take days (if at all) for any answer to be found.

    Dont worry if you cant figure it, it would be great if you did though.

    Cheers 🙂

  • Found it!

    .toolbar-addressbar .button-toolbar.browserAction-button,
    .toolbar-mailbar .button-toolbar.browserAction-button {
            background-color: rgba(255,255,255,0);

    Was an overlay with transparency of 10%. This sets it to zero. You could probably just write transparent instead of setting the rgba color, but it doesn't really matter.

  • Thats excellent work, thank you.

    Can i just ask 1 more question, I prefer to use stylish but i cant figure how i need to start the .css to use it for the GUI elements ?

    I mean on firefox i use this as the header

    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url("chrome://browser/content/browser.xul") {
    #### code here ####

    but i cant get it to work with vivaldi, I would assume its the same as chrome but iv never tried skinning chrome either 😞

    !!! //modedit: Please keep care on CODE formatting, see http://commonmark.org/help/

  • You want to put these changes into stylish? That's not possible, stylish only affects websites.

  • well thats not actually true well not for firefox & thunderbird at least as i skin the UI of firefox and thunderbird entirely with stylish. I assume you can with chrome to.


    I shall just figure the normal way instead as iv just been editing the common.css atm but i assume i can add my own .css file and import it somewhere.

    Thank you very much for figuring my problem on vivaldi GUI 😃

  • looks like i was reading an old method of skinning vivaldi . Seems that i can just edit /opt/vivaldi/resources/vivaldi/style/common.css
    and the changes will remain persistent even after an update. So thats cool and no problem.

    It does look like there is a way of using stylish for vivaldi gui just not many people doing it with stylish just yet (if ever) so i shall stick with the method above.


  • The changes won't persist after an update, the common.css file is replaced just like everything else. At the beginning of the thread I gave you a link to a guide how to do this. Use it.

  • yea, must admit i was getting custom.css and common.css muddled up. Its a work in progress.

    cheers for the assistance.

  • @JackDinn
    No, you can't use Stylish extension or any extensions which use css to style Chromium/GChrome, since long time, upstream Chromium forbid it. They want you to use theme. Which mean register to Google as theme dev or something to sign your own theme so you/anyone could use it.
    And access to change most of things to Chromium base UI are forbidden more & more each year, even for theme. For security they said.
    GChrome only tag along with that decision.

    Vivaldi use old Firefox style, using custom CSS. Not newbie friendly obviously.


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