Archive FAQ > Посібник: Створення скіна для роботи

Вступ

Цей посібник покроково пояснить вам процес створення скіна для роботи на Archive of Our Own – AO3 (Нашому Власному Архіві). Після того, як ви виконаєте всі кроки у посібнику, ви створите ваш власний скін для роботи, використовуючи CSS для того, щоб визначити свій власний стиль і застосувати його для обраної роботи.

Цей посібник передбачає наступне:

  • Ви маєте попередній досвід публікування робіт на АО3. Якщо ви ще не публікували свої роботи, ми рекомендуємо відвідати Публікування і редагування FAQ або ж покроково дотримуватися Посібника: Публікування роботи.
  • Ви володієте базовими знаннями про CSS. Якщо вам необхідно дізнатися, як користуватися CSS, W3Schools CSS Tutorial пропонує безплатний базовий курс.
  • Ви отримуєте доступ до сайту зі стандартним скіном (Archive 2.0). Якщо ви використовуєте інші скіни, будь ласка, врахуйте, що ваш зовнішній вигляд сайту відрізнятиметься від стандартного, який показаний в інструкціях.

Якщо ви не впевнені у тому, що таке скін для роботи, або ви надаєте перевагу використанню існуючого скіну для вашої роботи, будь ласка, відвідайте Скіни та інтерфейс Архіву FAQ.

Навігація по формі Створення нового скіну

Для того, щоб розпочати, перейдіть на сторінку Skins (Скіни):

  1. Залогіньтеся та перейдіть на вашу Панель управління, натиснувши на привітання "Hi, (ім’я користувача)!" та обравши "My Dashboard" (Моя панель користувача) з меню, або натиснувши на ваше зображення профілю.
  2. Оберіть “Скіни” з меню, яке знаходиться збоку сторінки, або ж зверху, якщо ви користується мобільним приладом.

Це перенаправить вас на сторінку My Site Skins (Мої скіни сайту), на якій перелічено всі ваші оригінальні скіни сайту, а також кнопки, які надають вам доступ до ваших оригінальних скінів для робіт та публічних скінів. Для того, щоб краще зрозуміти різницю між скінами сайту та скінами для робіт, відвідайте Що таке скін?

У цьому посібнику, ми хочемо створити новий скін для робіт, тому оберіть "My Work Skins" (Мої скіни для робіт), а після цього "Create Work Skin" (Створити скін для роботи) для того, щоб перейти до форми Створення нового скіну.

Налаштування нового скіну

Єдиними полями, які є обов’язковими для створення нового скіна за допомогою CSS, є Type (Тип), Title (Назва), і поле CSS. Решта полів є необов’язковими, але в цьому посібнику ми розкажемо про всі поля.

У вас буде можливість відредагувати будь-яке з цих полів після того, як ви відправите свій скін (відвідайте Редагування вашого робочого скіна для детальнішої інструкції).

Тип (обов’язково)
Якщо ви обрали кнопку "Create Work Skin" (Створити скін для робіт) на сторінці Скіни, це автоматично переведе вас до "Work Skin" (Скін для робіт).
Назва (обов’язково)
Придумайте для вашої роботи назву, яка добре описуватиме її. Це допоможе відрізнити її від інших скінів, які ви створите в майбутньому. Назви скінів не можуть повторюватися, тому ми рекомендуємо додавати до назви ваше ім’я користувача (Наприклад "Homestuck Skin (ім’я користувача)").
Опис
Яку роль виконуватиме ваш скін? Чи матиме він конкретну тему? Для того, щоб придумати коректний опис скіна, рекомендуємо відвідати сторінки Публічні скіни для сайтів or Публічні скіни для робіт.
Завантажити превью
Сюди ви можете завантажити скріншот вашого стилю CSS для попереднього перегляду. Ви можете повернутися і зробити це пізніше, вже після того, як почнете користуватися вашим скіном.
Зробити публічним
Ця функція є застарілою. Наразі індивідуальні скіни більше не можуть ставати публічними, і перевірка цього вікна не вплине на приватність вашого скіну.
CSS
У останнє поле у формі Створення нового скіна ви вводите ваш власний CSS. В наступних секціях ми пояснимо вам, як вставляти CSS, яке створить новий стиль для вашої роботи.

Зверху ви могли помітити кнопку "Use Wizard" (Застосувати чарівника). Ця кнопка переводить на Site Skin Wizard (Чарівник скінів для сайтів), який, на жаль, можна застосовувати лише до скінів для сайтів, а не до скінів для роботи.(Що таке Чарівник скінів?)

