Specific Theming Guides - K-Ivy/Seelen-UI-Resources GitHub Wiki

How to 'Combine' Toolbar Modules

  • First Position them. And then simply play with border-radius and margin to combine.

... image

- As an example, I'll combine the "User Folder" module, a “-” Seperator and the "Notifications" Module. (As shown in the above image)

> User Folder: On the left-side

    .ft-bar-item#\@default\/user-folder { /* selector */
      border-right: none;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      padding-right: 0.7px; /* light padding */
    }

Seperator: In the middle

  • You have to use the debug version to get the ID of the default seperators and anything added with "Add Custom Text Item" option in module menu.

  • Or if you dont want to get the debug version, you can just make a plugin that just prints text and use it's selector instead.

↳ Plugin Example 
id: '@custom/text'
icon: MdCenterFocusWeak
target: '@seelen/fancy-toolbar'
plugin:
  type: generic
  template: 'return "//";'
  style:
     flexShrink: 0

    .ft-bar-item[id="4672fe31-42ad-4f03-93dd-24f16bd7f584"] {
      border-right: none;
      border-left: none;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      margin-left: -9px;
      /* Padding for spacing */
      padding-left: 4px;
      padding-right: 2px;
    }
  • As a bonus: This is how you can move the text/symbol you are using for alignment
    .ft-bar-item[id="4672fe31-42ad-4f03-93dd-24f16bd7f584"] .ft-bar-item-content span {
      position: relative;
      top: 1px; /* down 1px */
    }

Notifications: On the right-side

.ft-bar-item#\@default\/notifications { /* selector */
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-left: -6px;
  /* extra space control */
  padding-left: 0px;
  padding-right: 7px;
}
⚠️ **GitHub.com Fallback** ⚠️