Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Characters:
Additional Tags:
Language:
Русский
Collections:
L Visitcard_Challenge_Special quest, Level 3: Челлендж 2025
Stats:
Published:
2025-08-07
Words:
1,229
Chapters:
1/1
Comments:
12
Kudos:
44
Bookmarks:
2
Hits:
2,164

[Site Skin] Огородники

Summary:

Фандомный скин для сайта ао3. Оптимально подходит для десктопных устройств, но может использоваться и для большинства мобильных устройств и телефонов. Чтобы использовать скин, просто скопируйте код.

EN. The AO3 site skin (better suited to Desktop). To use the skin, simply copy and paste the CSS code (CSS code on github where simply click on "Copy raw file"). For a preview, see this github post. Alternatively, look inside this work for more screenshots and the code.

Notes:

Арты Анн-и-Арт
and free wallpaper from million-wallpapers.ru

(See the end of the work for more notes.)

Work Text:

Примечание: Для мобильных телефонов необходимо найти в первых строках кода #inner.wrapper { margin: 0em 4%; } и заменить на #inner.wrapper { margin: 0em; } Это удалит поля/отступы слева и справа.

По желанию можно изменить ширину шапки. Для этого найдите в первых строках кода #header { width: 80%; max-width: 880px; margin: 0em auto 0em auto; } и замените максимальный размер в 880px на свое желаемое значение. Ширина в 80% (строка width: 80%;) позволяет видеть фигуры Гарри и Драко целиком на мобильных устройствах. Это значение также можно изменить или удалить (в этом случае часть фигур будет за пределами экрана телефона).

КОД СКИНА/To use the skin, simply copy and paste the CSS code (CSS code on github where simply click on "Copy raw file").

CSS code is here/КОД СКИНА (click on)

#header h1 sup,
#greeting .icon,
#header .button,
#header .landmark,
#header .logo {
display: none;
}

#inner.wrapper {
margin: 0em 4%;
}

#header {
width: 80%;
max-width: 880px;
margin: 0em auto 0em auto;
}

#main,
.listbox .index,
.thread .even,
.work.own {
background: #fbf4e6;
}

#outer.wrapper {
padding-top: 44px;
background-color: #e7b552;
background-image: url("https://images2.imgbox.com/ba/9a/oCFvuCun_o.png"), url("https://images2.imgbox.com/3f/87/YTtgv40K_o.png");
background-repeat: repeat-x, repeat;
background-position: left top, left top;
background-size: auto 40px, auto 140px;
}

#header .heading {
height: 400px;
background: none;
}

#inner.wrapper {
background-color: #96ae50;
padding: 70px 4px 4px 4px;
}

#header {
background-color: #96ae50;
background-image: url("https://images2.imgbox.com/63/b7/irnAzKpq_o.jpg");
background-repeat: no-repeat;
background-position: bottom left;
background-size: cover;
border: 4px solid #96ae50;
}

#header::after {
background-image: url("https://images2.imgbox.com/51/2c/WtNyCw1I_o.png");
background-size: 173px 390px;
display: inline-block;
width: 173px;
height: 390px;
content: "";
z-index: 40;
position: absolute;
right: -70px;
top: 60px;
}

#header::before {
background-image: url("https://images2.imgbox.com/f5/2b/J0iG5E4U_o.png");
background-size: 205px 160px;
display: inline-block;
width: 205px;
height: 160px;
content: "";
z-index: 40;
position: absolute;
left: -70px;
top: 270px;
}

#header .primary {
box-shadow: none;
background: #3a3732;
position: absolute;
top: -40px;
left: 0px;
}

#header .primary li:first-child {
margin-left: 0em;
}

#header #search .text {
width: 80%;
background: rgba(250,250,250,0.8);
}

#greeting {
background-color: #96ae50;
position: absolute;
top: 448px;
right: -30px;
}

#greeting li {
background: rgba(255,255,255,0.8);
box-shadow: 0 0 2px #000;
border: 2px solid #dddddd;
}

#greeting .menu {
width: 16em;
}

#header .heading a {
color: #fff;
position: absolute;
top: 418px;
left: -30px;
}

.splash .favorite li:nth-of-type(odd) a {
background: rgba(255,255,255,0.8);
}

#workskin h2,
.preface h3 a,
.system .latest h3,
.splash .module h3,
.system .tweets h3 {
color: #b32e2b;
}

.blurb h4 a:link {
color: #b32e2b !important;
}

#footer {
background: none;
border: none;
}

#footer h4 {
background: #96ae50;
border-top: 2px solid #3a3732;
border-bottom: 2px solid #3a3732;
padding: 0px 5px 0px 5px;
}

#footer h4 a {
background: #96ae50;
color: #fff !important;
}

#footer .menu {
background: #e7b552;
border: 1px solid #3a3732;
padding: 5px;
}

#footer .menu,
#footer .menu a {
color: #000;
}

