Modify The Login Form On The Frontend - Question | JoomShaper
Back to the questions

Modify The Login Form On The Frontend

LG

Lorna Guttormson

Template 9 months ago

I have read how to change the login form - that is used to get into the administrator section of the website.
https://magazine.joomla.org/all-issues/may-2024/how-to-customize-the-joomla-5-login-page

I would like to modify the same form that is used for logging in the front end. Is there a way to do this? I want to change the color of the button and the color of the header. I have tried .view-article #sp-header { background-color: rgb(163, 159, 159); } to change the header color but it didn't seem to work. For the button , I tried body .sppb-btn.btn-primary { background:#383838 !important } which is the same color for the btns with pages but, again, it didn't work

0
3 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 9 months ago #182438

Hi Lorna.

Yes, all is possible if you know how to use Code Inspector from your browser and you know the CSS basics.

Read my blog post >> https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

To get to know in the future.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 9 months ago #182440

In your case about the buttons colors you needed that:

body .sppb-btn.sppb-btn-secondary, body .sppb-btn.btn-seconday, 
body .sppb-btn.btn-primary, body .btn.sppb-btn-secondary, 
body .btn.btn-seconday, body .btn.btn-primary {background: red;}

body .sppb-btn.sppb-btn-secondary:hover, body .sppb-btn.sppb-btn-secondary:focus, body .sppb-btn.sppb-btn-secondary:active, body .sppb-btn.btn-seconday:hover, body .sppb-btn.btn-seconday:focus, body .sppb-btn.btn-seconday:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-secondary:hover, body .btn.sppb-btn-secondary:focus, body .btn.sppb-btn-secondary:active, body .btn.btn-seconday:hover, body .btn.btn-seconday:focus, body .btn.btn-seconday:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active {
  background: #222;}

With the dark header, I also used extra CSS line.

Yes, I already added & used on your site :)
All is as you wanted.

0
LG
Lorna Guttormson
Accepted Answer
9 months ago #182477

Thank you , yes, perfect. I see that you put the custom css into the custom.css in the pitech/css directory rather than into the custom code box in the administrator area or the pitech/scss directory. How do they relate? If I were to put it into the scss directory would it get minified in the advanced/'compile scss to css' stage ? If I put it into the administrator area where the boxes for custom code & custom css are - is there a hierarchy here that this administrator custom css overrides the ones in the files? In our previous site we had all our custom code in the template/css directory and used JCH Optimize to do the minification.

0