Image en fond de widget

[creange]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://creas3d.forumactif.org

Description du problème

Bonjour j'aurai voulu savoir si il est possible de mettre une image en fond de widget et si oui comment peut-on  faire ?
j'ai déjà changé la couleur des widgets mais pour l'image en fond ça semble plus compliqué ou impossible ....

[MlleAlys]

Bonjour,
Le code que vous avez utilisé pour changer la couleur des widgets est-il bien celui-ci ?

Code:

.column:nth-of-type(1) .module {
  background-color: #EACFFC;
}

Dans ce cas, ce n'est en fait pas compliqué, il vous suffit de compléter le code ainsi :

Code:

.column:nth-of-type(1) .module {
  background-color: #EACFFC;
  background-image: url(URLIMAGE);
}

En remplaçant URLIMAGE qui est dans les parenthèses par le lien direct de l'image de fond voulue.

[creange]

Merci MlleAlys

j'ai trouvé ce code que j'ai placé dans lle widget 

Code:

<div class="inner">
                                                                                 
   <div class="h3">
                                                                          
      <table style="text-align: center;">
                                                                             <tbody></tbody> <tbody></tbody>
         <tr style="">
                                                                                
            <td style="background: url('https://i92.servimg.com/u/f92/14/77/07/89/sans_t17.png'); width: 600px ; height: 400px ; ">
                    <br /><br /><br /><br /><span style="color: rgb(255, 0, 0); font-size: 24px;"><br /><strong></strong>            </span>
               <div style="">
                  <span style="color: rgb(255, 0, 0); font-size: 24px;">Meilleurs Voeux à Tous</span>
               </div>
               <div style="">
                  <div>
                                                                           <script async="" src="//w.24timezones.com/l.js" type="text/javascript"></script>                                                                                            
                     <p>
                                                                                                                                                                                                                
                     </p>
                                                                                                                                                                                                             
                     <div>
                                                                                                                                                                          <br />                                                                                            
                     </div>
                                                                                                                                                                                                             
                  </div>
                                        
               </div><strong><span style="color: rgb(255, 0, 0); font-size: 24px;">          <br /><br /><br /><br /></span></strong>                
            </td>
                                                                                
         </tr><tbody></tbody><tbody>                                  </tbody>
      </table>
                                             <br />                                        
   </div>
                                                                                                               
</div>

votre est-il à placer dans le CSS ?

[MlleAlys]

Oui, le mien se place dans le css du forum, et agira sur tous les widgets en même temps.

Votre code parait avoir beaucoup de balises inutiles. Cependant l'avantage c'est que modifier directement le fond du widget dans son code peut permettre de choisir un fond différent pour chaque widget. Si c'est ce que vous souhaitez faire, alors je vous conseille plutôt d'utiliser un code de cette structure là (forum en version phpbb3) :

Code:

<div class="module" style="background:url(URLIMAGE);">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <div class="h3" style="text-align:left;">
 TITRE DU WIDGET
 </div>
 <div>
 CONTENU DU WIDGET
 </div><span class="corners-bottom"><span></span></span>
 </div>
</div>

(vous devez choisir l'option "Utiliser une table type : NON" lors de sa création)

Ce qui donne par exemple pour ce widget là :

Code:

<div style="background:url('https://i.servimg.com/u/f92/14/77/07/89/sans_t17.png');" class="module">
 <div class="inner">
  <span class="corners-top"><span></span></span>    
 <div style="color: rgb(255, 0, 0); font-size: 24px; padding:100px 0; text-align:center; font-weight:bold;">
    MEILLEURS VOEUX À TOUS  
 </div><span class="corners-bottom"><span></span></span>    
 </div>
</div>

[creange]

Super ça marche 
puis je utiliser le même code css en le modifiant ou c'est plus compliqué
 pour les fonds de catégorie ?

[MlleAlys]

ça va être le même style, mais cibler un autre élément.
Est-ce que vous souhaitez garder le blanc au survol ?

[creange]

oui merci

[MlleAlys]

Alors première façon de faire, retirer la couleur rose pour voir l'image qui est en dessous en fond des catégories :

Code:

/*retirer la couleur dans les catégories*/
ul.forums {
  background: none;
}

Ou, deuxième façon de faire, si c'est une image différente que vous voulez mettre :

Code:

/*image de fond dans les catégories*/
ul.forums {
  background-image: url(URLIMAGE);
}

[creange]

alors sur mon forum d'essai c'est impeccable par contre sur mon forum
j'ai un petit souci ça ne fonctionne que sur un certains nombre de catégories ??

[MlleAlys]

Quel est le forum en question ?

[creange]

celui de mon profil mais je dois ouvrir l'accès car c'est un forum privé 

https://dangela.forumgratuit.org/

[MlleAlys]

Effectivement, le forum est inaccessible et je ne peux pas inspecter le problème.

[creange]

c'est bon j'ai mis l'accès aux galeries

[MlleAlys]

Je n'ai toujours pas accès

[creange]

est ce que c'est bon ?
J'ai mis un accueil aux invités en widget ça sera plus pratique à activer

[MlleAlys]

Oui mais je n'en vois qu'une qui semble fonctionner :

[creange]

est ce que c'est bon ?
J'ai mis un accueil aux invités en widget ça sera plus pratique à activer

 je pense que vous pourrez tout voir c'est en dessous de l'horloge


finalement j'ai fait une capture d'écran 

[MlleAlys]

Ah, je pense que c'est parce que vous avez utilisé le premier code que j'ai donné, mais qu'en phpbb3 l'image de fond ne se répète qu'horizontalement et non pas verticalement, désolée je n'y pensais plus (la capture ne permet pas de confirmer mais ça doit être ça).
Avez-vous testé à la place le deuxième code que j'ai proposé ?

[creange]

Bonjour MlleAlys

j'ai utilisé le 1er code et là je viens d'utiliser le 2eme c'est pareil
je remets l'accès sur le widget invité sur le portail pour que vous puissier mieux voir

[MlleAlys]

Bizarre    Il faudrait vraiment que je puisse inspecter le problème, mais le widget sur le portail "psst pour les invités c'est par ici" me renvoie à l'index du forum, inaccessible aux invités, donc je ne vois toujours pas le souci. Pourriez-vous fournir un lien direct vers la page de la capture en vérifiant qu'il est accessible aux invités ? (même déconnectée, vous devez voir le problème)

[creange]

oui j'ai un souci pour donner l'accès aux invités
j'avais mis un js pour renvoyer les invités sur le portail mais je ne le trouve plus

[MlleAlys]

Il faut surtout changer les permissions pour donner accès aux invités.

[creange]

c'est fait

[MlleAlys]

Complétez le deuxième code ainsi :

Code:

ul.forums {
  background-image: url(https://i.servimg.com/u/f92/14/77/07/89/fond_d15.png);
  background-repeat: repeat;
}

[creange]

   super ça marche 

merci beaucoup MlleAlys pour votre aide et votre patience 
je vous souhaite une bonne fin de journée