Archive FAQ > Tutorial: At oprette et værklayout

Indledning

Denne tutorial vil guide dig skridt for skridt gennem at oprette et værklayout på Archive of Our Own – AO3 (Vores Eget Arkiv). Når du er færdig med denne tutorial, har du oprettet dit eget værklayout, brugt CSS til at lave brugerdefineret formattering og anvendt layoutet til et værk.

Denne tutorial går ud fra, at:

  • Du allerede ved, hvordan man publicerer værker på AO3. Hvis du ikke har publiceret et værk på AO3 før, kan du overveje at kigge på Publicering og redigering FAQ'en eller følge denne Tutorial: At publicere et værk på AO3.
  • Du har en grundlæggende viden om CSS. Hvis du har brug for en gennemgang, er W3Schools CSS Tutorial et gratis begynderkursus.
  • Du tilgår AO3 med standardlayoutet (Archive 2.0). Hvis du bruger et brugerdefineret layout, kan du komme ud for, at dit layout er forskelligt fra instruktionerne.

Hvis du ikke er sikker på, hvad et værklayout er, eller hvis du hellere vil bruge et eksisterende layout til at formatere dit værk, kan du tjekke Layouts og arkivets interface FAQ.

Navigering til Create New Skin (Opret nyt layout)-formularen

For at komme i gang skal du gå til din Skins (Layouts)-side:

  1. Log ind, og åbn dit Dashboard ved at vælge hilsnen "Hi, (brugernavn)!" og vælge "My Dashboard" (Mit Dashboard) fra menuen, eller ved at vælge dit profilbillede.
  2. Vælg "Skins" fra menuen i siden eller øverst, hvis du tilgår fra en mobil enhed.

Dette tager dig til din My Site Skins (Mine site-layouts)-side, som giver dig en liste over dine brugerdefinerede site-layouts og knapper til at tilgå dine brugerdefinerede værklayouts og offentlige layouts. Gå til Hvad er et layout? for mere information på forskellen mellem site-layouts og værklayouts.

I denne tutorial skal vi oprette et nyt værklayout, så vælg "My Work Skins" (Mine værklayouts), derefter "Create Work Skin" (Opret værklayout) for at komme til Opret ny layout-formularen.

Opsætning af et nyt værklayout

De eneste påkrævede felter til at oprette et nyt layout med brugerdefineret CSS er Type-, Title (Titel)- og CSS-feltet. Resten er valgfrie, men vi gennemgår alle felterne i denne tutorial.

Du kan gå tilbage og redigere i alle disse felter efter indsendelse (gå til Redigering af dit værklayout for instruktioner).

Type (påkrævet)
Hvis du valgte "Create Work Skin" (Skab værk-layout)-knappen på Layout-siden, burde denne automatisk stå på "Work Skin" (Værk-layout).
Titel (påkrævet)
Giv dit layout en beskrivende titel, så du kan skelne den fra andre layouts, du måske opretter senere. Titlen skal være unik, så vi anbefaler, at du inkluderer dit brugernavn i titlen (f.eks. "Homestuck-layout (brugernavn)").
Beskrivelse
Hvad kommer dit layout til at gøre? Skal det være et bestemt tema? Du kan tjekke nogle eksempler på beskrivelser på Offentlige site-layouts eller Offentlige værklayouts.
Upload en forhåndsvisning
Her kan du uploade et screenshot af din CSS-formatering i brug som en forhåndsvisning. Du kan vende tilbage til dette, efter du har taget dit værklayout i brug.
Kryds af for at gøre offentligt
Denne funktion er blevet udfaset. Brugerdefinerede layouts kan ikke længere gøres offentlige, så afkrydsning af denne boks har ingen indflydelse på dit layouts tilgængelighed.
CSS
I det sidste felt skal du indsætte din brugerdefinerede CSS. I de næste afsnit forklarer vi, hvordan du indsætter den CSS, der kommer til at udgøre dit værks nye layout.

Du har måske lagt mærke til et knap øverst, der hedder "Use Wizard" (Brug wizard). Denne leder dig til vores Site Skin Wizard (Site-layout wizard), som desværre kun kan bruges til at oprette site-layouts og ikke værklayouts (Hvad er Skin Wizard?)

