Work Text:
1. Скрины некоторых страниц
(клик на картинку открывает ее полный размер)
Главная
Профиль и навигация
Footer
Фильтры и записи
Формы
Работы
Comments
Kudos
Коллекции
2. Инструкция по установке
Примерить скин:
- На главной странице необходимо открыть вашу навигационную панель через Hi, никнейм -> My Dashboard.
- Выбрать пункт Skins и в нем Create Site Skin.
- Придумайте уникальное имя вашего скина, скопируйте и вставьте CSS code, представленный ниже, и нажмите кнопку Submit, а затем Use.
Отменить скин и вернуться к стандартному:
- Рядом со скином нажмите кнопку Stop using.
3. CSS code
Общий для PC
(взять с github)
#header,
#inner.wrapper {
margin: 0px 500px 0px 30px;
}
#header h1 sup,
#header .button,
#greeting p.icon,
#header .logo {
display: none;
}
#main,
#inner,
body,
th,
tr:hover,
col.name,
fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff,
input:focus,
select:focus,
textarea:focus,
.autocomplete div.dropdown ul,
#ui-datepicker-div,
#ibox_wrapper,
#ibox_content,
.toggled form,
.dynamic form,
.secondary,
.listbox .index,
.dashboard .listbox .index,
.nomination dt {
background: #F3F8F4;
}
body,
#main a,
input[type="submit"],
.actions a:visited,
.action,
button,
.actions label {
color: #2A1D15;
}
#footer,
#outer.wrapper {
background-color: #fff;
background-image: url("https://i.ibb.co/x5SdM85/1631905005-fon4.jpg");
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
}
#footer {
border: none;
float: left;
width: 70%;
color: #2A1D15;
}
#footer h4,
#footer .menu,
#footer a {
color: #2A1D15 !important;
}
#header .heading {
height: 150px;
background: none;
padding-top: 100px;
}
#header .heading a {
color: #5B756D;
font-size: 22px;
font-family: Arial;
font-style: italic;
position: absolute;
left: 50px;
top: 90px;
}
#greeting {
height: 35px;
right: 0px;
background: none;
position: absolute;
top: 90px;
color: #5B756D;
font-size: 17px;
font-family: Arial;
font-style: italic;
}
#greeting li a {
color: #5B756D !important;
font-size: 17px;
font-family: Arial;
font-style: italic;
}
#header {
background: none;
margin-bottom: 20px;
}
#header .primary {
padding-top: 5px;
box-shadow: none;
background: #b0f1f3;
border: 1px dashed #5B756D;
}
#main.dashboard {
padding-left: 10px;
}
#main {
padding: 0.5em;
}
form.filters {
width: 25%;
float: right;
}
#header .dropdown .menu,
#greeting .dropdown .menu,
#inner.wrapper {
border: 1px solid #5B756D;
}
#header .primary a {
color: #2A1D15 !important;
}
#header #search .text {
width: 80%;
}
.splash .module h3 {
border-bottom: 2px solid #5B756D;
}
.splash .news li {
border-bottom: 1px dashed #5B756D;
}
.statistics .index li:nth-of-type(even),
.splash .favorite li:nth-of-type(odd) a {
background: #d8e5e4;
}
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
a.tag:hover,
.listbox .heading a.tag:visited:hover {
background: #62E4E8;
}
.system .latest h3,
.splash .module h3,
.system .tweets h3 {
color: #04A7DD;
}
#header .dropdown .menu,
#greeting .dropdown .menu,
#header .dropdown .menu a,
#greeting .dropdown .menu a,
#header .dropdown:hover a {
background: #cff6f8 !important;
color: #2A1D15 !important;
font-size: 14px;
font-style: normal;
}
#dashboard a:hover,
#dashboard .current,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
#greeting .dropdown .menu a:hover,
#greeting .dropdown .menu a:focus {
background: #62E4E8 !important;
color: #2A1D15 !important;
font-size: 14px;
font-style: normal;
}
#dashboard,
#dashboard.own {
background: #d8e5e4 !important;
color: #2A1D15 !important;
font-size: 14px;
font-style: normal;
}
tbody tr,
thead td,
#header #small_login,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
form dt,
.actions a:active,
.current,
a.current,
.current a:visited,
.search span.tip,
.listbox,
fieldset fieldset.listbox,
#header ul.primary .current {
border-color: #5B756D;
}
#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_error,
#header ul.primary,
.LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
#header .primary a,
#header .primary .current,
#header .primary input,
#header .search input {
border-color: #5B756D !important;
}
#main .verbose legend,
.verbose fieldset,
ul.notes,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.flash,
.alert.flash,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
background: #e2f9fa;
border: 2px solid #5B756D;
color: #2A1D15;
}
.notice {
background: #62E4E8;
border: 2px solid #5B756D;
color: #2A1D15;
}
.notice a {
color: #2A1D15 !important;
}
.flash {
border: none;
}
h2 {
font-size: 1.286em;
line-height: 1;
margin: 0.5375em 0;
}
.listbox,
fieldset fieldset.listbox,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.secondary form {
background: #d8e5e4;
}
select,
.toggled form,
.dynamic form,
input,
textarea,
.listbox .index,
#ibox_wrapper,
#ibox_content,
.thread .even {
background: #F3F8F4;
}
.filters .submit input {
background: #b0f1f3;
color: #000;
border: 1px solid #5B756D;
}
.icon img,
.comment .icon .visitor {
background-color: #fff;
height: 80px;
width: 80px;
padding: 0px;
margin: 0px;
border: 4px solid transparent;
}
.comment .icon .visitor {
background-color: #FFF;
background-image: url("https://archiveofourown.org/images/skins/iconsets/default/icon_user.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 80px 80px;
}
.comment div.icon {
border-bottom: none;
}
.comment h4.byline {
background: #5B756D;
color: #fff;
}
.comment h4.byline a {
color: #fff !important;
}
li.comment {
background: #d8e5e4;
border: 2px solid #5B756D;
}
dl.meta,
li.blurb,
.listbox li.blurb {
box-shadow: none;
background: #e2f9fa;
border: 1px dashed #5B756D;
}
#workskin .notes,
dl.meta,
.comment .posted,
.comment .edited {
font-size: 90%;
}
p.kudos {
font-size: 95%;
margin-top: 15px;
background-color: #e2f9fa;
border: 1px dashed #5B756D;
}
#workskin {
text-align: justify;
}
#workskin h2 {
font-size: 2.143em;
color: #04A7DD;
}
.blurb h4 a:link {
color: #04A7DD !important;
}
.bookmark .user,
.reading h4.viewed {
font-size: 90%;
border: none;
background: #c7f5f6;
}
dl.index dd {
background: #d8e5e4;
}
li.relationships a {
background: #c7f5f6;
}
ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
float: left !important;
margin: 0;
padding: 2px;
}
li.warnings + li.relationships,
li.relationships + li.characters,
li.characters + li.freeforms,
li.warnings + li.characters,
li.warnings + li.freeforms,
li.relationships + li.freeforms {
clear: left;
}
ul.tags li.warnings:first-child:before {
content: "Warnings: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.warnings + li.relationships:before {
content: "Relationships: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.relationships + li.characters:before {
content: "Characters: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.characters + li.freeforms:before {
content: "Other tags: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.warnings + li.characters:before {
content: "Characters: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.warnings + li.freeforms:before {
content: "Other tags: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.relationships + li.freeforms:before {
content: "Other tags: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
li.blurb blockquote p:first-child::before {
content: "About: ";
color: #B98A33;
font-size: 95%;
font-family: Georgia,serif;
font-weight: 600;
}
.blurb ul.series::before {
content: "Series: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
.blurb .fandoms::before {
content: "Fandom: ";
color: #B98A33;
font-family: Georgia,serif;
font-weight: 600;
}
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
background: #c7f5f6 !important;
}
#header h2 {
background-color: #5B756D !important;
}
.bookmark .dynamic {
border: none;
}