Composition d’un code js pour une AF avec HTML par étapes
🎥 Tutoriels vidéos : Introduction à l’AF, Modifications mineures de l’AF Contexte : l’adaptation futé permet d’adapter le contenu d’un site web en fonction de critères définis. Ex : la zone géographique, le temps qu’il fait, l’heure qu’il est, la saison… Pour faire ça, il faut injecter sur le site web le contenu qu’on veut adapter. Ça […]
Mettre le logo plus petit losqu’on scroll vers la bas (Header sticky)
Article original: https://elementor.com/blog/shrinking-sticky-header/ Exemple sur Vitalogo: https://vitalgo.ca/ 1- Mettre la classe .sticky-header sur le container qui est sticky 2- Mettre la classe .logo sur le logo CSS: /*** * class: .sticky-header */ .sticky-header { –shrink-header-to: 0.6; –transition: .45s cubic-bezier(.4, 0, .2, 1); transition: background-color var(–transition), backdrop-filter var(–transition), box-shadow var(–transition); } .sticky-header.elementor-sticky–effects { background-color: #014546; box-shadow: […]
Styliser le input file pour des formulaires sur des pages carrières
*Il faut mettre la classe .formulaire sur le form /*formulaires design */ .formulaire input::-webkit-file-upload-button{ display:none; } .formulaire .elementor-upload-field { background-color: #2E2E2E!important; width:100%; } .formulaire input[type=file]{ display: block; color: #FFF; border-radius: 5px; padding: 15px; line-height: 70px!important; } .formulaire input[type=’file’]::before { position: absolute; background: #8CB63C; top:0!important; right: 30px; height: 70px; padding: 0 30px!important; display: flex!important; align-items: center; […]
Styliser des radio ou case à cocher
Code html pour les radios: S’inscrire à l’infolettre Agriculture S’inscrire à l’infolettre Construction Code CSS(le code peut avoir des modification mineurs si ce n’est pas des case à cocher): .elementor-field-type-checkbox input, .form-autodurocher .elementor-field-type-acceptance input, .jet-form input[type=checkbox]{ position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radio-option, .jet-form .radio-option{ padding-left: 35px; font-size: 16px; […]