Modifying Notifications in Meilix

There are many settings available for notifications in Meilix like position, size, timeout which can be modified with help of the notifications settings available in LXQT.

Theming Notifications

We will start by creating a file in /usr/share/lxqt/themes for creating a qss file of the notification theme as lxqt-notificationd.qss. This file tells the LXQT about what the colors, size, border, etc. are for a notification.

We start with notifications in this file. We can define color of the text of notifications. It supports alpha values too, but making text transparent decrease.

Notification {
    color: #313639;
    border: 1px solid rgba(155, 155, 155, 00%);
    background:rgba(240, 240, 240, 00%);
    margin: 0px;
    border-radius: 5px;
}

 

We can add a custom close button also we just need to add the path of the button in the qss file.

#closeButton {
    margin: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 4px;
    qproperty-icon: url(lxqt-notificationd/window-close.svg);
}

 

Other properties like hover on close button for animations can be used like.

#closeButton:hover {
    color: rgba(54, 54, 54, 100%);
    background: rgba(30, 145, 255, 30%);
    border: 1px solid rgba(30, 145, 255, 100%);
}

 

We can also define custom font, background like an image file, or actions like click, hover etc.

For other notification settings we can create a configuration file notifications.config which we can place in root  or in ~/.config depending upon application weather we want to apply it system wide or only for user.

The configuration file for disabling the sounds in LXQT:

[Sounds]
No sound=true

 

Settings can also be changed using the menu and they are saved in .config/lxqt/notifications.conf. We have changed the spacing to zero in Meilix so that the notifications are invisible and do not disturb during an event (instead of disabling it in case someone wants notifications they can change the spacing).

[General]
spacing=0

Resources

Continue Reading Modifying Notifications in Meilix

LXQT Panel theme for Meilix

Panel theming is available via the LXQt Configuration Center –> LXQt Appearance –> LXQt Theme. For Meilix we have attempted making the light color theme with some new things like taskbar manager to highlight the active window and hover actions.

Meilix taskbar in panel

Theme folders of LXQT is in the directory /usr/share/lxqt/themes/.

Meilix LXQT theme directory

For theming the panel we start by creating a lxqt-panel.qss this file is like a style sheet for LXQt panel.

LXQtPanel #BackgroundWidget {
        background:rgba(240, 240, 240, 100%);
}

QToolTip {
        border-radius: 4px;
        border: 1px solid rgba(155, 155, 155, 100%);
        background:rgba(240, 240, 240, 100%);
        padding: 2px;
        margin: 0px;
        color: #313639;
}

 

Where we are defining the values of property like background for LXQTPanel1 which is the primary panel but if we want to theme the second panel differently then we need to use LXQTPanel2 and if we require same theme then no need to add the property for second panel it will take the property of panel 1 only,

We can define appearance of things like tooltip using QToolTip , LXQtPanelPlugin for plugins area and property of widgets like calendar using QCalendarWidget like

QCalendarWidget #qt_calendar_navigationbar,
QCalendarWidget #qt_calendar_navigationbar * {
    background:rgba(240, 240, 240, 100%);
    color: rgba(54, 54, 54, 100%);
}
QCalendarWidget QToolButton {
    margin: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 4px;
} 

 

We can also add or change the icons like the default icon for LXQt main menu it the LXQT logo but we want it to be something else like the logo of Meilix. We can add the path of the icon in the QSS file like

#MainMenu {
        qproperty-icon: url(mainmenu.svg);
}

 

To check all the changes made in LXQT panel theme without restart or logout and login again we can use the following commands.

killall lxqt-panel
lxqt-panel

Resources

Continue Reading LXQT Panel theme for Meilix

How to customize LXQT for Meilix

We had a task of customizing the LXQT (LXQt is the Qt port and the upcoming version of LXDE, the Lightweight Desktop Environment) desktop environment in Meilix for events. For example, we can use a distro at events for presentations so during presentations things like system sounds, notifications and panel can be disturbing elements of presentations so we required LXQT to be pre configured for that so the time required in configuration is not wasted or none of the presentations are disturbed.

The default configuration of LXQT are present in ~/.config/lxqt. Configuration files are in This directory is initialized automatically. The default configuration for new users is found in /etc/xdg/lxqt but we are going to use skel for this so that if there are some changes in future in the LXQT code and they do not match default settings we can always be back to default settings by deleting user side changes. Similar to LXDE. LXQt provides a GUI applications to change its settings as well.

While Openbox is the default window manager we have used in Meilix with  LXQt, you can specify a different window manager to use with LXQt via by editing ~/.config/lxqt/session.conf. To a window manager of choice. Change the following line:

window_manager=openbox

 

We have used the Openbox for Meilix.

To create a configuration for panel we can go to ~/.config/lxqt and edit the panel.conf file if it is not present we can create a file named panel.conf and add/edit the code.

[panel1]
hidable=true 

 

GIF representing auto hide of panel.

In order to configure more things like notification we can edit the ~/.config/lxqt/notification.conf.

We can change things like the placement or the size of notification or the timeout of notification in this file.

For eg:

 [General]
__userfile__=true
placement=top-left
server_decides=1
spacing=6
width=295

 

We can now place all the configurations inside the skel folder so that every new user gets the same configurations we have made.

