Question
Is it possible to make a BrowserWindow, in electron, transparent with blur? In that it blurs all background content, including apps and the wallpaper.
And if possible, how would I accomplish this?
Examples
Here are some code I've tried.
index.js:
let win = new BrowserWindow({
fullscreen: true,
fullscreenable: false,
frame: false,
skipTaskbar: true,
resizable: false,
movable: false,
show: false,
alwaysOnTop: true,
transparent: true
})
style.css:
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
backdrop-filter: blur(4px);
}
The html is just a body with a h1 tag with text in it.
Although this only creates a black background in the window.
I read something about this:
webPreferences: {
experimentalFeatures: true
}
But can't get it to work.
Environment
Ubuntu: 18.04.2
Node: v10.15.3
npm: 6.4.1
i3wm. 4.14.1
I have compton running. Maybey it has to do with that. Or the compositing engine in general?
Thanks in advance!
electron-acrylic-window
Actually, it is possible, with a little bit of magic. I have no idea why nobody pointed that out, but there exists a small utility called electron-acrylic-window, which allows you to do exactly that. You can choose between the acrylic ("frosted") and blur effects, as well as change the color of the window and the opacity.
Under the hood, it uses node-gyp and low-level C++ code to render the page however you like. It's pretty easy to implement in Javascript.
The major drawback is that anything that is remotely transparent (and not above anything with a solid color) will be rendered as totally transparent.
Sample usage
index.js
const { BrowserWindow } = require('electron-acrylic-window');
// import { BrowserWindow } from 'electron-acrylic-window';
win = new BrowserWindow({
...,
frame: false,
vibrancy: {
theme: 'light', // (default) or 'dark' or '#rrggbbaa'
effect: 'acrylic', // (default) or 'blur'
disableOnBlur: true, // (default)
}
});
// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])
style.css
body {
background-color: transparent;
}
.watev {
background-color: black;
}
It's not possible to blur other apps in the background.
https://www.electronjs.org/docs/api/frameless-window#limitations
The blur filter only applies to the web page, so there is no way to
apply blur effect to the content below the window (i.e. other
applications open on the user's system).
Electron does not allow you to blur on anything running behind it. It only allows you to blur the content on your webpage/app. Anything in your css styling will only be applied to the foreground contents. I know because I too have tried and failed.
Related
The Fast Refresh / Hot Reloading in Next.js comes with a small triangle animation in the lower right corner by default:
Is there any way to customise this? I'd like the whole page to turn grey or similar so I get a visual feedback that my file change is actually taking effect and that I didn't happen to change the wrong file or something,.
A very ugly workaround until someone with better next.js knowledge helps out:
// Put this in your _app.js file
if (global.window) {
global.addEventListener('load', (event) => {
const watcher = window.document.getElementById('__next-build-watcher')
if (watcher) {
const newStyle = global.document.createElement('style')
newStyle.innerHTML = '#icon-wrapper { width: 100vw!important; height: 100vh!important; opacity: 0.3!important; } #container { background: rgba(0, 0, 0, 0.3)!important; }'
watcher.shadowRoot.appendChild(newStyle)
}
});
}
Makes that triangle icon 100vw 100vh and semi-transparent instead of 16px 16px .
I want to customize the classes in Google Charts.
As far as I'm concerned, there are two options that I've stumbled upon. The first option is:
Just inspect the elements in the browser, to see what the name of the classes is, then just give them new rules in the css file. In some cases I've to set !important; to override the rule. This option seems very "ugly", because forcing the class to have an !important; state is just ugly.
.charts-menu-button,
.charts-menu-button-inner-box {
width: 200px;
line-height: 55px;
border: 0 !important;
padding: 0 !important;
}
This is my second option which I'm pretty confused over. As I read the Google Chart docs, they suggest to call the "cssClass", like this:
options: {
ui: {
cssClass: {}
}
}
What I don't understand is when I'm going with the second option, absolute nothing happens to the class I want to customize.
So my question is: What am I doing wrong here, and is there any other way?
Set the cssclassnames in options for the chart as below. Define the classes in the css file. Below example is for table chart.
chart1.options = {
// title: "User Chart",
displayExactValues: true,
'showRowNumber': false,
'allowHtml': true,
is3D: true,
// 'height' : '350px',
cssClassNames : {
headerRow :'tableChartHeaderRow',
hoverTableRow : 'tableChartHeaderRowHighlightedState'
}
};
I'm looking to set up twitter's embedded timeline, it's quite easy when you're having a fixed design, but that's not my case and I'm actually building a fluid and responsive design for a new website.
My question is, how can I set up twitter's embedded timeline with a fluid width since its an iframe and you're supposed to set up the with in px in your twitter account ?
Thanks :)
This seems to work for me:
#twitter-widget-0 {
width:100%;
}
where #twitter-widget-0 is the iframe it generates, placed in an appropriately-styled container.
It's not perfect: the widget generates its contents a bit differently depending on width, and margins, etc. won't be exactly the same after resizing; but this seems minor.
I'm curious as to why simple CSS didn't work for you - sorry if I'm missing something.
Thanks to all of you I found my way through:
It was almost as lack said, but we had to focus on the iframe instead:
.MyClassForTheDivThatContainTheiFrame iframe{
width:100%;
}
of course .MyClassForTheDivThatContainTheiFrame is also fluid with a % width
This logic will work to change at least the width and height:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
height: 250px !important;
}
The only problem with shortening the height is that it hides the text box for people to send tweets but it does shorten the height. My guess is that if you want to add other CSS styling you can just put the !important clause. I also assume that if you have three widgets you would define #twitter-widget-2, etc.
Super hacky, but you can also do this :
<script type="text/javascript">
var checkTwitterResize = 0;
function resizeTwitterWidget() {
if ($('#twitter-widget-0').length > 0) {
checkTwitterResize++;
if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0;
$('#twitter-widget-0').attr('width', '100%');
// Ensures it's checked at least 10 times (script runs after initial resize)
if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50);
} else setTimeout('resizeTwitterWidget()', 50);
}
resizeTwitterWidget();
</script>
This was a helpful thread, thanks. I'm working on a site that uses an older Twitter profile Widget, which I find easier to customise. So an alternative method, uses this to display the feed (customised to suit):
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 300,
height: 400,
theme: {
shell: {
background: 'transparent',
color: '#151515'
},
tweets: {
background: 'transparent',
color: '#151515',
links: '#007dba'
}
},
features: {
shell: false,
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('BlueLevel').start();
</script>
Then override the width by adding this to your stylesheet:
.twtr-doc {
width:100% !important;
}
You can see the various classes to modify by using IE9 in compatibility mode, then using F12 Developer Tools to see the html/css.
Hope that helps someone!
You can give your iframe a class, and try to apply CSS to it. At least to change the width to %.
This is not possible. You can set an exact width and height using the html width and height in the anchor tab. Other than that you are out of luck. No responsive or fluid capabilities.
It also has a min-width of 220px and a max-width of 520px.
<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by #vertmob</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
If you absolutely must do a fluid, you can code a javascript that changes that iframe's width after a resize event or using some javascript timers.
Can we see some code of yours to make some js code for this?
Attribute selector should work:
iframe[id*="twitter-widget"] {
width: 100%;
}
More here.
After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: true,
title: dimensionData.title,
position: [x,y],
open: function() {
$("#dialog-search .dateField").blur();
},
close: function(event, ui){
callBack(event,ui);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
Try to see the structure of the dialog and it should not be hard to do it.
http://jqueryui.com/demos/dialog/#theming
Use the create event to change the class of the close button icon to class of another icon will do.
http://jsfiddle.net/Quincy/kHU2M/1/
$("#dialog-search").dialog({
create: function(event, ui) {
var widget = $(this).dialog("widget");
$(".ui-dialog-titlebar-close span", widget)
.removeClass("ui-icon-closethick")
.addClass("ui-icon-minusthick");
}
});
Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.
.ui-icon-closethick {
background-image: url(images/my-10px-image.png) !important;
background-position: left top !important;
margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
width: 10px !important;
height: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: none !important;
border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
padding: 0 !important;
}
My custom close button shown below:
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });