Por predefinição, os passes são apresentados num carrossel. Se preferir que apareçam como cartões de preços padrão, numa grelha junto com os restantes preços, pode alterar isto com CSS personalizado.
De isto:
Para isto:
1. Aceda à secção de CSS personalizado
Encontrará a secção de CSS em Definições > Widgets > CSS personalizado. Se ainda não utilizou esta área antes, consulte Como personalizar um widget bsport com CSS personalizado.
2. Selecione o separador Comum
Recomendamos que utilize o separador Comum.
3. Cole o CSS
Cole as seguintes regras na sua área de CSS personalizado:
/* REMOVE CAROUSEL DISPLAY */@media (width < 750px) { .bs-carousel__item .bs-pack-card { height: 150px !important; } .bs-carousel__items__container__view { gap: 5px; } .bs-grid-item-justification-space-between { height: 100%; } .bs-pack-card__prices-container { align-items: end; }}@container (width < 1100px) { .bs-carousel__item { flex-basis: 0px; } .bs-pass-page__carousel__container { padding: 0px 10px; }}.bs-carousel__indicator__container,.bs-carousel__navigation__button,.bs-carousel__navigation__button,.bs-carousel__indicator__container,.bs-initial-price__price { display: none;}.bs-carousel__items__indicator__container { overflow: visible; contain: none; pointer-events: none;}.bs-carousel__items__container { overflow: visible; contain: none;}.bs-carousel__items__container__view { display: flex; flex-wrap: wrap; transform: none; transition: none; animation: none; translate: 0; width: 100%; will-change: unset; contain: none; display: grid; grid-template-columns: repeat(4, minmax(300px, 1fr)); grid-template-rows: 230px; gap: 20px; margin: 0px;}.bs-carousel__items__container__view[style*="transform"] { transform: none !important;}.bs-pack-card__title { font-size: var(--h6-fontSize);}@media (width < 1475px) { .bs-carousel__items__container__view { grid-template-columns: repeat(3, minmax(300px, 1fr)); }}@media (width < 1100px) { .bs-carousel__items__container__view { grid-template-columns: repeat(2, minmax(300px, 1fr)); }}@media (width < 750px) { .bs-carousel__items__container__view { flex-direction: column; display: flex; width: 100%; } .bs-pack-card { height: 175px; }}.bs-carousel__items__container__view > * { transform: none; transition: none; animation: none; opacity: 1; visibility: visible; display: block; position: static; margin-left: 0; width: auto; flex-shrink: 0;}.bs-carousel__item { position: static; transform: none; pointer-events: all;}@media (max-width: 768px) { .bs-carousel__item { width: 100%; }}@media (max-width: 480px) { .bs-carousel__item { width: 100%; }}.hidden-item-right,.hidden-item-left { translate: none; flex-basis: 0px; translate: 0;}[id*=bsport-widget] .cleanslate .hidden-item-right,[id*=bsport-widget] .cleanslate .hidden-item-left { translate: none;}.bs-pack-card .bs-generic-card__content { background: linear-gradient(120deg, var(--color-secondary-background-paper) 50%, var(--color-background-paper) 50%); border-radius: var(--border-radius-4);}.bs-pass-page__carousel__container,.bs-carousel__container,.bs-carousel__items__container,.bs-carousel__items__container__view,.bs-carousel__item { pointer-events: none;}.bs-pack-card__footer > button,.bs-button__container { pointer-events: all;}/* Reduce height of packs */.bs-pack-card__description { -webkit-line-clamp: 2;}.bs-carousel__item .bs-pack-card { height: 230px;}.bs-calendar-search__container,.bs-search__container { margin-bottom: 0;}@media (width < 750px) { .bs-carousel__item { height: 160px; } .bs-pack-card__list { display: grid; grid-template-columns: 1fr 1fr; } .bs-carousel__item .bs-pack-card { height: 175px; } .bs-carousel__items__indicator__container { padding: 0px 10px; }}.bs-pass-page { display: grid;}.bs-pass-page__carousel__container { order: 1;}.bs-pass-page__list__filters__container { gap: 0px;}.bs-pack-card__prices-container { height: 100%; justify-content: end;}
⚠️ Se quiser que os passes apareçam primeiro, adicione também esta regra:
.bs-pass-page__carousel__container { order: 0;}
4. Guarde as suas alterações
Depois de adicionar as suas regras de CSS personalizado, não se esqueça de guardar. As alterações aplicam-se instantaneamente.