Але не переживайте - з цим посібником ви самі скоро станете чарівником!

Використання CSS

З міркувань безпеки, AO3 підтримує обмежену кількість власності CSS. Будь-який з кодів, що не підтримується сторінкою, буде видалено після того, як ви збережете свої зміни.

Ви можете переглянути повний список власності CSS, що підтримується натиснувши на синій знак питання ? на горі поля CSS. Ми також рекомендуємо відвідати Які власності і вартості CSS я можу використовувати в індивідуальних скінах? для додаткової інформації про шрифти, кольори, URL та інше.

Вставлення вашого CSS

У цій секції, ви введете CSS, що визначить стилізацію, яку можна буде застосувати до вашої роботи (робіт). Не бійтеся додавати свій власний CSS, або ж наслідуйте прикладу, який знаходиться нижче.

Припустимо, що ваша робота має наступне HTML:

  
<p> Дорогий Біллі,</p>
<p&gt Цей лист я написала для тебе. Маю надію, що він тебе <em>дуже</em> вразив.</p>
<p> Щиро,</p&gt
<p> Аделаїд
</p>

Без застосування будь-яких скінів для робіт, цей текст висвітлюватиметься зі стандартною стилізацією робіт AO3.

На прикладі зверху, текст роботи має стандартну стилізацію Архіву: шрифт sans serif, чорний колір

Якщо ми хочемо, щоб цей текст походив до написаного листа як на малюнку нижче, потрібно створити індивідуальний стиль, використовуючи CSS.

Текст роботи написаний шрифтом Comic Sans MS, оточений тонкою чорною рамкою, з відстанню між рамкою і текстом. Слово “Аделаїд” трошки більше і червоне. Слово “Дуже” підкреслено двічі.

Для початку, давайте створимо для цього тексту тонку чорну рамку, змінимо шрифт та збільшимо його розмір. Для того, щоб це зробити, додайте це до поля CSS вашого робочого скіна:

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

Далі ми додамо код до поля CSS для того, щоб надати спеціальну стилізацію для підпису (“Аделаїд”). Введіть наступний CSS для того, щоб збільшити розмір шрифту і зробити підпис червоним:

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

На кінець, для того, щоб підкреслити виділений наголошений текст (“Дуже”) додайте останній CSS:

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

Ваше поле CSS вже повинно містити CSS для трьох різних стилів:

  
#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 надає доступ до списку з додатковим CSS, який ви можете застосувати до вашої роботи.

Ми також рекомендуємо відвідати Публічні скіни для робіт для зразків стилів.

Важливо: Введення ваших селекторів CSS (наприклад елементи .letter, .signature і em) під id #workskin є необхідним для того, щоб ваші стилі застосовувалися лише для обраного контенту в ваших роботах: все, що знаходиться під шапкою і над кнопкою "Top" (Догори) на сторінці вашої роботи. Однак, якщо ви забули ввести ваше CSS під id #workskin ми автоматично зробимо це для вас після того, як ви відправите свій код.

Збереження вашого нового скіна для роботи

Після того, як ви перевірили ваш CSS і залишилися задоволеними вашим кодом, оберіть кнопку "Submit" (Відправити) для того щоб зберегти ваш новий скін для роботи. Ваш стиль не буде застосований до жодної роботи до того моменту, поки ви не додасте скін вручну до кожної роботи. (ми пояснимо це детальніше в Застосування вашого скіна для роботи).

Після того, як ви оберете “Відправити”, ви видалимо будь-який код, що не підтримується сайтом і переконаємося, що всі селектори знаходяться під #workskin id.

Редагування вашого скіна для роботи

Одразу після того, як ви відправите ваш новий скін для робіт, ви можете перевірити свій код та натиснути на кнопку "Edit" (Редагувати) для того, щоб внести будь-які зміни.

Застосування вашого скіна для роботи

Ви створили скін для робіт - тепер ви можете застосувати цей скін до будь-якої вашої роботи на AO3. Деякі речі, про які варто пам’ятати:

  • До роботи можна застосовувати лише один скін.
  • Один скін можна застосовувати до декількох робіт.
  • Якщо ви видалите скін, усі роботи які застосовують цей скін, втратять свій зовнішній вигляд.

Коли ви знатимете до якої роботи ви хочете застосувати ваш новий скін, перейдіть на сторінку роботи Edit Work (Редагувати роботу). Якщо ви потребуєте детальніших інструкцій, відвідайте Як мені відредагувати роботу?

