How can i add image in login and register box

Product Support

AI-generated summary

In a support thread titled “How can I add image in login and register box,” Devran_ÖztĂŒrk shared screenshots indicating a desire to add an image to the green section of the login interface. NateDhaliwal asked for clarification on placement, and Devran_ÖztĂŒrk specified the green area. Canapin suggested using the after-login-buttons plugin outlet — which can be repositioned via CSS — or creating a theme component for more flexibility, linking to beginner guides on theme development. They also noted CSS-only solutions (e.g., background-image or ::after) are possible but less clean. NateDhaliwal agreed CSS could suffice and questioned whether a full theme component is overkill. Canapin countered that while CSS works for simple cases (like a background image), a theme component is cleaner, more versatile, and educational for future customizations — especially if more complex needs arise.

1

Screenshot 2024-12-23 121456
Screenshot 2024-12-23 121456635×386 11.2 KB

Screenshot 2024-12-23 121650
Screenshot 2024-12-23 121650627×642 17.2 KB

2

Where in here would you like to add an image?

3

Green section

4

There’s a after-login-buttons plugin outlet at the bottom of this section that can be used for adding content. I suppose it can be moved to the top with CSS, or an outlet above can be asked.

A login interface with options to sign in using different platforms such as Google, GitHub, Twitter, Discord, or a passkey. (Captioned by AI)
A login interface with options to sign in using different platforms such as Google, GitHub, Twitter, Discord, or a passkey. (Captioned by AI)797×722 30.7 KB

You can create a new theme component that makes use of it.

You can also probably add an image only with CSS in a less clean way.

Could you post a picture of what you’d like your login modal to look like?

5

Yep,

I was thinking of ::after or background-image with CSS. Didn’t know there were plugin outlets there. I think it’s overkill to write a full TC just to put an image there?

6

I’d say it cleaner and more versatile to make a theme component using the plugin outlet, plus you’ll learn useful things if you want to customize further your installation. :technologist:

Using a pseudo element from existing HTML to add your image will work and it’s a valid way to achieve this. :ok_hand:

That said, it depends on what result you want exactly.

For example, if the goal is simply to have a background image at the bottom or top of the login buttons block with no additional requirements, then CSS could be perfectly fine.