Tutorial : Mencipta Kulit Khas FAQ

Archive FAQ > Tutorial : Mencipta Kulit Khas

Pengenalan

Tutorial ini akan membantu anda langkah demi langkah untuk mencipta sebuah kulit khas di Archive of Our Own – AO3 (Arkib Milik Kita). Pada akhir tutorial ini, anda boleh mencipta kulit khas anda tersendiri, mengguna CSS untuk mengklasifikasikan gaya tersendiri, dan mengaplikasikan kulit khas bagi karya terpilih anda.

Tutorial ini mengganggap bahawa:

Anda mempunyai pengetahuan untuk menerbit karya di AO3. Jika anda tidak pernah menerbitkan sebuah karya lagi pada AO3, anda bolehlah melihat laman FAQ Menerbit dan Mengedit atau mengikut langkah demi langkah di Tutorial: Menerbit Sebuah Karya.
Anda mempunyai pengetahuan asas tentang CSS. Jika anda memerlukan gambaran keseluruhan bagi CSS, W3Schools CSS Tutorial menawarkan kursus percuma.
Anda tengah mengakses laman AO3 dalam kulit asal (Archive 2.0). Jika anda sedang menggunakan kulit tersuai, silalah memberi ruang di mana susun atur laman anda mungkin berbeza daripada yang ditulis dalam arahan.

Jika anda tidak tahu apa itu kulit khas, atau jika anda lebih berkenan dengan menggunakan kulit yang sedia ada untuk gaya karya anda, sila lihat pada FAQ Kulit dan Interface Arkib.

Menavigasi ke borang Create New Skin (Mencipta Kulit Baru)

Untuk memulakan, pertama pergi ke laman Skins (Kulit):

Log masuk dan sila ke Papan Pemuka anda dengan memilih jemputan "Hi, (Nama Pengguna)!" dan memilih "My Dashboard" (Papan Pemuka Saya) dari menu, atau dengan memilih imej profil anda.
Pilih "Skins" dari menu yang terletak di sisi laman atau di bahagian atas pada peranti mudah alih.

Ini akan mengambil anda ke laman My Site Skins (Kulit Laman Saya), yang menyenaraikan kulit laman buatan khas anda dan menyediakan butang tertentu untuk mengakses kulit buatan khas anda dan kulit awam. Untuk merujuk kepada perbezaan antara kulit laman dan kulit khas, sila lihat Apakah itu kulit?

Bagi tutorial ini, kita hendak mencipta sebuah kulit khas baru, jadi pilih "My Work Skins" (Kulit Khas Saya), dan seterusnya "Create Work Skin" (Cipta Kulit Khas) untuk menavigasi ke borang Cipta Kulit Baru.

Membuat Kulit Kerja Baru

Bidang yang hanya perlu diisi untuk mencipta kulit khas baru menggunakan CSS khas adalah bidang Type (Jenis), Title (Tajuk), dan bidang CSS. Selebihnya adalah mengikut pilihan anda jika anda hendak memenuhinya, tetapi kami akan pergi ke setiap bidang pada tutorial ini.

Anda boleh kembali semula untuk mengedit mana-mana bidang selepas penyerahan (Sila rujuk kepada Mengedit Kulit Khas anda untuk maklumat lanjut).

Jenis (wajib): Jika anda memilih butang "Create Work Skin" (Cipta Kulit Khas) pada laman Kulit, ini patut mengembali ke asal ke "Work Skin" (Kulit Khas).
Tajuk (wajib): Berikan kulit anda sebuah tajuk yang jelas supaya anda boleh membezakan ia dari kulit kerja anda yang akan dicipta pada masa hadapan. Tajuk kulit mesti unik, jadi kami mengesyorkan untuk menyertakan nama pengguna anda pada tajuk (cth. "Kulit Homestuck (nama pengguna)").
Penerangan: Apa akan kulit anda lakukan? Adakah terdapat tema tertentu? Anda boleh merujuk kepada contoh penerangan kulit di laman Kulit Laman Awam atau Kulit Khas awam.
Muat turun sebuah pratonton: Di sini anda boleh memuat turun sebuah tangkapan skrin gaya CSS anda dalam aksi sebagai pratonton. Anda boleh kembali balik untuk melakukan ini selepas anda sudah mula menggunakan kulit khas anda.
Mengaplikasi untuk menjadi awam: Ciri ini telah ditamatkan buat pada masa ini, dan memilih kotak ini tidak akan memberi kesan kepada privasi kulit anda.
CSS: Bidang terakhir di borang Cipta Kulit Baru adalah apabila anda masukkan CSS khas anda. Dalam beberapa seksyen seterusnya ini, kami akan menerangkan bagaimana untuk memasukkan CSS yang akan membentuk gaya baru bagi karya anda.

Anda mungkin nampak sebuah butang di atas berlabel "Use Wizard" (Guna Wizard). Ini menuju kepada Site Skin Wizard (Wizard Kulit Laman), yang malangnya hanya boleh digunakan untuk mencipta kulit laman dan bukan kulit khas (Apakah itu Wizard Kulit?)

