Center the avatar background

[NelinhoMarinus]

Hi,

First of all. NICE THEME !! This is the best theme out there.

Thanks, but the avatar being offcenter within the larger circle is a stylistic choice (worth noting the avatar is still centered within the larger box itself).

I've noticed that the avatar is centered within the box but is it possible for me to center the avatar background behind the avatar? This is the only thing that's bothering me.

It would make me verry happy to know how this could be done.

Thanks in advance

[KrisAphalon]

Since the project is open source, in fact you can!

It's quite easy, but it can be intimidating if you haven't worked with technologies used here. What you have to do is basically as follows:

• clone/download repository to your system and cd into it (or, in case you've already installed it, just go to /usr/share/lightdm-webkit/themes/lightdm-webkit-theme-aether)
• make sure you have npm installed
• run npm i to install all dependencies listed in package.json
• you're almost ready to make changes. To make things easier for yourself, change window.__debug = false on 57th line in index.html to window.__debug = true;. Opening this file in browser will then show you how your login screen will look.
• making changes requires editing sass files. To center all avatars change two translate(20px, 15px) to translate(15px, 15px) in src/sass/style.sass (both for .avatar-mask)
• run ./node_modules/.bin/webpack-cli --progress --colors --env.production to build your changes
• hit F5 in the index.html in browser to test, if your tweaks have saved.
• congratulations, you've successfully edited source code of an open source project, and now have unique program that noone else in the world has.

Now you can make even more elaborate changes and tweaks if you want (and know how to use scss). The world is open(source) before you.

If something is not clear, please feel free to comment so I can try to explain it.

[Jdelefosse]

Since the project is open source, in fact you can!

It's quite easy, but it can be intimidating if you haven't worked with technologies used here. What you have to do is basically as follows:

* clone/download repository to your system and `cd` into it (or, in case you've already installed it, just go to `/usr/share/lightdm-webkit/themes/lightdm-webkit-theme-aether`)

* make sure you have npm installed

* run `npm i` to install all dependencies listed in package.json

* you're almost ready to make changes. To make things easier for yourself, change `window.__debug = false` on 57th line in index.html to `window.__debug = true;`. Opening this file in browser will then show you how your login screen will look.

* making changes requires editing sass files. To center all avatars change two `translate(20px, 15px)` to `translate(15px, 15px)` in src/sass/style.sass (both for .avatar-mask)

* run `./node_modules/.bin/webpack-cli --progress --colors --env.production` to build your changes

* hit F5 in the index.html in browser to test, if your tweaks have saved.

* congratulations, you've successfully edited source code of an open source project, and now have unique program that noone else in the world has.

Now you can make even more elaborate changes and tweaks if you want (and know how to use scss). The world is open(source) before you.

If something is not clear, please feel free to comment so I can try to explain it.

Hi, Thanks for the explanation, but I have many errors while installing dependencies using npm i I tried to read the log but it is gibberish for me :( Here is the log in case someone can help me, I'm still trying to figure out the problem. 2021-04-04T14_34_43_755Z-debug.log

EDIT: Here a link pastebin link to avoid downloading the log. https://pastebin.com/NrP8rnmX I'm still trying to figure out how to solve this.