Si desea que la fecha de sus eventos se muestre apilada como en la imagen siguiente, puede hacerlo utilizando un par de fragmentos personalizados de JavaScript y CSS.
Puede conseguir dos formatos diferentes: sólo la fecha y el mes, o la fecha completa. Vea a continuación las instrucciones para cada uno:
Mostrar sólo el día y el mes
1) Asegúrese de que el diseño de sus mensajes se establece en "Miniatura", ya sea utilizando la configuración en la página de Post Layout del plugin, o utilizando la siguiente opción shortcode: layout=thumb
2) Establezca que el formato de la fecha del evento sea la primera opción de la sección de personalización "Fecha del evento" (Facebook Feed > Personalizar > Mensajes de estilo > Formato de fecha de evento) con el siguiente formato: 25 de julio, 17:30. También puede hacerlo utilizando eventdateformat=14 en su shortcode.
3) A continuación, añade lo siguiente a la sección de JavaScript personalizado del complemento (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) Añade esto a la sección CSS Personalizado:
.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; }
Mostrar toda la fecha
1) Asegúrese de que el diseño de sus mensajes se establece en "Miniatura", ya sea utilizando la configuración en la página de Post Layout del plugin, o utilizando la siguiente opción shortcode: layout=thumb
2) Añade lo siguiente a tu shortcode: eventdatecustom='.
3) A continuación, añade lo siguiente a la sección de JavaScript personalizado del complemento (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) Añade esto a la sección CSS Personalizado:
.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; }