Men bare rolig—med denne tutorial skal du nok blive en wizard på ingen tid!

Brug af CSS

Af sikkerhedsmæssige årsager kan AO3 kun understøtte et begrænset sæt CSS-egenskaber og deres værdier. Ikke-understøttet kode vil blive fjernet, når du gemmer dine ændringer.

Du kan gennemgå den fulde liste over understøttede CSS-egenskaber ved at vælge det blå spørgsmålstegn ? øverst i CSS-feltet. Du kan også gå til Hvilke CSS-egenskaber og -værdier kan jeg bruge til brugerdefinerede layouts? for mere information om fonts, farver, URL'er osv..

Indsæt din CSS

I dette afsnit skal du indsætte den CSS, der kommer til at styre, hvilken formatering du kan bruge på dine værker. Du kan enten indsætte din egen CSS eller følge med eksemplet herunder.

Lad os sige, at du har et værk med følgende HTML:

  

Kære Billy,


Her er et brev, som jeg har skrevet til dig. Jeg håber, du er meget imponeret.


Kærlig hilsen,


Adelaide

Uden et værklayout ville dette stykke tekst vises med AO3's standard formatering.

Tekst fra eksemplet ovenfor med AO3's standardlayout: sans serif font, sort farve

Hvis vi gerne vil have denne tekst til at ligne et håndskrevet brev, ligesom i billedet herunder, skal vi oprette nogle brugerdefinerede formateringer med CSS.

Tekst i Comic Sans MS font, indrammet af en tynd, sort kant med mellemrum mellem kanten og teksten. 'Adelaide' er en smule større og rød. Ordet 'meget' er understreget to gange.

Lad os først give teksten en tynd, sort kant, ændre fonten og forstørre teksten. For at gøre det skal du tilføje følgende til dit værklayouts CSS-felt:

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

Herefter tilføjer vi den særlige formatering af underskriften ("Adelaide") til CSS-feltet. Indsæt følgende i CSS-feltet for at gøre teksten endnu større og for at gøre underskriften rød:

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

Til sidst understreger vi den fremhævede tekst ("meget") ved at tilføje denne CSS:

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

Dit CSS-felt bør nu indholde CSS for tre forskellige formateringer:

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

W3Schools CSS Reference giver en god liste over flere CSS-egenskaber, du kan tilføje til dit værk.

Vi anbefaler også, at du tjekker vores offentlige værklayouts for eksempler på formatering.

Bemærk: Indlejring af dine CSS-selektorer (f.eks. elementerne .letter, .signature og em) under #workskin id'et er nødvendigt, så dine formateringer kun bliver brugt på dine valgte tekststykker: alt under appetitvækkeren og over "Top"-knappen på dit værks side. Hvis du glemmer, at indlejre din CSS under #workskin id'et, tilføjer vi det for dig automatisk, efter du har indsendt din kode.

Gem dit nye værklayout

Når du har gennemgået din CSS og er tilfreds med resultatet, skal du vælge "Submit" (Indsend)-knappen for at gemme dit nye værklayout. Din formatering bliver ikke anvendt på nogen værker, før du manuelt har tilføjet layoutet til hvert værk (det kommer vi til i Tilføj dit værklayout).

Når du har valgt "Submit", fjerner vi al ikke-understøttet kode og sørger for, at alle selektorer er indlejret under et #workskin id.

Redigering af dit værklayout

Umiddelbart efter du har indsendt dit nye værklayout, kan du gennemgå koden og vælge "Edit" (Redigér)-knappen for at foretage ændringer.

Tilføj dit værklayout

Du har oprettet et værklayout, og nu kan du tilføje dette layout til ethvert af dine værker på AO3. Nogle ting at bemærke:

  • Et værk kan kun bruge ét layout.
  • Ét layout kan bruges på flere værker.
  • Hvis du sletter et layout, fjernes formateringen på alle værker, der bruger layoutet.
  • Hvis du er medskaber på et værk, kan din(e) medskaber(e) også tilføje dit værklayout til jeres fælles værk.

Når du ved, hvilket værk du vil tilføje layoutet til, skal du gå til dit værks Edit Work (Redigér værk)-side. Gå til Hvordan redigerer jeg et værk?, hvis du har brug for instrukser.

