[Site Skin] Coffee House "Little Kitty Cat"

The AO3 site skin (suits all devices). To use the skin, simply copy and paste the CSS code. For a preview, see this github post. Alternatively, look inside this work for more screenshots and the code.

Notes:

(See the end of the work for notes.)

Work Text:

Main page screenshot

Screen1

See other screenshots

Filters
Screenshot-20240620-004946

Collections
Screenshot-20240620-005008

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 and press Use. You can return to the default ao3 skin by pressing the button Stop Using.

Take the code

CSS code on github (simply click on "Copy raw file").

CSS code is here (click on)

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

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

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

#outer.wrapper,
#inner.wrapper {
background-color: #B79479;
}

#inner.wrapper {
margin-top: 1em;
}

#main {
border: 2px solid #795A46;
box-shadow: 0 0 2px #000;
}

#header .heading {
height: 220px;
}

#header {
background-color: #B79479;
background-image: url("https://i.ibb.co/CKKKHyZ/Cats.png"), url("https://i.ibb.co/5nVVtVS/Coffee-Cup.png");
background-repeat: no-repeat, no-repeat;
background-position: left 60px, right 150px;
background-size: auto 172px, auto 80px;
}

#header .heading a {
color: #EBEBEB;
position: absolute;
top: 0em;
left: 0em;
}

#header .primary {
box-shadow: 0 0 2px #000;
background: #795A46;
border-bottom: 1px dashed #fff;
border-top: 1px dashed #fff;
}

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

#greeting {
margin-right: 0em;
margin-top: 5px;
}

#header .primary li,
#header .primary li a,
#greeting li,
#greeting li a {
color: #EBEBEB !important;
}

#greeting li {
clear: left;
border-bottom: 1px dashed #EBEBEB;
margin-top: 0.3em !important;
}

#greeting .icon img {
margin-top: 0.3em !important;
border: 2px solid #f5f7fa;
}

#greeting .dropdown .menu li {
margin: 0 0.125em !important;
}

#greeting .menu {
width: 16em;
}

.splash .favorite li:nth-of-type(odd) a {
background: #CDC3BE;
}

.system .latest h3,
.splash .module h3,
.system .tweets h3 {
color: #7b533a;
}

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

#workskin h2,
.preface h3 a {
color: #c95045;
}

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

#header #search .text {
background: rgba(250, 250, 250, 0.8) !important;
border: 1px solid #fff;
}

.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: #795A46 !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: #EBEBEB !important;
color: #000 !important;
}

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

#greeting .current,
#greeting .dropdown:hover li,
#greeting .dropdown:focus li {
box-shadow: none;
background: #EBEBEB !important;
color: #000 !important;
}

#dashboard.own,
#dashboard {
background: #F3F2EE;
box-shadow: 0 0 2px #000;
color: #000;
border: 2px solid #795A46;
}

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

#dashboard .secondary {
background-color: #fff;
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: #795A46;
}

.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: #b8afab;
border-color: #795A46;
}

.flash,
.notice {
background-color: #795A46;
color: #fff;
border-color: #000;
}

.flash a,
.notice a {
color: #fff;
}

form .notice,
ul.notes,
.caution {
background-color: #FFEEDA;
border-color: #997e8c;
color: #000;
}

form .notice a,
ul.notes a,
.caution a {
background-color: #FFEEDA;
border-color: #997e8c;
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,
li.relationships a,
.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: #CDC3BE;
}

.filters .submit input {
color: #FFF;
background: #795A46;
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(250,250,250, 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: 1px solid #795A46;
border-radius: 10px;
}

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

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

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

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

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

.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: #dd7369 !important;
box-shadow: 0 0 4px #000;
border: 1px solid #795A46;
}

Notes:

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

Mirror/source for the header

The source is kira-scrap.ru: Cat, Coffee

Actions

Kudos

trin_the_star45, LemonAndGunpowder, Mike_loves_byler, sal_zee, Raymon, Cathieeee_4, jnyaaab, Ghost_g1rl, pralinkialinki27, Biancaathecat, SunnyTimeComingSunnyTimeComingSunnyTime, seven_cat, Justarandomperson777, PINKKZ, ec1ipz33, sexyauthor_ed, Miviys, PjoxDCxMarvel_fan, some_trashcan, Elliotghkh, Basilfly, angosn1dickrider, Obsessive_Procrastinator, CursedSoot, quinnessential, cuteofdeath, DeadPanTrashLord, az_rina, Peanut_butter_cup3, coffeemuke, dreamy_in_my_Linniverse, SweetiepieBerry, lightninghawke, scaramoooche, Travvvvis, sakatan, ozamaki, lutessa3554, oddny, kamellia, asterlayna2, rossxnoie, beomppy, di6nity, kissesforbubu, Writing_by_Moonlight, WhenAngelsDrown, Reizenbou, TheGayCowboy, Pouick_Pouick, and 16 more users as well as 8 guests left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header