Archive FAQ > Инструкция: создание скина для работы

Введение

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

Пункты данной инструкции подразумевают, что вы уже...

  • ... знаете, как публиковать работы на AO3. Если вы еще не публиковали работы на AO3, вам может пригодиться FAQ по публикации и редактированию или пошаговая Инструкция: публикация работы.
  • ... знакомы с CSS на базовом уровне. Если вам нужно узнать о CSS, то W3Schools CSS Tutorial предлагает бесплатный курс.
  • ... просматриваете сайт в скине по умолчанию (Archive 2.0). Если вы используете пользовательский скин, пожалуйста, проставьте все необходимые разрешения там, где ваш дизайн сайта может отличаться от дизайна в инструкции.

Если вы не знаете, что такое рабочий скин, или хотите использовать уже существующий скин для своей работы, пожалуйста, ознакомьтесь с FAQ по скинам и интерфейсу Архива.

Переход к форме “Create New Skin” (Создать новый скин)

Сначала откройте страницу Skins (Скины):

  1. Войдите на сайт и откройте свою Панель управления - для этого наведите курсор на "Hi, (имя пользователя)!" и выберите ссылку "My Dashboard" (Моя панель управления) в меню, либо нажмите на свою фотографию профиля.
  2. Перейдите по ссылке "Skins" в боковом меню или в верхней части страницы на мобильном устройстве.

Вы окажетесь на странице My Site Skins (Мои скины сайта), на которой собраны ваши пользовательские скины для сайта, а также расположены кнопки перехода к вашим рабочим скинам и публичным скинам. Разница между скином сайта и рабочим скином описана в статье Что такое скин?

Цель данной инструкции - создать новый рабочий скин, поэтому перейдите по ссылке "My Work Skins" (Мои рабочие скины), затем выберите "Create Work Skin" (Создать рабочий скин), чтобы перейти к форме создания нового рабочего скина.

Настройка нового рабочего скина

При создании нового скина средствами пользовательского CSS обязательны для заполнения только поля Type (Тип), Title (Название) и CSS. Остальные поля заполняются по желанию, но в данной инструкции мы рассмотрим каждое из них поподробнее.

Вы сможете вернуться и изменить данные любых из этих полей после создания скина (обратитесь к пункту Редактирование рабочего скина за инструкциями).

Тип (обязательно)
Если вы перешли сюда по кнопке "Create Work Skin" (Создать рабочий скин) на странице со скинами, это поле по умолчанию примет значение "Work Skin" (Рабочий скин).
Название (обязательно)
Придумайте для своего скина информативное название, которое позволит отличать его от прочих скинов, которые вы можете создать в будущем. Названия скинов должны быть уникальными, так что рекомендуем включить в него ваше имя пользователя (например, “Homestuck Skin (имя пользователя)”).
Описание
Что будет делать ваш скин? Будет ли у него специальная тема? В качестве примера можете воспользоваться описаниями на страницах Публичных скинов сайта или Публичных рабочих скинов.
Загрузить превью
Здесь вы можете загрузить скриншот конечного результата. Вы можете вернуться к этому пункту после того, как начнете использовать свой рабочий скин.
Сделать публичным
Действие этой функции было приостановлено. В данное время пользовательские скины не могут быть выложены в свободный доступ, и наличие или отсутствие галочки в этом поле никак не повлияет на настройки приватности вашего скина.
CSS
В последнее поле формы создания нового скина вводится ваш CSS-код. В следующих шагах мы расскажем, как вводить CSS, который придаст вашей работе новый вид.

Вы могли заметить внизу кнопку "Use Wizard" (Использовать Мастера). По ней осуществляется переход к Site Skin Wizard (Мастеру создания скинов сайта), который, к сожалению, может быть использован только при создании скинов сайта, а не рабочих скинов (Что такое Мастер создания скинов?).

Но не беспокойтесь: с данной инструкцией вы сами станете мастером в считанные минуты!

Использование CSS

В связи с мерами безопасности AO3 поддерживает только ограниченный набор атрибутов и значений CSS. Любой код, не поддерживаемый сайтом, будет удален после того, как вы сохраните изменения.

