Tutorial: Å opprette en egen layout på et verk FAQ

Archive FAQ > Tutorial: Å opprette en egen layout på et verk

Introduksjon

Denne tutorialen viser deg trinn for trinn hvordan du oppretter en egendefinert layout på et verk på Archive of Our Own – AO3 (Vårt eget arkiv). Når du er ferdig med denne tutorialen, vil du ha opprettet en layout på et verk, brukt CSS for å opprette en egen stil, og ha lagt til layouten på verket ditt.

Denne tutorialen tar utgangspunkt i at:

Du har kjennskap til hvordan man publiserer et verk på AO3. Hvis du ennå ikke har publisert et verk på AO3, ta gjerne en titt på ofte stilte spørsmål om publisering og redigering eller følg denne tutorialen trinn for trinn: Tutorial: Å publisere et verk.
Du har grunnleggende kjennskap til CSS. Hvis du trenger en oversikt over CSS, finner du et gratis grunnkurs hos W3Schools CSS Tutorial.
Du bruker standardlayouten til AO3 (Archive 2.0). Hvis du bruker en egendefinert layout, vennligst vær oppmerksom på at siden kan se annerledes ut hos deg enn hva instruksjonene tilsier.

Dersom du er usikker på hva en egendefinert layout på et verk vil si, eller hvis du foretrekker å bruke en eksisterende layout på verket ditt, vennligst se ofte stilte spørsmål om layouter og arkivgrensesnitt.

Å navigere til Create New Skin (Opprett ny layout)-skjemaet

For å komme i gang, må du først gå til Skins (Layouter)-siden:

Logg inn og gå til skrivebordet ditt ved å klikke på "Hi, (brukernavn)!" og velge "My Dashboard" (Skrivebord) fra menyen, eller ved å klikke på profilbildet ditt.
Velg "Skins" fra menyen til venstre på siden, eller på toppen av siden på mobile enheter.

Du kommer da til siden My Site Skins (Mine sidelayouter), som er en oversikt over dine egendefinerte layouter, og med knapper som gir deg tilgang til dine egendefinerte layouter på verk og offentlige layouter. For å finne ut mer om forskjellen på sidelayouter og layouter på verk, se Hva er en layout?

I denne tutorialen ønsker vi å lage en layout på et verk, så klikk på "My Work Skins" (Mine layouter på verk), deretter "Create Work Skin" (Opprett layout på verk) for å komme til Opprett ny layout-skjemaet.

Å opprette en ny layout på et verk

De eneste feltene som må fylles ut når du oppretter en ny layout ved hjelp av CSS er Type (Type), Title (Tittel), og CSS. Resten av feltene er valgfrie, men vi kommer til å gå gjennom hvert felt i denne tutorialen.

Du har muligheten til å gå tilbake og endre på alle disse feltene etter du har sendt inn skjemaet (se Å redigere layouter på verk for instruksjoner).

Type (obligatorisk felt): Dersom du trykket på "Create Work Skin" (Opprett layout på verk)-knappen på layoutsiden, skal det som standard stå "Work Skin" (Layout på verk) her.
Tittel (obligatorisk felt): Gi layouten din en beskrivende tittel, så du kan skille den fra andre layouter på verk du måtte lage i fremtiden. Layouttitler må være unike, så vi anbefaler å inkludere brukernavnet ditt i tittelen (f.eks. "Homestuck layout (brukernavn)").
Beskrivelse: Hva skal layouten din gjøre? Har den et bestemt tema? Du kan se på noen eksempler på beskrivelser av layouter på sidene Offentlige sidelayouter eller Offentlige layouter på verk.
Last opp en forhåndsvisning: Her kan du laste opp et skjermbilde hvor CSS er i bruk som forhåndsvisning. Du kan komme tilbake og gjøre dette etter du har begynt å bruke layouten på verket.
Aktiver for å gjøre offentlig: Denne funksjonen har blitt vraket. Egendefinerte layouter kan ikke lengre gjøres offentlige, og selv om du krysser av i denne boksen vil det ikke gjøre layouten din offentlig.
CSS: Det siste feltet på skjemaet er der du setter inn din egendefinerte CSS. I de neste avsnittene kommer vi til å forklare hvordan du legger inn CSS, som er grunnlaget for utseendet på verket ditt.

