Custom Login Page

Sagex

Well-known member
Registered
Joined
Sep 10, 2021
Messages
60
Points
28

Reputation:

Lookin to make something like this, anyone got a clue? Got the code but not a way to do It in XF


body { background-color: #F3EBF6; font-family: 'Ubuntu', sans-serif; } .main { background-color: #FFFFFF; width: 400px; height: 400px; margin: 7em auto; border-radius: 1.5em; box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14); } .sign { padding-top: 40px; color: #8C55AA; font-family: 'Ubuntu', sans-serif; font-weight: bold; font-size: 23px; } .un { width: 76%; color: rgb(38, 50, 56); font-weight: 700; font-size: 14px; letter-spacing: 1px; background: rgba(136, 126, 126, 0.04); padding: 10px 20px; border: none; border-radius: 20px; outline: none; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.02); margin-bottom: 50px; margin-left: 46px; text-align: center; margin-bottom: 27px; font-family: 'Ubuntu', sans-serif; } form.form1 { padding-top: 40px; } .pass { width: 76%; color: rgb(38, 50, 56); font-weight: 700; font-size: 14px; letter-spacing: 1px; background: rgba(136, 126, 126, 0.04); padding: 10px 20px; border: none; border-radius: 20px; outline: none; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.02); margin-bottom: 50px; margin-left: 46px; text-align: center; margin-bottom: 27px; font-family: 'Ubuntu', sans-serif; } .un:focus, .pass:focus { border: 2px solid rgba(0, 0, 0, 0.18) !important; } .submit { cursor: pointer; border-radius: 5em; color: #fff; background: linear-gradient(to right, #9C27B0, #E040FB); border: 0; padding-left: 40px; padding-right: 40px; padding-bottom: 10px; padding-top: 10px; font-family: 'Ubuntu', sans-serif; margin-left: 35%; font-size: 13px; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04); } .forgot { text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12); color: #E1BEE7; padding-top: 15px; } a { text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12); color: #E1BEE7; text-decoration: none } @media (max-width: 600px) { .main { border-radius: 0px; }
 

Attachments

  • Screenshot_1.png
    Screenshot_1.png
    27.9 KB · Views: 194

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

If you want to create completely custom login page, you need to include to login template your custom login template like that:
<xf:page option="template"></xf:page>
 

ForumFlake

Well-known member
Registered
Joined
Feb 8, 2023
Messages
79
Points
8

Reputation:

This is just the css for the login page. you need the rest of the code. for the template part of things. you can inspect element it and find it that way.
 

Zer01ne

Collaborate
Collaborate
Registered
Joined
Nov 25, 2022
Messages
693
Points
253

Reputation:

Splicho

Emudevs.gg Owner
Staff member
Moderator
Collaborate
Registered
Joined
Jan 21, 2022
Messages
647
Points
103

Reputation:

Bingo!!
Zer01neYeah well, but what about the backend conditional statements that are used in login template? He would need to adapt them too.
 
View previous replies…

Splicho

Emudevs.gg Owner
Staff member
Moderator
Collaborate
Registered
Joined
Jan 21, 2022
Messages
647
Points
103

Reputation:

I didn't mention conditional things but rather CSS only.
Zer01neFor CSS only, he don't need to enable development mode.
Just open extra.less and put in your stuff.
or make a new template called "login.css" and add <xf:css src="login.css"> to your new login template.
 

Zer01ne

Collaborate
Collaborate
Registered
Joined
Nov 25, 2022
Messages
693
Points
253

Reputation:

For CSS only, he don't need to enable development mode.
Just open extra.less and put in your stuff.
or make a new template called "login.css" and add <xf:css src="login.css"> to your new login template.
WaduhekAdmin page css won't work until it puts on the master style.less
 

Zer01ne

Collaborate
Collaborate
Registered
Joined
Nov 25, 2022
Messages
693
Points
253

Reputation:

Yeah but he's talking about the /index.php/login page, not admin login.
WaduhekI don't see anywhere he mentioned about that.
My comment was based on his screenshot as it seems similar to the admin login page.
 
Top