Comment modifier votre thème avec HTML sur Tumblr

Tumblr prend en charge la personnalisation complète de tout thème gratuit que vous choisissez, ainsi que des thèmes entièrement personnalisés pour votre blog Tumblr. Les thèmes sur Tumblr sont créés par une variété de développeurs différents, dont beaucoup sont des utilisateurs de Tumblr; en tant que tels, la conception et la mise en page du code varient considérablement d'un thème à l'autre, avec seulement des éléments clés en commun. Bien que l'expérimentation soit un moyen efficace d'apprendre les tenants et les aboutissants d'un système, il est préférable de se familiariser avec les thèmes avant de modifier le vôtre. Tumblr propose une page complète de documentation sur les thèmes et les variables personnalisés.

1

Ouvrez votre page de personnalisation Tumblr sur Tumblr.com/customize; vous pouvez également cliquer sur votre nom d'utilisateur en haut de votre tableau de bord Tumblr, puis cliquer sur "Personnaliser l'apparence" dans la barre latérale.

2

Cliquez sur le bouton "Thème". L'écran par défaut est l'écran de sélection de thème. Choisissez un thème que vous vous sentez à l'aise de modifier, si vous n'en avez pas déjà sélectionné. Une fois sélectionné, cliquez sur "Utiliser HTML personnalisé" en bas du menu Thème.

3

Parcourez le code pour avoir une idée de la manière dont le développeur a initialement créé le thème. Les thèmes utilisent un mélange de code, y compris HTML, CSS et Javascript. Les thèmes Tumblr utilisent un ensemble standard de blocs pour définir les zones de code qui s'appliquent aux différents articles et sections du blog. Par exemple, la section qui définit les messages audio commencera "{block: Audio}" et se terminera par "{/ block: audio}" et la section pour les messages de citation commencera {block: Quote} et se terminera "{/ block: Quote } ", ce qui facilite la recherche de types et de sections d'articles individuels. Si vous recherchez un élément spécifique, la fonction de recherche de votre navigateur devrait pouvoir trouver des mots dans le code HTML du thème.

4

Insérez le code HTML personnalisé de votre choix. Si vous souhaitez créer une nouvelle feuille de style pour votre thème, vous l'insérez quelque part entre les balises d'ouverture et de fermeture de l'en-tête du document. Une feuille de style est formatée comme

corps {background: # 000000;}

Vous pouvez inclure autant d'éléments dans votre feuille de style que nécessaire. Tout élément peut être modifié en utilisant CSS. Par exemple, si vous vouliez définir tout élément modifié avec la balise H2 à 22 pixels de hauteur et gris foncé, la feuille de style inclurait ce bloc:

h2 {taille de la police: 22px; couleur: # A8A8A8;}

5

Ajoutez n'importe quel style à des éléments HTML individuels à l'aide de la balise "style". Par exemple, si vous souhaitez modifier les guillemets sur votre page pour avoir une ombre de texte gris clair, vous trouverez le code HTML qui modifie votre devis et ajoutez style = "text-shadow: 1px 1px # A8A8A8;" à l'intérieur des crochets de la balise HTML. Tout CSS ajouté de cette manière fonctionne en plus de la feuille de style de votre page.

6

Cliquez sur "Mettre à jour l'aperçu" pour voir les modifications apportées à votre blog Tumblr dans l'aperçu sans enregistrer les modifications. Lorsque vous avez enfin apporté les modifications souhaitées à votre blog Tumblr et que vous êtes prêt à les valider, cliquez sur "Enregistrer".