Module calendrier = date du jour en gras
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Module calendrier = date du jour en gras
Détails techniques
Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lubiscrap.meilleurforum.com/
Description du problème
Bonjour,Je souhaiterais mettre la date du jour de mon module Calendrier de la colonne de gauche en gras.
Sur la page principale du calendrier, la date du jour est bien en bold (voir screen partie centrale) mais il m'est impossible de le faire sur le module.
J'ai bien essayé de trouver le bout de code dans les templates "Calendrier" mais en vain...
Si quelqu'un pouvait m'aider ?
Merci d'avance
Zaydia
Dernière édition par Zaydia le Ven 8 Juil 2016 - 22:42, édité 1 fois
Re: Module calendrier = date du jour en gras
Bonjour,
Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
https://forum.forumactif.com/t334150-calendrier-date-du-jour
avec :
Cordialement.
Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
https://forum.forumactif.com/t334150-calendrier-date-du-jour
avec :
- Code:
.quote {
font-weight:bold;}
Cordialement.
Invité- Invité
Re: Module calendrier = date du jour en gras
Salut Zaydia et Kinotto,
Hum je ne vois pas le rapport avec le sujet .
Zaydia ,
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
ajoutes ceci:
Penses à cliquer sur le bouton
J'ai volontairement changé la couleur pour les deux parties , à toi de les personnaliser ensuite .
a++
Kinotto a écrit:Bonjour,
Peut-être pouvez-vous simplement vous inspirer de la réponse ici :
https://forum.forumactif.com/t334150-calendrier-date-du-jour
avec :Cordialement.
- Code:
.quote {
font-weight:bold;}
Hum je ne vois pas le rapport avec le sujet .
Zaydia ,
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
ajoutes ceci:
- Code:
/*Les jours de la semaine du widget calendrier*/
#left #calendar .table1 tr th{color:red;font-weight:bold;}
/*Les cellules du widget du calendrier*/
#left #calendar .table1 tr td{color:green;font-weight:bold;}
Penses à cliquer sur le bouton
J'ai volontairement changé la couleur pour les deux parties , à toi de les personnaliser ensuite .
a++
Invité- Invité
Re: Module calendrier = date du jour en gras
Merci à vous deux malheureusement le problème n'est pas résolu . Les codes css que vous m'avez proposé ne correspondent pas à ma demande.
Ce que j'aimerais c'est mettre en gras UNIQUEMENT le texte de la cellule du jour actuel. ( et non toutes les cellules ou ligne )
Encore merci à la personne qui saura m'aider
Zaydia
Ce que j'aimerais c'est mettre en gras UNIQUEMENT le texte de la cellule du jour actuel. ( et non toutes les cellules ou ligne )
Encore merci à la personne qui saura m'aider
Zaydia
Re: Module calendrier = date du jour en gras
Hello Zaydia
Hum sur la page du calendrier alors ?
Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie .
a++
Ce que j'aimerais c'est mettre en gras UNIQUEMENT le texte de la cellule du jour actuel et non toutes les cellules ou ligne
Hum sur la page du calendrier alors ?
Sur la page principale du calendrier, la date du jour est bien en bold (voir screen partie centrale) mais il m'est impossible de le faire sur le module.
Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie .
a++
Invité- Invité
Re: Module calendrier = date du jour en gras
Coucou Zaydia et Milouze ^^
Chez Forumactif rien n'est possible jusqu'à ce qu'on démontre le contraire !!
Code fonctionnel sous phpBB3 (et il me semble aussi sur toutes les autres versions)
Javascript à activer sur toutes les pages
Je pense qu'on peut faire beaucoup plus court, mais je n'ai pas trouvé.
Milouze14 a écrit:
Si tu veux avoir le jour en caractère gras sur le widget (module) cela ne sera pas possible chère amie .
Chez Forumactif rien n'est possible jusqu'à ce qu'on démontre le contraire !!
Code fonctionnel sous phpBB3 (et il me semble aussi sur toutes les autres versions)
Javascript à activer sur toutes les pages
- Code:
$(function() {
var timeSince1970 = new Date();
var dayOTM = timeSince1970.getDate();
switch (dayOTM) {
case 31:
$('div#calendar td:contains("31")').css('font-weight','bold');
break;
case 30:
$('div#calendar td:contains("30")').css('font-weight','bold');
break;
case 29:
$('div#calendar td:contains("29")').css('font-weight','bold');
break;
case 28:
$('div#calendar td:contains("28")').css('font-weight','bold');
break;
case 27:
$('div#calendar td:contains("27")').css('font-weight','bold');
break;
case 26:
$('div#calendar td:contains("26")').css('font-weight','bold');
break;
case 25:
$('div#calendar td:contains("25")').css('font-weight','bold');
break;
case 24:
$('div#calendar td:contains("24")').css('font-weight','bold');
break;
case 23:
$('div#calendar td:contains("23")').css('font-weight','bold');
break;
case 22:
$('div#calendar td:contains("22")').css('font-weight','bold');
break;
case 21:
$('div#calendar td:contains("21")').css('font-weight','bold');
break;
case 20:
$('div#calendar td:contains("20")').css('font-weight','bold');
break;
case 19:
$('div#calendar td:contains("19")').css('font-weight','bold');
break;
case 18:
$('div#calendar td:contains("18")').css('font-weight','bold');
break;
case 17:
$('div#calendar td:contains("17")').css('font-weight','bold');
break;
case 16:
$('div#calendar td:contains("16")').css('font-weight','bold');
break;
case 15:
$('div#calendar td:contains("15")').css('font-weight','bold');
break;
case 14:
$('div#calendar td:contains("14")').css('font-weight','bold');
break;
case 13:
$('div#calendar td:contains("13")').css('font-weight','bold');
break;
case 12:
$('div#calendar td:contains("12")').css('font-weight','bold');
break;
case 11:
$('div#calendar td:contains("11")').css('font-weight','bold');
break;
case 10:
$('div#calendar td:contains("10")').css('font-weight','bold');
break;
case 9:
$('div#calendar td:contains("9")').css('font-weight','bold');
$('div#calendar td:contains("19")').css('font-weight','normal');
$('div#calendar td:contains("29")').css('font-weight','normal');
break;
case 8:
$('div#calendar td:contains("8")').css('font-weight','bold');
$('div#calendar td:contains("18")').css('font-weight','normal');
$('div#calendar td:contains("28")').css('font-weight','normal');
break;
case 7:
$('div#calendar td:contains("7")').css('font-weight','bold');
$('div#calendar td:contains("17")').css('font-weight','normal');
$('div#calendar td:contains("27")').css('font-weight','normal');
break;
case 6:
$('div#calendar td:contains("6")').css('font-weight','bold');
$('div#calendar td:contains("16")').css('font-weight','normal');
$('div#calendar td:contains("26")').css('font-weight','normal');
break;
case 5:
$('div#calendar td:contains("5")').css('font-weight','bold');
$('div#calendar td:contains("15")').css('font-weight','normal');
$('div#calendar td:contains("25")').css('font-weight','normal');
break;
case 4:
$('div#calendar td:contains("4")').css('font-weight','bold');
$('div#calendar td:contains("14")').css('font-weight','normal');
$('div#calendar td:contains("24")').css('font-weight','normal');
break;
case 3:
$('div#calendar td:contains("3")').css('font-weight','bold');
$('div#calendar td:contains("13")').css('font-weight','normal');
$('div#calendar td:contains("23")').css('font-weight','normal');
$('div#calendar td:contains("30")').css('font-weight','normal');
$('div#calendar td:contains("31")').css('font-weight','normal');
break;
case 2:
$('div#calendar td:contains("2")').css('font-weight','bold');
$('div#calendar td:contains("12")').css('font-weight','normal');
$('div#calendar td:contains("20")').css('font-weight','normal');
$('div#calendar td:contains("21")').css('font-weight','normal');
$('div#calendar td:contains("22")').css('font-weight','normal');
$('div#calendar td:contains("23")').css('font-weight','normal');
$('div#calendar td:contains("24")').css('font-weight','normal');
$('div#calendar td:contains("25")').css('font-weight','normal');
$('div#calendar td:contains("26")').css('font-weight','normal');
$('div#calendar td:contains("27")').css('font-weight','normal');
$('div#calendar td:contains("28")').css('font-weight','normal');
$('div#calendar td:contains("29")').css('font-weight','normal');
break;
case 1:
$('div#calendar td:contains("1")').css('font-weight','bold');
$('div#calendar td:contains("10")').css('font-weight','normal');
$('div#calendar td:contains("11")').css('font-weight','normal');
$('div#calendar td:contains("12")').css('font-weight','normal');
$('div#calendar td:contains("13")').css('font-weight','normal');
$('div#calendar td:contains("14")').css('font-weight','normal');
$('div#calendar td:contains("15")').css('font-weight','normal');
$('div#calendar td:contains("16")').css('font-weight','normal');
$('div#calendar td:contains("17")').css('font-weight','normal');
$('div#calendar td:contains("18")').css('font-weight','normal');
$('div#calendar td:contains("19")').css('font-weight','normal');
$('div#calendar td:contains("21")').css('font-weight','normal');
$('div#calendar td:contains("31")').css('font-weight','normal');
break;
}
});
Je pense qu'on peut faire beaucoup plus court, mais je n'ai pas trouvé.
Re: Module calendrier = date du jour en gras
Hello Neptunia ,
pas besoin pour le widget le jour est déjà balisé par font-weight:bold .
Ensuite Zaydia demande que le jour soit mit en évidence et non les cases numérotées!!
Ajoutes ceci et tu comprendras pour les widgets:
Enfin c'est ce que j'ai pu traduire .
a++
pas besoin pour le widget le jour est déjà balisé par font-weight:bold .
Ensuite Zaydia demande que le jour soit mit en évidence et non les cases numérotées!!
Ajoutes ceci et tu comprendras pour les widgets:
- Code:
#left #calendar .table1 tr th {font-weight: 700;color: red;}
Enfin c'est ce que j'ai pu traduire .
a++
Invité- Invité
Re: Module calendrier = date du jour en gras
Bah non, le jour est bien en gras, mais sur la page du calendrier, et non sur le widget (seuls les jours avec événement(s) sont en gras.
En revanche, mon code me fournit plus de questions que de réponses.
En l'état il me graisse la date du 8 juillet sans graisser les 18 et 28 comme à mon premier jet. Mais si je change la date système, et bien la fin du script semble ne plus fonctionner. Alors que le début fonctionne (j'avais mis deux alert, l'une sur le nombre de millisecondes écoulées depuis 1970, l'autre sur le numéro du jour dans le mois).
En revanche, mon code me fournit plus de questions que de réponses.
En l'état il me graisse la date du 8 juillet sans graisser les 18 et 28 comme à mon premier jet. Mais si je change la date système, et bien la fin du script semble ne plus fonctionner. Alors que le début fonctionne (j'avais mis deux alert, l'une sur le nombre de millisecondes écoulées depuis 1970, l'autre sur le numéro du jour dans le mois).
Re: Module calendrier = date du jour en gras
Re,
Hum autant pour moi j'avais créé un événement pour cette journée justement .
De mon côté j'ai le même rendu mais ne comprend pas trop le fonctionnement avec mes faibles connaissances
dans ce domaine:
Toutes les occurrences "case" correspondent aux cases du Widget ?
Merci
Avec peu de style on arrive à nos fins pour coloriser la case du jour:
Pour la version phpbb2 , phpbb3 et Invision
Pour la version punbb
Bah non, le jour est bien en gras, mais sur la page du calendrier, et non sur le widget (seuls les jours avec événement(s) sont en gras.
Hum autant pour moi j'avais créé un événement pour cette journée justement .
En l'état il me graisse la date du 8 juillet sans graisser les 18 et 28 comme à mon premier jet. Mais si je change la date système, et bien la fin du script semble ne plus fonctionner. Alors que le début fonctionne (j'avais mis deux alert, l'une sur le nombre de millisecondes écoulées depuis 1970, l'autre sur le numéro du jour dans le mois).
De mon côté j'ai le même rendu mais ne comprend pas trop le fonctionnement avec mes faibles connaissances
dans ce domaine:
Toutes les occurrences "case" correspondent aux cases du Widget ?
Merci
Avec peu de style on arrive à nos fins pour coloriser la case du jour:
Pour la version phpbb2 , phpbb3 et Invision
- Code:
/*Les cases du calendrier*/
#left #calendar .table1 td.row3.hover-td.center ,
#left #calendar .table1 td.row2.hover-td.center
{
background:white !important;
font-weight:normal !important;
color:green !important;
}
/*La case du jour*/
#left #calendar .table1 td.hover-td.center
{
background:black !important;
font-weight:bold !important;
color:violet !important;
}
Pour la version punbb
- Code:
/*Les jours du calendrier*/
#left #calendar .table tr th{font-weight:bold;}
#left #calendar .table td.row3.hover-td.center ,
#left #calendar .table td.row2.hover-td.center
{
background:white !important;
font-weight:normal !important;
color:green !important;
}
#left #calendar .table td.hover-td.center
{
background:black !important;
font-weight:bold !important;
color:violet !important;
}
Dernière édition par Milouze14 le Ven 8 Juil 2016 - 19:38, édité 2 fois (Raison : Modifications versions)
Invité- Invité
Re: Module calendrier = date du jour en gras
Ici case veut dire cas (anglais) et non cases (français)
Et là où ça devient interessant, j'utilise
On sait donc que dayOTM prend une valeur de 1 à 31 et on va donc définir 31 blocs d'instructions
De 1 à 9 c'est plus compliqué parce qu'un :contains va nous sortir pour aujourd'hui non seulement le 8, mais aussi le 18 et le 28. Je graisse donc la cellule ciblée avant de dégraisser les cellules impactées contre notre volonté.
P.S. L'instruction break ordonnne au script d'ignorer les cas de figure qui suivent et de sortir aussitôt de la boucle switch.
switch sur Mozilla Developer Network
Avec un peu de nth on pourrait cibler une ligne (donc une semaine) ou une colonne (lundi, mardi etc etc) mais il me semble qu'il est impossible de sélectionner un jour précis (et vide) sans recourir à un script.
- Code:
var timeSince1970 = new Date();
- Code:
var dayOTM = timeSince1970.getDate();
Et là où ça devient interessant, j'utilise
- Code:
switch (valeur) {
...
}
On sait donc que dayOTM prend une valeur de 1 à 31 et on va donc définir 31 blocs d'instructions
- Code:
case xxx:
... instructions;
break;
De 1 à 9 c'est plus compliqué parce qu'un :contains va nous sortir pour aujourd'hui non seulement le 8, mais aussi le 18 et le 28. Je graisse donc la cellule ciblée avant de dégraisser les cellules impactées contre notre volonté.
P.S. L'instruction break ordonnne au script d'ignorer les cas de figure qui suivent et de sortir aussitôt de la boucle switch.
switch sur Mozilla Developer Network
- Code:
.table1 td.hover-td.center
Avec un peu de nth on pourrait cibler une ligne (donc une semaine) ou une colonne (lundi, mardi etc etc) mais il me semble qu'il est impossible de sélectionner un jour précis (et vide) sans recourir à un script.
Re: Module calendrier = date du jour en gras
Bonjour d'après ce que j'ai compris:
Sinon par l'assignation d'une classe CSS:
et la classe CSS en question:
Edit:
je viens de voir d'où provient le souci, je fais une test rapide et reviens
- Code:
$(function() {
$('div#calendar td:contains('+new Date().getDate()+')').css('font-weight','bold');
});
Sinon par l'assignation d'une classe CSS:
- Code:
$(function() {
$('div#calendar td:contains('+new Date().getDate()+')').addClass('calendrier_aujourdhui');
});
et la classe CSS en question:
- Code:
.calendrier_aujourdhui{
font-weight:bold
}
Edit:
je viens de voir d'où provient le souci, je fais une test rapide et reviens
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Module calendrier = date du jour en gras
Bonjour no_way
Je note soigneusement ton code, parce que je n'étais pas parvenue à mettre une variable comme argument d'un :contains (d'où mon code à rallonge)
Cependant il reste le problème des 9 premiers jours.
Si nous sommes le 8, le code va graisser les dates du 8, 18 et 28.
Je note soigneusement ton code, parce que je n'étais pas parvenue à mettre une variable comme argument d'un :contains (d'où mon code à rallonge)
Cependant il reste le problème des 9 premiers jours.
Si nous sommes le 8, le code va graisser les dates du 8, 18 et 28.
Re: Module calendrier = date du jour en gras
Oui j'avais lu en diagonale (pour changer tiens ...)
Voici le code pour l'ajout de la classe calendrier_aujourdhui:
Voici le code pour l'ajout de la classe calendrier_aujourdhui:
- Code:
$(function () {
var aujourdhui = new Date().getDate();
$('div#calendar td').each(function () {
if ($(this).text() == aujourdhui) $(this).addClass('calendrier_aujourdhui')
})
});
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Module calendrier = date du jour en gras
Re Neptunia,
Merci beaucoup pour ces explications .
Hum le code source du widget:
Pour la version phpbb3 car je n'ai pas testé les autres,
pour le widget calendrier:
Le jour actif a bien cette class (dépourvue de la class .row3 et .row2):
Et les autres celle-ci :
Et
Donc un simple style fait l'affaire .
Hello no_way
a++
Merci beaucoup pour ces explications .
Je n'ai pas testé, mais le souci avec ton CSS est qu'il s'applique à toutes les cellules du calendrier puisqu'elles ont toutes pour class hover-td et center
Hum le code source du widget:
Pour la version phpbb3 car je n'ai pas testé les autres,
pour le widget calendrier:
Le jour actif a bien cette class (dépourvue de la class .row3 et .row2):
- Code:
.hover-td.center
Et les autres celle-ci :
- Code:
.row3.hover-td.center
Et
- Code:
.row2.hover-td.center
Donc un simple style fait l'affaire .
Hello no_way
a++
Invité- Invité
Re: Module calendrier = date du jour en gras
Cette fois on recherche non plus la présence d'une chaîne mais une égalité stricte et le code fonctionne à merveille, merci !
Milouze,
Maintenant je saisis ton raisonnement mais :
Si tu commence par formater les cellules avec row2/row3 et qu'ensuite tu formate les cellules td.hover-td.center avec le paramètre !important ça devrait écraser le réglage précédent parce que td.hover-td.center va inclure toutes les cellules ayant pour classes hover-td et center que ces classes soient seules ou accompagnées par exemple d'un row2.
Donc ok pour l'approche, mais en formattant d'abord td.hover-td.center avant de se pencher sur le cas des .row2.hover-td.center et .row3.hover-td.center
Milouze,
Maintenant je saisis ton raisonnement mais :
Si tu commence par formater les cellules avec row2/row3 et qu'ensuite tu formate les cellules td.hover-td.center avec le paramètre !important ça devrait écraser le réglage précédent parce que td.hover-td.center va inclure toutes les cellules ayant pour classes hover-td et center que ces classes soient seules ou accompagnées par exemple d'un row2.
Donc ok pour l'approche, mais en formattant d'abord td.hover-td.center avant de se pencher sur le cas des .row2.hover-td.center et .row3.hover-td.center
Re: Module calendrier = date du jour en gras
De rien mais je viens de penser à une solution plus simple et qui raccourcit encore le script si jamais ...
Bonjour Milouze
- le script raccourci:
- Code:
$(function () {
$('div#calendar td:contains('+new Date().getDate()+')').eq(0).addClass('calendrier_aujourdhui')
});
- Code:
.calendrier_aujourdhui{
font-weight:bold
}
Bonjour Milouze
no_way- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Module calendrier = date du jour en gras
C'est parfait! Vous avez très bien saisi le problème que j'avais du mal à résoudre. (je me doutais bien qu'il fallait du javascript... mais je suis encore novice dans ce domaine)
Merci beaucoup
Merci beaucoup
Sujets similaires
» calendrier date du jour
» Comment supprimer date anniversaire calendrier ?
» Réduire la police de la date jour/heure
» Police de caractère du module calendrier
» Date d'anniversaire dans calendrier
» Comment supprimer date anniversaire calendrier ?
» Réduire la police de la date jour/heure
» Police de caractère du module calendrier
» Date d'anniversaire dans calendrier
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum