Archive of Our Own ^beta

Lyhyesti

Tämä tutoriaali opastaa luomaan teeman teokselle Archive of Our Own – AO3 (Oma arkisto) -sivustolla. Käytyäsi tutoriaalin läpi olet luonut oman teeman teokselle, määrittänyt omat tyylisi CSS:llä ja ottanut teeman käyttöön haluamassasi teoksessa.

Tarvitset tutoriaalin seuraamiseen seuraavat pohjatiedot:

• Olet aiemmin luonut teoksia AO3:een. Jos et vielä ole luonut teosta AO3:een, suosittelemme tutustumaan Julkaiseminen ja muokkaaminen -UKK:hon tai käymällä läpi ohjeen Tutoriaali: Teoksen julkaiseminen AO3-sivustolla.
• Tunnet CSS:n perusteet. Jos tarvitset yleiskatsauksen CSS:ään, W3Schoolsin CSS-tutoriaali tarjoaa ilmaisen peruskurssin.
• Käytät sivustoa oletusteemalla (Archive 2.0). Jos käytät kustomoitua teemaa, huomaa, että sivuston ulkoasu voi näyttää erilaiselta kuin tässä tutoriaalissa.

Jos et ole varma, mikä teoksen teema on, tai jos haluat lisätä teokseesi valmiin teeman, tutustu Teemat ja käyttöliittymä -UKK:hon.

Create New Skin (Luo uusi teema) -lomakkeeseen siirtyminen

Aloita siirtymällä Skins (Teemat) -sivulle:

1. Kirjaudu sisään ja mene työpöydällesi valitsemalla tervehdys "Hi, (käyttäjätunnus)!" ja avautuvasta valikosta "My Dashboard" (Työpöytäni), tai valitsemalla profiilikuvasi.
2. Valitse sivun laidasta tai mobiililaitteella yläreunasta löytyvästä valikosta "Skins".

Siirryt My Site Skins (Teemani) -sivulle, joka listaa omat teemasi ja tarjoaa painikkeet, joiden kautta pääset laatimiisi teosten teemoihin sekä valmisteemoihin. Palauta mieleesi valmisteemojen ja teosten teemojen ero kysymyksestä Mikä on teema?

Tässä tutoriaalissa haluamme luoda uuden teeman teokselle, joten valitse "My Work Skins" (Teosten teemani) ja sitten "Create Work Skin" (Luo teoksen teema) siirtyäksesi uuden teeman luontilomakkeelle.

Uuden teoksen teeman valmistelu

Jotta voit luoda uuden teeman omalla CSS:lläsi, sinun täytyy täyttää vain kentät Type (Tyyppi), Title (Otsikko) ja CSS. Muut kentät ovat vapaaehtoisia, mutta käymme tässä tutoriaalissa läpi jokaisen kentän.

Tallennuksen jälkeen voit palata muokkaamaan mitä tahansa näistä kentistä (ohjeet löydät kohdasta Teoksen teeman muokkaaminen).

Type (Tyyppi, pakollinen)

Jos valitsit Teemat-sivulta painikkeen "Create Work Skin" (Luo teoksen teema), oletusarvo on "Work Skin" (Teoksen teema).

Title (Otsikko, pakollinen)

Anna teemallesi kuvaava otsikko, jotta erotat sen muista luomistasi teosten teemoista. Teemojen otsikoiden on oltava ainutlaatuisia, joten suosittelemme sisällyttämään otsikkoon käyttäjänimesi (esim. "Homestuck-teema [käyttäjänimi]").

Description (Kuvaus)

Mitä teemasi tekee? Onko sillä tiettyjä ominaisuuksia? Voit katsoa vinkkejä kuvauksiin valmiista sivustoteemoista tai valmiista teosten teemoista.

Upload a preview (Lataa esikatselu)

Voit ladata esikatselua varten näyttökaappauksen CSS-tyyleistäsi toiminnassa. Voit palata tekemään tämän kun olet alkanut käyttää teoksen teemaa.

Apply to make public (Hae julkaisua)

Tämän ominaisuuden käyttöä ei enää suositella. Omia teemoja ei enää voi asettaa julkiseksi, eikä tämän valinnan tekeminen vaikuta teemasi yksityisyyteen..

