DEV Community

Discussion on: Creating a text editor in Electron: part 2 - writing files

Collapse
 
davidamunga profile image
David Amunga

Awesome read! Aurel. Is it possible to customize with CSS the title bar? Including the icons?

Collapse
 
aurelkurtula profile image
aurel kurtula

I included a customized title part in the third part

Collapse
 
aurelkurtula profile image
aurel kurtula

Thanks David.

The icons, yes you can add your own icon, I think you do that the moment you build the app.

As for the title bar, you can remove it completely - with Frameless Window, then add your own

Electron/webkit provides CSS properties that allow you to make any element draggable, like a titlebar - stackoverflow

I might do something like that in part three because it seems to be a pretty cool idea, though never tried it before.

Collapse
 
davidamunga profile image
David Amunga

Thank you, Go for it, and lastly if possible how to do a small loading screen like in Postman,Discord. Will be really greatful!

Thread Thread
 
aurelkurtula profile image
aurel kurtula

The loading screen isn't specific to Electron. You achieve it with the usual javascript.

I did a simple version in my Creating a movie website with GraphQL and React tutorial, where whilst waiting for the resources to load, show the word "loading" (I didn't bother to style it).

Since it's not specific to Electron I am not going to cover it here.

You can see the demo of the loading (all be it with no styles) here