Tutorial: Een Werkskin creëren FAQ

Archive FAQ > Tutorial: Een Werkskin creëren

Inleiding

Deze tutorial zal je stap voor stap uitleggen hoe je een werkskin creëert op het Archive of Our Own – AO3 (Ons Eigen Archief). Op het einde van deze tutorial, zal je je eigen werkskin gecreëerd hebben, CSS gebruikt hebben om gepersonaliseerde stijlen te definiëren en de werkskin op je gekozen werk hebben toegepast.

Deze tutorial gaat er vanuit dat:

Je weet hoe je een werk post op het AO3. Als je nog geen werk gepost hebt op het AO3, overweeg dan om de Veelgestelde vragen over Posten en Bewerken te bezoeken of volg de stap voor stap uitleg in Tutorial: Een Werk Plaatsen op het AO3.
Je een basiskennis hebt van CSS. Als je een overzicht van CSS wilt, biedt de W3Schools CSS Tutorial gratis basiscursus.
Je de website bezoekt met de default skin (Archive 2.0). Als je een gepersonaliseerde skin gebruikt, kan jouw site layout verschillen van die in de instructies.

Als je niet zeker bent wat een werkskin is, of als je ervoor kiest om een bestaande skin te gebruiken om je werk te stylen, ga dan naar de Veelgestelde vragen over Skins en de Archiefinterface.

Gaan naar het Create New Skin (Creëer een Nieuwe Skin) formulier

Om te starten, ga eerst naar jouw Skins (Skins) pagina:

Log in en ga naar jouw Dashboard door de begroeting "Hi, (Gebruikersnaam)!" te selecteren en te kiezen voor "My Dashboard" (Mijn Dashboard) van het menu, of door jouw profielfoto te selecteren.
Selecteer "Skins" in het menu aan de zijkant van de pagina of bovenaan op een mobiel toestel.

Dit brengt je naar jouw My Site Skins (Mijn Siteskins) pagina, die jouw persoonlijke siteskins oplijst en knoppen voorziet om naar jouw gepersonaliseerde werkskins en publieke skins te gaan. Om het verschil tussen siteskins en werkskins op te frissen, ga naar Wat is een skin?

Voor deze tutorial zullen we een nieuwe werkskin creëren, selecteer dus "My Work Skins" (Mijn Werkskins), daarna "Create Work Skin" (Creëer een Werkskin) om naar het Creëer een Nieuwe Skin formulier te gaan.

Een Nieuwe Werkskin Opmaken

De enige vereiste velden voor het creëren van een nieuwe skin met behulp van gepersonaliseerde CSS zijn de Type (Type), Title (Titel) en CSS velden. De rest van de velden zijn optioneel, maar we zullen ze allemaal bespreken in deze tutorial.

Na het indienen van het formulier zul je nog kunnen terugkeren en elk van deze velden aanpassen (zie Jouw Werkskin Aanpassen voor instructies).

Type (vereist): Als je de "Create Work Skin" (Creëer een Werkskin) knop selecteerde op de skinspagina, zou dit veld standaard "Work Skin" (Werkskin) moeten zijn.
Titel (vereist): Geef jouw skin een beschrijvende titel zodat je hem kunt onderscheiden van andere skins die je in de toekomst creëert. Skintitels moeten uniek zijn, dus we raden aan om je gebruikersnaam in de titel te verwerken (bv. "Homestuck Skin (gebruikersnaam)").
Beschrijving: Wat doet jouw skin? Is er een specifiek thema? Je kunt inspiratie halen uit een aantal voorbeeld skinbeschrijvingen op de Publieke Siteskins of de Publieke Werkskins paginas.
Upload een preview: Hier kan je een screenshot van jouw CSS stijl in gebruik uploaden als een preview. Je kunt terugkomen dit invullen nadat je de werkskin in gebruik genomen hebt.
Aanvraag om publiek te maken: Deze mogelijkheid is verouderd. Gepersonaliseerde skins kunnen niet meer publiek gemaakt worden op dit moment en deze checkbox aanklikken verandert de privacy van jouw skin niet.
CSS: Het laatste veld in het Creëer een Nieuwe Skin formulier is waar je jouw gepersonaliseerde CSS invult. In de volgende secties, zullen we uitleggen hoe je CSS schrijft die jouw werk zal stylen.

Je merkt misschien een knop bovenaan gelabeld "Use Wizard" (Gebruik Wizard). Deze leidt naar de Site Skin Wizard (Siteskin Wizard), die helaas alleen kan gebruikt worden om siteskins te creëren en geen werkskins (Wat is de Skin Wizard?)

