Chapter Text
Когда вы чуть-чуть освоились, можно немного поиграться с внешним видом сайта. Вы можете как использовать Public Site Skins, так и создать свой собственный. Здесь я расскажу только про самые базовые вещи, а именно:
- как создать сайт скин похожий на фикбук;
- как изменить размер шрифта;
- как изменить шрифт;
- как изменить цвет фона.
Но для начала посмотрим на то, а как собственно создавать сайт скин. Открываем вкладку Skins. В правом верхнем углу находим кнопочку "Create site skins" (Создать сайт скин).
После этого перед вами появится несколько полей.
Придумываете название скина (любое, какое вам больше нравится). Все остальные поля можно заполнить по желанию, а можно оставить без внимания. В самом большом окне CSS мы и будем прописывать кодировки. Если вам уже стало страшно при слове "кодировки", то расслабьтесь. Большинство из них вы сможете скопировать отсюда и просто вставить в соответствие с вашими интересами.
Что ещё интересно знать:
- Вы можете создать несколько сайт скин и менять их по желанию;
- созданные вами сайт скин не видит никто кроме вас.
Как создать сайт скин похожий на фикбук.
Благо люди у нас рукастые, поэтому MMagg создала сайт скин, который полностью соответствует всем нам привычному и знакомому сайту. Поэтому для того, чтобы сделать такой скин сайта (примеры можно увидеть в работе по ссылке ниже), необходимо:
- Откройте два окна с архивом. В одном из них перейдите на вкладку Скинс и создайте новый скин. Во второй вкладке откройте вот эту ссылку, где прописан код (там тоже есть инструкция, можете действовать по ней, всё аналогично);
- Придумайте название своему скину;
- Скопируйте код из ссылки вставьте его в поле CSS;
- Пролистайте вниз страницы и нажмите Submit;
- После этого нажмите на кнопочку "Use" (внизу страницы) и сайт скин установится.
Поздравляю, вы прекрасны, используйте сайт скин с удовольствием :)
- Если не хотите как на фикбуке, а из Публичных скинов ничего не нравится
Как изменить размер шрифта.
Если вы человек с не самым хорошим зрением, то вам это будет полезно. Для увеличение размера текста в фанфике и в описании, в скин вставляете следующий код:
#workskin
{ font-size: 130%; }
Размер текста будет зависеть от процента, который вы выставите. 100% - это стандартный размер, так что можете поиграть с числами, чтобы понять какой наиболее удобен для вас.
Важно! В фикбуковском скине это работает по другому. У автора это описано, как на мой взгляд, доступно)
Важно x2! Размер шрифта такой код изменит только в самой работе, а не везде.
Как изменить шрифт.
Если вас раздражает тип шрифта, то можете прописать его изменение в своём сайт-скине. Приведённый ниже код изменит его на Таймс нью роман. Если вы хотите какой-то другой шрифт, то вот здесь можете найти примеры шрифтов и к каким семействам они относятся. Важно! Шрифт изменится только в самом теле работы
#workskin {
font-family: 'Times New Roman', serif;
}
Но если хочется поменять везде и всюду, то вот вам пример такого изменения. Важно! В этом коде прописан также размер шрифта. Если вам нужен вариант больше или меньше, то во всех строчках значения "font-size" нужно будет изменить цифру на большую или меньшую в соответствие с вашим желанием увеличить или уменьшить текст.
P {
font-size: 18px;
}
body {
font-family: 'Times New Roman', serif;
font-size: 18px;
}
body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
font-family: 'Times New Roman', serif;
}
blockquote,
pre {
font-family: 'Times New Roman', serif;
}
#header .heading a {
font-family: 'Times New Roman', serif;
}
#header ul.primary {
font-family: 'Times New Roman', serif;
}
body,
#main,
#main a,
input[type="submit"],
.actions a:visited,
.action,
button,
.actions label {
font-family: 'Times New Roman', serif;
}
#workskin {
font-family: 'Times New Roman', serif;
}
#workskin h2 {
font-size: 2em;
font-family: 'Times New Roman', serif;
}
ul.tags li.warnings:first-child:before {
content: "Warnings: ";
font-family: 'Times New Roman', serif;
}
li.warnings + li.relationships:before {
content: "Relationships: ";
font-family: 'Times New Roman', serif;
}
li.relationships + li.characters:before {
content: "Characters: ";
font-family: 'Times New Roman', serif;
}
li.characters + li.freeforms:before {
content: "Other tags: ";
font-family: 'Times New Roman', serif;
}
li.warnings + li.characters:before {
content: "Characters: ";
font-family: 'Times New Roman', serif;
}
li.warnings + li.freeforms:before {
content: "Other tags: ";
font-family: 'Times New Roman', serif;
}
li.relationships + li.freeforms:before {
content: "Other tags: ";
font-family: 'Times New Roman', serif;
}
li.blurb blockquote p:first-child::before {
content: "About: ";
font-family: 'Times New Roman', serif;
}
.blurb ul.series::before {
content: "Series: ";
font-family: 'Times New Roman', serif;
}
.blurb .fandoms::before {
content: "Fandom: ";
font-family: 'Times New Roman', serif;
}
#header h2 {
font-family: 'Times New Roman', serif;
}
Как изменить цвет фона.
Если в общем и целом, вам просто хочется сделать фон сайта чуть темнее, то используйте для этого следующий код:
#workskin {
background-color: #e1dee;
}
Цвет, который вам нужно вы можете выбрать здесь, здесь или здесь