Mettre une image dans le calendrier sur le widget

par creange Mar 22 Nov 2022 - 21:52

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://dangela.forumgratuit.org/

Description du problème

Bonjour je voudrai savoir s'il est possible de mettre une image en fond du calendrier dans le widget
j'ai bien récupéré le code du calendrier mais je n'arrive pas à y insérer l'image en fond
voici le code que j'ai placé dans mon widget personnalisé

Code:: <br /><span class="corners-bottom"><span></span></span><a name="p_calendar"></a> <div class="module"> <div class="inner"> <span class="corners-top"><span></span></span> <div class="h3"> <strong>Novembre 2022</strong> </div> <div id="calendar" style="margin: 0 auto;max-width:270px;"> <table class="table1" cellspacing="1"> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Lun </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Mar </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Mer </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Jeu </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Ven </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Sam </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> Dim </th> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 1 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 2 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 3 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> <a rel="nofollow" href="/calendar_scheduler.php?d=1667516400" class="gen" title="1 Anniversaire"><strong>4</strong></a> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 5 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 6 </td> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 7 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 8 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 9 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 10 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 11 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 12 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 13 </td> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 14 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 15 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 16 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 17 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 18 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 19 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> <a rel="nofollow" href="/calendar_scheduler.php?d=1668898800" class="gen" title="1 Anniversaire"><strong>20</strong></a> </td> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 21 </td> <td class="hover-td center" style="padding-left:0;padding-right:0;"> 22 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 23 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 24 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 25 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 26 </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> 27 </td> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> <tbody></tbody> <tbody></tbody> <tr style=""> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 28 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 29 </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> 30 </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> </tr><tbody></tbody><tbody></tbody><tbody> </tbody> </table><br /><a href="/calendar?start=20221101" title="Calendrier">Calendrier </a> </div>  </div> </div> <div class="module"> <div class="inner"> <div style="margin: 0 auto;max-width:270px;" id="calendar"> <img loading="lazy" title="Calendrier" alt="Calendrier" src="https://2img.net/i/fa/subsilver/icon_calendar.gif" /><br /> </div>  </div> </div>

j'aimerai savoir comment mettre mon image en fond du calendrier

par creange Sam 26 Nov 2022 - 13:05

par **chattigre** Sam 26 Nov 2022 - 13:10

Bonjour,

S'agit-il du module "Calendrier" proposé par défaut par Forumactif ?

Pouvez-vous nous faire une capture d'écran du rendu dudit widget sur votre forum pour que nous puissions voir comment il se présente en termes de style et avoir un rendu propre par la suite ?

Merci
Cordialement

par creange Sam 26 Nov 2022 - 13:44

Bonjour Chattigre oui il s'agit du calendrier proposé par défaut sur le widget
j'aimerai pouvoir le remplacer chaque moi par une nouvelle image et garder
les mêmes configurations pour les anniversaires

calendrier - Mettre une image dans le calendrier sur le widget Widget10

par exemple mettre l'image que j'ai mise en dessous à la place du calendrier

merci pour votre réponse
bonne journée
cordialement

par creange Dim 27 Nov 2022 - 20:25

par creange Jeu 1 Déc 2022 - 13:59

par **Toryudo** Ven 2 Déc 2022 - 17:06

Bonjour !
Je sens que vous allez souvent mettre à jour ce widget, donc je vous propose un script qui mettra automatiquement une image de fond à ce calendrier. Vous changez le lien imageCalendrier quand vous voulez pour mettre une nouvelle image. Script à placer en cochant "sur le portail", là où se trouve le widget donc :

Code:: var imageCalendrier = 'https://domashnij-zapovednik.com/wp-content/uploads/2019/01/taksa-korgi-1.jpg'; $(function(){ $('#calendar').css('background-size', 'cover').css('background-image', 'url(' + imageCalendrier + ')'); $('#calendar td').removeClass("row1 row2 row3"); $('#calendar th').css('background-color', 'initial'); });

Résultat chez moi :