breat.fr

How to use the desktop theme addon for groupchat page

Before use

This addon theme assumes you are already using my main desktop theme available here.

Everything is explained in the code, but it can be clearer here.

How to use

  1. Open Stylus popup then click on pen to edit the code: how-to-use-the-desktop-theme-addon-for-groupchat-page

  2. On right side of the Stylus page with my code click on the correct section depending of what you use in my main theme:

  1. Replace in the correct part depending if you use avatar rectangle or not KIN_NAME_X with the name of your kin (case sensitive). Each KIN_NAME_X = 1 different kin:

if you are in Without Avatar rectangle main theme option section with for exemple a groupchat with 2 kins named Yoona and Ava:

img[alt="KIN_NAME_1"] {
    background: url("URL_TO_IMG_1") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}

img[alt="KIN_NAME_2"] {
    background: url("URL_TO_IMG_2") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}
...

become:

img[alt="Yoona"] {
    background: url("https://exemple.com/img-1.jpg") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}

img[alt="Ava"] {
    background: url("https://exemple.com/img-2.jpg") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}
...

if you are in With Avatar rectangle main theme option section with for exemple a groupchat with 2 kins named Yoona and Ava:

img[alt="KIN_NAME_1"] {
    background: url("URL_TO_IMG_1") center center / cover no-repeat !important;
    height: 0 !important;
    padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}

img[alt="KIN_NAME_2"] {
    background: url("URL_TO_IMG_2") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}
...

become:

img[alt="Yoona"] {
    background: url("https://exemple.com/img-1.jpg") center center / cover no-repeat !important;
    height: 0 !important;
    padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}

img[alt="Ava"] {
    background: url("https://exemple.com/img-2.jpg") center center / cover no-repeat  !important;
    height: 0 !important;
    padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
    width: 0 !important;
}
...
  1. Enjoy 😊

Do you find this project useful? You can support its development using the buttons in the page footer.