Tutoriel : Créer un Thème d'Œuvre FAQ

Archive FAQ > Tutoriel : Créer un Thème d'Œuvre

Introduction

Ce tutoriel va vous aider à créer, étape par étape, un thème d'œuvre sur Archive of Our Own – AO3 (Notre Propre Archive). À la fin de ce tutoriel, vous aurez créé votre propre thème d'œuvre, utilisé CSS pour définir des styles personnalisés, et appliqué le thème à une œuvre de votre choix.

Ce tutoriel part du principe que :

Vous savez publier des œuvres sur AO3. Si ce n'est pas le cas, vous pouvez consulter la FAQ "Publier et Éditer Une Œuvre" ou suivre le Tutoriel : Publier une Œuvre sur AO3.
Vous connaissez les bases du code CSS. Si vous souhaitez avoir plus d'informations sur ce type de code, le Tutoriel sur le CSS du site W3Schools propose un cours de base gratuit.
Vous accédez au site avec le thème par défaut (Archive 2.0). Si vous utilisez un thème personnalisé, veuillez tenir compte des différences de mise en page lorsque vous consultez les instructions.

Si vous ne savez pas exactement ce qu'est un thème d'œuvre, ou si vous préférez utiliser un thème existant pour styliser votre œuvre, veuillez consulter la FAQ "Thèmes et Interface de l'Archive".

Se Rendre sur le Formulaire "Create New Skin" (Création d'un Nouveau Thème)

Rendez-vous d'abord sur votre page "Skins" (Thèmes) :

Connectez-vous et rendez-vous sur votre Tableau de Bord en sélectionnant "Hi, [nom d'utilisateur-trice] !" puis "My Dashboard" (Mon Tableau de Bord) dans le menu, ou bien en sélectionnant votre image de profil.
Suivez le lien "Skins" dans le menu se trouvant sur le côté de la page. Sur les appareils mobiles, ce menu se trouve en haut.

Cela vous amène à votre page "My Site Skins" (Mes Thèmes de Site), qui comporte une liste de vos thèmes personnalisés ainsi que des boutons pour vous rediriger vers vos thèmes d'œuvre personnalisés et vos thèmes publics. Pour connaître la différence entre les thèmes de site et les thèmes d'œuvre, consultez la page Qu'est-ce qu'un thème ?

Pendant ce tutoriel, nous allons créer un nouveau thème d'œuvre. Sélectionnez "My Work Skins" (Mes Thèmes d'Œuvre), puis "Create Work Skin" (Créer un Nouveau Thème) pour vous rendre sur le formulaire de Création d'un Nouveau Thème.

Configurer un Nouveau Thème d'Œuvre

Les seuls champs obligatoires à renseigner pour créer un nouveau thème avec un code CSS personnalisé sont Type (Type), Title (Titre) et CSS. Le reste est optionnel mais nous les couvrirons tous dans ce tutoriel.

