Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Collections:
Ao3 Skins
Stats:
Published:
2022-12-30
Words:
1,028
Chapters:
1/1
Comments:
5
Kudos:
48
Bookmarks:
22
Hits:
5,451

[Site Skin] A Cup of Tea

Summary:

The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).

RU. Аннотация

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

Notes:

(See the end of the work for notes.)

Work Text:

Main page screenshot (full size by click on)

See more screenshots

Filters
Screenshot-20221230-151132
Collections
Screenshot-20221230-151109
Works/Comments/Kudos
Screenshot-20221230-151425
Screenshot-20221230-151441

CSS code. Take from github or from the box
#header h1 sup, #header .button, #header .landmark, #header .logo { display: none; } #header, #inner.wrapper { margin: 0em 4%; } #outer.wrapper { padding-top: 16.5em; background: #466B4A url("https://i.ibb.co/xzztpg1/WBG5.jpg") repeat-x; } #footer { float: left; border: none; background: none; } #header .primary, #inner.wrapper, #main, #inner, body, .listbox .index, li.relationships a { background: #E2CFC0; } #header .heading { height: 5.5em; background: none; } #header { background: #C9C183; border-top: 2px solid #C8872B; border-left: 2px solid #C8872B; border-right: 2px solid #C8872B; border-top-right-radius: 10px; border-top-left-radius: 10px; } #inner.wrapper { border-bottom: 2px solid #C8872B; border-left: 2px solid #C8872B; border-right: 2px solid #C8872B; box-shadow: 0 0 4px #000; } #header .primary { box-shadow: none; } #header .heading a { color: #466B4A; position: absolute; top: 0em; right: 0.5em; } #greeting { background: none; margin-top: 3em; } #header .primary li, #header .primary li a, #greeting li, #greeting li a { color: #466B4A !important; } #greeting li { margin-right: 0.5em !important; border: 1px solid #466B4A; box-shadow: 0 0 1px #000; } #greeting li:last-child { margin-right: 0em !important; } #greeting .dropdown .menu li { margin: 0 0.125em !important; } #greeting .menu { width: 16em; } #greeting .icon img { box-shadow: 0 0 5px #000; border: 2px solid #fff; margin-right: 4px; } .splash .favorite li:nth-of-type(odd) a { background: #C9C183; } .system .latest h3, .splash .module h3, .system .tweets h3 { color: #C8872B; } .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: #466B4A !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: #ede2d9 !important; color: #000 !important; } #dashboard { background: #d3cd9b; } #dashboard.own { background: #ede2d9; } #dashboard.own { border-color: #C9C183; } #header .dropdown .menu, #greeting .dropdown .menu { border: 1px solid #466B4A; } #greeting .current, #greeting .dropdown:hover li, #greeting .dropdown:focus li { box-shadow: none; background: #ede2d9 !important; color: #000 !important; border-top: none; border-left: none; border-right: none; } #main.dashboard, #dashboard { margin-top: 0em; } #dashboard, .reading h4.viewed, .bookmark .user, .home .header h2, .splash .module h3, .splash .news li, dl.meta, li.comment, #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: #466B4A; } #main .verbose legend, .comment h4.byline, .reading h4.viewed, .unread, .child, .unwrangled, .unreviewed, .verbose fieldset, form ul.notes, #modal, .ui-sortable li, .comment_notice, .kudos_notice, div.dynamic, #ui-datepicker-div, .ui-datepicker table { background-color: #C9C183; border-color: #466B4A; } .flash, .notice { background-color: #bca186; } form .notice, ul.notes, .caution { background-color: #fdecae; border-color: #000; } .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; } .listbox, .draft, .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: #d3cd9b; } .filters .submit input { color: #FFF; background: #466B4A; box-shadow: 0 0 4px #000; border: none; } li.comment, #ibox_wrapper, #ibox_content, textarea:focus, input:focus, select:focus, li.blurb, .listbox li.blurb, .statistics .index li:nth-of-type(even), dl.meta, dl.index dd { background-color: #ede2d9; } .work.own, .thread .even, .bookmark .user, .bookmark .user .header, textarea, input, select, option, .toggled form, .dynamic form, .autocomplete .dropdown ul, .autocomplete .dropdown ul li, .autocomplete input { background-color: #f6f0ec; } li.blurb, .listbox li.blurb { box-shadow: 0px 0px 4px #000; border: 1px solid #466B4A; border-radius: 10px; } .blurb .header { border-bottom: 1px solid #466B4A; } .blurb .datetime { color: #FFF; background: #466B4A; } .bookmark .user .datetime { background-color: #f6f0ec; color: #000; } .bookmark .user .module { border: none; } .reading h4.viewed, .bookmark .user { box-shadow: none; } .reading h4.viewed { border: 1px dashed #466B4A; } .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; width: auto; } .comment div.icon { border-bottom: none; } #workskin .notes, dl.meta, .reading h4.viewed, .bookmark .user, .comment .posted, .comment .edited { font-size: 95%; } #workskin { text-align: justify; } #workskin h2 { font-size: 2.7em; color: #C8872B; } 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: #466B4A !important; } #dashboard ul { background: transparent; border: none; } #dashboard .secondary { background-color: #fff; box-shadow: none; }

How to try on. Press the buttons: 1. Hi, nickname, 2. My Dashboard, 3. Skins, 4. Create Site Skin. Simply copy and paste the CSS code provided and press Use. You can return to the default ao3 skin by pressing the button Stop Using.

RU. Как примерить скин

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

Notes:

To change the left and right margins, find in the CSS code the following lines: #header, #inner.wrapper { margin: 0em 4%; } and replace 4% by 2% etc. Use { margin: 0em; } for cellphones.

RU. Примечание на русском

Чтобы изменить отступы слева и справа, найдите в первых строках кода #header, #inner.wrapper { margin: 0em 4%; } и замените 4%, например, на 2% или же на { margin: 0em; } (т.е. без отступов, оптимально для телефонов).

Sources/Исходники/Details

Mirror for the background:
https://images2.imgbox.com/ba/01/JukAaPna_o.jpg