Introducere
Acest tutorial te va îndruma pas cu pas în crearea unui skin pentru o lucrare pe Archive of Our Own – AO3 (Arhiva Noastră). Pe parcursul tutorialului, îți vei crea propriul skin pentru o lucrare, vei folosi coduri CSS pentru a crea stiluri personalizate și vei folosi skin-ul creat pentru lucrarea dorită.
Acest tutorial presupune că tu deja:
- Ai cunoștințe anterioare despre postarea lucrărilor pe AO3. Dacă nu ai avut încă ocazia să postezi o lucrare pe AO3, te sfătuim să consulți pagina FAQ despre postare și editare sau să urmărești pas cu pas tutorialul pentru a posta o lucrare.Tutorial: Postarea unei lucrări.
- Ai noțiuni de CSS. Dacă ai nevoie de un curs de baza pentru CSS, site-ul Tutorial CSS W3Schools oferă cursuri gratuite pentru începători.
- Accesezi site-ul folosind skin-ul de bază (Archive 2.0). Dacă folosești un skin personalizat, adaptează instrucțiunile când acestea nu corespund planului site-ului tău.
Dacă nu știi ce este un skin pentru o lucrare sau dacă preferi să folosești un skin existent pentru a-ți stiliza lucrarea, te sfătuim să consulți pagina de întrebări frecvente despre interfața arhivei.
Cum navighez la formularul „Creează un nou skin?"
Pentru a începe accesează pagina ta de Skins (Skin-uri):
- Conectează-te și apăsă pe mesajul „Bună, nume de utilizator!" sau pe fotografia ta de profil și alege „My Dashboard" (Panoul meu de control) din meniu.
- Alege „Skins" din meniul ce se găsește pe marginea paginii dacă folosești un calculator, sau în susul paginii dacă folosești un dispozitiv mobil.
Vei ajunge pe pagina My Site Skins (Skin-urile mele pentru site). Pe această pagină vei găsi toate skin-urile tale personalizate pentru site și butoanele necesare pentru a accesa skin-urile personale pentru lucrări și skin-urile de bază. Dacă vrei să vezi diferența dintre skin-urile site-ului și skin-urile pentru o lucrare, consultă pagina Ce este un skin?
În acest tutorial vrem să creăm un nou skin pentru o lucrare. Selectează „My Work Skins" (Skin-urile mele pentru lucrări) și apoi „Create Work Skin" (Creează un skin pentru o lucrare) pentru a accesa formularul Creează un nou skin.
Crearea unui nou skin pentru o lucrare
Pentru a crea un nou skin prin modificarea CSS, ai nevoie doar de câmpurile următoare: Type (Tip), Title (Titlu), și CSS. Restul câmpurilor sunt opționale, dar le vom menționa în acest tutorial.
Vei putea să revii și să modifici toate aceste câmpuri după publicare (pentru mai multe informații consultă pagina dedicată editării skin-ului pentru lucrare Cum să editez skin-ul pentru lucrare).
- Tip (obligatoriu)
- Când dai click pe butonul „Create Work Skin" (Creează un skin pentru o lucrare) vei ajunge în mod normal pe pagina "Work Skin" (Skin pentru lucrare).
- Titlu (obligatoriu)
- Când creezi un skin, trebuie să îi dai un nume ce îți va permite să îl distingi de skin-urile pe care le vei crea mai târziu. Titlul unui skin trebuie să fie unic, așa că te sfătuim să îți incluzi numele de utilizator în titlu (de exemplu „Skin pentru Homestuck (nume de utilizator)").
- Descriere
- Ce modificări introduce skin-ul tău? Are o temă specifică? Pentru a realiza descrierea, poți consulta câteva exemple pe paginile Skin-uri publice pentru site și Skin-uri publice pentru lucrări
- Încarcă o previzualizare
- Poți încărca un screenshot al stilului tău CSS pentru a-l previzualiza în acțiune. Poți previzualiza skin-ul după ce ai început să îl folosești.
- Bifează pentru a-l face public
- Această caracteristică a fost anulată. Momentan un skin nu poate fi împărtășit public. Chiar dacă bifezi această căsuță, nu vei schimba confidențialitatea skin-ului tău.
- CSS
- În acest câmp din formularul pentru creerea un nou skin poți introduce CSS-ul customizat. În următoarele secțiuni vom explica cum poți introduce codul CSS pentru a stiliza noua ta lucrare.
Poți observa un buton în susul paginii numit "Use Wizard" (Folosește tutorialul). Dacă dai click, vei ajunge pe pagina Site Skin Wizard (Tutorialului pentru a crea un skin pentru site), ce poate fi utilizat din păcate doar pentru a crea un skin pentru site dar nu și pentru o lucrare (Ce este managerul de skin-uri?)
Fii liniștit(ă), cu acest tutorial vei deveni un expert al skin-urilor în câteva minute!
Utilizarea CSS
Din motive de securitate, AO3 recunoaște doar un număr limitat de proprietăți și valori CSS. Codul care nu este recunoscut va fi înlăturat după ce îți vei salva schimbările.
Poți parcurge lista completă a proprietăților CSS recunoscute dacă selectezi simbolul albastru ce reprezintă un semn de întrebare ? care se găsește deasupra câmpului CSS. Pentru mai multe informații legate de font-uri, culori, URL, etc poți consulta pagina de întrebări frecvente Ce proprietăți și valori CSS pot folosi în skin-urile personalizate?
Adăugarea stilului tău CSS
În această secțiune te vom ajuta să introduci stilul tău CSS ce va defini stilizarea lucrări(lor) tale. Dacă vrei, poți să folosești un CSS creat de tine sau exemplele următoare.
Să presupunem că ai codul HTML următor:
Dragă Bogdan,
Ți-am scris o scrisoare. Sper că ești foarte impresionat.
Cu drag,
Adela
Dacă nu folosești un skin, acest text va fi afișat cu stilul clasic AO3.
Dacă vrei să modifici acest text pentru a se asemăna cu o scrisoare scrisă de mână, ca și în imaginea de mai jos, va trebui să creăm câteva stiluri personalizate cu ajutorul CSS..
Pentru început, vom da acestui text o margine neagră fină, vom schimba stilul textului și îl vom mări. Pentru a realiza această etapă, adaugă skin-ul pentru lucrarea de mai jos în câmpul CSS.
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
Vom continua și vom adăuga un stil special pentru semnătură („Adela"). Pentru a realiza această etapă - creșterea dimensiunii textului din semnătură și scrierea cu roșu - adaugă codul CSS de mai jos:
#workskin .signature {
font-size: 1.2em;
color: red;
}
Vom termina prin sublinierea textului evidențiat („foarte"). Pentru a realiza această etapă, adaugă ultimul cod CSS:/p>
#workskin em {
border-bottom: 3px double;
}
Câmpul tău CSS ar trebui să conțină acum coduri CSS pentru trei stiluri diferite:
#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;
}
Pagina Referințe CSS W3Schools conține o listă folositoare de proprietăți CSS pe care le poți adăuga lucrării tale./p>
Te sfătuim să consulți pagina următoare pentru a vedea diverse exemple de Skin-uri publice pentru lucrări.
Te rugăm să reții: Trebuie să incluzi determinanții tăi CSS (de exemplu .letter, .signature și elementele em) în identificatorul skin-ului #workskin ca să aplici stilurile numai pentru lucrarea aleasă: tot textul care se găsește sub rezumat și deasupra butonului "Top" (Sus) pe pagina lucrării tale. Dacă uiți să incluzi codul CSS sub identificatorul #workskin, vom face această modificare în mod automat după ce ai trimis codul.
Cum pot să salvez noul skin pentru lucrare?
După ce ai parcurs încă o dată codul tău CSS și ești mulțumit(ă) de rezultat, alege butonul "Submit" (Trimite) pentru a salva noul skin pentru lucrare. Stilul creat nu va fi aplicat până ce nu l-ai adăugat la fiecare lucrare (vom parcurge aceste etape în secțiunea Cum pot să aplic stilul meu pentru lucrare?).
După ce ai dat click pe butonul "Submit", vom înlătura tot codul incorect și ne vom asigura că toți determinanții tăi sunt incluși sub un #workskinidentificator.
Cum pot să editez skin-ul pentru lucrare?
După ce ai trimis codul pentru lucrare, poți să îl modifici dacă selectezi butonul "Edit" (Editează) și faci schimbările necesare.
Cum pot să aplic skin-ul meu pentru lucrare?
Ai creat un skin pentru o lucrare -- acum poți să îl aplici lucrărilor tale pe AO3 Trebuie să fii atent(ă) la câteva lucruri:
- O lucrare poate folosi un singur skin.
- Un skin poate fi aplicat la mai multe lucrări.
- Dacă ștergi skin-ul, toate lucrările ce folosesc acest skin își vor pierde stilul.
- Dacă co-creezi o lucrare, co-creatorul sau co-creatorii pot de asemenea folosi stilul tău dacă decizi să îl aplici lucrării pe care o creați împreună.
Dacă știi deja la ce lucrări vrei să aplici noul tău stil, du-te pe pagina Edit Work (Editează lucrarea). Dacă ai nevoie de ajutor pentru această etapă, consultă pagina Cum editez o lucrare?.
În secțiunea Associations (Asocieri) de pe pagina Edit Work, alege numele skin-ului tău din lista, "Select Work Skin" (Alege skin-ul lucrării).
Dacă selectorii CSS din skin-ul tău pentru lucrare corespund unor elemente ce se găsesc deja în codul HTML pentru lucrarea ta (de exemplu toate
sau tag-urile), poți ignora această secțiune și poți consulta direct pagina Salvarea și Previzualizarea Lucrării Tale. De exemplu, dacă vrei ca toată lucrarea ta să apară în scris cursiv sau vrei ca tot textul să fie subliniat de două ori, poți aplica un skin pentru lucrare cu codul CSS de mai jos. Acest cod va sublinia de două ori orice element de text cu
tag-urile:
#workskin em {
border-bottom: 3px double;
}
Cum pot folosii selectorii CSS în codul HTML al lucrării mele?
Dacă selectorii tăi CSS nu corespund cu codul HTML al lucrării
tale, a venit momentul să adaugi tag-urile
și , clasele și identificatorii în markup-ul lucrării tale. Dacă
navighezi pe pagina Edit Work în secțiunea Work Text (Textul lucrării) poți edita markup-ul lucrării. Asigură-te că
butonul "HTML" este activat.
Dacă ți-ai introdus propriul cod CSS în secțiunea Adaugă-ți propriul CSS, poți adăuga selectorii CSS corespunzători în markup-ul lucrării tale. Dacă nu, vom continua cu exemplul următor:
În exemplul următor, presupunem că ai o lucrare ce conține markup-ul
de mai jos:
Dragă Bogdan,
Ți-am scris o scrisoare. Sper că îți va plăcea foarte mult.
Cu drag,
Adela
Ca să aplici cele trei stiluri din exemplul skin-ului pentru lucrare, va trebui
să adaugi elementele HTML și atributele ce corespund selectorilor CSS:
- Pentru a aplica stilul scrisorii, încadrează tot textul intr-un tag cu classa
.lettermenționată în stilul lucrării tale. Pentru a aplica stilul semnăturii, adaugă clasa.signaturedin stilul lucrării tale la ultimul paragraf.- Pentru a aplica stilul subliniat, nu trebuie să adaugi un alt cod,
fiindcă selectorul
empe care l-ai folosit în codul CSS al skin-ului tău pentru lucrare corespounde deja tag-uluidin markup-ul de mai sus.
Markup-ul tău ar trebui acum să corespundă cu cel de mai jos:
Dragă Bogdan,
Ți-am scris o scrisoare. Sper că îți va plăcea foarte mult.
Cu drag,
Adela
Cum pot să salvez și să previzualizez lucrarea?
Poți să îți previzualizezi lucrarea stilizată dacă selectezi butonul "Preview" (Previzualizează). Poți să salvezi schimbările efectuate fără a previzualiza dacă alegi "Post Without Preview" (Postează fără a previzualiza).
Felicitări! Lucrarea ta este acum stilizată!p>
Dacă ai urmat exemplul din secțiunile Adăugarea stilului tău CSS and Cum pot folosi selectorii CSS în codul HTML al lucrării mele? , lucrarea ta ar trebui să semene acum cu o scrisoare scrisă de mână.
Dacă vrei să aplici skin-ul creat la mai multe lucrări în același timp, consultă pagina Cum pot să editez mai multe lucrări în același timp? Te rugăm să notezi că va trebui să integrezi selectorii skin-ului tău CSS separat, în fiecare lucrare, dacă nu ai trecut încă de această etapă.
Dacă vrei să obții mai multe informații pentru a publica și a edita o lucrare, poți consulta pagina FAQ Postare şi editare. De asemenea, pentru un ghid etapă cu etapă poți consulta pagina: Tutorial: Postează o lucrare.
Unde pot găsi mai multe informații dacă întrebarea mea nu are răspuns aici?
Pentru mai multe detalii despre skin-uri folosite pe Archive of Our Own - AO3 (Arhiva Noastră) inclusiv skin-urile site-ului și skin-urile publice, poți consultaFAQ Stiluri şi interfața AO3. Multe întrebări frecvente despre AO3 au un răspuns mai complet în Întrebări Frecvente AO3.Poți găsi întrebări și răspunsuri despre Termenii de Serviciu la Întrebări Frecvente despre Termenii de Serviciu. De asemenea, poți verifica pagina Erori cunoscute. Dacă ai nevoie de mai mult ajutor, poți contacta Suport tehnic.
.
