Styles #145

Activity

1. strouptl commented on Jan 9, 2026

   

   strouptl

   on Jan 9, 2026

   Collaborator

   More actions

   Hi @rctneil,

   We should probably update those instructions for Propshaft. Try adding this to your CSS file instead:

   @import 'devise-otp';

   Laney
2. rctneil commented on Jan 9, 2026

   

   rctneil

   on Jan 9, 2026

   Author

   More actions

   Ah! I'll give that a spin next week. Thanks.

   One suggestion for the readme. Maybe you could add some screenshots of the result of integrating this gem. So images of the QR code page, the "enter your 2FA code" page. Just as examples so people can fully see what it does.

   I very nearly went elsewhere as I wasn't 100% sure if it was going to do what I wanted, thankfully I did try it and it does it very nicely!

   👍React with 👍1Reacted by Laney Stroup
3. strouptl commented on Jan 9, 2026

   

   strouptl

   on Jan 9, 2026

   Collaborator

   More actions

   That is really helpful. Thank you, @rctneil.

   Glad to have you on board!
4. rctneil commented on Jan 12, 2026

   

   rctneil

   on Jan 12, 2026

   Author

   More actions

   Hi @rctneil,

   We should probably update those instructions for Propshaft. Try adding this to your CSS file instead:

   @import 'devise-otp';

   Laney

   how do i reference direct from a plain css file?

   I tried this but it can;t find it:

   @import url('devise-otp');
5. rctneil commented on Jan 13, 2026

   

   rctneil

   on Jan 13, 2026

   Author

   More actions

   Any thoughts on this @strouptl ?
6. strouptl commented on Jan 15, 2026

   

   strouptl

   on Jan 15, 2026

   Collaborator

   More actions

   Hi @rctneil,

   Sorry for the delay. Could you try this instead?

   @import url("devise-otp.css");

   Thanks,
   Laney
7. strouptl commented on Jan 28, 2026

   

   strouptl

   on Jan 28, 2026

   Collaborator

   More actions

   @rctneil, did you get a chance to try the last option? It should work, as it is using the native CSS import syntax.
8. rctneil commented on Jan 29, 2026

   

   rctneil

   on Jan 29, 2026

   Author

   More actions

   @strouptl Hey there. Sorry, had to jump ship to another project for a time. Just tried this but no it fails. It's looking in the directory I have set for my styles but the stylesheet obviously isn't in there. It somehow needs to look in the gem for it but i'm unsure how to achieve that?

   Or thinking the opposite way, do I somehow need to extract the stylesheet from the gem and place it in my css directory manually?
9. strouptl commented on Jan 29, 2026

   

   strouptl

   on Jan 29, 2026

   Last edited by strouptl

   Collaborator

   More actions

   Hi @rctneil,

   Rails should find/import the devise_otp.css stylesheet from the devise_otp module automatically. Here is a sample app (brand new Rails 8 project with Propshaft) demonstrating a working implementation. There is no configuration required besides the native CSS import syntax (see below).

   https://github.com/strouptl/devise_otp_test/blob/master/app/assets/stylesheets/application.css

   I would love to know if you find any differences with your application. If it is too much work, though, you can always copy the styles manually to your application.css file, as well. There aren't many (as noted in the README).

   .qrcode-container {
     max-width: 300px;
     margin: 0 auto;
   }
   
   

   Thanks,
   Laney
10. strouptl commented on Aug 18, 2026

    

    strouptl

    on Aug 18, 2026

    Collaborator

    More actions

    Updating README for this in #150
11. strouptl

    closed this as completedon Aug 19, 2026