Вы можете ознакомиться с полным списком поддерживаемых атрибутов CSS, нажав на изображение синего вопросительного знака ? вверху поля CSS. Вы также можете обратиться к пункту Какие атрибуты и значения CSS я могу использовать в пользовательских скинах?, чтобы больше узнать о допустимых шрифтах, цветах, URL-адресах и т.д.

Ввод CSS

В этой части вы введете CSS, который определит стиль оформления ваших работ. Вы можете придумать свой собственный CSS-код или придерживаться примера ниже.

Предположим, у вас есть работа с таким HTML:

  
<p>Дорогой Билли,</p>
<p>Вот письмо, которое я написала тебе. Надеюсь, ты <em>очень</em> впечатлен.</p>
<p>С любовью,</p>
<p>Аделаида</p>

Без применения специальных скинов этот текст будет отображен в стиле по умолчанию.

Пример текста работы в стандартном стиле Архива: шрифт 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 зададим специальный стиль подписи ("Аделаида"). Введите следующий код, чтобы еще больше увеличить размер текста и задать красный цвет текста:

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

Наконец, чтобы подчеркнуть выделенный текст ("очень"), введите последний CSS-код:

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

Теперь в вашем поле 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, мы сделаем это автоматически после того, как вы загрузите скин на сайт.

Сохранение рабочего скина

Если вы еще раз просмотрели свой код и остались им довольны, нажмите кнопку "Submit" (Сохранить), чтобы сохранить свой рабочий скин. Новое оформление не будет применяться к вашим работам, пока вы вручную не добавите его ко всем нужным работам (мы рассмотрим этот вопрос в разделе Применение рабочего скина).

Как только вы нажмете "Submit", мы удалим код, который не поддерживается сайтом, и проверим, чтобы все селекторы были включены в id #workskin.

Редактирование рабочего скина

Сразу же после сохранения рабочего скина вы можете вернуться к своему коду и изменить его, нажав кнопку "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> классы и идентификаторы в разметку вашей работы. Разметку работы можно редактировать в разделе Work Text (Текст работы) страницы Edit Work (Редактировать работу). Перед началом работы убедитесь, что редактируете текст в режиме "HTML".

Если вы вводили свой собственный CSS в шаге Ввод CSS, то добавьте свои CSS-селекторы в разметку работы. В противном случае мы продолжим работу с нашим примером.

В нашем примере у нас есть работа с такой разметкой:

  
<p>Дорогой Билли,</p>
<p>Вот письмо, которое я написала тебе. Надеюсь, ты <em>очень</em> впечатлен.</p>
<p>С любовью,</p>
<p>Аделаида</p>

Чтобы применить к ней три стиля из скина-образца, вам понадобится ввести HTML-элементы и атрибуты, которые соответствуют вашим CSS-селекторам:

  1. Чтобы применить стилизацию под письмо, оберните весь блок текста в тег <div> с классом .letter, указанным в скине.
  2. Чтобы применить стиль подписи, добавьте класс .signature из скина к последнему абзацу.
  3. Никакой дополнительный код не нужен для применения подчеркивания, потому что селектор em, использованный в CSS-коде скина, уже соответствует тегу <em> в разметке работы.

    4. В конечном итоге ваша разметка должна выглядеть так:

    
<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 Выкладки и редактирования. Вам также может пригодиться пошаговая Инструкция: выкладка работы.

Если мой вопрос остался неотвеченным, где я могу найти больше информации?

Чтобы больше узнать о скинах на Archive of Our Own – AO3 (Нашем Архиве), в том числе скинах сайта и публичных скинах, обратитесь к FAQ скинов и интерфейса AO3. На некоторые часто задаваемые о AO3 вопросы ответы можно найти в общем FAQ AO3. Вопросы и ответы о Пользовательском Соглашении находятся в FAQ Пользовательского Соглашения. Вы также можете ознакомиться с нашими Известными Проблемами. Если вам все еще нужна помощь, пожалуйста, свяжитесь с Поддержкой.