Vous pourrez éditer ces champs après avoir terminé (se reporter à Éditer Votre Thème d'Œuvre pour les instructions).

Type (obligatoire): Si vous avez sélectionné le bouton "Create Work Skin" (Créer un Nouveau Thème) sur la page des Thèmes, il sera indiqué "Work Skin" (Thème d'Œuvre).
Title (obligatoire): Donnez un titre descriptif à votre thème pour pouvoir le différencier des autres thèmes d'œuvre que vous créerez dans le futur. Les titres de thème doivent être uniques. Nous vous recommandons donc d'y inclure votre nom d'utilisateur-trice ("Thème Homestuck [nom d'utilisateur-trice]" par exemple).
Description (Description): Que fera votre thème ? Aura-t-il une ligne directrice ? Vous pouvez consulter des exemples de description de thème sur les pages Thèmes de Site Publics ou Thèmes d'Œuvre Publics.
Upload a preview (Inclure un aperçu): Vous pouvez inclure une capture d'écran de vos styles CSS afin de montrer à quoi ils ressemblent. Ceci peut être fait après que vous avez commencé à utiliser votre thème d'œuvre.
Apply to make public (Rendre public): Cette fonction a été désactivée. Les thèmes personnalisés ne peuvent désormais plus être rendus publics, donc votre thème restera privé même si vous cochez cette case.
CSS: Le dernier champ du formulaire sert à la saisie de votre code CSS personnalisé. Dans les prochaines sections, vous apprendrez comment saisir le CSS qui constituera le nouveau style de votre œuvre.

Vous avez peut-être remarqué le bouton "Use Wizard" (Utiliser l'Assistant), qui se trouve en haut. Il renvoie vers le "Site Skin Wizard" (Assistant de Thème de Site), qui malheureusement ne peut être utilisé que pour créer des thèmes de site et non pas des thèmes d'œuvre (Qu'est-ce que l'Assistant de Thèmes ? )

Mais ne vous inquiétez pas : grâce à ce tutoriel, vous n'aurez même pas besoin d'assistant !

Utiliser le Code CSS

Pour des raisons de sécurité, AO3 ne peut supporter qu'un nombre limité de propriétés et de valeurs CSS. Tout code non pris en charge sera effacé après avoir effectué l'enregistrement de vos changements.

Vous pouvez consulter la liste complète des propriétés CSS prises en charge en sélectionnant le point d'interrogation bleu ? en haut de la section CSS. Vous pouvez également consulter Quelles propriétés et valeurs CSS puis-je utiliser dans des thèmes personnalisés ? pour avoir plus d'informations sur les polices, les couleurs, les liens, etc.

Saisir Votre Code CSS

Dans cette section, vous devez entrer le code CSS qui va déterminer quels styles peuvent être appliqués à votre/vos œuvre(s). Vous pouvez ajouter votre propre CSS ou suivre l'exemple ci-dessous.

Imaginons que vous ayez une œuvre avec le code HTML suivant :

  
Cher Billy,
Voici une lettre que je t'ai écrite. J'espère que tu es très impressionné.
Cordialement,
Adelaide

Sans thème d'œuvre appliqué, ce texte s'affichera dans le style par défaut d'AO3.

Texte de l'exemple ci-dessus avec le style par défaut de l'Archive : police sans serif, couleur noire

Pour que l'apparence de ce texte évoque celle d'une lettre manuscrite, comme dans l'image ci-dessous, il faut créer des styles personnalisés avec le CSS.

Texte en 'Comic Sans MS' entouré d'une fine bordure noire, avec une espace entre la bordure et le texte. 'Adelaide' est un peu plus gros et rouge. Le mot 'très' est souligné deux fois.

D'abord, ajoutons une fine bordure noire autour de ce texte, et changeons la police et sa taille. Pour cela, ajoutez les codes suivants à la section CSS de votre thème d'œuvre :

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

Ensuite, ajoutons d'autres codes pour donner un style spécial à la signature ("Adelaide"). Saisissez le CSS suivant pour augmenter la taille de la police et donner une couleur rouge à la signature :

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

Enfin, pour souligner le mot mis en évidence ("très"), ajoutez le dernier CSS :

  
#workskin em {
border-bottom: 3px double;
}

Le champ CSS devrait désormais contenir le code pour trois styles différents :

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

L'Index CSS de W3Schools fournit une liste utile des propriétés CSS que vous pouvez ajouter à votre œuvre.

Vous pouvez aussi consulter la page Thèmes d'Œuvre Publics pour avoir des exemples.

Remarque : Vous devez imbriquer les sélecteurs CSS (par exemple, les éléments .letter, .signature et em) dans le code #workskin pour que votre thème ne soit appliqué qu'au contenu de votre œuvre, c'est-à-dire tout ce qui se trouve entre son descriptif et le bouton "Top" (Haut de page) sur la page de votre œuvre. Cependant, si vous oubliez d'imbriquer votre CSS sous le code #workskin, nous le ferons automatiquement lorsque vous aurez validé votre code.

Enregistrer Votre Nouveau Thème d'Œuvre

Une fois que vous avez vérifié votre CSS et en êtes satisfait-e, sélectionnez le bouton "Submit" (Valider) pour enregistrer votre nouveau thème d'œuvre. Le style ne sera appliqué à aucune œuvre tant que vous n'aurez pas ajouté manuellement le thème à chaque œuvre (nous vous indiquerons comment faire dans la section Appliquer Votre Thème d'Œuvre).

Dès que vous aurez sélectionné "Submit", nous effacerons tout code non pris en charge et nous nous assurerons que tous les sélecteurs sont imbriqués dans un code #workskin.

Éditer Votre Thème d'Œuvre

Un fois votre thème d'œuvre validé, vous pouvez consulter votre code et sélectionner le bouton "Edit" (Editer) pour effectuer des changements.

Appliquer Votre Thème d'Œuvre

Maintenant que vous avez créé un thème d'œuvre, vous pouvez l'appliquer à n'importe quelle œuvre que vous avez publiée sur AO3. Quelques remarques à prendre en compte :

Une œuvre ne peut avoir qu'un seul thème.
Un thème peut être appliqué à plusieurs œuvres.
Si vous effacez un thème, toute œuvre utilisant ce thème perdra son style.
Si vous avez co-créé une œuvre, votre/vos co-créateur-trice(s) peu(ven)t aussi appliquer votre thème d'œuvre à votre œuvre partagée.

Lorsque vous avez décidé sur quelle œuvre vous souhaitez appliquer votre nouvelle mise en forme, rendez-vous sur la page "Edit Work" (Éditer l'Œuvre) de celle-ci. Consultez la section Comment éditer une œuvre si vous avez besoin d'aide.

Dans la section "Associations" (Associations) de la page Edit Work, sélectionnez le titre de votre thème d'œuvre dans la liste "Select Work Skin" (Sélectionner un Thème d'Œuvre).

Si les sélectionneurs CSS de votre thème d'œuvre correspondent aux éléments déjà présents dans le code HTML de votre œuvre (tels que tous les tags

ou ), vous pouvez alors ignorer l'étape suivante et vous rendre directement à la section Enregistrement et Aperçu de Votre Œuvre. Par exemple, si vous voulez que tout le texte en italique de votre œuvre soit doublement souligné, appliquer un thème d'œuvre avec le CSS suivant ajoutera automatiquement un soulignement double à tout texte marqué des tags :

  
#workskin em {
border-bottom: 3px double;
}

