Par défaut, les forfaits s'affichent dans un carrousel. Si vous préférez qu'ils apparaissent comme des cartes tarifaires standard, dans une grille aux côtés du reste de vos tarifs, vous pouvez modifier cela à l'aide de CSS personnalisé.
Avant :
Après :
1. Accédez à la section CSS personnalisé
Vous trouverez la section CSS dans Paramètres > Widgets > CSS personnalisé. Si vous n'avez jamais utilisé cette zone auparavant, consultez Comment personnaliser un widget bsport avec du CSS personnalisé.
2. Sélectionnez l'onglet Commun
Nous vous recommandons d'utiliser l'onglet Commun.
3. Collez le CSS
Collez les règles suivantes dans votre zone de CSS personnalisé :
/* 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;}
⚠️ Si vous souhaitez que les forfaits apparaissent en premier, ajoutez également cette règle :
.bs-pass-page__carousel__container { order: 0;}
4. Enregistrez vos modifications
Une fois vos règles CSS personnalisées ajoutées, pensez à enregistrer. Les modifications s'appliquent immédiatement.
