Work Text:
Ocean Pearl (Responsive)
Must be logged in to view. C&P code below. THIS IS A SITE SKIN.
Rules
There are none since this was a modified edit. Maybe subscribe or bookmark to check updates.
Users are allowed to modify this edit however they like.
Recommended Resources
Notepad++ (for code writing, save file as ".css")
ColorHexa (for color codes)
W3Schools (CSS code help)
Updates
Sept.02.2021:
SITE SKIN: Element [ol.work.index.group] added to fix spacing issue.
WORK SKIN: AddedNov.28.2021:
SITE SKIN: Element [listbox] modified to fix margin and padding spacing issue in Fandoms pages.Jun.15.2026:[TikTok Tutorial]
> Tutorial Link.
CSS
#outer .region {
background: rgba(173, 216, 230,0.85);
}
#inner {
background: #add8e6 url("https://static.tumblr.com/0fultrp/pDhqt88h5/5159221.jpg");
padding: 24px 40px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#footer .group,
.post fieldset fieldset,
fieldset fieldset {
background: none;
}
body,
.group .group,
.region,
fieldset,
fieldset fieldset ul,
form dl,
textarea,
#main .verbose legend,
.verbose fieldset,
.notice,
ul.notes,
input,
textarea,
table,
th,
td:hover,
tr:hover,
.symbol .question:hover,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.comment_error,
.kudos_error,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
background: rgb(232, 244, 248);
color: #153a45;
outline: #5f9ea0;
box-shadow: none;
border-color: transparent;
border-radius: 10px;
padding: 5px;
}
dl.subscription.index.group {
padding: 15px 0 0 15px;
}
ol.work.index.group {
padding-left: -3.5%;
padding-right: -3.5%;
}
.alphabet .listbox li,
.media .listbox,
li.medium.listbox.group {
margin-left: 2.25%;
margin-right: 1.125%;
}
li.medium.listbox.group {
height: 275px;
max-width: 100%;
min-width: 35%;
}
height: 275px; width: 100%; .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 {
border-color: 1px solid #900;
box-shadow: none;
}
form .notice,
form ul.notes {
box-shadow: none;
}
#header {
margin: 0;
padding: 0;
position: relative;
border-bottom: 1px solid #eee8aa;
}
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.group.listbox,
dl.work.meta.group,
div.preface.group,
fieldset fieldset.listbox,
form blockquote.userstuff,
input:focus,
textarea:focus,
li.relationships a,
.group.listbox .index,
.dashboard fieldset fieldset.listbox .index,
#dashboard a:hover,
th,
#dashboard .secondary,
.secondary,
.thread .even,
.system .tweet_list li,
.ui-datepicker tr:hover {
background: rgba(232, 244, 248,0.75);
outline: 0;
}
.index a:hover {
color: #e8f4f8;
background: #5998D6;
}
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.splash .favorite li:nth-of-type(odd) a,
.ui-datepicker td:hover,
#tos_prompt .heading,
#tos_prompt [disabled] {
background: rgba(173, 216, 230,0.75);
outline: 0;
}
#outer,
.javascript,
.statistics .index li:nth-of-type(even),
#tos_prompt,
.announcement input[type="submit"] {
background: #add8e6;
padding: 0;
}
#header ul.primary,
#outer #footer,
.toggled form {
background: url("https://static.tumblr.com/0fultrp/ZcFqt9goo/qi2kz0h.png");
background-repeat: no-repeat;
background-size: cover;
}
#header ul.primary,
#dashboard ul,
dl.meta,
dl.work.meta.group,
div.preface.group,
fieldset fieldset.listbox,
#main li.blurb,
div.comment,
li.comment,
.toggled form,
form dl dt,
#inner .module .heading,
.bookmark .status span,
.splash .news li,
.filters .group dt.bookmarker {
border-color: #eee8aa;
border-radius: 10px;
}
ul.abbreviated.comment.group .icon {
height: 100px;
width: 100px;
padding: 10px 0 10px 0;
}
span.posted.datetime {
margin-top: 10px;
}
#footer,
.group.listbox,
form blockquote.userstuff {
border-color: #eee8aa;
}
.status.unread {
background: transparent;
}
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
box-shadow: none;
}
#dashboard .current,
.actions a:active,
#outer .current,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover {
background: #d8f5ff;
border: 0;
box-shadow: none;
outline: 0;
}
dl.index dd {
background: none;
}
.current:hover {
background: #d8f5ff;
}
input,
textarea {
box-shadow: none;
outline: 0;
border: 1px solid #8fbbbd;
}
li.blurb,
.blurb .blurb,
.listbox .index,
fieldset fieldset.listbox,
.dashboard .listbox .index {
box-shadow: none;
}
#footer a {
color: #5f7ea0;
}
#footer a:hover,
#footer a:focus,
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
.symbol .question,
.qtip-content {
background: #5998D6;
color: #00003f;
outline: 0;
}
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
background: #5998D6;
color: #00003f;
outline: 0;
}
#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header fieldset,
#header form,
#header p,
#dashboard a:hover,
.actions a:hover,
.actions input:hover .delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.splash .module h3,
.splash .browse li a:before,
.required,
.error,
.comment_error,
.kudos_error,
a.cloud7,
a.cloud8,
h5.fandoms.heading a:hover,
#footer .actions .secondary a,
#tos_prompt .heading {
color: #153a45;
outline: 0;
box-shadow: 0;
}
.fandoms.heading,
li.blurb .tags {
max-height: 120px;
overflow-y: auto;
}
#greeting .icon,
#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_error,
#header .actions .current,
.qtip-content {
border-color: #5998D6;
}
a,
a:link,
a.tag,
#header a,
#header a:visited,
#header .current,
#header #search input:focus,
#header #search input:hover,
#dashboard a,
#dashboard span,
#dashboard .current,
.heading,
.group .heading,
.filters dt a:hover {
color: #00003f;
outline: 0;
}
#header .primary .open a,
#header .primary.navigation.actions,
#header .primary.navigation.actions a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover {
color: #00003f;
outline: 0;
box-shadow: none;
}
#header .primary.navigation.actions a:hover,
#header .dropdown .menu a:hover,
ul.navigation.actions li:hover {
color: #5998D6;
}
a:visited,
.actions a:visited,
.action a:link,
.action a:visited,
.listbox .heading a:visited,
span.series .divider {
color: #b8860b;
outline: 0;
}
.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
label.actions,
.submit input,
.advanced_skin_open.action.hidden,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a {
background: #eee8aa;
border-color: transparent;
color: #b8860b;
box-shadow: none;
text-shadow: none;
outline: 0;
}
.actions a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
.submit input:hover,
label.action:hover,
.advanced_skin_open.action.hidden:hover,
#dashboard a:focus {
background: #add8e6;
color: #5998D6;
border-color: transparent;
box-shadow: none;
outline: 0;
}
.actions a:active,
.current,
a.current,
.current a:visited {
color: #00003f;
background: transparent;
border-color: transparent;
box-shadow: none;
outline: 0;
}
.delete a,
span.delete {
box-shadow: none;
outline: 0;
}
ul.required-tags,
.bookmark .status span,
.blurb .icon {
opacity: 0.9;
border: 0;
}
#outer .group .heading,
#header .actions a,
#footer .secondary a,
fieldset.listbox .heading,
.userstuff .heading,
.heading,
.userstuff h2 {
text-shadow: none;
color: #00003f;
background: none;
outline: 0;
}
#header .actions a,
fieldset fieldset,
.mce-container button,
.filters .expander {
box-shadow: none;
outline: 0;
}
fieldset fieldset.listbox {
outline: none;
}
form dd.required {
color: #b8860b;
}
.mce-container input:focus {
background: #eee8aa;
}
.announcement .userstuff a,
.announcement .userstuff a:link,
.announcement .userstuff a:visited:hover {
color: #00003f;
outline: 0;
}
.announcement .userstuff a:visited {
color: #5998D6;
}
.announcement .userstuff a:hover,
.announcement .userstuff a:focus {
color: #b8860b;
outline: 0;
}
.event.announcement .userstuff a,
.filters .expander {
color: #b8860b;
outline: 0;
}
.userstuff,
#chapters {
font-family: Verdana;
}
.userstuff hr,
#chapters hr {
border: 1px solid #daa520;
}
.userstuff blockquote,
#chapters blockquote {
border-left: 1px solid #daa520;
padding-left: 5px;
}
#chapters blockquote p.bqt {
text-indent: 0 !important;
}
#chapters .overflow {
border: 1px solid #daa520;
border-radius: 10px;
background: rgba(238, 232, 170, 0.5);
margin-bottom: 10px;
width: 100%;
height: 200px;
overflow-y: scroll;
-webkit-user-select: all;
user-select: all;
}
img.center {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
::-moz-selection {
color: #b8860b;
background: #eee8aa;
}
::selection {
color: #b8860b;
background: #eee8aa;
}
::-webkit-scrollbar {
height: 15px;
width: 15px;
}
::-webkit-scrollbar-track {
background: #add8e6;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #d8f5ff;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #eee8aa;
}
Work Skin CSS
#workskin #chapters hr {
border: 1px solid #b8860b;
}
#workskin #chapters hr.double {
border: 0;
border-top: 5px double #b8860b;
}
#workskin #chapters hr.aster {
background: none;
border: 0;
margin: auto;
text-indent: 0 !important;
}
#workskin #chapters hr.aster::after {
content: '* * * ⚪ * * *';
display: block;
color: #b8860b;
text-align: center;
}
#workskin #chapters hr.shine {
border: 0;
border-top: 1px dashed #b8860b;
}
#workskin #chapters hr.shine:after {
content: '\2604';
display: inline-block;
position: relative;
top: -13px;
left: 40px;
color: #b8860b;
font-size: 25px;
}
#workskin #chapters hr.pearla {
border: 0;
height: 20px;
background: url("https://static.tumblr.com/0fultrp/oRwqtajqf/pearl_div1.png") no-repeat top center;
background-size: contain;
display: block;
position: relative;
}
#workskin #chapters hr.pearlb {
border: 0;
height: 20px;
background: url("https://static.tumblr.com/0fultrp/XTiqtajsh/pearl_div2.png") no-repeat top center;
background-size: contain;
display: block;
position: relative;
}
#workskin #chapters hr.pearlc {
border: 0;
height: 20px;
background: url("https://static.tumblr.com/0fultrp/uVSqtajsw/pearl_div3.png") no-repeat top center;
background-size: contain;
display: block;
position: relative;
}
#workskin #chapters hr.pearld {
border: 0;
height: 20px;
background: url("https://static.tumblr.com/0fultrp/R0Wqtajtj/pearl_div4.png") no-repeat top center;
background-size: contain;
display: block;
position: relative;
}
#workskin #chapters hr.pearle {
border: 0;
height: 20px;
background: url("https://static.tumblr.com/0fultrp/wPXqtaju3/pearl_div5.png") no-repeat top center;
background-size: contain;
display: block;
position: relative;
}
#workskin audio {
width: 50%;
}
#workskin audio:focus {
outline: none;
}
#workskin ::-moz-selection {
color: #b8860b;
background: #eee8aa;
}
#workskin ::selection {
color: #b8860b;
background: #eee8aa;
}
#workskin ::-webkit-scrollbar {
height: 15px;
width: 15px;
}
#workskin ::-webkit-scrollbar-track {
background: #add8e6;
border-radius: 10px;
}
#workskin ::-webkit-scrollbar-thumb {
background: #d8f5ff;
border-radius: 10px;
}
#workskin ::-webkit-scrollbar-thumb:hover {
background: #eee8aa;
}
#workskin #chapters p span.typewriter {
font-family: Consolas !important;
}
#workskin .userstuff blockquote,
#workskin #chapters blockquote {
border-left: 1px solid #daa520;
padding-left: 5px;
}
#workskin #chapters blockquote p.bqt {
text-indent: 0 !important;
}
#workskin #chapters .overflow {
border: 1px solid #daa520;
border-radius: 10px;
background: rgba(238, 232, 170, 0.5);
margin-bottom: 10px;
width: 100%;
height: 200px;
overflow-y: scroll;
-webkit-user-select: all;
user-select: all;
}
#workskin #chapters .overflow p {
display: block;
text-indent: 0 !important;
}
#workskin #chapters div.userstuff p {
text-indent: 30px;
}
#workskin #chapters div.userstuff p.center {
display: block;
text-align: center;
text-indent: 0 !important;
}
#workskin img.center {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}♥ Enjoy ♥
