extension tray theme background colour

JackDinn

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 ?

luetage

@JackDinn You can inspect Vivaldi's UI
https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools/

JackDinn

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

Cheers though.

JackDinn

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.

luetage

@JackDinn said in extension tray theme background colour:

#2F3235

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

JackDinn

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 ?

luetage

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?

JackDinn

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

cheers.

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

luetage

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.

JackDinn

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

luetage

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.

JackDinn

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/

luetage

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

JackDinn

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.

https://userstyles.org/categories/app

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

JackDinn

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.

Cheers.

luetage

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.

JackDinn

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

cheers for the assistance.

JackDinn

good information , i was unaware. Im getting on with the proper way to style the GUI now just about so will only use stylish for individual sites.

thx.