Add custom 'Login' Link to Invite Acceptance

Development

AI-generated summary

The discussion is about adding a custom ‘Login’ link to the invite acceptance page in Discourse. gassim wants to move the ‘Already have an account? Log in’ link to the top of the page for existing members who are not logged in. Don provides a solution by adding custom CSS to a theme component. The CSS code is:

body.invite-page {
  .invites-show {
    .login-welcome-header {
      gap: 3em 0;
    }
    .invitation-cta__info {
      position: absolute;
      top: -6em;
      left: 0;
    }
  }
}

gassim confirms that the solution works and thanks Don. The discussion is then moved to the support category, and gassim decides to keep the topic in its current category, Development, where it can be marked as solved.

1

Hi!

This topic is from 2018, please does it still work? Insert text or images anywhere on your site using CSS pseudo-elements

I want to use this trick to fix an issue with the invitation welcoming page. I want existing members who are not logged in to easily find the login link after clicking on an invitation link. Currently, the ‘Already have an account? Log in(link)’ appears at the end of the signup form.

Here’s a screenshot of how it currently appears:

image
image702×812 41.4 KB

And this is how it will be visible for existing members (what we prefer):

image
image686×772 28.3 KB

Thanks!

2

Hello,

Probably the easiest way to achieve this, adding some css. This way you don’t need to modify the invite page template.

Add the following to a theme component Common / CSS section.

Screenshot 2022-11-28 at 18.32.31
Screenshot 2022-11-28 at 18.32.311107×552 42.8 KB

body.invite-page {
  .invites-show {
    .login-welcome-header {
      gap: 3em 0;
    }
    .invitation-cta__info {
      position: absolute;
      top: -6em;
      left: 0;
    }
  }
}

Screenshot 2022-11-28 at 18.06.09
Screenshot 2022-11-28 at 18.06.09582×445 23.6 KB

3

Worked like magic! Thank you so much @Don! Wish I could grant you a discourse community badge for this :heart_eyes:`

@staff @team (sorry for the tag) but this is a very helpful post. Could you move mine and the response to a new topic in the support category so I can mark @Don’s post a solution.

Thank you!

4

You should already be able to do that here? I think your Topic makes more sense in Development and I understand you can mark it as Solved in any case.

5

Thank you! :slight_smile: Yes, it’s even better here!