Si vous souhaitez que les dates de vos événements soient empilées comme dans l'image ci-dessous, vous pouvez le faire à l'aide de quelques snippets Custom JavaScript et Custom CSS.
Vous pouvez obtenir deux formats différents : uniquement la date et le mois, ou la date entière. Vous trouverez ci-dessous des instructions pour chacun de ces formats :
Afficher uniquement le jour et le mois
1) Assurez-vous que la mise en page de vos articles est réglée sur "Thumbnail", soit en utilisant les paramètres de la page Post Layout du plugin, soit en utilisant l'option shortcode suivante : layout=thumb
2) Définir le format de la date de l'événement comme la première option de la section de personnalisation "Date de l'événement" (Flux Facebook > Personnaliser > Style des messages > Formatage de la date de l'événement) qui se présente comme suit : 25 juillet, 17h30. Vous pouvez également le faire en utilisant eventdateformat=14 dans votre shortcode.
3) Ajoutez ensuite ce qui suit à la section Custom JavaScript du plugin (Facebook Feed > Customize > Misc) :
$('.cff-event').each(function(){
var $self = $(this),
cff_sd_arr = $self.find('.cff-start-date').text().split(" ");
$self.find('.cff-start-date').html( '<span class="cff-month">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1].replace(/\,/g,"") + '</span>' );
$self.find('.cff-photo').html( $self.find('.cff-date') ).removeAttr('href').css('cursor', 'default');
});4) Ajoutez ceci à la section Custom CSS :
.cff-start-date, .cff-month, .cff-day { display: block; }
.cff-start-date { text-align: center; }
.cff-end-date, .cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-month{ font-size: 20px; }
.cff-day{ font-size: 30px; }
Afficher la date entière
1) Assurez-vous que la mise en page de vos articles est réglée sur "Thumbnail", soit en utilisant les paramètres de la page Post Layout du plugin, soit en utilisant l'option shortcode suivante : layout=thumb
2) Ajoutez ce qui suit à votre shortcode : eventdatecustom='.
3) Ajoutez ensuite ce qui suit à la section Custom JavaScript du plugin (Facebook Feed > Customize > Misc) :
$('.cff-event').each(function(){
var $self = $(this),
cff_sd_arr = $self.find('.cff-start-date k').text().split(" ");
$self.find('.cff-start-date k').html( '<span class="cff-dayweek">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1] + '</span><span class="cff-month">' + cff_sd_arr[2].replace(/\,/g,"") + '</span><span class="cff-year">' + cff_sd_arr[3].replace(/\,/g,"") + '</span>' );
$self.find('.cff-photo').html( $self.find('.cff-start-date k') ).removeAttr('href').css('cursor', 'default');
});4) Ajoutez ceci à la section Custom CSS :
.cff-dayweek{ font-size: 30px; }
.cff-day{ font-size: 50px; }
.cff-month{ font-size: 25px; }
.cff-year{ font-size: 20px; }
.cff-end-date k, cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-photo k{ line-height: 1; text-transform: uppercase; text-align: center; }
