Customize Login pop-up box?

Development

AI-generated summary

Customizing the Login Pop-up Box

The discussion is about customizing the login pop-up box on a Discourse site. 45thj5ej wants to move stuff around, add/remove elements, and change the text.

45thj5ej tried to change the login pop-up box text using CSS, but it didn’t work as expected. omarfilip suggested using the site texts customization feature in the admin panel to change the text. However, 45thj5ej found that HTML is stripped from the text.

Don provided a solution that involves editing the text in the admin panel, adding line breaks, and using CSS to make it work. The solution involves adding the following CSS code:

.d-modal {
  &.login-modal {
    .login-subheader {
      white-space: pre-line;
    }
  }
}

This allows for line breaks and text formatting in the login pop-up box. 45thj5ej confirmed that this solution works.

1

I saw Trendy Login but that’s for login-required sites. Also saw Page Publishing but seems to also be login-required.

I want to customize this pop-up box by moving stuff around, adding/removing stuff, etc…

jjj
jjj717×436 18.9 KB

2

Hello, you can customize the login panel with Making custom CSS changes on your site.
I hope this helps you.

3

Hi, I saw that earlier too but couldn’t figure the pop-up login box still :frowning:
And that can be used without requiring login mode?

4

Kind of a tricky question. So, I want to change the login pop-up box text.
I am currently using CSS to replace the “Log in to your account” text with “Login or Register here!”

.login-subheader {
  visibility: hidden;
}
.login-subheader:after {
  content:'Login or Register here!'; 
  visibility: visible;
}

The problem is, the result is this, where it should be to the left like the original text is…

wwww
wwww810×459 24.1 KB

But that’s because the original, “Log in to your account” is simply hidden, not gone, so what’s really there is:

qqq
qqq788×423 20.7 KB

So is there a way to just directly change the HTML here instead of using whacky CSS tricks?

5

Search for the text you wish to replace here and change it:

/admin/customize/site_texts

More info:

6

Is that only simply changing text, though, or can I use HTML in it?
EDIT: after trying a simple <b></b> test, looks like you cannot use HTML on there…so I need a better solution.

7

No, HTML will be stripped.

https://meta.discourse.org/t/customize-any-text-in-discourse/36092/73?u=omarfilip

8

I’m not sure how to do line breaks with CSS in between words/sentences, though. Is that even possible? Or bolding certain words in a sentence, etc.

9

I’d recommend doing a tutorial at somewhere like CSS Tutorial

If you want to make these kinds of changes you will need some basic knowledge.

10

Actually, the one thing that won’t be stripped out is line breaks, so <br><br> will work.

11

I have already posted some general links to help you with learning CSS and customizing your forum here:

12

Hmm, not working for me?
qqq

13

Hello :wave:

Edit the text in /admin/customize/site_texts

To this format :arrow_down_small:
Screenshot 2024-03-27 at 12.26.57

Than add the following to CSS.

.d-modal {
  &.login-modal {
    .login-subheader {
      white-space: pre-line;
    }
  }
}

Result

Screenshot 2024-03-27 at 12.30.39

14

Thank you so much!