DéveloppementsFichiers CSS

Twitter : Design de substitution pour les modules non-joignables


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.
Description Network Gadget Version Template Version
Fichier CSS attribuant un design aux modules Twitter non-joignables.
1
1
2
Twitter: Design de substitution pour les modules non-joignables
Fichier CSS permettant d'appliquer une apparence aux modules Twitter, lorsque ceux-ci ne sont pas joignables.
Boutons Tweet, Suivre, Hastag et Mention.
Widget Timeline.
Posts intégrés.

Comparaison

Lorsque le script permettant de faire fonctionner les modules Twitter n'est pas disponible, les modules se transforment en liens.

Pour rendre les liens un peu plus présentable, il suffit d'appliquer un style.


La timeline
Widget joignable Widget injoignable




Les tweets intégrés
Widget joignable
Widget non-joignable


Haut de page


Le fichier CSS

Le fichier contient des dimensions fixes pour la timeline et les tweets intégrés. Si les valeurs ne correspondent pas à vos modules, changez-les.

/* TWITTERDOWN WIDGET STYLES by Blogger Code http://goo.gl/yI9mgF
   ============================================================== */

a.twitter-timeline, a.twitter-share-button, a.twitter-follow-button, a.twitter-hashtag-button, a.twitter-mention-button, .twitter-tweet {
  display: inline-block;
  background-color: rgb(248, 248, 248);
  background-repeat: no-repeat;
  font-size: 14px;
  line-height: 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgb(204, 204, 204);
  color: rgb(51, 51, 51);
  font-weight: bold;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
  margin: 0px 0px 5px 2px;
}

a.twitter-timeline {
  height: 300px; /* HAUTEUR DE LA TIMELINE */
  line-height: 300px;
  background-image: url(https://lh3.googleusercontent.com/-pvBV0nx2_no/UjImqnMFb_I/AAAAAAAAQB0/N4P2UulwqHg/s100/twitter-bird-light-bgs.png);
  background-position: center 10px;
  padding: 0px 10px;
  text-align: center;
}

.twitter-tweet {
  display: block;
  margin: 0px;
  padding: 20px 20px 20px 100px;
  font-weight: inherit;
  font: 18px/24px Georgia,"Times New Roman",Palatino,serif;
  cursor: default;
  background-image: url(https://lh3.googleusercontent.com/-pvBV0nx2_no/UjImqnMFb_I/AAAAAAAAQB0/N4P2UulwqHg/s100/twitter-bird-light-bgs.png);
  background-position: 0px top;
  min-height: 100px;
  width: 400px; /* LARGEUR TWEETS INTEGRES */
}

.twitter-tweet a:link, .twitter-tweet a:visited, .twitter-tweet a:hover {
  color: #00aced;
}
a.twitter-share-button, a.twitter-follow-button, a.twitter-hashtag-button, a.twitter-mention-button {
  text-align: left;
  padding: 4px 10px 4px 30px;
  background-image: url(https://lh3.googleusercontent.com/-pvBV0nx2_no/UjImqnMFb_I/AAAAAAAAQB0/N4P2UulwqHg/s24/twitter-bird-light-bgs.png);
  background-position: 5px center;
}

a.twitter-timeline:hover, a.twitter-share-button:hover, a.twitter-follow-button:hover, a.twitter-hashtag-button:hover, a.twitter-mention-button:hover {
  background-color: #00aced;
  border: 1px solid rgb(239, 239, 239);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.1) inset;
}

a.twitter-share-button:hover, a.twitter-follow-button:hover, a.twitter-hashtag-button:hover, a.twitter-mention-button:hover {
  background-image: url(https://lh6.googleusercontent.com/-Npb_90-OWU4/UjImqnbGJkI/AAAAAAAAQB4/8R-nE4jd7Jc/s24/twitter-bird-light-bgs2.png);
}

a.twitter-timeline:hover {
  background-image: url(https://lh6.googleusercontent.com/-Npb_90-OWU4/UjImqnbGJkI/AAAAAAAAQB4/8R-nE4jd7Jc/s100/twitter-bird-light-bgs2.png);
}
Où recopier ce fichier ?

Le fichier est a recopier dans l'éditeur de modèle

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

Lorsque vous aurez enregistré, vous n'aurez plus qu'a vous acheter un sachet de pop-corn et attendre tranquillement que Twitter tombe en panne pour pouvoir admirer les effets sur votre blog.

Bon courage... :D

Dernière modification :
Assistance publique pour le produit Blogger sur les Forums 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

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire