Pyloid Docs
GithubLanguage
  • 💎What is Pyloid?
  • Getting Started
    • Prerequisites
    • Create Pyloid App
  • Core Concepts
    • Thread Safety
  • API
    • Python (Backend)
      • Pyloid
      • BrowserWindow
      • Monitor
      • TrayEvent
      • Utility Functions
      • RPC
      • Store
    • Javascript (Frontend)
      • Event
      • BaseAPI
      • RPC
  • Guides
    • Load Webview
    • Serve Frontend
    • Calling Python from JS
    • Calling JS from Python
    • Keyboard Shotcuts
    • Notification
    • Tray
    • Timer
    • File Watcher
    • Clipboard
    • Window Position
    • Devtools
    • Window Drag Region
    • Window Radius And Transparent
    • Autostart
    • Production Utils
    • Desktop Monitor
    • File Dialog
    • Splash Screen
Powered by GitBook
On this page
  • Basic Setup
  • Setting Border Radius
  • Important Note
  • Setting Transparency
  • Critical Requirement
  • Setting Drag Region
  • Complete Example

Was this helpful?

Edit on GitHub
  1. Guides

Window Radius And Transparent

Pyloid allows you to easily set the border radius and transparency of windows. These features enable you to create various custom UI designs.

Basic Setup

To set up window border radius and transparency, follow these steps:

  1. Use the frame=False option when creating a window to remove the default frame.

  2. Use HTML/CSS to set the desired border radius and transparency.

window = app.create_window(
    "border-radius and transparent", frame=False, width=500, height=500
)

Setting Border Radius

Use the CSS border-radius property to shape your window into a circle, oval, or rounded corners:

<style>
  html,
  body {
    margin: 0;
    background: transparent;
  }
  #main {
    border-radius: 9999px; /* Circular window */
  }
</style>

You can set different border-radius values to create various shapes:

  • border-radius: 10px; - Slightly rounded corners

  • border-radius: 20px 50px; - Various corner radii

  • border-radius: 50%; - Perfect circle

Important Note

Important: The border-radius property won't work if applied directly to the body tag. You must apply it to a child element (e.g., div) inside the body. For example:

<!-- Won't work -->
<style>
  html,
  body {
    margin: 0;
    background: transparent;
    border-radius: 9999px;
  }
</style>

<!-- Correct method -->
<style>
  html,
  body {
    margin: 0;
    background: transparent;
  }
  #main {
    width: 100vw;
    height: 100vh;
    border-radius: 9999px;
  }
</style>
<body>
  <div id="main"></div>
</body>

Setting Transparency

Use the CSS rgba() color value to set the window's transparency:

<style>
  #main {
    background: rgba(
      255,
      255,
      255,
      0.3
    ); /* White background with 30% opacity */
  }
</style>

The transparency value is set by the last parameter (alpha channel) in rgba:

  • 1.0 - Completely opaque

  • 0.5 - 50% transparent

  • 0.0 - Completely transparent

Critical Requirement

Important: For window transparency to work properly, you must set background: transparent; on both the html and body elements. This is essential for the transparent parts of your window to actually appear transparent rather than having a solid background. Example:

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    background: transparent; /* This is required for transparency to work */
  }
  #main {
    /* Your custom styling with rgba background */
    background: rgba(255, 255, 255, 0.3);
  }
</style>

Without setting background: transparent; on these elements, your window will appear with a solid background regardless of the rgba values you set on child elements.

Setting Drag Region

For frameless transparent or rounded windows, you need to use the data-pyloid-drag-region attribute to make them draggable:

<div
  id="main"
  data-pyloid-drag-region
>
  Hello World!
</div>

Complete Example

Here's a complete example code for creating a circular semi-transparent window:

from pyloid import Pyloid

app = Pyloid(app_name="pyloid-app")

window = app.create_window(
    "border-radius and transparent", frame=False, width=500, height=500
)

html = """
<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background: transparent;
      }
      #main {
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div
      id="main"
      data-pyloid-drag-region
    >
      Hello World!
    </div>
  </body>
</html>
"""

window.load_html(html)
window.show_and_focus()

app.run()

This example demonstrates the following features:

  • Creating a frameless window

  • Setting a circular border (border-radius: 9999px)

  • Setting a semi-transparent background (background: rgba(255, 255, 255, 0.3))

  • Setting a draggable area (data-pyloid-drag-region)

Combine these settings to create various window designs.

PreviousWindow Drag RegionNextAutostart

Last updated 3 days ago

Was this helpful?

window-radius-and-transparent image