В секції Associations (Асоціації) на сторінці Редагувати роботу, оберіть скін для вашої роботи зі списку "Select Work Skin" (Обрати скін для роботи)

Якщо селектори CSS у вашому робочому скіні вже відповідають елементам HTML вашої роботи (такі теги як <p> та <em> ) ви можете пропустити наступну секцію та одразу перейти до Збереження та попередній перегляд вашої роботи. Наприклад, якщо ви б захотіли, щоб весь текст написаний курсивом мав подвійне підкреслення, застосування скіна для роботи з таким CSS автоматично подвійно підкреслить весь текст позначений тегами <em>: 

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

Використання селекторів CSS у HTML вашої роботи

Якщо ваші селектори CSS ще не відповідають HTML, саме час додати ваші теги <div> та <span>, класи та id до позначки вашої роботи. Ви можете редагувати позначку вашої роботи перейшовши до секції Work Text (Текст роботи) на сторінці Edit Work (Редагування роботи). Переконайтеся, що ви обрали кнопку "HTML".

Якщо ви ввели свій власний CSS у Вставлення вашого CSS ви можете вставити відповідні CSS селектори до позначки вашої роботи. Якщо ви цього не зробили, ми продовжимо з минулого прикладу.

У цьому прикладі ви маєте роботу, котра містить наступну позначку:

  
<p> Дорогий Біллі,</p>
<p&gt Цей лист я написала для тебе. Маю надію, що він тебе <em>дуже</em> вразив.</p>
<p> Щиро,</p&gt
<p> Аделаїд</p>

Для того, щоб застосувати три стилі з прикладу, вам необхідно вставити елементи HTML і всі необхідні атрибути, що відповідають селекторам у вашому CSS:

  1. Для того, щоб застосувати стиль листа, додайте до всього тексту тег <div> з класом .letter, що відповідає вашому скіну для робіт.
  2. Щоб застосувати стиль підпису, додайте клас .signature з вашого скіна роботи до останнього параграфу.
  3. Щоб застосувати стиль підкреслення, вам не потрібно застосовувати якийсь додатковий код. Селектор em, який ви вже вжили у CSS вашого скіна вже відповідає тегу <em>

Ваша нова позначка має відповідати наступному:

  
<div class="letter">
<p>Дорогий Біллі,</p>
<p>Цей лист я написала для тебе. Маю надію, що він тебе <em>дуже</em> вразив.</p>
<p>Щиро,</p>
<p class="signature">Аделаїд</p>
</div>

Збереження та попередній перегляд вашої роботи

Ви можете попередньо переглянути новий стиль вашої роботи обравши кнопку "Preview" (Попередній перегляд), або ж одразу зберегти ваші зміни, обравши кнопку "Post Without Preview" (Опублікувати без попереднього перегляду).

Вітаємо, ваша робота тепер виглядає чудово!

Якщо ви дотримувалися прикладу зі Вставлення вашого CSS та Використання селекторів CSS у HTML вашої роботи текст вашої роботи повинен нагадувати лист написаний від руки.

Текст роботи написаний шрифтом Comic Sans MS, оточений тонкою чорною рамкою, з відстанню між рамкою і текстом. Слово “Аделаїд” трошки більше і червоне. Слово “Дуже” підкреслено двічі.

Якщо ви захочете застосувати ваш скін до декількох робіт одночасно, відвідайте Як мені відредагувати декілька робіт одночасно? Будь ласка, пам’ятайте про те, що вам все рівно доведеться Вставити CSS селектори вашого скіна в HTML кожної роботи індивідуально, якщо ви вже не зробили цього.

Для детальнішої інформації про публікацію і редагування робіт, ми рекомендуємо відвідати Публікування і редагування FAQ. Ми також рекомендуємо відвідати Посібник: Публікування роботи для покрокової інструкції.

Де я можу знайти більше інформації, якщо тут немає відповіді на моє запитання?

Для детальнішої інформації про скіни, в тому числі про скіни для сайтів та публічні скіни, відвідайте Skins and Archive Interface FAQ.
Відповіді на деякі часті запитання про Archive of Our Own – AO3 (Наш Власний Архів) подані в інших секціях AO3 FAQ, а деяка поширена термінологія визначена в нашому Глосарії. Запитання та відповіді про Умови використання можна знайти на сторінці Умови використання FAQ. Можливо, Вам також захочеться ознайомитися з нашими Відомими проблемами. Якщо Вам потрібна ще якась допомога, будь ласка, надішліть запит до підтримки.