Hello Friends, There is a welcome page in Discourse in which when the website is in private mode this message comes up: An account is required. Please create an account or log in to continue. I want to change the style of this page, add some photos and etc. Is there a way to use a designed static page for the welcome page? How can I change the design of this welcome page? Ps. I am thinking to have something similar to this page in Quora: [image]

Sure, if you press f12 in your browser you can look around for the appropriate CSS classes on the page. If we need to add another CSS class there let us know.

[image] codinghorror: press f12 Sorry, I am on Mac. F12 here means looking at source?

and if so, there is just one class (wrap) for the whole welcome page. Is there anyway to assign new HTML for the “welcome page” only?

There is an .anon class that is added to the html element when there is a non-logged in user. I think that for sites that require login to read content, a non-logged in user can only access the login, FAQ, Terms of Service, and Privacy pages. They are most likely to only access the login page. You can add a background image to it with something like this: .anon { background: url(http://wallpapercanyon.com/wp-content/uploads/2016/01/Background-Images-10.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } You can add html to the login_required.welcome_message. Any css classes that you add to that html will be stripped by the Discourse markdown parser. If you need to you can whitelist css classes with a plugin. I think a customized login page is a great idea :slight_smile:

I am opening to adding better CSS classes here if needed, pull requests happily accepted.

Bumping this from the deep dead… I think it’d be smart to get login_required.welcome_message its own CSS class. I tried to add my own classes to HTML inside of it, but they get stripped out. How are people styling these login pages? Mine has an ID of ember759 – is that specific only to the welcome page or is it also used elsewhere? And will this welcome/login page ever use a different ember ID? Perhaps I can use that for now. Thanks!

Ember IDs are not safe to use as CSS targets. What is your goal? I can look into adding additional CSS classes.

I just wanted to make a better looking login page. We’re in pre-launch time and a bit of “landing page” hype would be nice to add. Thanks!

We added divs without classes into our customized login_required.welcome_message and then are using selectors like this the following to target that text: .anon .contents.body-page div div { } .anon .contents.body-page div div:nth-of-type(2) { } For the rest of the page, we’re using overrides on the following selectors: html.anon { } .anon .contents { } .anon .contents.body-page h1 a { } .anon .contents.body-page h3 { } .anon .contents.body-page h2 { } .anon .contents.body-page div p { } .anon .contents.body-page button { } .anon .contents.body-page button i { } .anon .contents.body-page { }

Would it help @Berto and @mcwumbly if the the login_required.welcome_message was wrapped in a div itself? Beyond that, it doesn’t look like much can be added because the content of welcome_message is passed through a HTML sanitizer. Instead of: Welcome to Dev Discourse An account is required. Please create an account or log in to continue. Log In You would have: Welcome to Dev Discourse An account is required. Please create an account or log in to continue. Log In

How can I change the Login Required page style?

Development

Berto October 15, 2017, 4:54pm 14

That would be awesome. Why not put the buttons in that div too?

Topic		Replies	Views
Customize login page Product Support	2	1788	April 22, 2023
How can I edit My Login Page Development	11	906	March 10, 2024
Editing the login page Product Support	1	2851	April 22, 2016
Disable manual login, and only allow Discord logon Product Support	7	1722	March 1, 2019
Customize Login pop-up box? Development	13	1584	March 28, 2024

How can I change the Login Required page style?

Related topics