Topbar
opened this issue · comments
Hi,
I am trying to recreate your topbar. How did you set the background of it and how did you apply a border at the bottom?
http://docs.qtile.org/en/latest/manual/ref/commands.html?highlight=bar#bar
I can't see any options in the docs and in your config.py. What am I missing here? (I'm new to all of this)
The background color is set in part of the default settings:
colors = [
["#2e3440", "#2e3440"], # background
["#d8dee9", "#d8dee9"], # foreground
["#3b4252", "#3b4252"], # background lighter
["#bf616a", "#bf616a"], # red
["#a3be8c", "#a3be8c"], # green
["#ebcb8b", "#ebcb8b"], # yellow
["#81a1c1", "#81a1c1"], # blue
["#b48ead", "#b48ead"], # magenta
["#88c0d0", "#88c0d0"], # cyan
["#e5e9f0", "#e5e9f0"], # white
["#4c566a", "#4c566a"], # grey
["#d08770", "#d08770"], # orange
["#8fbcbb", "#8fbcbb"], # super cyan
["#5e81ac", "#5e81ac"], # super blue
["#242831", "#242831"], # super dark background
]
widget_defaults = dict(
font="FiraCode Nerd Font", fontsize=18, padding=3, background=colors[0]
)
extension_defaults = widget_defaults.copy()
As you can see, I have a python list of colors that I define just before setting the default options. In each individual widget, I set the background color to be background=colors[14] to get the darker color. The border is actually an eww window; its not a part of the qtile bar. See here in the eww configs. Look here for how I start them. Note that if you refresh qtile, you'll have to do eww open border1 && eww open border2 to get them to be back on top of the qtile bar. Alternatively, you can use polybar to get the same effect if you prefer it
@Barbarossa93 I installed Fira Code... but if I copy your textbox
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28,
padding=0,
),
and
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28,
padding=0,
),
I don't get those nice looking rounding things in your topbar.
And how do you get padding? Its full height for me..
Sorry if I ask too much but I can find any info on how to do this?
Image:
Config:
# Copyright (c) 2010 Aldo Cortesi
# Copyright (c) 2010, 2014 dequis
# Copyright (c) 2012 Randall Ma
# Copyright (c) 2012-2014 Tycho Andersen
# Copyright (c) 2012 Craig Barnes
# Copyright (c) 2013 horsik
# Copyright (c) 2013 Tao Sauvage
#
# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to deal
# in the Software without restriction, including without limitation the rights
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in
# all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE.
import os
import subprocess
from typing import List # noqa: F401
from libqtile import bar, layout, widget, hook
from libqtile.config import Click, Drag, Group, Key, Screen
from libqtile.lazy import lazy
from libqtile.utils import guess_terminal
mod = "mod4"
terminal = guess_terminal()
keys = [
# Switch between windows in current stack pane
Key([mod], "k", lazy.layout.down(),
desc="Move focus down in stack pane"),
Key([mod], "j", lazy.layout.up(),
desc="Move focus up in stack pane"),
# Move windows up or down in current stack
Key([mod, "control"], "k", lazy.layout.shuffle_down(),
desc="Move window down in current stack "),
Key([mod, "control"], "j", lazy.layout.shuffle_up(),
desc="Move window up in current stack "),
# Switch window focus to other pane(s) of stack
Key([mod], "space", lazy.layout.next(),
desc="Switch window focus to other pane(s) of stack"),
# Swap panes of split stack
Key([mod, "shift"], "space", lazy.layout.rotate(),
desc="Swap panes of split stack"),
# Toggle between split and unsplit sides of stack.
# Split = all windows displayed
# Unsplit = 1 window displayed, like Max layout, but still with
# multiple stack panes
Key([mod, "shift"], "Return", lazy.layout.toggle_split(),
desc="Toggle between split and unsplit sides of stack"),
Key([mod], "Return", lazy.spawn(terminal), desc="Launch terminal"),
# Toggle between different layouts as defined below
Key([mod], "Tab", lazy.next_layout(), desc="Toggle between layouts"),
Key([mod], "w", lazy.window.kill(), desc="Kill focused window"),
Key([mod, "control"], "r", lazy.restart(), desc="Restart qtile"),
Key([mod, "control"], "q", lazy.shutdown(), desc="Shutdown qtile"),
Key([mod], "r", lazy.spawncmd(),
desc="Spawn a command usving a prompt widget"),
]
groups = [Group(i) for i in "123"]
for i in groups:
keys.extend([
# mod1 + letter of group = switch to group
Key([mod], i.name, lazy.group[i.name].toscreen(),
desc="Switch to group {}".format(i.name)),
# mod1 + shift + letter of group = switch to & move focused window to group
Key([mod, "shift"], i.name, lazy.window.togroup(i.name, switch_group=True),
desc="Switch to & move focused window to group {}".format(i.name)),
# Or, use below if you prefer not to switch to that group.
# # mod1 + shift + letter of group = move focused window to group
# Key([mod, "shift"], i.name, lazy.window.togroup(i.name),
# desc="move focused window to group {}".format(i.name)),
])
layout_theme = {
"border_width": 3,
"margin": 9,
"border_focus": "3b4252",
"border_normal": "3b4252",
}
layouts = [
layout.Max(**layout_theme),
layout.Stack(num_stacks=2),
# Try more layouts by unleashing below layouts.
# layout.Bsp(),
# layout.Columns(),
# layout.Matrix(),
# layout.MonadTall(),
# layout.MonadWide(),
# layout.RatioTile(),
# layout.Tile(),
# layout.TreeTab(),
# layout.VerticalTile(),
# layout.Zoomy(),
]
colors = [
["#2e3440", "#2e3440"], # background
["#d8dee9", "#d8dee9"], # foreground
["#3b4252", "#3b4252"], # background lighter
["#bf616a", "#bf616a"], # red
["#a3be8c", "#a3be8c"], # green
["#ebcb8b", "#ebcb8b"], # yellow
["#81a1c1", "#81a1c1"], # blue
["#b48ead", "#b48ead"], # magenta
["#88c0d0", "#88c0d0"], # cyan
["#e5e9f0", "#e5e9f0"], # white
["#4c566a", "#4c566a"], # grey
["#d08770", "#d08770"], # orange
["#8fbcbb", "#8fbcbb"], # super cyan
["#5e81ac", "#5e81ac"], # super blue
["#242831", "#242831"], # super dark background
]
group_box_settings = {
"padding": 5,
"borderwidth": 4,
"active": colors[9],
"inactive": colors[10],
"disable_drag": True,
"rounded": True,
"highlight_color": colors[2],
"block_highlight_text_color": colors[6],
"highlight_method": "block",
"this_current_screen_border": colors[14],
"this_screen_border": colors[7],
"other_current_screen_border": colors[14],
"other_screen_border": colors[14],
"foreground": colors[1],
"background": colors[14],
"urgent_border": colors[3],
}
widget_defaults = dict(
font="Fira Code",
fontsize=18,
padding=3,
background=colors[0]
)
extension_defaults = widget_defaults.copy()
screens = [
Screen(
top=bar.Bar(
[
# widget.CurrentLayout(),
# widget.GroupBox(**group_box_settings),
widget.Prompt(),
# widget.Clock(format='%Y-%m-%d %a %I:%M %p'),
# widget.WindowName(),
# widget.Chord(
# chords_colors={
# 'launch': ("#ff0000", "#ffffff"),
# },
# name_transform=lambda name: name.upper(),
# ),
# widget.TextBox("default config", name="default"),
# widget.TextBox("Press <M-r> to spawn", foreground="#d75f5f"),
# widget.Systray(),
# widget.QuickExit(),
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28,
padding=0,
),
widget.GroupBox(**group_box_settings),
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28
),
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28,
padding=0,
),
widget.CurrentLayoutIcon(
#custom_icon_paths=[os.path.expanduser("~/.config/qtile/icons")],
foreground=colors[2],
background=colors[14],
padding=-2,
scale=0.45,
),
widget.TextBox(
text="",
foreground=colors[14],
background=colors[0],
fontsize=28,
padding=0,
),
widget.Spacer(
length=bar.STRETCH
),
],
48,
margin=[0, -4, 18, -4],
),
bottom=bar.Gap(18),
left=bar.Gap(18),
right=bar.Gap(18),
),
]
# Drag floating layouts.
mouse = [
Drag([mod], "Button1", lazy.window.set_position_floating(),
start=lazy.window.get_position()),
Drag([mod], "Button3", lazy.window.set_size_floating(),
start=lazy.window.get_size()),
Click([mod], "Button2", lazy.window.bring_to_front())
]
dgroups_key_binder = None
dgroups_app_rules = [] # type: List
main = None # WARNING: this is deprecated and will be removed soon
follow_mouse_focus = True
bring_front_click = False
cursor_warp = False
floating_layout = layout.Floating(float_rules=[
# Run the utility of `xprop` to see the wm class and name of an X client.
{'wmclass': 'confirm'},
{'wmclass': 'dialog'},
{'wmclass': 'download'},
{'wmclass': 'error'},
{'wmclass': 'file_progress'},
{'wmclass': 'notification'},
{'wmclass': 'splash'},
{'wmclass': 'toolbar'},
{'wmclass': 'confirmreset'}, # gitk
{'wmclass': 'makebranch'}, # gitk
{'wmclass': 'maketag'}, # gitk
{'wname': 'branchdialog'}, # gitk
{'wname': 'pinentry'}, # GPG key password entry
{'wmclass': 'ssh-askpass'}, # ssh-askpass
])
auto_fullscreen = True
focus_on_window_activation = "smart"
# @hook.subscribe.startup_once
# def start_once():
# home = os.path.expanduser("~")
# subprocess.call([home + "/.config/qtile/autostart.sh"])
# XXX: Gasp! We're lying here. In fact, nobody really uses or cares about this
# string besides java UI toolkits; you can see several discussions on the
# mailing lists, GitHub issues, and other WM documentation that suggest setting
# this string if your java app doesn't work correctly. We may as well just lie
# and say that we're a working one by default.
#
# We choose LG3D to maximize irony: it is a 3D non-reparenting WM written in
# java that happens to be on java's whitelist.
wmname = "LG3D"
Are you sure you have the nerd font version of FiraCode? It doesn't look like it to me.
And how do you get padding? Its full height for me..
If you're referring to padding in between the bubbles, I did it with this widget:
widget.Sep(
linewidth=0,
foreground=colors[2],
background=colors[0],
padding=10,
size_percent=40,
),
If you mean padding top and bottom, I did it with the eww bars that I mentioned earlier. I opened an issue there about it. You should certainly voice your support for adding that feature.
Sorry if I ask too much but I can find any info on how to do this?
No worries, we all started somewhere. It took me about a year of making rices to get to this point :)
After installing the fonts, you should also do fc-list | grep Fira or fc-list | grep fira to find the actual name of the font. In my case:
$ fc-list | grep Fira
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Regular Nerd Font Complete Mono.otf: FiraCode Nerd Font Mono:style=Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Regular Nerd Font Complete.otf: FiraCode Nerd Font:style=Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Light Nerd Font Complete.otf: FiraCode Nerd Font:style=Light,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Bold Nerd Font Complete Mono.otf: FiraCode Nerd Font Mono:style=Bold
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Medium Nerd Font Complete.otf: FiraCode Nerd Font:style=Medium,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Bold Nerd Font Complete Mono.otf: FiraMono Nerd Font Mono:style=Bold
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Light Nerd Font Complete Mono.otf: FiraCode Nerd Font Mono:style=Light,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Bold Nerd Font Complete.otf: FiraCode Nerd Font:style=Bold
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Medium Nerd Font Complete Mono.otf: FiraCode Nerd Font Mono:style=Medium,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Retina Nerd Font Complete Mono.otf: FiraCode Nerd Font Mono:style=Retina,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Medium Nerd Font Complete Mono.otf: FiraMono Nerd Font Mono:style=Medium,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Regular Nerd Font Complete Mono.otf: FiraMono Nerd Font Mono:style=Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Medium Nerd Font Complete.otf: FiraMono Nerd Font:style=Medium,Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Bold Nerd Font Complete.otf: FiraMono Nerd Font:style=Bold
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Mono Regular Nerd Font Complete.otf: FiraMono Nerd Font:style=Regular
/usr/share/fonts/nerd-fonts-complete/OTF/Fira Code Retina Nerd Font Complete.otf: FiraCode Nerd Font:style=Retina,Regular
If I wanted to use the first result, then the font I would put into qtile would be FiraCode Nerd Font Mono
Closing due to inactivity