ThéorieFonctionnalitésContenu

Lightbox : CSS de la visionneuse Blogger


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
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.
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • 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 XMLTypes des variables d'habillage
Variables d'habillage - Les valeurs automatisées [automatic]
Populaire
ThéorieFonctionnalitésGestion
Populaire
DéveloppementsFichiers XML
Populaire
ThéorieFonctionnalitésContenu
Populaire
ThéorieFonctionnalitésSEO
Populaire