I Associations (Forbindelser)-sektionen på Edit Work-siden skal du vælge dit værklayouts titel fra "Select Work Skin" (Vælg værklayout)-listen.

Hvis CSS-selektorerne i dit værklayout svarer til elementer, der allerede findes i dit værks HTML (for eksempel

eller

tags), kan du bare springe denne sektion over og gå direkte til Gem og gennemse dit værk. Hvis du for eksempel ville give al kursiv tekst i dit værk en dobbelt understregning, vil understregningen automatisk blive tilføjet, når du bruger et værklayout med følgende CSS, til al tekst, der er markeret med

tags:

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

Brug af CSS-selektorer i dit værks HTML

Hvis dine CSS-selektorer ikke svarer til dit værks HTML, er det tid til at tilføje dine

og tags, klasser og id'er til dit værks struktureringskode. Du kan redigere dit værks struktureringskode ved at gå til Work Text (Værkets tekst)-sektionen på Edit Work (Redigér værk)-siden. Sørg for, at "HTML"-knappen er valgt.

Hvis du indsatte din egen CSS i Indsæt din CSS, skal du nu tilføje de tilsvarende CSS-selektorer til dit værks struktureringskode. Ellers fortsætter vi, hvor vi slap med det tidligere eksempel.

I dette eksempel har du et værk med følgende struktureringskode:



Kære Billy,


Her er et brev, som jeg har skrevet til dig. Jeg håber, du er meget imponeret.


Kærlig hilsen,


Adelaide

For at tilføje de tre formateringer fra eksemplet skal du indsætte de HTML-elementer og -attributter, der svarer til selektorerne i din CSS:

  1. For at tilføje brev-formateringen skal du pakke hele teksten ind i et
    tag med .letter klassen, der refereres i dit værklayout.
  2. For at tilføje underskrift-formateringen skal du tilføje .signature klassen fra dit værklayout til den sidste linje.
  3. For at tilføje understregningen behøver du ikke at tilføje mere kode, fordi em selektoren, du brugte i dit værklayouts CSS, allerede svarer til tagget i struktureringskoden ovenfor.

    4. Din nye struktureringskode burde nu se således ud:

    

    

    Kære Billy,
    

    Her er et brev, som jeg har skrevet til dig. Jeg håber, du er meget imponeret.
    

    Kærlig hilsen,
    

    Adelaide

Gem og gennemse dit værk

Du kan nu gennemse dit nyligt formaterede værk ved at vælge "Preview" (Forhåndsvisning)-knappen eller gemme dine ændringer med det samme ved at vælge "Post Without Preview" (Publicér uden forhåndsvisning).

Tillykke, nu er dit værk fancy!

Hvis du fulgte eksemplet fra Indsæt din CSS og Brug af CSS-selektorerne i dit værks HTML, burde dit værks tekst nu ligne et håndskrevet brev.

Tekst fra denne tutorials eksempel i 'Comic Sans MS'-font, indrammet af en tynd, sort ramme med mellemrum mellem ramme og tekst. 'Adelaide' er skrevet en smule større og i rød. Ordet 'very' er understreget to gange

Hvis du gerne vil tilføje dit værklayout til flere værker på én gang, skal du gå til Hvordan redigerer jeg flere værker på én gang? Bemærk, at du stadig skal indsætte dit layouts CSS-selektorer i hvert værks HTML individuelt, hvis du ikke allerede har gjort det.

Gå til Publicering og redigering FAQ for mere information om at publicere og redigere værker. Du kan også tjekke vores Tutorial: Publicér et værk for en trin-for-trin guide.

Hvor kan jeg finde mere information, hvis mit spørgsmål ikke er besvaret her?

For mere information om layouts på Archive of Our Own - AO3 (Vores Eget Arkiv), inklusive site-layouts og offentlige layouts, kan du gå til Layouts og arkivets interface FAQ. Nogle andre ofte stillede spørgsmål om AO3 er besvaret i den bredere AO3 FAQ. Spørgsmål og svar om vores brugsbetingelser kan findes i Brugsbetingelser FAQ. Du kan også kigge på vores Kendte problemer. Hvis du har brug for mere hjælp, kan du kontakte Support.