Tetapi jangan risau—dengan tutorial ini, anda akan menjadi ahli sihir dalam sekelip mata!

Menggunakan CSS

Bagi tujuan keselamatan, AO3 hanya boleh menyokong beberapa set sifat CSS dan nilai mereka. Mana-mana kod yang tidak disokong akan dibuang selepas anda simpan perubahan anda.

Anda boleh merujuk kepada senarai lengkap sifat CSS yang disokong dengan menekan simbol tanda soal biru ? yang terletak pada bahagian atas bidang CSS. Anda juga boleh merujuk kepada Sifat dan nilai CSS yang manakah boleh saya guna bagi kulit khas? bagi maklumat lanjut tentang fon, warna, URL dan lain-lain.

Masukkan CSS anda

Pada seksyen ini, anda akan masuk kepada CSS yang akan menentukan gaya apa yang boleh diaplikasikan kepada karya anda. Semuanya ikut kepada anda jika hendak tambah CSS anda tersendiri atau mengikut contoh dibawah.

Mari kita bayangkan anda mempunyai sebuah karya dengan HTML tersebut:

  
Wahai Billy,
Ini adalah sebuah surat yang saya telah tulis untuk anda. Saya harap anda  amat kagum.
Ikhlas Daripada,
Adelaide

Tanpa kulit kerja mana-mana diaplikasikan, teks ini akan dipaparkan dengan gaya karya AO3 yang asal.

Teks karya dari contoh dengan gaya asal Archive: fon Sans Serif, warna hitam

Jika kami hendak penampilan teks ini untuk menyerupai sebuah surat bertulisan seperti imej dibawah, kami perlu mencipta beberapa gaya khas menggunakan CSS.

Teks karya dalam fon 'Comic Sans MS', dilitupi dengan sempadan hitam yang nipis dengan padding antara teks dan sempadan. 'Adelaide' merupakan sedikit besar dan merah. Perkataan 'amat' digaris bawah dua kali.

Pertama, mari kita memberi teks ini sempadan hitam, tukar fon, dan membesarkan saiz fon. Untuk melakukan ini, tambahkan tersebut dalam bidang kulit CSS anda:

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

Selepas itu, mari tambah dalam bidang CSS untuk memberi gaya khas kepada tandatangan ("Adelaide"). Masukkan CSS tersebut untuk membesarkan saiz fon dan memberi tandatangan tersebut warna merah:

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

Akhirnya, untuk menggaris bawah untuk menekankan teks ("very"), tambah CSS terakhir:

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

Bidang CSS anda patut mengandungi CSS bagi tiga gaya berbeza:

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

Rujukan W3Schools CSS menyediakan senarai yang berguna bagi sifat CSS berlebihan yang anda boleh menambah kepada karya anda.

Kami juga mengesyorkan anda melihat kepada Kulit Kerja Awam bagi contoh gaya.

Nota: Meletakkan pemilih CSS anda (e.g. elemen .letter, .signature, dan em ) di bawah #workskin id diperlukan supaya gaya anda boleh diaplikasikan pada kandungan karya yang anda pilih: semua perkara di bawah blurb dan atas butang "Top" (Atas) atas laman karya anda. Manakala, jika anda lupa untuk meletak CSS anda bawah id #workskin, kami akan secara langsung tambah ini untuk anda selepas anda hantar kod anda.

Menyimpan Kulit Kerja Baru Anda

Selepas anda semak CSS anda dan gembira dengan kod anda, pilih butang "Submit" (Hantar) untuk menyimpan kulit kerja baru anda. Gaya anda tidak akan diaplikasi kepada karya selagi anda tidak memasukkan kulit tersebut di setiap karya secara manual. (Kami menjelaskan tentang ini di Mengaplikasikan Kulit Kerja Anda).

Selepas anda pilih "Hantar", kami akan membuang semua kod yang tidak disokong dan memastikan semua pemilih diletak bawah sebuah id #workskin.

Mengedit Kulit Kerja Anda

Setelah menghantar kulit kerja baru anda, anda boleh menyemak kod dan memilih butang "Edit" (Edit) untuk membuat perubahan.

Mengaplikasikan Kulit Kerja Anda

Anda telah mencipta kulit kerja, sekarang anda boleh mengaplikasikan kulit kerja anda pada mana-mana karya anda di AO3. Terdapat beberapa perkara yang perlu diberi perhatian:

Satu karya hanya boleh menggunakan satu kulit.
Satu kulit boleh diaplikasikan pada karya yang berbeza.
Jika anda membuang kulit tersebut, mana-mana karya yang menggunakan kulit itu akan hilang gaya mereka.
Jika anda merupakan co-penulis sebuah karya, co-penulis anda juga boleh mengaplikasikan kulit kerja anda kepada karya kongsian anda.