Maar maak je geen zorgen—met deze tutorial zal je in geen tijd zelf een tovenaar zijn!

CSS gebruiken

Om veiligheidsreden kan het AO3 slechts een gelimiteerde set van CSS eigenschappen en waarden ondersteunen. Alle andere code zal verwijdert worden nadat je jouw wijzigingen opgeslagen hebt.

Je kan de volledige lijst van ondersteunde CSS eigenschappen nakijken door het blauwe vraagteken te selecteren ? bovenaan het CSS veld. Je kan ook Welke CSS eigenschappen en waarden kan ik gebruiken in gepersonaliseerde skins? nakijken voor bijkomende informatie over lettertypes, kleuren, URLs, etc.

Jouw CSS schrijven

In deze sectie zal je de CSS schrijven die zal bepalen welke stijl er aan jouw werk(en) kan toegevoegd worden. Voel je vrij om jouw eigen CSS toe te voegen, of volg mee met onderstaand voorbeeld..

Stel dat je een werk hebt met volgende HTML:

  
Beste Billy,
Hier is een brief die ik aan jou geschreven heb. Ik hoop dat je heel erg onder de indruk bent.
Met vriendelijke groeten,
Adelaide

Zonder werkskin zou deze tekst worden weergegeven met de default AO3 werkstyling.

Tekst van bovenstaand voorbeeld met default AO3 styling: sans serif lettertype, zwarte kleur

Als we deze tekst willen doen lijken op een handgeschreven tekst, zoals in onderstaande afbeelding, zullen we een gepersonaliseerde styling moeten creëren met CSS.

Tekst in 'Comic Sans MS' lettertype, in een kader met een dunne zwarte rand, met een marge tussen het kader en de tekst. 'Adelaide' is iets groter en rood. De woorden 'heel erg' zijn twee keer onderlijnt.

Laat ons eerst deze tekst een dun zwart kader geven, het lettertype aanpassen en de lettergrootte vergroten. Om dit te doen , voeg de volgende code toe aan het CSS veld van jouw werkskin:

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

Daarna voegen we de code toe aan het CSS veld om de handtekening ("Adelaide") speciale styling te geven. Schrijf volgende CSS om de lettergrootte nog meer te vergroten en de handtekening een rode kleur te geven:

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

Tot slot om de benadrukte tekst te onderlijnen ("heel erg"), voeg deze laatste CSS toe:

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

Jouw CSS veld zou nu code moeten bevatten voor drie verschillende stijlen:

  
#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;
}

De W3Schools CSS Referentie voorziet een handige lijst van overige CSS eigenschappen die je kan toevoegen aan je werk.

We raden ook aan de Publieke Werkskins te bekijken voor stijlvoorbeelden.

Nota: Jouw CSS selectoren nesten (bv. de .letter, .signature en em elementen) onder het #workskin id is noodzakelijk zodat jouw stijlen enkel worden toegepast aan de inhoud van jouw gekozen werk: alles beneden de werksamenvatting en boven de "Top" (Naar Boven) knop op jouw werkpagina. Als je echter vergeet om je CSS te nesten onder het #workskin id, zullen we dit automatisch toevoegen voor jou nadat je jouw code indient..

Jouw Nieuwe Werkskin Opslaan

Nadat je jouw CSS nagekeken hebt en tevreden bent met je code, selecteer dan de "Submit" (Dien In) knop om jouw nieuwe werkskin op te slaan. Jouw stijl zal niet toegepast worden op een werkt tot je de skin manueel hebt toegevoegd aan elk werk (dit wordt beschreven in Jouw Werkskin Gebruiken).

Wanneer je "Dien in" selecteert, zullen we alle code die niet ondersteund is verwijderen en ervoor zorgen dat alle selectoren genest zijn onder een #workskin id.

Jouw Werkskin Aanpassen

Onmiddellijk na het creëren van jouw nieuwe werkskin kan je jouw code nakijken en de "Edit" (Pas Aan) knop selecteren om aanpassingen te maken.

Jouw Werkskin Gebruiken

Je hebt de werkskin gecreëerd—nu kan je deze toepassen op elk werk dat je hebt op het AO3. Enkele dingen om mee rekening te houden:

Een werk kan maar een skin gebruiken.
Dezelfde skin kan toegepast worden op meerdere werken.
Als je de skin verwijdert, zullen alle werken die deze skin gebruiken hun styling verliezen.
Als je een werk co-gecreëerd hebt, kun(nen) jouw medeproducent(en) jouw werkskin ook toevoegen aan jullie gedeelde werken.

