For a WebExtension, we use browser.browserAction.setIcon to set the icon. As you can see in this sample, to fit in, the icon should have a dark or light background.
How can my Javascript code know which theme is in effect? Or better, can I determine what the background color for the toolbar is so I can make an appropriate icon?
You can use the theme javascript api listed in webextensions to get theme details. Please make sure you add "theme" permission in your manifest.json file.
Related
I've been struggling to make my extension visually consistent with the foreground and background colors of firefox's (and chromium's) navigation bar; i.e. the area that contains the address bar, back and forward buttons, menu button, ...etc.
So far I've tried to
use system css colors Window/WindowText and Menu/MenuText, but neither give the correct colors.
add "browser_style": true ("chrome_style" for chromium) to the relevant "browser_action" key in the manifest file. The only thing that did was make text unselectable in firefox. No perceivable changes in color occurred.
set colors explicitly (e.g. #333). This works but is a tedious solution that requires extensive testing. It also fails for users who choose to change their browsers default theme.
Question: Is it at all possible to make the colors of an extension's popup visually consistent with the rest of the navigation bar in a platform agnostic manner?
There are some third party themes on DeviantArt which change the way the toolbar works.
I would like to mod the toolbar in a way similar to this. Specifically I want this behavior: I want the start menu icon to be right-justified, the program icons to be center justified (with the option of having pinned icons forced to be listed before unpinned icons), and then other icons for background services and time are left justified.
In my previous question I give an example that illustrates my specifications.
Now that React Native is supported by Visual Studio, it would be cool if I could use React Native to mod the Windows UI. Is there some kind of wrapper that allows me to manipulate UI elements like icons, system font, toolbar background, windows appearance, etc... in a similar way someone working in a front-end Javascript framework would be comfortable in?
Also there is this program for Windows 7 called DualMonitor which creates another toolbar on the second monitor. It would also assign the program icon to the toolbar on the same screen.
https://sourceforge.net/projects/dualmonitortb/
https://www.deviantart.com/browse/all/customization/skins/windows/win10/
On the google theme store https://chrome.google.com/webstore/category/themes you have themes that have not just the tabs but search bar etc. with background images, transparent not just the colour that is allowed when creating your own theme.
Q: Is there a file that I can edit like a CSS file attached to my chrome browser or any other way that I can customise my chrome browser.
Change the colours, add images, font size, highlight of text colours?
Thank you.
Anyone knows if there is a way without the use of webfonts to embed font into an Adobe Edge Animate composition so that the fonts can be seen when I create a Phonegap iOS app with the html file i get from Edge Animate?
All i can find so far is custom fonts for Edge Animate that uses webfonts which means I can only add links rather then embedded directly into the file or custom fonts for Phonegap where using font-family in css but that doesn't seems to be read by Edge.
I was thinking there is some way in the edge.js file that is output where they use
var fonts = {};
fonts['londrina-shadow, sans-serif']='<script src=\"http://use.edgefonts.net/londrina-shadow:n4:all.js\"></script>';
fonts['cabin-sketch, sans-serif']='<script src=\"http://use.edgefonts.net/cabin-sketch:n4,n7:all.js\"></script>';
fonts['coming-soon, sans-serif']='<script src=\"http://use.edgefonts.net/coming-soon:n4:all.js\"></script>';
to embed webfonts. Can I do something to it to embed the fonts with a path like src:"fonts/coming-soon.ttf"
Hope there is an answer to this or is there simply no way to do this cos Adobe decide to only link webfonts and screw us up.
Does the css work if you add that class to the div you are animating. If you save out the edge project, the open it in dreamweaver you can attach a css stylesheet. When you go back to edge and add that style it should show up in the animation. I know this works if you want to add png's to an animation. Not sure if it will work but could. I will look into it now and see if I can figure it out.
I'm trying to costumize tabbar interface for my app, is it possibile to change font, font size, put custom backround pattern image?
I realy need to change it so it can fit my app needs.
I'm the author of the tab bar plugin (repo on GitHub). It does not yet support changing the background image or the font, but it shouldn't be a big problem to implement this. I'll put it on the wishlist but at the moment I don't have time. If you want to implement it yourself in the meantime, look at the tab bar's setBackgroundImage method and in the plugin code, search for selectedImageTintColorRgba to see where you have to implement additional options.