Du vil kanskje legge merke til en knapp øverst med teksten "Use Wizard" (Bruk veiviseren). Denne tar deg med til Site Skin Wizard (Veiviser for sidelayout), som dessverre kun kan brukes til å opprette sidelayouter, og ikke layouter på enkeltverk (Hva er veiviseren for layouter?)

Men ikke bekymre deg – med denne tutorialen finner du fram på null komma niks!

Å bruke CSS

Av sikkerhetshensyn, støtter AO3 kun et begrenset antall CSS-egenskaper og deres verdier. All kode som ikke støttes vil bli fjernet etter at du lagrer endringene dine.

Du kan se den fullstendige listen over CSS-egenskaper som støttes ved å klikke på symbolet med et blått spørsmålstegn ? øverst ved CSS-feltet. Se også Hvilke CSS-egenskaper og verdier kan jeg bruke i egendefinerte layouter? for mer informasjon om skrifttyper, farger, URLer, etc.

Å legge inn CSS

I dette avsnittet skal du fylle inn CSS som bestemmer hvordan verket ditt skal se ut. Du kan gjerne legge inn din egen CSS, eller følge eksemplene under.

La oss si at du har et verk med følgende HTML:

  
Kjære Billy,
Her er et brev jeg har skrevet til deg. Jeg håper du er veldig imponert.
Med vennlig hilsen,
Adelaide

Hvis ingen layouter er aktivert, vil denne teksten se ut som et standard AO3-verk.

Teksten er den samme som eksemplet over, med standard AO3-layout: sanserif skrifttype, svart tekst

Hvis vi ønsker at denne teksten skal ligne et håndskrevet brev, som på bildet under, må vi opprette noen egendefinerte stiler ved hjelp av CSS.

Teksten er i skrifttypen 'Comic Sans MS', omringet av en tynn, svart kant, med mellomrom mellom kanten og teksten. 'Adelaide' er skrevet litt større og i rødt. Ordet 'veldig' er streket under to ganger.

Først, la oss legge på en tynn, svart kant rundt teksten, endre skrifttypen, og gjøre skriften større. For å gjøre dette, legg inn følgende tekst i CSS-feltet layoutsiden:

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

Det neste vi skal gjøre er å legge til mer i CSS-feltet for gi signaturen ("Adelaide") en særegen stil. Fyll inn følgende CSS for å gjøre skriften enda større og for å gjøre signaturen rød:

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

Helt til slutt, for å understreke ordet "veldig", legg til følgende CSS:

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

CSS-feltet ditt burde nå inneholde CSS for tre forskjellige stiler:

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

Hos W3Schools CSS Reference finner du en nyttig liste over flere CSS-egenskaper du kan legge til på verket ditt.

Vi anbefaler også å ta en titt på offentlige layouter på verk for å se noen eksempler på stiler.

Merk: Å neste CSS-selektorene dine (f.eks. elementene .letter, .signature og em) under #workskin-IDen er nødvendig for at stilene kun skal gjelde for innholdet i verket ditt: alt under blurben og over "Top" (Til toppen)-knappen på verkets side. Men, dersom du skulle glemme å neste CSSen under #workskin-ID-en, legger vi dette til automatisk for deg etter du lagrer koden din.

Å lagre den nye layouten på verket ditt

Når du har sett gjennom CSSen din og er fornøyd med koden din, velg "Submit" (Send)-knappen for å lagre den nye layouten din. Layouten vil ikke gjelde for noen verk før du har lagt til layouten manuelt på hvert verk (vi gjennomgår dette i avsnittet Å aktivere layouten på verket ditt).

Når du klikker på "Send", fjerner vi all kode som ikke støttes og sikrer at alle selektorene er nestet under en #workskin-ID.

Å redigere layouten på verket ditt

Rett etter at du har lagret den nye layouten, kan du se gjennom koden din og klikke på "Edit" (Rediger)-knappen for å gjøre endringer.

Å aktivere layouten på verket ditt

Du har opprettet layouten – nå kan du aktivere den på alle verkene dine på AO3. Noen ting å huske på:

Et verk kan bare ha én layout.
Én layout kan brukes på flere verk.
Hvis du sletter en layout, vil alle verk som bruker denne layouten automatisk gå tilbake til arkivets standardlayout.
Hvis du er medskaper på et verk, kan medskaperen(e) din(e) også bruke dine layouter på deres felles verk.