Als je weet voor welk werk je je nieuwe formattering wilt gebruiken, ga dan naar de Edit Work (Werk Aanpassen) pagina van jouw werk. Bezoek Hoe pas ik een werk aan? als je instructies nodig hebt.

In the Associations (Associaties) sectie van de Werk Aanpassen pagina, selecteer jouw de titel van jouw werkskin in de "Select Work Skin" (Selecteer Werkskin) lijst.

Als de CSS selectoren in jouw werkskin overeenkomen met elementen die al in de HTML van jouw werk aanwezig zijn (zoals alle

of tags), voel je dan vrij om de volgende sectie over te slaan en direct naar Jouw Werk Opslaan en Previewen. Als je bijvoorbeeld alle tekst in italics in jouw werk een dubbele onderlijning wilt geven, dan zou het toepassen van een werkskin met volgende CSS automatisch een dubbele onderlijning toevoegen aan alle tekst die gemarkeerd is met tags:

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

CSS Selectoren Gebruiken in de HTML van Jouw Werk

Als jouw CSS selectoren nog niet overeenkomen met de HTML van jouw werk, dan is nu het moment om jouw

en tags, klasses en ids toe te voegen aan de markup van het werk. Je kan de markup van jouw werk aanpassen op de Work Text (Werktekst) sectie van jouw Edit Work (Werk Aanpassen) pagina. Controleer dat de "HTML" knop geselecteerd is.

Als je jouw eigen CSS schreef in Jouw CSS Schrijven, voeg dan nu de corresponderende CSS selectoren toe aan de markup van jouw werk. Anders gaan we nu verder waar het vorige voorbeeld stopte.

In dit voorbeeld hebben we een werk met de volgende markup:


Beste Billy,
Hier is een brief die ik aan jou geschreven heb. Ik hoop dat je heel erg onder de indruk bent.
Met vriendelijke groeten,
Adelaide

Om de drie stijlen van het werkskin voorbeeld toe te passen, zal je de HTML elementen en attributen die overeenkomen met de selectoren in de CSS moeten toevoegen:


Om de stijl van de brief toe te voegen, kader je de volledige blok tekst in een  tag met de  .letter klasse waar naar verwezen wordt in jouw werkskin.
Om de stijl van de handtekening aan te passen, voeg de  .signature klasse van jouw werkskin toe aan de laatste paragraaf.

Om de onderlijning toe te voegen is er geen additionele code vereist, omdat de em selector die je gebruikt hebt in jouw werkskin al overeenkomt met het  tag in de bovenstaande markup.


Jouw nieuwe markup zou er nu als volgt moeten uitzien:


Beste Billy,
Hier is een brief die ik aan jou geschreven heb. Ik hoop dat je heel erg onder de indruk bent.
Met vriendelijke groeten,
Adelaide

Jouw Werk Opslaan en Previewen

Je kan jouw pas gestyled werk previewen door de "Preview" (Preview) knop te selecter, of direct de aanpassingen opslaan als je "Post Without Preview" (Post Zonder Preview) selecteert.

Proficiat, jouw werk is nu mooi!

Als je meegevolgd hebt met het voorbeeld in Jouw CSS Schrijven en CSS Selectoren Gebruiken in de HTML van Jouw Werk, zou de tekst van jouw werk nu op een handgeschreven brief moeten lijken.

Als je jouw werkskin op meerdere werken tegelijk wilt toepassen, navigeer dan naar Hoe pas ik meerdere werken tegelijk aan? Hou er rekening mee dat je nog altijd voor ieder werk de specifieke CSS selectoren van jouw werk moet toevoegen in de HTML, als je dat nog niet gedaan zou hebben.

Voor meer informatie over het posten en bewerken van werken, ga naar de Veelgestelde vragen over Posten en Bewerken. Je vind misschien ook de Tutorial: Een Werk Plaatsen op het AO3 interessant, deze geeft een stap voor stap beschrijving.

Waar kan ik meer informatie krijgen als mijn vraag hier niet beantwoord is?

Voor meer informatie over skins op the Archive of Our Own - AO3 (Ons Eigen Archief), waaronder siteskins en publieke skins, ga naar Veelgestelde vragen over Skins en de Archiefinterface. Sommige veelgestelde vragen over AO3 zijn beantwoord in de meer uitgebreide sectie Veelgestelde Vragen over AO3. Vragen en antwoorden over onze Servicevoorwaarden kunnen worden gevonden in Veelgestelde Vragen over Servicevoorwaarden. Misschien wil je ook onze pagina Bekende Problemen bezoeken. Als je meer hulp nodig hebt, contacteer dan Support.

Archive of Our Own^beta