CSS

Lomakkeen viimeinen kenttä on paikka omalle CSS:llesi. Seuraavissa kohdissa selitämme, kuinka syötät CSS:n, josta tulee teoksesi uusi tyyli.

Saatoit huomata ylhäällä painikkeen "Use Wizard" (Käytä ohjattua toimintoa). Se johtaa Site Skin Wizardiin (Ohjattu sivustoteeman luominen), jota voi valitettavasti käyttää vain sivustoteemojen, ei teosten teemojen luomiseen. (Mikä on ohjattu teeman luominen?)

Ei kuitenkaan hätää—tämä tutoriaali tekee sinusta tuossa tuokiossa teemavelhon!

CSS:n käyttö

Turvallisuussyistä AO3 voi tukea ainoastaan rajoitettuja CSS-määreitä ja -arvoja. Kun tallennat tekemäsi muutokset, ei-tuetut ominaisuudet poistetaan koodista.

Löydät listan tuetuista CSS-määreistä valitsemalla sinisen kysymysmerkki-ikonin ? CSS-kentän päältä. Lisää tietoja fonteista, väreistä, URLeista yms. löydät myös kysymyksestä Mitä CSS-määreitä ja -arvoja voin käyttää omissa teemoissani?

CSS:n syöttäminen

Tässä osassa syötät CSS:n, joka tyylittelee teoksesi. Voit käyttää omaa CSS:ääsi tai seurata esimerkkiä.

Oletetaan, että sinulla on teos, joka sisältää seuraavan HTML:n:

  
Rakas Billy,
Tässä on kirje, jonka kirjoitin sinulle. Toivottavasti olet tosi vaikuttunut.
Terveisin
Adelaide

Jos mitään teoksen teemaa ei oteta käyttöön, teksti näytetään AO3:n oletustyylillä.

Jos haluamme tekstin jäljittelevän käsin kirjoitetun kirjeen tyyliä kuten alla olevassa kuvassa, meidän on luotava oma tyylimme CSS:llä.

Annetaan tekstille ensin ohut musta reunus, vaihdetaan kirjasin ja kasvatetaan kirjasimen kokoa. Voit tehdä sen lisäämällä seuraavan koodin teoksen teeman CSS-kenttään:

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

Lisätään sitten koodia CSS-kenttään allekirjoituksen ("Adelaide") tyylittelyksi. Lisää seuraava CSS kasvattaaksesi fontin kokoa ja muuttaaksesi allekirjoitus punaiseksi:

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

Lopuksi lisää viimeinen CSS-määritys alleviivataksesi korostetun tekstin ("tosi"):

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

CSS-kenttäsi sisältää nyt kolmen erillisen määrityksen CSS:t:

  
#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 (englanniksi) tarjoaa kätevän listan muista CSS-määritteistä, joita voit lisätä teokseesi.

Suosittelemme tutustumaan myös julkisiin teosten teemoihin ja etsimään niistä tyyliesimerkkejä.

Huomaa: Sinun on viitattava CSS-selektoreihisi (esim. .letter, .signature ja em) käyttäen niiden yläelementtinä #workskin-id:tä, jotta tyylejäsi käytetään vain teoksen sisällön yhteydessä: teoksen tietojen ja "Top" (Yläreunaan) -painikkeen välissä teoksen sivulla. Jos kuitenkin unohdat käyttää #workskin -id:tä, lisäämme sen tallennuksen yhteydessä automaattisesti.

Teoksen teeman tallentaminen

Kun olet tarkistanut CSS:si ja olet tyytyväinen, valitse "Submit" (Lähetä) -painike tallentaaksesi laatimasi teoksen teeman. Tyylejäsi ei liitetä mihinkään teokseen ennen kuin olet manuaalisesti liittänyt teeman jokaiseen haluamaasi teokseen (käymme tämän läpi kohdassa Teoksen teeman käyttöönotto).

Kun olet valinnut "Submit"-painikkeen, poistamme ei-tuetut koodit ja varmistamme, että kaikki selektorit sijaitsevat #workskin-id:n alla.

