Per impostazione predefinita, i pass vengono mostrati in un carosello. Se preferisci che appaiano come card dei prezzi standard, in una griglia insieme al resto dei tuoi prezzi, puoi modificare questa impostazione con CSS personalizzato.
Da questo:
A questo:
1. Vai alla sezione CSS personalizzato
Trovi la sezione CSS in Impostazioni > Widget > CSS personalizzato. Se non hai mai utilizzato questa area, consulta Come personalizzare un widget bsport con CSS personalizzato.
2. Seleziona la tab Comune
Ti consigliamo di usare la tab Comune.
3. Incolla il CSS
Incolla le seguenti regole nell'area del CSS personalizzato:
/* 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 vuoi che i pass appaiano per primi, aggiungi anche questa regola:
.bs-pass-page__carousel__container { order: 0;}
4. Salva le modifiche
Dopo aver aggiunto le tue regole CSS personalizzate, ricordati di salvare. Le modifiche si applicano immediatamente.
