Comments (12)
So, I have it working but can't make electron window transparent. It might be something specific to my application.
The idea is to hide electron window and create your own with css and add a border to a body ( please see myarrow:before class which makes an arrow)
@urre see if this helps you:
global css:
.myarrow {
position: relative;
padding: 12px 0;
}
html,
body {
margin: 0 auto;
overflow: hidden;
}
/**
- Set
box-sizing
toborder-box
for all elements by default. This makes it - easier to ensure widths when adding padding and borders.
*/
html {
box-sizing: border-box;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
}
.myarrow:before {
content: "";
height: 0;
width: 0;
border-width: 0 8px 12px 8px;
border-style: solid;
border-color: transparent transparent white transparent;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
}
.page {
background: #222332;
display: flex;
flex-direction: column;
width: 340px;
height: 540px;
margin: 0 auto;
}
.darwin.page {
border-radius: 5px;
box-shadow: 0 5px 24px rgba(0, 0, 0, 0.7);
overflow: hidden;
}
and html:
add myarrow class on body
and class="page darwin" on the div inside the body
from menubar.
The options passed to menubar is also used when creating the browser-window
.
So, to make the window transparent:
var mb = menubar({transparent: true})
from menubar.
yes, i meant like this. A arrow on top of the menubar app window.
from menubar.
Make the window transparent and add the arrow with css.
from menubar.
thanks @jenslind, any examples out there using this with electron?
from menubar.
thanks!
from menubar.
Could you, please, be a bit more specific about adding an arrow with css?
Thanks!
from menubar.
Do you mean it's an image or css class? If css class, on which element?
Thank you!
from menubar.
css. What's the simplest solution?
from menubar.
Oh, I am asking you how to add an arrow, I was hoping someone will post the code ;)
from menubar.
Ah, And I'm the one who opened this issue/question :) #78 (comment)
from menubar.
I am new to css and electron for that matter. I'll post the solution if I find one. Thank you for quick response!
from menubar.
Related Issues (20)
- Cannot integrate node in the menubar BrowserWindow HOT 2
- Remote url is getting cached
- Hide from cmd + tab menu HOT 1
- Taskbar with auto-hide on gets overlaid by menubar
- Add support to work with Electron 21 HOT 2
- Question: Site Context Menus HOT 1
- Menubar showing empty white screen with no content, but shows content on the desktop app and the website. HOT 1
- hello-world project cannot run on M1 mac
- Electron Forge x React with Menubar HOT 1
- Incorrect position on multiple monitor HOT 1
- Menubar window is incorrectly positioned when opened while the tray icon is hidden on Windows HOT 1
- Electron menubar not loading file in Production - but working properly in development HOT 4
- Doesn't work in the latest version of electron (v.26) HOT 1
- Cant find window.require with reactjs HOT 1
- Setting an icon makes the app disappear
- The IconTemplate.png overrides my icons when I package my app HOT 2
- Small bug on macos menubar
- add electron 28.x and 29.x support
- Main window's menu disappear when have menubar window HOT 1
- bug(macOS): inconsistent space when using mission control spaces HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from menubar.