How can I change the Login Required page style?


#1

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:


(Jeff Atwood) #2

Admin, Customize, Text Content – search for the text you wish to change. Anything else is CSS which is under Admin, Customize, CSS/HTML


#3

@codinghorror

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?


(Jeff Atwood) #4

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.


#5

Sorry, I am on Mac. F12 here means looking at source?


#6

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?


(Simon Cossar) #7

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:


(Jeff Atwood) #8

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


#9

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!


(Joshua Rosenfeld) #10

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


#11

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!


(Dave McClure) #12

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 {
}

(Joshua Rosenfeld) #13

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>

#14

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


(Joshua Rosenfeld) #15

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/login.html.erb at master · discourse/discourse · GitHub. Adding a div there should not be a problem.

The button (and surrounding div) come from here: discourse/static.hbs at master · discourse/discourse · GitHub. 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.


#16

Ok! I think that would be great. I appreciate your responses, especially on a weekend!


(Dave McClure) #17

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.


(Joshua Rosenfeld) #18

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.


(Joshua Rosenfeld) #19

No problem. I’ll reach out if this gets merged, and we can coordinate a time for the deploy.


(Joshua Rosenfeld) #20

The PR has been merged.