Customize Login pop-up box?

Dev
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

1 Like
2

Hello, you can customize the login panel with Make CSS changes on Your Site.
I hope this helps you.

1 Like
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:

2 Likes
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

1 Like
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.

1 Like
10

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

2 Likes
11

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

1 Like
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

3 Likes
14

Thank you so much!

1 Like
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.