Archive of Our Own ^beta

Úvodem

Tento tutoriál vás krok za krokem provede vytvořením vzhledu vaší práce na Archive of Our Own – AO3 (Našem vlastním archivu). Do jeho konce vytvoříte svůj vzhled pro svou práci, vyzkoušíte si CSS pro vytvoření vlastních stylů, a použijete vámi vytvořený vzhled pro některou z vašich prací.

Tento návod předpokládá, že:

• víte, jak nahrát práci na AO3. Pokud s tímto ještě zkušenost nemáte, zkuste navštívit FAQ - často kladené otázky k publikování a upravování, nebo si to zkuste v tutoriálu, který vás krok za krokem provede nahráváním prací.
• máte základní znalost CSS. Pro informace o CSS navštivte stránku s bezplatným základním kurzem W3Schools CSS Tutorial.
• jste otevřeli AO3 v základním vzhledu (Archive 2.0). Jestli používáte vlastní vzhled stránek AO3, berte ohled na to, že vaše stránka se může lišit od instrukcí v tutoriálu.

Jestli si nejste jistí, co přesně znamená vzhled práce, nebo byste chtěli editovat svou práci v již existujícím vzhledu, podívejte se na FAQ - často kladené otázky ke vzhledům.

Jak se dostat k formuláři Create New Skin (Vytvořit nový vzhled)

Nejdříve otevřete stránku Skins (Vzhledy):

1. Přihlaste se a vstupte do svého Panelu uživatele kliknutím na pozdrav "Ahoj, (uživatelské jméno)!" a pak zvolením "My Dashboard" (Panel uživatele), nebo kliknutím na svůj profilový obrázek.
2. Z bočního menu vyberte "Vzhledy". Na mobilních zařízeních najdete toto menu v horní části stránky.

Toto vás dovede na stránku My Site Skins (Vzhled stránky), která obsahuje seznam vašich vlastních vzhledů a také odkazy na vaše vzhledy prací a na veřejné vzhledy. Pro rozdíly mezi vzhledem stránky a vzhledem práce se podívejte na článek Co je vzhled?

V tomto návodu budeme vytvářet nový vzhled, vyberte proto "My Work Skins" (Moje vzhledy prací), a pak "Create Work Skin" (Vytvořit vzhled práce) abyste se dostali k formuláři pro vytvoření nového vzhledu.

Příprava nového vzhledu práce

Vytvoření vlastního stylu v CSS vyžaduje tři povinná políčka: Type (Typ), Title (Název), a CSS. Ostatní políčka jsou volitelná, ale my je v tomto návodu projdeme všechna.

Po nahrání vzhledu se budete stále moci vrátit a změnit co je potřeba (pro instrukce se podívejte na Upravování vašeho vzhledu práce).

Typ (povinné)

Jestli jste ze stránky Vzhledy zvolili "Create Work Skin" (Vytvořit vzhled práce), toto políčko by mělo automaticky uvádět "Work Skin" (Vzhled práce).

Název (povinné)

Dejte svému vzhledu název, který vám umožní rozlišit jej od vzhledů, které vytvoříte v budoucnosti. Názvy vzhledů musí být jedinečné, doporučujeme proto přidat k názvu vaše uživatelské jméno (například "Homestuck Skin (uživatelské jméno)").

Popis

Co váš vzhled obnáší? Má nějaký specifický námět? Pro inspiraci se můžete podívat na příklady popisků vzhledů ve Veřejných vzhledech stránek nebo Veřejných vzhledech prací.

Nahrat náhled

Tady můžete nahrát snímek obrazovky s vašimi CSS příkazy v akci. Tento krok můžete při tvorbě nového vzhledu vynechat a vrátit se k němu po tom, co svůj nový vzhled začnete používat.

Požádat o zveřejnění

Tato funkce byla zastavena a vlastní vzhledy momentálně nemůžou být nastaveny jako veřejné. Zaškrtnutí tohoto políčka nezmění soukromé nastavení vašeho vzhledu.

CSS

Do posledního políčka v tomto formuláři importujete své vlastní CSS příkazy. Jak vložit CSS, které bude formovat nový styl vaší práce, se dozvíte v následujících sekcích.

Možná jste si všimli odkazu "Use Wizard" (Použít průvodce) v horní části stránky. Tento odkaz vás zavede na stránku Site Skin Wizard (Průvodce vzhledem stránky). Bohužel funguje pouze pro vzhled stránky, a ne vzhled práce. (Co je Průvodce Vzhledem?)

Nemějte obavy - s tímto tutoriálem budete profíky za chviličku!

Používání CSS

Kvůli bezpečnosti podporuje AO3 jenom omezený počet CSS hodnot. Jestli použijete nepodporovaný kód, bude po uložení změn odstraněn.

Seznam všech podporovaných CSS hodnot zobrazíte kliknutím na modrý otazník ? v horní části pole pro CSS. Taky se můžete podívat na článek Jaké hodnoty CSS můžu použít ve vlastním vzhledu? pro více informací o fontech, barvách, URL adresách atd.

Vložení vašeho CSS

V této sekci vložíte svůj CSS kód, který určí styl vzhledu vaší práce. Klidně vložte své vlastní CSS, nebo postupuje podle našeho příkladu níže.

Řekněme, že vaše práce obsahuje následující HTML kód:

  
Milý Billy,
Tady máš ode mě dopis. Věřím, že na tebe udělá fakt dojem.
S pozdravem
Adelaide

