Les fichiers XML des thèmes - <b:template-skin>

Extrait de la documentation personnelle de
Blogger - <b:template-skin> node
Description du fichier
Le nœud <b:template-skin> est réservé aux feuilles de styles du document HTML généré dans l'onglet "Mise en page" du tableau de bord Blogger. En savoir plus.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Aucune
Aucune priorité
Thème Version 2
Garantie d'usage : Oui
Priorité moyenne
Thème Dynamique
Garantie d'usage : Oui
Priorité moyenne
Thème Version 3
Garantie d'usage : Oui
Priorité haute

Vue d'ensemble du nœud

Simple, Picture Windows, Awesome Inc., Watermark, Ethereal et Travel

<b:template-skin>
  <b:variable default='960px' name='content.width' type='length'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length'/>
<![CDATA[
body {
  min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
  _width: $(content.width);
}
.main-inner .columns {
  padding-left: $(main.column.left.width);
  padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
  left: $(main.column.left.width);
  right: $(main.column.right.width);
  /* IE6 does not respect left and right together */
  _width: expression(this.parentNode.offsetWidth -
    parseInt("$(main.column.left.width)") -
    parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
  width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
  width: $(main.column.right.width);
}
.main-inner .column-left-outer {
  width: $(main.column.left.width);
  right: 100%;
  margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
  width: $(main.column.right.width);
  margin-right: -$(main.column.right.width);
}
#layout {
  min-width: 0;
}
#layout .content-outer {
  min-width: 0;
  width: 800px;
}
#layout .region-inner {
  min-width: 0;
  width: auto;
}
body#layout div.add_widget {
  padding: 8px;
}
body#layout div.add_widget a {
  margin-left: 32px;
}
]]>
</b:template-skin>

Dynamics

<b:template-skin>
  <b:variable default='960px' name='content.width' type='length'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length'/>
  <b:variable default='46px' name='faviconpanel.height' type='length'/>
<![CDATA[
body {
  min-width: $(content.width);
}
.column-center-outer {
  margin-top: $(faviconpanel.height);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
  _width: $(content.width);
}
.main-inner .columns {
  padding-left: $(main.column.left.width);
  padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
  left: $(main.column.left.width);
  right: $(main.column.right.width);
  /* IE6 does not respect left and right together */
  _width: expression(this.parentNode.offsetWidth -
    parseInt("$(main.column.left.width)") -
    parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
  width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
  width: $(main.column.right.width);
}
.main-inner .column-left-outer {
  width: $(main.column.left.width);
  right: 100%;
  margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
  width: $(main.column.right.width);
  margin-right: -$(main.column.right.width);
}
#layout {
  min-width: 0;
}
#layout .content-outer {
  min-width: 0;
  width: 800px;
}
#layout .region-inner {
  min-width: 0;
  width: auto;
}
]]>
</b:template-skin>

Contempo

<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}
body#layout .navigation {
  display: none;
}
body#layout .page,
body#layout .sidebar_top,
body#layout .sidebar_bottom {
  display: inline-block;
  left: inherit;
  position: relative;
  vertical-align: top;
}
body#layout .page {
  float: right;
  margin-left: 20px;
  width: 55%;
}
body#layout .sidebar-container {
  float: right;
  width: 40%;
}
body#layout .hamburger-menu {
  display: none;
}
]]>
</b:template-skin>

Emporio

<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}
body#layout .centered-bottom {
  position: relative;
}
body#layout .section.featured-post,
body#layout .section.main,
body#layout .section.vertical-ad-container {
  float: left;
  width: 55%;
}
body#layout .sidebar-container {
  display: inline-block;
  width: 39%;
}
body#layout .centered-bottom:after {
  clear: both;
  content: "";
  display: table;
}
body#layout .hamburger-menu,
body#layout .search {
  display: none;
}
]]>
</b:template-skin>

Essential

<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}
body#layout .navigation {
  display: none;
}
body#layout .page,
body#layout .sidebar_top,
body#layout .sidebar_bottom {
  display: inline-block;
  left: inherit;
  position: relative;
  vertical-align: top;
}
body#layout .page {
  float: right;
  margin-left: 20px;
  width: 55%;
}
body#layout .sidebar-container {
  float: right;
  width: 40%;
}
body#layout .hamburger-menu {
  display: none;
}
]]>
</b:template-skin>

Notable

<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}
body#layout .navigation {
  display: none;
}
body#layout .page {
  display: inline-block;
  vertical-align: top;
  width: 55%;
}
body#layout .sidebar-container {
  display: inline-block;
  float: right;
  width: 40%;
}
body#layout .hamburger-menu,
body#layout .search {
  display: none;
}
]]>
</b:template-skin>

Soho

<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
  display: inherit;
}
body#layout .page {
  width: 60%;
}
body#layout.ltr .page {
  float: right;
}
body#layout.rtl .page {
  float: left;
}
body#layout .sidebar-container {
  width: 40%;
}
body#layout.ltr .sidebar-container {
  float: left;
}
body#layout.rtl .sidebar-container {
  float: right;
}
]]>
</b:template-skin>

Source & contribution

Google PE Program
Équipe Blogger/Experts Produit Blogger

Classifications, corrélations & échantillonnages

Soraya Lambrechts

Dernière mise à jour

Licence

Ce contenu est protégé par la licence CC BY-NC-ND 4.0

🛈 Info

Il arrive fréquemment que nos contenus soient reproduits sans autorisation. Si vous avez trouvé cette fiche ailleurs, nous vous recommandons vivement de consulter Blogger Code PE pour bénéficier de la version originale, à jour et vérifiée.

Spotlight

La balise TITLE sur Blogger

Image
Histoire, bonnes pratiques, optimisation SEO et conseils avancés ! Découvrez dans ce dossier complet comment maîtriser parfaitement la balise <title> sur votre blog Blogger : de ses origines historiques à son rôle crucial en référencement naturel (SEO), en passant par les bonnes pratiques actuelles. Apprenez à rédiger des titres efficaces, attractifs, optimisés pour Google et l'expérience utilisateur, tout en évitant les erreurs fréquentes. Un guide incontournable pour améliorer votre visibilité et propulser votre blog Blogger au sommet des résultats de recherche !
En savoir plus ➤

Populaires cette semaine