Customize Login pop-up box?

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…

1 Like

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

1 Like

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?

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…

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

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

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

/admin/customize/site_texts

More info:

2 Likes

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.

No, HTML will be stripped.

1 Like

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.

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

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

2 Likes

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

1 Like

Hmm, not working for me?
qqq

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

Thank you so much!

1 Like