Posibility to change the icon manually?

Created on 29 January 2021, over 3 years ago
Updated 18 April 2024, 2 months ago

I think that perhaps some users would like to change the SVG we're using by default.
Does anyone know how we could do that?

Ideally, I'd like the users to have that option on the configuration page: /admin/config/system/view-password-settings

It could be a path to the new images (the easiest in my opinion)
Or even upload the file (which would have to happen on every environment, right?)

I'm thinking something like what they do on Paragraph Browser:

I'm open for ideas here!

✨ Feature request
Status

Fixed

Version

6.0

Component

Code

Created by

🇦🇷Argentina anacolautti

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Status changed to Needs review 11 months ago
  • 🇦🇷Argentina anacolautti

    I added 2 fields in the settings form, allowing users to enter (version controlled) paths to images.
    This overrides the CSS background-image style attribute.

    I made some other changes:
    - at the JS I changed some selectors. I realized I was using them wrong.
    - at the original CSS I changed the background-size attribute of the icons, and set it to "contain". This works better with different icons.

    I know this is a minor feature, but I believe this would provide users more flexibility.
    I'm thinking of allowing file uploads as well in the next iteration, like I said in the ticket description a while ago.

    I'd appreciate if someone could test this.

  • Status changed to RTBC 5 months ago
  • 🇮🇳India sumit-k

    I've verified the changes, and it seems that the uploaded icons are now successfully visible on the user login page. This enhancement not only adds a visual appeal but also provides a more personalized and engaging experience for users.

  • Pipeline finished with Skipped
    3 months ago
    #128735
  • Status changed to Fixed 3 months ago
  • 🇦🇷Argentina anacolautti

    Thank you very much @sumit-k. This will be in the next release, a week from now (1st April).

  • 🇫🇷France mably

    For those interested, the SVG images can easily be replaced in CSS using something like this (changing the fill color to Gray here):

    .eye-open {
    	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 24 16' width='24' height='16'><defs><clipPath id='_clipPath_zNqFDs7A04e5gw6PzL4Pwp30PPON3aDb'><rect width='24' height='16'/></clipPath></defs><g clip-path='url(%23_clipPath_zNqFDs7A04e5gw6PzL4Pwp30PPON3aDb)'><path d=' M 11.653 0.73 C 9.265 0.942 6.524 2.319 3.447 4.853 C 2.385 5.727 0.919 7.092 0.37 7.717 C 0.236 7.87 0.253 7.896 0.959 8.603 C 5.115 12.766 9.429 15.162 12.461 14.991 C 15.605 14.815 19.761 12.32 23.729 8.228 C 24.122 7.824 24.14 7.889 23.431 7.177 C 19.122 2.856 14.738 0.456 11.653 0.73 Z  M 12.596 3.305 C 15.684 3.658 17.361 7.537 15.646 10.357 C 13.888 13.247 10.017 13.068 8.488 10.026 C 6.888 6.844 9.283 2.926 12.596 3.305 Z  M 11.916 5.415 C 10.101 5.641 9.285 7.979 10.489 9.501 C 11.335 10.569 12.975 10.572 13.826 9.506 C 15.184 7.804 13.95 5.161 11.916 5.415 Z ' fill-rule='evenodd' fill='rgb(128,128,128)'/></g></svg>");
    }
    .eye-close {
    	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 24 16' width='24' height='16'><defs><clipPath id='_clipPath_hXFkOW2PDDbIXG5UwxQ5897ZvrAVu9UT'><rect width='24' height='16'/></clipPath></defs><g clip-path='url(%23_clipPath_hXFkOW2PDDbIXG5UwxQ5897ZvrAVu9UT)'><path d=' M 15.066 -0.197 C 14.876 -0.139 14.785 -0.038 14.464 0.473 C 14.089 1.072 14.188 1.008 13.716 0.954 C 8.463 0.356 3.51 2.464 0.413 6.616 C -0.189 7.423 -0.168 8.119 0.486 8.99 C 1.852 10.809 3.813 12.383 5.903 13.338 C 6.239 13.492 6.23 13.476 6.099 13.681 C 5.766 14.203 5.741 14.578 6.025 14.826 C 6.197 14.976 7.623 15.659 7.891 15.719 C 8.407 15.836 8.59 15.725 9.02 15.034 C 9.171 14.791 9.706 13.942 10.21 13.148 C 10.713 12.354 12.197 10.004 13.508 7.925 C 14.819 5.847 16.266 3.554 16.724 2.83 C 17.59 1.461 17.681 1.295 17.658 1.12 C 17.613 0.78 17.508 0.676 16.885 0.356 C 15.769 -0.218 15.452 -0.314 15.066 -0.197 Z  M 18.932 2.882 C 18.879 2.905 18.823 2.942 18.808 2.963 C 18.675 3.151 18.083 4.103 18.046 4.187 C 17.934 4.447 18.007 4.571 18.445 4.861 C 19.588 5.618 20.502 6.449 21.359 7.509 C 21.56 7.758 21.561 7.747 21.318 8.045 C 19.237 10.593 16.395 12.172 13.263 12.522 C 12.659 12.59 12.745 12.521 12.211 13.361 C 11.75 14.085 11.696 14.187 11.696 14.339 C 11.694 14.644 11.943 14.697 13.015 14.623 C 16.743 14.366 20.081 12.759 22.635 9.994 C 24.193 8.307 24.328 7.661 23.388 6.397 C 22.622 5.366 21.543 4.343 20.28 3.453 C 19.445 2.863 19.206 2.762 18.932 2.882 Z  M 12.08 3.126 C 12.45 3.295 12.245 3.582 11.731 3.614 C 10.161 3.713 9.071 4.71 8.936 6.172 C 8.903 6.54 8.548 6.657 8.385 6.353 C 8.309 6.212 8.382 5.708 8.54 5.282 C 8.838 4.48 9.732 3.652 10.661 3.319 C 11.167 3.137 11.888 3.039 12.08 3.126 Z  M 6.088 4.65 C 5.701 5.754 5.741 7.094 6.192 8.169 C 6.567 9.063 7.181 9.844 7.992 10.458 C 8.101 10.541 8.126 10.48 7.728 11.115 C 7.356 11.709 7.419 11.673 7.05 11.499 C 5.305 10.681 3.886 9.572 2.647 8.055 C 2.382 7.731 2.387 7.769 2.573 7.538 C 3.532 6.346 4.578 5.416 5.807 4.664 C 6.149 4.454 6.156 4.454 6.088 4.65 Z  M 17.511 5.13 C 17.381 5.183 17.557 4.917 15.612 7.993 C 13.598 11.176 13.696 11.001 13.826 11.196 C 13.96 11.398 14.207 11.384 14.765 11.143 C 17.126 10.127 18.509 7.742 18.063 5.455 C 18 5.134 17.798 5.015 17.511 5.13 Z ' fill-rule='evenodd' fill='rgb(128,128,128)'/></g></svg>");
    }
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024