Resources

Continue Reading How to customize LXQT for Meilix

Configuration for Auto-hiding Panel in Meilix with LXQt desktop

In the new LXQt desktop, we can intelligently hide the panel. For that purpose, we’ll just need to patch a new file in a location under the meilix-default-settings metapackage.
Originally the file lies in the lxqt folder of the .config of the OS with the name panel.conf like .config/lxqt/panel.conf but since we have to make changes in the metapackage, we need to patch it here meilix-default-settings/etc/skel/.config/lxqt/panel.conf. Files in etc/skel/ will be put in each users’ new home folder, a folder which does not exist yet when we build the ISO.

panel.conf

1. [panel1]
2. alignment=-1
3. animation-duration=0
4. background-color=@Variant(\0\0\0\x43\0\xff\xff\0\0\0\0\0\0\0\0)
5. background-image=
6. desktop=0
7. font-color=@Variant(\0\0\0\x43\0\xff\xff\0\0\0\0\0\0\0\0)
8. hidable=true
9. iconSize=22
10. lineCount=1
11. lockPanel=false
12. opacity=100
13.panelSize=32
14. plugins=mainmenu, desktopswitch, quicklaunch, taskbar, tray, statusnotifier, mount, volume, clock, showdesktop
15. position=Bottom
16. show-delay=0
17. width=100
18. width-percent=true

In the line number 8 , hidable=true is doing all the jobs. It is the only line which hides the panel by default.

How we find this approach?
Originally LXQt panel is not hidden, they are shown by default. I first try to locate panel.conf file which will carry out the configuration for the panel. I try to find the code responsible for hiding the panel, but I can’t find that. Then I copied the panel.conf in a file and then by GUI I hide the panel and reopen the config file. Then I compare the changes between this file and the old config.panel file in which I found that the new file has a new line hidable=true. We introduced the changes in this PR.

How this approach actually work?
We are using meilix-default-settings metapackage to make the things work. We made an .config file which contains the configuration file. And the .config file is present under skel folder which gets copied under the home folder of the user. Thus ultimately we get a configuration file which will overwrite the original one to get the desired changes.

Other Uses of panel.conf
The file panel.conf could be used to customize all related settings to the LXQT panel, like its alignment, volume bar, quick launch, show desktop, etc.

References:
LXQt panel hiding
Customize LXQt desktop

Continue Reading Configuration for Auto-hiding Panel in Meilix with LXQt desktop

Creation of Icon Pack for Meilix

An icon theme is a set of icons that have common looks and feel. The user can select the icon theme that they want to use, and all apps use icons from the theme if a particular icon is not available in theme the fallback theme is used .

An icons theme is only a mapping. Given an arrangement of indexes to search for icons in and a theme name it maps from icon name and icon size to an icon filename.

Icon in Meilix are stored in /usr/share/icons/meilix.

We need to create a index.theme file which tells the LXQT desktop where the icons for a particular application or mime type are located

[Icon Theme]
Name=Meilix
DisplayDepth=32
DesktopDefault=48
DesktopSizes=16,22,32,48,64,128,256
ToolbarDefault=22
ToolbarSizes=16,22,32,48
MainToolbarDefault=22
MainToolbarSizes=16,22,32,48
SmallDefault=16
SmallSizes=16,22,32,48
PanelDefault=32
PanelSizes=16,22,32,48,64,128,256
DialogDefault=32
DialogSizes=16,22,32,48,64,128,256

#################################
#   Fallback icon theme to use  #
#################################
Inherits=oxygen

 

After defining the icon theme name and sizes we next define the fallback icon theme to use icons from in case of missing icons so we have chosen Oxygen icon theme which is very similar to Meilix icon theme to have a consistent looks and feel.

We further define the different types of icons with their locations , resolution and type.

Meilix icon theme use four different sizes 16 , 22 , 24 ,32 ,64 and two types scalable for svg icons and fixed for png icons.

[actions/32]
Size=32
Context=Actions
Type=Fixed

[actions/48]
Size=48
Context=Actions
Type=Fixed

#  Apps

[apps/16]
Size=16
Context=Applications
Type=Fixed

[apps/22]
Size=22
Context=Applications
Type=Fixed

 

Meilix Icon pack directory structure

Adding more icons to theme

To append a custom icon to Meilix icon theme xdg-icon-resource can be used. This will resize and copy the icon to /share/icons/meilix. With this method, custom emblems can also be added. Examples:

$ xdg-icon-resource install --size 64 --context --theme meilix emblems meilix-example.png --mode system # add as emblem
$ xdg-icon-resource install --size 64 --theme meilix meilix-example.png --mode system # add as normal icon

Mime type icons

file managers get definitions from /usr/share/mime/ . Calling an icon according to the definition found there and copying it to /share/icons/meilix will cause the file manager to display the custom mime type icon.

Creating a custom icon for text files (*.txt)

# grep txt /usr/share/mime/globs | egrep -o '.+\/[^:]+' | tr '/' '-'
application-x-kate ;# rename your icon according to this output
xdg-icon-resource install --size 64 --context mimetypes --theme meilix application-x-kate.png --mode system

Resources

Continue Reading Creation of Icon Pack for Meilix