Apabila anda telah membuat pilihan tentang karya mana yang anda hendak mengaplikasikan format baru anda kepada, sila ke laman Edit Work (Edit Karya) karya anda. Sila rujuk kepada Bagaimanakah Cara untuk Mengedit Karya Anda? jika anda perlu arahan.

Dalam seksyen Associations (Persatuan) pada laman Edit Karya, pilih tajuk kulit kerja anda dari senarai "Select Work Skin" (Pilih Kulit Kerja).

Jika pemilih CSS di kulit kerja anda sesuai dengan elemen sedia ada di HTML karya anda (seperti semua

atau tag ), maka ikut kepada anda jika anda hendak melangkau kepada seksyen seterusnya dan pergi terus kepada Menyimpan dan Pratonton Karya Anda. Sebagai contoh, jika anda hendak bagi semua teks italic dalam karya anda diberi dua garis bawah, mengaplikasikan sebuah kulit kerja dengan CSS tersebut akan secara automatik menambahkan dua garis bawah kepada semua teks yang di tanda dengan tag:

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

Menggunakan pemilih CSS di HTML karya anda

Jika pemilih CSS belum lagi sesuai dengan HTML karya anda, sekarang adalah masanya untuk menambahkan tag

dan , kelas, dan id kepada markup karya anda. Anda boleh mengedit markup karya anda dengan menavigasi kepada seksyen Work Text (Teks Karya) pada laman Edit Karya anda. Pastikan butang "HTML" dipilih.

Jika anda masukkan CSS anda sendiri dalam Memasukkan CSS Anda, teruskan kepada menambah pemilih CSS anda yang sesuai kepada markup karya anda. Jika tidak, kami akan sambung dari contoh sebelum kami.

Dalam contoh ini, anda mempunyai sebuah karya yang mengandungi markup tersebut:


Wahai Billy,
Ini adalah sebuah surat yang saya telah tulis untuk anda. Saya harap anda amat kagum. 
Ikhlas Daripada,
Adelaide

Untuk mengaplikasikan tiga gaya dari contoh kulit karya, anda perlu memasukkan elemen HTML dan atribut yang sesuai dengan CSS anda:


Untuk mengaplikasikan gaya huruf, balut seluruh blok teks dalam tag  dengan kelas .letter yang dirujuk dalam kulit kerja anda.
Untuk mengaplikasikan gaya tandatangan, tambahkan kelas .signature dari kulit karya anda kepada perenggan terakhir.

Untuk mengaplikasikan gaya garis bawah, tiada kod tambahan diperlukan kerana pemilih em yang anda mengguna dalam CSS kulit kerja anda sudah sesuai kepada tag  dalam markup di atas.


Markup baru anda patut sama dengan tersebut:


Wahai Billy,
Ini adalah sebuah surat yang saya telah tulis untuk anda. Saya harap anda amat kagum.
Ikhlas Daripada,
Adelaide

Menyimpan dan Pratonton Karya Anda

Anda boleh pratoton gaya karya anda terbaharu dengan memilih butang "Preview" (Pratonton) atau menyimpan perubahan anda terus dengan memilih "Post Without Preview" (Terbit tanpa Pratonton).

Taniah, karya anda sekarang sudah menjadi mewah!

Jika anda mengikuti contoh dari Memasukkan CSS Anda dan Menggunakan Pemilih CSS pada HTML Karya Anda, teks karya anda patut merupakan surat bertulis.

Jika anda hendak mengaplikasikan kulit kerja anda pada beberapa karya pada masa yang sama, sila rujuk kepada Bagaimanakah cara untuk mengedit beberapa karya lain pada masa yang sama? Sila mengambil perhatian bahawa anda masih perlu memasukkan pemilihan kulit CSS anda dalam setiap HTML karya individu, jika anda belum melakukannya lagi.

Untuk maklumat lebih lanjut tentang menerbit dan mengedit karya, sila rujuk kepada FAQ Menerbit dan Mengedit. Anda mungkin juga ingin merujuk kepada Tutorial: Menerbit Sebuah Karya bagi panduan langkah demi langkah.

Di manakah boleh saya mendapat maklumat lanjut sekiranya soalan saya tidak dijawab dalam FAQ ini?

Untuk maklumat lebih lanjut tentang kulit di Archive of Our Own - AO3 (Arkib Milik Kita), termasuklah kulit laman dan kulit awam, sila rujuk kepada FAQ Kulit dan Interface Arkib. Beberapa soalan yang lain yang sering ditanya tentang AO3 dijawab dalam FAQ AO3 yang lebih luas. Soalan dan jawapan berkaitan dengan Syarat-Syarat Perkhidmatan kami boleh dijumpai di FAQ Syarat-Syarat Perkhidmatan. Anda juga boleh merujuk kepada Isu Yang Diketahui. Sekiranya anda memerlukan bantuan lanjut, sila hubungi Bantuan.

Archive of Our Own^beta