The discussion revolves around customizing the login required page style in Discourse. mansoorix wants to change the style of the welcome page, add photos, and make it similar to Quora’s page. codinghorror suggests using Admin, Customize, Text Content to change the welcome message and Admin, Customize, CSS/HTML for other changes.
However, mansoorix notes that the welcome page has a limited number of CSS classes, making it difficult to customize. simon suggests using the .anon class to add a background image to the page and notes that adding HTML to the login_required.welcome_message is possible, but any CSS classes added will be stripped by the Discourse markdown parser.
Berto and mcwumbly express their interest in customizing the login page and share their approaches. jomaxro offers to add additional CSS classes to facilitate customization.
A solution is proposed by jomaxro, which involves wrapping the login_required.welcome_message in a div with a class, making it easier to target with CSS. Berto suggests including the buttons in the div as well. jomaxro explains that the buttons are added from a different file, making it challenging to include them in the div.
The proposed change is submitted as a pull request and eventually merged. weallwegot shares a code snippet that can be used to move the Login and Signup buttons inside the div if needed.
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:
Admin, Customize, Text Content – search for the text you wish to change. Anything else is CSS which is under Admin, Customize, CSS/HTML
From what I can understand, in “Admin, Customize, Text Content” just the “welcome message” can be changed.
My problem was that I could not figure out if there is any specific html/css/class… for “welcome page” so that I can change them in “Admin, Customize, CSS/HTML”.
Because I am going to include some photos, background and etc for the “welcome page” and so there should be a way to assign a new HTML to that specific page. Am I make sense?
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.
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 
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:
<div class="contents clearfix body-page">
<span id="ember772" class="ember-view">
</span>
<h2><a href="#welcome">Welcome to Dev Discourse</a></h2>
<p>An account is required. Please create an account or log in to continue.</p>
<button title="Log In" id="ember773" class="btn-primary login-button btn btn-icon-text ember-view">
<i class="fa fa-user d-icon d-icon-user"></i>
<span class="d-button-label">
Log In
</span>
</button>
</div>
You would have:
<div class="contents clearfix body-page">
<span id="ember772" class="ember-view">
</span>
<div class='login-required'>
<h2><a href="#welcome">Welcome to Dev Discourse</a></h2>
<p>An account is required. Please create an account or log in to continue.</p>
</div>
<button title="Log In" id="ember773" class="btn-primary login-button btn btn-icon-text ember-view">
<i class="fa fa-user d-icon d-icon-user"></i>
<span class="d-button-label">
Log In
</span>
</button>
</div>
That would be awesome. Why not put the buttons in that div too?
That would not be easy because the buttons are added to the page from a different file.
The login required text is from here: discourse/app/views/static/login.html.erb at main · discourse/discourse · GitHub. Adding a div there should not be a problem.
The button (and surrounding div) come from here: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/static.hbs. That template is also used for pages like the FAQ and TOS, so we cannot change the surrounding div’s class, or add anything else (like a new div) that is specific to the login required page.
Ok! I think that would be great. I appreciate your responses, especially on a weekend!
So strong feelings either way personally, since we’ve got something in place that works. Just give us a heads up when this change is ready to roll out so we can make sure we make any necessary adjustments to the existing customization if necessary.
Seeing Jeff’s like I submitted this as a PR. I want someone else on the team to review this - this is a login page, can’t allow anything to break.
No problem. I’ll reach out if this gets merged, and we can coordinate a time for the deploy.
The PR has been merged.