Teoksen teeman muokkaaminen

Kun olet tallentanut uuden teoksen teeman, voit katsella koodiasi ja valita "Edit" (Muokkaa) -painikkeen tehdäksesi muutoksia.

Teoksen teeman käyttöönotto

Olet luonut teoksen teeman ja nyt voit ottaa sen käyttöön missä tahansa teoksessa, jonka olet luonut AO3:een. Pidä mielessäsi seuraavat asiat:

• Teos voi käyttää vain yhtä teemaa.
• Samaa teemaa voi käyttää useassa teoksessa.
• Jos poistat teeman, kaikki sitä käyttäneet teokset menettävät tyylinsä.
• Jos teoksellasi on muitakin tekijöitä, myös muut tekijät voivat ottaa luomasi teeman käyttöön yhteisessä teoksessanne.

Kun olet päättänyt, missä teoksessa haluat ottaa uudet tyylisi käyttöön, mene teoksesi Edit Work (Muokkaa teosta) -sivulle. Tutustu kysymykseen Miten voin muokata teosta?, jos tarvitset ohjeita.

Valitse teoksen teeman otsikko "Select Work Skin" (Valitse teoksen teema) -listasta muokkaussivun Associations (Yhteydet) -osasta.

Jos teoksen teemassasi käytetyt CSS-selektorit sopivat jo yhteen teoksesi HTML:n kanssa (kuten

- tai

-tagit), voit ohittaa seuraavan kohdan ja mennä suoraan kohtaan Teoksen tallennus ja esikatselu. Jos haluat esimerkiksi lisätä kaikkeen kursivoituun tekstiin kaksinkertaisen alleviivauksen, seuraavan CSS:n sisältämän teoksen teeman käyttöönotto lisäisi automaattisesti kaksinkertaisen alleviivauksen kaikkeen tekstiin, joka on merkitty

-tageilla:

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

CSS-selektoreiden ja HTML:n yhteensovitus

Jos CSS-selektorisi eivät vielä ole yhteensopivia teoksesi HTML:n kanssa, nyt on aika lisätä

Rakas Billy,
Tässä on kirje, jonka kirjoitin sinulle. Toivottavasti olet tosi vaikuttunut.
Terveisin
Adelaide

Teoksen tallennus ja esikatselu

Voit esikatsella tyyliteltyä teostasi valitsemalla "Preview" (Esikatselu) -painikkeen tai tallentaa muutoksesi suoraan valitsemalla "Post Without Preview" (Julkaise ilman esikatselua).

Onneksi olkoon, teoksesi on nyt tyylikäs!

Jos seurasit esimerkkiä kohdissaCSS:n syöttäminen ja CSS-selektoreiden ja HTML:n yhteensovitus, teoksesi tekstin pitäisi nyt muistuttaa käsin kirjoitettua kirjettä.

Jos haluat ottaa teoksen teeman käyttöön useammassa teoksessa samanaikaisesti, tutustu kysymykseen Miten voin muokata useita teoksia yhtä aikaa? Huomaa, että sinun täytyy silti päivittää teosten HTML:t vastaamaan teeman CSS-selektoreita yksi kerrallaan, ellet ole vielä tehnyt sitä.

Lisää tietoa teosten julkaisusta ja muokkauksesta löydät Julkaiseminen ja muokkaaminen -UKK:sta. Sinua voi kiinnostaa myös Tutoriaali: Teoksen julkaiseminen AO3-sivustolla, joka sisältää yksityiskohtaiset ohjeet.

Mistä löydän lisätietoa, jos en löytänyt täältä vastausta kysymykseeni?

Lisätietoa teemoista AO3:ssa, sisältäen sivustoteemat ja valmiit teemat, löydät Teemat ja käyttöliittymä -UKK:sta. Joihinkin usein kysyttyihin kysymyksiin AO3:sta löydät vastaukset laajemmasta AO3 -UKK:sta. Käyttöehtoja koskeviin kysymyksiin löydät vastaukset Käyttöehdot -UKK:sta. Kannattaa myös vilkaista tunnettujen ongelmien sivua. Jos tarvitset enemmän apua, ota yhteyttä käyttäjätukeen.