#main.dashboard,
#dashboard {
margin-top: 0em;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
a.tag:hover,
a.tag:focus,
#dashboard a:hover,
#dashboard a:focus,
#dashboard .current,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus {
background: #96ae50 !important;
color: #fff !important;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .dropdown .menu a,
#header .dropdown .menu,
#greeting .dropdown .menu,
#greeting .dropdown .menu a {
background: #e6d3b3 !important;
color: #000 !important;
}

#header .dropdown .menu,
#greeting .dropdown .menu {
border: 1px solid #a1856f;
}

#greeting .current,
#greeting .dropdown:hover li,
#greeting .dropdown:focus li {
box-shadow: none;
border-right: none;
border-left: none;
border-top: none;
background: #e6d3b3 !important;
color: #000 !important;
}

#dashboard.own {
color: #000;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 2px #000;
border: 2px solid #dddddd;
}

#dashboard {
background: rgba(255,255,255,0.5);
box-shadow: 0 0 2px #000;
color: #000;
border: 2px solid #dddddd;
}

#dashboard ul {
background: transparent;
border: none;
}

#dashboard .secondary {
background-color: rgba(250,250,250,0.7);
box-shadow: none;
}

.splash .module h3,
.splash .news li,
.home .header h2,
li.comment,
dl.meta,
.bookmark .user,
#header .menu li,
#dashboard ul,
#dashboard .secondary,
ul.notes,
.flash,
.notice,
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 {
border-color: #a1856f;
}

.comment h4.byline,
#main .verbose legend,
.unread,
.child,
.unwrangled,
.unreviewed,
.verbose fieldset,
.draft,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
background-color: #d2c2a6;
border-color: #a1856f;
}

.flash,
.notice {
background-color: #f0c97d;
}

form .notice,
ul.notes,
.caution {
background-color: #b5c9c7;
}

.alert.flash,
.error,
.comment_error,
.kudos_error {
background: #efd1d1;
color: #000;
border-color: #900;
}

h2 {
font-size: 1.286em;
line-height: 1;
margin: 0.5375em 0;
}

li.relationships a,
.listbox,
.bookmark .user,
.bookmark .user .header,
.reading h4.viewed,
.dropdown,
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,
.required .autocomplete {
background-color: #e6d3b3;
}

.filters .submit input {
color: #FFF;
background: #a1856f;
box-shadow: 0 0 4px #000;
border: none;
}

li.blurb,
.listbox li.blurb,
li.comment,
.statistics .index li:nth-of-type(even),
dl.meta,
dl.index dd,
#ibox_wrapper,
#ibox_content,
textarea:focus,
input:focus,
select:focus {
background: rgba(255,255,255,0.8);
}

textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input {
background-color: #fff;
}

li.blurb,
.listbox li.blurb {
box-shadow: 0px 0px 4px #000;
border: 2px solid #a1856f;
border-radius: 10px;
}

.bookmark .user {
border-radius: 5px;
}

.blurb .header {
border-bottom: 1px solid #a1856f;
}

.bookmark .user .module {
border: none;
}

.reading h4.viewed,
.bookmark .user {
box-shadow: none;
}

.reading h4.viewed {
border: 1px dashed #a1856f;
}

.icon {
border: 2px solid #fff;
}

.comment div.icon {
border-bottom: none;
}

#workskin .notes,
dl.meta,
.reading h4.viewed,
.bookmark .user,
.comment .posted,
.comment .edited {
font-size: 90%;
}

#workskin {
text-align: justify;
}

#workskin h2 {
font-size: 2.7em;
}

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: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.warnings + li.relationships:before {
content: "Relationships: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.relationships + li.characters:before {
content: "Characters: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.characters + li.freeforms:before {
content: "Other tags: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.warnings + li.characters:before {
content: "Characters: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.warnings + li.freeforms:before {
content: "Other tags: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.relationships + li.freeforms:before {
content: "Other tags: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

li.blurb blockquote p:first-child::before {
content: "About: ";
color: #000;
font-size: 95%;
font-family: Georgia,serif;
font-weight: 600;
}

.blurb ul.series::before {
content: "Series: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

.blurb .fandoms::before {
content: "Fandom: ";
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}

#header h2 {
background-color: #B9848C !important;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
box-shadow: 0 0 4px #000;
clear: right;
}

Как примерить скин (инструкция): Последовательно выбрать: 1. Hi, nickname, 2. My Dashboard, 3. Skins, 4. Create Site Skin. Скопировать и вставить код, нажать Use. В любой момент можно отменить скин и вернуться к стандартному через кнопку Stop Using .

Скрин главной страницы с компьютера:
СКРИН1
Скрин главной страницы с планшета:
СКРИН2
Скрин главной страницы с телефона (Samsung Galaxy S8+, 360x740):
СКРИН3
Фильтры:
СКРИН4
Коллекции:
СКРИН5


ГАЛЕРЕЯ

futbolca tort Doll Fotoset Skin game Skin sammer Design
China Soap Epoxy Resin Sticker set

Notes:

ТЕЛЕГРАМ-КАНАЛ команды. Присоединяйтесь!

 

 

Чтобы проголосовать за эту работу, пройдите по ссылке: голосование за челлендж. В вашем голосе должно быть не меньше трёх работ от трёх разных команд.