Jestli jste nepoužili žádný vzhled, bude tento text zobrazený ve výchozím stylu AO3 .

Jestli chceme docílit toho, aby výše uvedený text vypadal jako napsaný rukou, musíme tento styl vytvořit pomocí CSS.

Pojďme tento text nejdříve ohraničit tenkou černou čarou, změnit druh fontu a zvětšit jeho velikost. Pro tyto změny potřebujete do svého CSS kódu přidat:

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

p>Dále přidáme tyto CSS příkazy pro změnu stylu podpisu ("Adelaide"). Font zvětšíme ještě o trochu víc a podpis nastavíme červeně:

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

A ještě pomocí příkazů CSS podtrhneme zdůrazněný text ("fakt"):

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

Vaše pole pro CSS by teď mělo obsahovat příkazy pro tři různé styly:

  
#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 nabízí seznam dalších užitečných CSS hodnot, které můžete do své práce přidat.

Pro inspiraci doporučujeme prohlédnout Veřejné vzhledy práce.

Poznámka: Vložení vašich CSS selektorů (například elementů .letter, .signature, a em) pod #workskin identifikátor je nezbytné, aby byl styl aplikován pouze na vámi vybrané části práce: všechno pod popisem práce a nad tlačítkem "Top" (Nahoru) na stránce vaší práce. Avšak jestli své selektory zapomenete vložit pod #workskin identifikátor, automaticky to uděláme za vás po tom, co uložíte svůj kód.

Uložení vašeho nového vzhledu práce

Jestli jste si svůj kód prohlédli a jste s ním spokojeni, klikněte na tlačítko "Submit" (Uložit), abyste svůj nový vzhled práce uložili. Pro jeho aplikaci na některou ze svých prací ho do ní musíte manuálně vložit (na to se podíváme v Aplikování vašeho vzhledu práce).

Když kliknete na tlačítko "Uložit", odstraníme jakýkoli nepodporovaný kód a ujistíme se, že jsou všechny selektory vloženy pod identifikátor #workskin.

Upravování vašeho vzhledu práce

Hned jak svůj nový vzhled uložíte, můžete revidovat svůj kód a kliknout na tlačítko "Edit" (Upravit) pro jakékoliv změny.

Aplikování vašeho vzhledu práce

Vytvořili jste si vzhled práce - teď ho můžete aplikovat na kteroukoli z vašich prací. Mějte při tom na paměti:

• Jedna práce může obsahovat jen jeden vzhled.
• Stejný vzhled může být aplikován na vícero prací.
• Jestli svůj vzhled vymažete, všechny vaše práce, které ho používaly, ztratí stylizaci.
• Jestli jste spoluautorem práce, vaši spolupracovníci mohou také aplikovat váš vzhled na vaši společnou práci .

Když jste se rozhodli, na kterou z vašich prací aplikujete nově naformátovaný vzhled, otevřete její stránku Edit Work (Upravit práci). Instrukce jak upravit práci naleznete zde Jak upravím práci?.

V sekci Associations (Asociace) vyberte váš nový vzhled práce ze seznamu "Select Work Skin" (Vybrat vzhled práce).

Jestli vaše CSS selektory korespondují s elementy v HTML vaší práce (jako například tagy

nebo ), klidně další sekci přeskočte a přejděte přímo na Uložení a náhled vaší práce. Kdybyste třeba chtěli dvakrát podtrhnout všechen text psaný kurzívou, přidání vzhledu s následujícím CSS automaticky přiřadí dvojité podtržení veškerému textu, který je označen tagy :

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

Používání CSS selektorů v HTML vaší práce

Jestli vaše CSS selektory ještě neodpovídají HTML vaší práce, je nejvyšší čas přidat do vašeho kódu tagy, třídy a identifikátory

Milý Billy,
Tady máš ode mě dopis. Věřím, že na tebe udělá fakt dojem.
S pozdravem,
Adelaide

Uložení a náhled vaší práce

Vaši nově stylizovanou práci si můžete prvně prohlédnout pomocí tlačítka "Preview" (Náhled), nebo ji můžete rovnou uložit zvolením "Post Without Preview" (Publikovat bez náhledu).

Gratulujeme, vaše práce je teď fakt stylová!

Jestli jste postupovali podle Vložení vašeho CSS a Používání CSS selektorů v HTML vaší práce, váš text by teď měl vypadat jako psaný dopis.

Více informací o tom, jak váš vzhled přidat k více pracím najadnou naleznete zde Jak upravím více prací současně? Pamatujte, že své CSS selektory musíte vložit do každé ze svých prací individuálně.

Jestli se o publikování a upravování prací chcete dozvědět více, podívejte se na FAQ - často kladené otázky k publikování a upravování prací. Návod k publikaci práce najdete na stránce Návod: Jak zveřejnit práci.

Kde mohu získat více informací, jestliže tu není odpověď na mou otázku?

Pro více informací o vzhledech na Archive of Our Own – AO3 (Našem vlastním archivu), včetně vzhledů stránky a veřejných vzhledů, navštivte prosím FAQ - často kladené otázky k AO3 rozhraní a vzhledům. Některé z často kladených otázek o AO3 najdete v obecných FAQ - často kladených otázkách k AO3. Otázky a odpovědi ke Smluvním podmínkám najdete ve FAQ - často kladených otázkách ke smluvním podmínkám. Možná vás také budou zajímat nahlášené problémy. Pokud potřebujete další pomoc, kontaktujte prosím Podporu.