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: https://github.com/discourse/discourse/blob/master/app/views/static/login.html.erb. 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.