Utiliser les Sélecteurs CSS dans le Code HTML de Votre Œuvre

Si vos sélecteurs CSS ne correspondent pas encore au code HTML de votre œuvre, il est temps d'ajouter les tags, classes et id

et au balisage de votre œuvre. Vous pouvez éditer le balisage de votre œuvre en vous rendant dans la section "Work Text" (Texte de l'Œuvre) de la page "Edit Work" (Éditer l'Œuvre). Assurez-vous que le bouton "HTML" soit sélectionné.

Si vous avez entré votre propre CSS dans Saisir Votre Code CSS, ajoutez les sélecteurs CSS correspondants au balisage de votre œuvre. Sinon, reprenons l'exemple précédent.

Dans cet exemple, une œuvre a le balisage suivant :


Cher Billy,
Voici une lettre que je t'ai écrite. J'espère que tu es très impressionné.
Cordialement,
Adelaide

Pour appliquer les trois styles de l'exemple sur le thème d'œuvre, vous devez insérer les éléments et attributs HTML qui correspondent aux sélecteurs de votre CSS :


Pour appliquer le style d'une lettre, tout le bloc de texte doit se trouver sous un tag  avec la classe .letter référencée dans votre thème d'œuvre.
Pour appliquer le style de la signature, ajoutez la classe .signature de votre thème d'œuvre au dernier paragraphe.

Pour appliquer le style souligné, aucun code supplémentaire n'est nécessaire car le sélecteur em que vous avez utilisé dans le CSS de votre thème d'œuvre correspond déjà au tag  du balisage ci-dessus.


Le nouveau balisage devrait correspondre à ceci :


Cher Billy,
Voici une lettre que je t'ai écrite. J'espère que tu es très impressionné.
Cordialement,
Adelaide

Enregistrement et Aperçu de Votre Œuvre

Vous pouvez consulter un aperçu de votre œuvre avec son nouveau style en sélectionnant le bouton "Preview" (Aperçu), ou bien directement enregistrer vos changements en sélectionnant "Post Without Preview" (Publier Sans Aperçu).

Félicitations, votre œuvre est maintenant super chic !

Si vous avez suivi les exemples des sections Saisir Votre Code CSS et Utiliser les Sélecteurs CSS dans le Code HTML de Votre Œuvre, le texte de votre œuvre devrait désormais ressembler à une lettre manuscrite.

Texte de l'exemple du tutoriel en 'Comic Sans MS' entouré d'une fine bordure noire, avec une espace entre la bordure et le texte. 'Adelaide' est un peu plus gros et rouge. Le mot 'très' est souligné deux fois.

Si vous souhaitez appliquer votre thème d'œuvre à plusieurs œuvres simultanément, veuillez consulter la page Comment éditer plusieurs œuvres en même temps ? Nous vous rappelons que vous devrez tout de même insérer les sélecteurs CSS de votre thème dans chaque code HTML de chaque œuvre, si ce n'est pas déjà fait.

Pour plus d'informations sur la publication et l'édition des œuvres, veuillez consulter la FAQ "Publier et Éditer Une Œuvre". Vous pouvez également lire le Tutoriel : Poster une Œuvre sur AO3 afin d'être guidé-e pas à pas.

Où puis-je trouver plus d'informations s'il n'y a pas de réponse à ma question sur cette page ?

Pour plus d'informations sur le fonctionnement des thèmes d'Archive of Our Own - AO3 (Notre Propre Archive), y compris les thèmes de site et les thèmes d'œuvre, veuillez vous référer à la FAQ "Thèmes et Interface de l'Archive". Les réponses à d'autres questions courantes concernant AO3 se trouvent dans la FAQ "AO3". Des questions-réponses à propos de nos Conditions d'Utilisation sont disponibles dans la FAQ "Conditions d'Utilisation".Vous pouvez aussi consulter les Problèmes Connus. Si vous avez encore besoin d'aide, veuillez contacter le Comité Support Technique.

Archive of Our Own^beta