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>


Explorer les nœuds du fichier XML

Source & contribution

Google PE Program
Équipe Blogger/Experts Produit Blogger

Classifications, corrélations & échantillonnages

Soraya Lambrechts

Dernière mise à jour

Licence - La reproduction du contenu de ce blog n'est pas autorisée

Aucune disposition des Conditions d'Utilisation de ce blog ne pourra être interprétée comme conférant à l'Utilisateur une licence sur les Droits de Propriété Intellectuelle.

Le blog Blogger Code PE ne concède qu'une autorisation de visualisation de son contenu à titre personnel et privé. Les copies ou reproductions doivent être strictement réservées à l'usage privé du copiste.

Toute reproduction abusive, totale ou partielle du blog Blogger Code PE, représentation, modification, publication, traduction, adaptation totale ou partielle de l'un quelconque de ces éléments, accompagnée ou non d'un lien de référence, quel que soit le moyen ou le procédé utilisé, est interdite et sera considérée comme constitutive d’une contrefaçon et passible de poursuite (Les peines prévues à cet effet sont une condamnation de 3 ans d'emprisonnement et une amende de 300.000€) conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.

En savoir plus

Nous nous réservons le droit d'afficher dans ce cadre les notifications d'infraction à la loi DMCA en relation avec le contenu de ce document et déposées par les représentants agréés du blog Blogger Code PE.

Image

Affiliée au Product Experts Icon Google Product Experts Program - Ambassador & Troubleshooter.

  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Spécialisation : Technologie des thèmes Blogger.

Auteur originel de la théorie du langage XML Blogger : Règles syntaxiques, directives d'usage, classifications, compilations et corrélations des composants.
Cela représente près de 10 années de travail. Je remercie tous ceux qui ont respecté ma propriété intellectuelle et j'offre mes meilleurs sentiments aux nombreux contributeurs (Amis, Utilisateurs, Experts Produits Google, Blogger Team et Ingénieurs).

Spotlight

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Par –
Image
En 2007, une évolution importante est survenue dans l'univers de Blogger : l'éditeur XML de thème a fait son apparition, brouillant les lignes entre backEnd et frontEnd pour des millions de "Bloggeriens". Mais que signifie cette évolution pour les utilisateurs ? Et surtout, qu'en est-il de la propriété intellectuelle et de la licence de ces thèmes ? Plongeons dans les détails de ce curieux mélange technique tout en tenant compte des Conditions générales d'utilisation (CGU) de Google.
En savoir plus ➤

Populaires cette semaine

Foire aux questions Blogger (Novembre 2021)

Par –
Image
Halloween a ouvert le bal des festivités en ce mois de novembre et attendez-vous à croiser des citrouilles un peu partout sur les produits Google. Plus particulièrement sur la tête des Googlers qui adorent se déguiser en cette période de l'année. Mais ne paniquez pas, ici sur Blogger Code PE, on est sérieusement sérieux et on veille au grain pendant que d'autres s'amusent...
En savoir plus ➤

Outils de sauvegarde et suppression du blog

Par –
Image
Est-il utile d'effectuer une sauvegarde sur Blogger ?
Il existe mille et une raisons pour qu'on envisage de récupèrer son contenu.
Même si la plupart sont justifiées ou même fantaisistes, on ne va pas s'amuser à vous les énumérer parce que dans le lot, il y a aussi des raisons malsaines qui vont à l'encontre de l'éthique du bon Bloggerien.
Mais sachez que tout le contenu que vous ajoutez sur Blogger vous appartient et que par définition, vous êtes libre de le récupérer.
Gardez bien en tête que l'initiative de la sauvegarde est de votre responsabilité et que ce n'est pas Blogger qui la prendra à votre place.
En savoir plus ➤