Når du vet hvilke verk du ønsker å bruke den nye formateringen på, gå til verkets Edit Work (Rediger verk)-side. Se Hvordan redigerer jeg et verk? hvis du trenger hjelp til dette.

Under seksjonen Associations (Forbindelser) på "Rediger verk"-siden, velg tittelen på layouten fra lista "Select Work Skin" (Velg layout på verk).

Hvis CSS-selektorene i layouten din korresponderer med elementer som allerede befinner seg i verkets HTML (som alle

- eller -tagger), kan du gjerne hoppe over neste avsnitt og gå direkte til Lagring og forhåndsvisning av verket ditt. For eksempel, hvis du ønsker at all tekst i kursiv i verket ditt skal være understreket to ganger, kan du aktivere en layout med følgende CSS, da den automatisk legger en dobbel understrek til all tekst som er markert med -tagger:

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

Å bruke CSS-selektorene i verkets HTML

Dersom CSS-selektorene dine ikke ennå tilsvarer verkets HTML, er tiden inne for å legge til

- og -taggene, -klassene, og -IDene til verkets formatering. Du kan redigere verkets formatering ved å navigere deg til seksjonen Work Text (Verkets tekst) på siden Edit work (Rediger verk). Forsikre deg om at "HTML"-knappen er valgt.

Hvis du fylte inn din egen CSS under Sett inn CSS, legg til de tilsvarende CSS-selektorene til verkets formatering. Hvis ikke, fortsetter vi der det forrige eksemplet sluttet.

I dette eksemplet har du et verk med følgenede formatering:


Kjære Billy,
Her er et brev jeg har skrevet til deg. Jeg håper du er veldig imponert.
Med vennlig hilsen,
Adelaide

For å aktivere de tre stilene fra det forrige eksemplet, må du legge inn HTML-elementene og egenskapene som tilsvarer selektorene i CSSen din:


For å aktivere bokstavstilen, pakk hele teksten inn i en -tagg med .letter-klassen som er referert til i layouten din.
For å aktivere signaturstilen, legg til.signature
For å aktivere stilen med to understreker trenger du ingen ekstra kode, fordi em-selektoren du brukte i layoutens CSS allerede tilsvarer -taggen i formateringen over.



Den nye formatering din skal nå se slik ut:


Kjære Billy,
Her er et brev jeg har skrevet til deg. Jeg håper du er veldig imponert.
med vennlig hilsen,
Adelaide

Lagring og forhåndsvisning av verket ditt

Du kan se hvordan verket ditt nå ser ut ved å klikke på "Preview" (Forhåndsvisning)-knappen, eller lagre endringene direkte ved å klikke på "Post Without Preview" (Publiser uten forhåndsvisning).

Gratulerer, nå ser verket ditt ganske fancy ut!

Hvis du fulgte eksempelet fra Å legge inn CSS og Å bruke CSS-selektorene i verkets HTML, skal verket ditt nå se ut som et håndskrevet brev.

Verkets tekst fra tutorialens eksempel, med skrifttypen 'Comic Sans MS', omringet av en tynn, svart kant, med mellomrom mellom kanten og teksten. 'Adelaide' er skrevet litt større og i rødt. Ordet 'veldig' er streket under to ganger.

Hvis du ønsker å bruke layouten din på flere verk samtidig, se Hvordan redigerer jeg flere verk samtidig? Vennligst legg merke til at du fortsatt må sette inn layoutens CSS-selektorer i hvert enkelt verks HTML, hvis du ikke har gjort det allerede.

For mer informasjon om å publisere og redigere verk, vennligst se ofte stilte spørsmål om publisering og redigering. Du kan også ta en titt på Tutorial: Å publisere et verk for en trinnvis guide.

Hvor kan jeg finne mer informasjon hvis spørsmålet mitt ikke er besvart her?

For mer informasjon om layouter på Archive of Our Own – AO3 (Vårt eget arkiv), inkludert sidelayouter og offentlige layouter, se layouter og arkivgrensesnitt FAQ. Noen andre ofte stilte spørsmål om AO3 er besvart i en bredere AO3 FAQ. Spørsmål og svar om våre brukervilkår finner du i brukervilkår FAQ. Du kan også ta en titt på kjente problemer. Hvis du trenger hjelp til noe annet, vennligst kontakt support.

Archive of Our Own^beta