ThéorieFonctionnalitésContenu

Lightbox : CSS de la visionneuse Blogger


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Personnaliser la visionneuse Blogger
Lancé en septembre 2011, Blogger nous a offert son diaporama.
Il est temps que je vous présente les principaux CSS afin que vous puissiez personnaliser votre propre visionneuse et l'adapter aux couleurs de votre blog.

Démonstration

alt image alt image
alt image alt image
alt image alt image
alt image alt image


Haut de page


CSS de l'arrière-plan

.CSS_LIGHTBOX_BG_MASK {
  background-color: #000;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.CSS_LIGHTBOX_BG_MASK_TRANSPARENT {
  opacity: .9;
}


Haut de page


CSS du bouton de sortie

.CSS_LIGHTBOX_BTN_CLOSE {
  cursor: pointer;
  background: url('http://www.blogger.com/img/lightbox/lightbox_sprite.gif') no-repeat;
  width: 20px;
  height: 20px;
  top: 5px;
  position: absolute;
  z-index: 100;
}

.CSS_LIGHTBOX_BTN_CLOSE_POS {
  right: 5px;
}


Haut de page


CSS de l'image

.CSS_LIGHTBOX_SCALED_IMAGE {
  line-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.CSS_LIGHTBOX_SCALED_IMAGE_ERROR {
  outline: 1px solid #f00;
}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
  cursor: pointer;
  outline: 1px solid #000;
  position: relative;
}


Haut de page


CSS du panneau de contrôle

.CSS_LIGHTBOX_INDEX_INFO {
  color: #ccc;
  font-size: .84em;
  line-height: normal;
  min-height: 1em;
  position: relative;
  text-align: center;
  top: 2px;
}

.CSS_LIGHTBOX_FILMSTRIP {
  background-color: #000;
  line-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 59px;
}

.CSS_LIGHTBOX_FILMSTRIP_DISABLED {
  opacity: .5
}

.CSS_LIGHTBOX_FILMSTRIP_CONTROLS_FRAME {
  width: 52px;
  height: 52px;
  position: absolute;
  top: 0;
  left: 35px;
  border: 1px solid #fff;
  margin-top: 3px;
}

.CSS_LIGHTBOX_FILMSTRIP_THUMBNAILS_CONTAINER {
  position: absolute;
  padding-top: 5px;
  overflow: hidden;
  -moz-user-select: none;
  -khtml-user-select: none;
  float: none;
  height: 54px;
  top: 0;
}

.CSS_LIGHTBOX_FILMSTRIP_THUMBNAIL {
  background-color: #333;
  overflow: hidden;
  width: 50px;
  height: 50px;
}

.CSS_LIGHTBOX_FILMSTRIP_THUMBNAIL_MARGIN {
  margin-right: 3px;
}

.CSS_LIGHTBOX_FILMSTRIP_THUMBNAIL_IMG {
  width: 50x;
  height: 50px;
  cursor: pointer;
}


Haut de page


Comment personnaliser ?

Vous reprenez les éléments des CSS ci-dessus et vous y ajoutez les attributs qui vous convienne le mieux.

A savoir que si vous reprenez le même attribut en modifiant la valeur, vous devrez ajouter la mention !important.

Exemple
.CSS_LIGHTBOX_BG_MASK {
  background-color: #000;
}

L'arrière-plan noir devient un arrière-plan gris
.CSS_LIGHTBOX_BG_MASK {
  background-color: #555 !important;
}


Haut de page


Où ajouter les CSS ?

Depuis l'éditeur de modèles,

  • Tableau de bord
  • Modèle
  • Personnaliser
  • Avancé
  • Ajouter CSS


Haut de page


Cas particulier : Ajouter un texte au-dessus des vignettes



Ajouter un texte au-dessus des vignettes


Dans cet exemple, nous allons jouer avec les étiquettes Blogger que nous allons combiner avec les déclarations CSS, afin d'afficher un texte spécifique à l'article.


<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<style scoped='scoped'>
.CSS_LIGHTBOX_INDEX_INFO::before {
  content:&quot;<data:post.title/> - Image &quot;;
}
</style>
</b:if>

Dans le code HTML, le code est à recopier juste après :

<b:includable id='post' var='post'>


Le CSS est accompagné d'un pseudo format pour afficher avant ou après les numéros des images :
  • before (afficher avant)
  • after (afficher après)

L'étiquette <data:post.title/> contient le titre de l'article. Elle peut être remplacée par une autre (par exemple, la date de l'article, la liste des libellés, le nom de l'auteur, etc etc etc). Voir la liste des étiquettes disponibles.

Le code est également pourvu de balises conditionnelles empêchant d'appliquer le CSS dans les pages index et archives.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire