Come customizzare il tema di amministrazione di default di Joomla 6 Atumn.
Entrare nella cartella tramite ftp media/administrator/atumn/css e creare il file user.css. Fatto cio’ va inserito il codice css.
il codice è già responsive
:root {
–header-logo-bg:#13174c;
–header-bg:#13174c;
–hue: 229;
–template-bg-light: #13174c ;
–template-text-dark: #eff2f5;
–template-text-light: #4969a8;
–link-color: #2a69b8;
–template-special-color: #010205;
}
element.style {
}
label {
color: #080707;
}
label {
margin-block-end: 0;
}
label, caption {
text-align: start;
}
label {
display: inline-block;
}
a {
color: #080707;
text-decoration: none;
}
* {
box-sizing: border-box;
}
label,
a {
font-weight: bold;
font-size: 16px;
}
/* modulo di login accesso e password interno */
.view-login .login, .task-logout .login {
/* 🔥 larghezza massima reale */
width: min(100%, 1600px);
/* desktop ultra-wide */
margin: 1rem auto;
/* padding fluido */
padding: clamp(1.5rem, 4vw, 5rem); color: #4969a8;
background: url(login.jpg) center / cover no-repeat;
border: 12px solid #000;
border-radius: 60px;
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.15), inset -3px -3px 6px rgba(0,0,0,0.75), 0 4px 8px rgba(0,0,0,0.45);
}
/* header */
.header {
width: 100%;
height: 300px;
padding: 5px;
border: 3px solid #000;
border-radius: 30px;
border: 5px solid #000;
border-radius: 30px;
box-shadow:
/* profondità interna */
inset 1px 1px 2px rgba(255,255,255,0.15),
inset -3px -3px 6px rgba(0,0,0,0.75),
/* bordo */
0 0 0 2px rgba(0,0,0,0.8),
/* ombra esterna soft (NO glow) */
0 4px 8px rgba(0,0,0,0.45),
0 10px 18px rgba(0,0,0,0.3);
position : relative ;
}
/* Logo centrale Login */
.view-login .login img, .task-logout .login img {
max-block-size: 12.4rem;
inline-size: auto;
border: 5px solid #000;
border-radius: 30px;
box-shadow:
/* profondità interna */
inset 1px 1px 2px rgba(255,255,255,0.15),
inset -3px -3px 6px rgba(0,0,0,0.75),
/* bordo */
0 0 0 2px rgba(0,0,0,0.8),
/* ombra esterna soft (NO glow) */
0 4px 8px rgba(0,0,0,0.45),
0 10px 18px rgba(0,0,0,0.3);
z-index: 1000;
}
/* Grandezza Logo in alto a sinistra */
.header .logo img {
background:#13174c ;
width: 250px;
height: 250px;
padding: 5px;
border: 3px solid #000;
border-radius: 30px;
border: 3px solid #000;
border-radius: 30px;
box-shadow:
/* profondità interna */
inset 1px 1px 2px rgba(255,255,255,0.15),
inset -3px -3px 6px rgba(0,0,0,0.75),
/* bordo */
0 0 0 2px rgba(0,0,0,0.8),
/* ombra esterna soft (NO glow) */
0 4px 8px rgba(0,0,0,0.45),
0 10px 18px rgba(0,0,0,0.3);
}
/* Testo e Link presenti sull’Header */
.header-item-text {
white-space: nowrap;
padding: 0 8px 0 4px;
font-size: 1rem;
border: 3px solid #000;
border-radius: 30px;
border: 3px solid #000;
border-radius: 30px;
box-shadow:
/* profondità interna */
inset 1px 1px 2px rgba(255,255,255,0.15),
inset -3px -3px 6px rgba(0,0,0,0.75),
/* bordo */
0 0 0 2px rgba(0,0,0,0.8),
/* ombra esterna soft (NO glow) */
0 4px 8px rgba(0,0,0,0.45),
0 10px 18px rgba(0,0,0,0.3);
}
.view-login h1, .view-login .h1, .task-logout h1, .task-logout .h1 {
visibility: hidden;
color: #fff;
text-align: center;
margin-block-end: .25rem;
font-size: 4rem;
font-weight: bold;
}
.view-login h2, .view-login .h2, .task-logout h2, .task-logout .h2 {
visibility: hidden;
position: relative;
color: #ffffff ;
font-weight: 500;
font-weight: bold;
}
.com_login .sidebar-wrapper .main-brand {
display:none !important;
}
.com_login .sidebar-wrapper #sidebar p ::after{
display:none !important;
}
.view-login .sidebar-wrapper, .task-logout .sidebar-wrapper {
display: none !important ;
}
.sidebar-wrapper ul a {
font-weight: 600;
}
/* responsive logo su mobile*/
.view-login .sidebar-wrapper,
.view-login .header .logo,
.task-logout .sidebar-wrapper,
.task-logout .header .logo {
flex: 1 1 clamp(200px, 40%, 400px);
}
@media (width <= 767.98px) {
.view-login .header, .task-logout .header {
background:#13174c ;
}
}
@media (max-width: 1024px) {
.view-login .login {
max-width: 90%;
}
.header {
padding: 1rem;
}
}
@media (max-width: 600px) {
.view-login,
.task-logout {
min-height: 100vh;
padding: 1rem;
}
.view-login .login {
border-radius: 20px;
padding: 1.5rem;
}
.header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.header .logo {
inline-size: auto;
padding-right:1px;
margin-right: 0px;
}
}
@media (min-width: 1400px) {
.view-login .login,
.task-logout .login {
width: 100vw;
max-width: 90vw;
padding-left:30rem;
padding-right:30rem;
margin-left: calc(50% – 50vw);
margin-right: calc(50% – 50vw);
border-radius: 0; /* più coerente full-width */
}
}
@media (max-width: 768px) {
.view-login .login,
.task-logout .login {
width: 100%;
max-width: 100%;
margin: 1rem 0;
border-radius: 20px;
}
}
