Changeset 108897 in spip-zone


Ignore:
Timestamp:
Feb 10, 2018, 4:26:37 PM (22 months ago)
Author:
real3t@…
Message:

Début de mise en place d'un autre mode d'affichage d'un carrousel en mode Cognac :

  • mot clef : CycloShow?
  • affiche plusieurs articles avec leur titre, descriptif (bulle d'aide) et logo

Pour l'instant, ça ne marche pas !

Location:
_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire/sommaire_modeportailcognac.html

    r108891 r108897  
    6565<!-- fin SLIDER -->
    6666</BOUCLE_ZoomSur>
     67
     68<B_CycloShow>
     69<!-- SLIDER -->
     70<div id="cycloshow" class="zone-slider">
     71        <div class="slider-slick">
     72                <div class="slider-diapo-imgfull">
     73                        <BOUCLE_CycloShow(ARTICLES){titre_mot=CycloShow}{par num titre}{!par date}{lang}{doublons}>
     74                        <a href="#URL_ARTICLE" tabindex="-1">
     75                                <img src="[(#LOGO_ARTICLE_NORMAL|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{#GET{LargeurContaineur},#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="">
     76                                <div class="slider-content desc-gauche text-center">
     77                                        <h3 class="#EDIT{titre}">#TITRE</h3>
     78                                        [<p class="hide-for-small-only #EDIT{descriptif}">(#DESCRIPTIF|ptobr)</p>]
     79                                </div>
     80                        </a>
     81                        </BOUCLE_CycloShow>
     82                </div>
     83        </div>
     84</div>
     85</B_CycloShow>
    6786
    6887<BOUCLE_EDITO(ARTICLES) {titre_mot=EDITO}{!par date}{0,1}{lang}{doublons}>
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r108891 r108897  
    682682  display: block;
    683683}
     684
     685
     686
     687// gestion block texte sur slider : CycloShow
     688#cycloshow {
     689        width: #GET{LargeurContaineur}px;
     690        margin-left: auto;
     691        margin-right: auto;
     692}
     693
     694
     695.slider-diapo-imgfull {
     696  position: relative;
     697}
     698@media screen and (max-width: 39.9375em) {
     699  .hide-for-small-only {
     700    display: none !important;
     701  }
     702}
     703.slider-content.desc-gauche {
     704  position: absolute;
     705  display: flex;
     706  flex-direction: column;
     707  justify-content: center;
     708  background-color: rgba(152, 152, 152, 0.7);
     709  top: 0;
     710  bottom: 0;
     711  left: 8%;
     712  width: 27%;
     713  padding: 1.75em !important;
     714}
     715.slider-content.desc-gauche h3 {
     716  margin: 0 0 1em;
     717  color: #ffcc03;
     718  font-family: 'Oswald', sans-serif;
     719  font-weight: 300;
     720  font-size: 2.15em;
     721  line-height: 1.15em;
     722  text-align: center;
     723}
     724.slider-content.desc-gauche p {
     725  font-size: 1.25em;
     726  color: white;
     727  line-height: 1.35;
     728}
     729@media screen and (max-width: 100em) {
     730  .slider-content.desc-gauche h3 {
     731    margin: 0 0 .5em;
     732    font-size: 1.75em;
     733  }
     734  .slider-content.desc-gauche p {
     735    font-size: 1.1em;
     736  }
     737}
     738@media screen and (max-width: 80em) {
     739  .slider-content.desc-gauche {
     740    left: 8%;
     741    width: 346px;
     742    padding: 1.5em !important;
     743  }
     744  .slider-content.desc-gauche h3 {
     745    margin: 0 0 .5em;
     746    font-size: 1.5em;
     747  }
     748  .slider-content.desc-gauche p {
     749    font-size: 1.1em;
     750  }
     751}
     752@media screen and (max-width: 410px) {
     753  .slider-content.desc-gauche {
     754    left: 0;
     755    width: 100%;
     756  }
     757}
     758
     759
     760
    684761
    685762#masonry {
Note: See TracChangeset for help on using the changeset viewer.