According to this tutorial, I should be able to create a circle in CSS with:
.dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; }
I implemented this to change the .framed-user-icon
in /usr/share/gnome-shell/theme/ubuntu.css
from
/* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; border: 2px solid #eeeeec; color: #eeeeec; border-radius: 3px; } .framed-user-icon:hover { border-color: white; color: white; }
to:
/* Auth Dialogs & Screen Shield */ .framed-user-icon { background-size: contain; height: 100px; width: 100px; background-color: #eeeeec; border-radius: 50%; display: inline-block; } .framed-user-icon:hover { border-color: white; color: white; }
But this did not work. Instead, I had to change border-radius: 50%;
to border-radius: 50px;
for it to work. Why is this the case?
Also I could not change the size of the the circular .framed-user-icon{}
; changing the values of the length
and breadth
did not work. Why is this the case and how do I change the size of the circular .framed-user-icon{}
.