Skip to main content

Writing your custom CSS

How to add CSS and JS#

The platform uses Bootstrap 4

We recommend making the grid, structure, media queries and components using Bootstrap class first and then if you cannot do something just using Bootstrap, you can make a custom CSS.

In case you need to use JS, we recommend to use Vanilla js. If you need to make something specific using libraries, we recommend using Alpine.js importing the library defer. https://alpinejs.dev/

Body classes added automatically by store#

We have some classes added in <body> to help you show or hide some nodes using just CSS.

CSS classdescription
.User-hasASubscriptionWhen an user has an active subscription
.User-Name-{name}Display user's name
.User-ID-nullWhen user is a guest and isn't register in the store

If you need to show information in a specific language, you can add the following lines to your CSS.

html[lang='en'] [data-lang='es'],
html[lang='en'] [data-lang='it'] {
display: none;
}
html[lang='es'] [data-lang='en'],
html[lang='es'] [data-lang='it'] {
display: none;
}
html[lang='it'] [data-lang='es'],
html[lang='it'] [data-lang='en'] {
display: none;
}

In the HTML file you just need to add the specific tab data-lang