All Joomla admin login pages look the same, here is how to change it like a pro - JoomShaper

All Joomla admin login pages look the same, here is how to change it like a pro

20 October 2017
Hits 17,260
2 min read
All Joomla admin login pages look the same, here is how to change it like a pro

You can change the Joomla admin dashboard login page and add your own brand to it. It is a cool option to get along with the context of your website and brand. In today's article we are going to see how you can modify your Joomla admin login page and add your very own touches to it.

We are going to do a couple of modifications to make it more visually stunning. First, we will replace the Joomla logo with your own company logo (or anything else you want). Follow the steps below.

  • Login to your Joomla backend.
  • Go to Extensions > Templates > Styles.
  • Switch to Administrator templates list.

Administrator template select

Figure: Switching to Administrator templates list.

  • Open the isis-default template.
  • Click on the “Advanced” tab from the menu.

Administrator template selection of advanced tab

Figure: The “Advanced” tab of the isis-default template menu.

  • Upload the logo to the login logo option. And see the change.

login form logo add

Figure: Changing the login logo.

This is the output of the add of the logo.

The output after the logo add

Figure: The login logo has been changed.

Now we are going to change the background of the admin login template and also the layout of the login field.

  • Go to your_domain/administrator/templates/isis/css and create custom.css file here.
  • Now go to your_domain/administrator/templates/isis/images and add your background image here.
  • Now it is time to do some CSS magics. Add the following CSS in the custom.css and see the changes.
.view-login {
background: url("Your Image") 
no-repeat fixed 50% 50% / cover #eff0f4 !important;
}

.login.well {
background: none repeat scroll 0 0 rgba(245, 245, 245, 0.79);
}

.view-login .well hr {
border-color: transparent;
}

This is the final output. Isn't it so cool?

The final output

Figure: The admin login page background and the logo have been changed.

And, it’s done! We hope you’ve liked the trick. Please let us know your thoughts.

Comments (8)

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

Underrated feature! Often overlooked. custom.css was a great addition.

Towfiq Omi
Towfiq Omi    pepperstreet
This comment was minimized by the moderator on the site

Indeed

A
Ales
This comment was minimized by the moderator on the site

Uauu, great article. Thank you very much!

Towfiq Omi
Towfiq Omi    Ales
This comment was minimized by the moderator on the site

Glad you liked it

Sidney McSwain
Sidney McSwain
This comment was minimized by the moderator on the site

Thanks for the login page tip...Here is my first try...I think it turned out great. https://osminlandscaping.com//images/osminsloginpage.JPG

Malaquias
Malaquias
This comment was minimized by the moderator on the site

Yes nice work
i like it

I
icedk
This comment was minimized by the moderator on the site

Thank you for all the tips, you are the best team I have ever bought products from

D
Demetri
This comment was minimized by the moderator on the site

This is Awesome! Thank you for this!

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.