Body : comment le changer (ex : background) suivant template (page.tpl.php, page-front.tpl.php, ....)

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by Marie DEPORT on

Bonjour,

Je souhaiterais pouvoir attribuer une image en background sur une page template user-login.tpl.php mais il semblerait que je dois louper quelque chose car je n'y parviens pas.

Voici ce que j'ai effectué:

j'ai regardé le code HTML afin de voir les classes : html not-front not-logged-in no-sidebars page-user page-user-login fancy-login-init-processed

j'ai pris donc 'page-user-login'.

j'ai essayé avec une couleur (avant d'essayer avec mon image) comme ceci :

body.page-user-login{
background-color: #CCC;
}

ainsi que:

.page-user-login{
background-color: #CCC;
}

mais aucun des deux ne fonctionnent.

J'ai essayé de la facon suivante avec une image cette fois ci :

position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;

background: url('https://www.miste.com/sites/default/files/talk/login_BG_rezised.jpg') no-repeat center center fixed;
background-size: cover;

}

l'image s'affiche en full width en background en revanche le: left: 0; top: 0; cachent les liens Créer un nouveau compteSe connecter(onglet actif)Demander un nouveau mot de passe ainsi que les potentielles notifications par exemple lorsqu'on se trompe dans le login un message s'affiche : Désolé, nom d'utilisateur ou mot de passe non reconnu. Avez-vous oublié votre mot de passe ? , hors celui ci est en dessous de cette image donc aucunement visible.

Quelqu'un aurait il une idée ?

Forum : 
Développement
Version de Drupal : 
7.x

Soumis par Qazema le 2 Septembre, 2016 - 10:10

Pour ta première solution (qui est la plus propre), à mon avis tu charges ton CSS au mauvais endroit, ou bien il la propriété background est surchargée ailleurs via un sélecteur plus complet ou un "!important". Si tu sais utiliser Firebug tu devrais pouvoir t'en dépatouiller assez simplement.

Pour ta seconde solution, saches déjà que c'est une façon de faire bien crado :p
Mais en ajoutant la propriété "z-index: -1" ou 0 normalement ton image devrait repasser derrière les éléments cités.

Bon courage.

Soumis par Marie DEPORT le 2 Septembre, 2016 - 11:28

Hello Qazema,

tout d'abord merci d'avoir pris soin de répondre.
je viens d'installer firebug mais je ne suis vraiment pas familière avec cet add-on.

Peut être qu'en visitant l'url tu verras quelque d'évident qui ne me frappe pas aux yeux ?

https://www.btp.tv/user/login

car j'avais pensé au z-index aussi mais no luck :(

Soumis par Qazema le 5 Septembre, 2016 - 09:10

Dans ton fichier :
sites/all/themes/mxblog/css/style.css

Tout à la fin tu rajoutes les lignes

    background: url('https://www.btp.tv/sites/default/files/talk/login_BG_rezised.jpg') no-repeat center center fixed;
    background-size: cover;

Ensuite dans ton fichier :
https://www.btp.tv/sites/all/themes/mxblog/css/tn-style.min.css

  • il te faut retirer le background #FFF au sélecteur .tn-main-container
  • puis retirer le background #212728 au sélecteur #footer

Ensuite ne pas oublier d'enlever le css que tu as bricolé de ton côté directement dans la page (celui avec le position fixed).

Je viens de tester ça fonctionne nickel.