Flowers and cursive siteskin

by Goddess_of_the_arena

Summary:

This is a complete siteskin that will give your site a lovely image of flowers for the header and footer, the text is all in cursive (font Lucida Calligraphy to be more specific) and the first letter of the work boxes is decorated.
The warning tags have white background and red text, the relationship tags have bright yellow background, the character tags have bright green background and the freeform tags have blue background.
The code for the decorated first letter is bolded.
If you want to know more about customizing the first letter (or first line) of your works and your siteskins, check out my guide here.

This is the image for the header and footer, it's also used to decorate the first letter in the work boxes:

 

 

---

#header {
  background: url('https://static.vecteezy.com/system/resources/previews/066/661/019/non_2x/seamless-baroque-floral-damask-pattern-in-elegant-style-free-vector.jpg');
  background-repeat: repeat;
  background-size: 20%;
}

#header .primary {
  background: none;
  color: #000000;
  font-family: Lucida Calligraphy, cursive;
}

#header a,
#header #search .button,
#header #search input:focus,
#header #search input:hover,
#header #search .text {
  background: #ffccff;
  color: #000000;
  font-family: Lucida Calligraphy, cursive;
  border: 1px solid #8b2036;
  border-radius: 10px;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu li,
#header .dropdown .menu a,
#header .dropdown .menu,
#greeting .dropdown .menu,
#greeting .dropdown .menu a,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover {
  background: #ffccff;
  color: #000000;
  border: 1px solid #8b2036;
  border-radius: 10px;
}

#header #greeting ul {
  color: #000000;
}

#header .primary li,
#header .primary li a,
#greeting li,
#greeting li a {
  color: #000000;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
.actions button,
button,
.current,
.actions label,
input[type="submit"] {
  background: #FFCCFF;
  font-family: Lucida Calligraphy, cursive;
  border: 2px solid #8b2036;
  border-radius: 20px;
  box-shadow: none;
}

.actions a:hover,
.actions button:hover,
.actions input:hover,
label.action:hover,
.action:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
.actions .disabled select,
.actions li select {
  background: #FFCCE6;
  border: 2px solid #8b2036;
  border-radius: 20px;
  box-shadow: none;
}

#dashboard a {
  font-family: Lucida Calligraphy, cursive;
}

#main,
#inner.wrapper,
#outer.wrapper,
.listbox .index,
.work.own,
.thread .even,
#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,
.verbose fieldset,
form .notice,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table,
.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,
.alert.flash,
.error,
.comment_error,
.kudos_error,
.bookmark .user,
.bookmark .user .header,
textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input,
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 {
  font-family: Lucida Calligraphy, cursive;
}

#main,
#inner.wrapper,
#outer.wrapper,
.skins.own.blurb.picture.group {
  background: #faecc5;
  border: 2px solid #8b2036;
  color: #000000;
}

#work-filters fieldset {
  background: #faecc5;
  border: 2px solid #8b2036;
}

.work li.blurb,
.bookmark li.blurb,
.series li.blurb,
.listbox .index {
  background: #faecc5;
  border: 2px solid #8b2036;
}

.work .blurb blockquote,
.series .blurb blockquote,
.bookmark .blurb blockquote {
  font-family: Lucida Calligraphy, cursive;
}

.work .blurb blockquote p::first-letter,
.series .blurb blockquote p::first-letter,
.bookmark .blurb blockquote p::first-letter {
display: inline-block;
text-align: center;
  font-weight: bold;
  color: #000000;
  font-family: Lucida Calligraphy, cursive;
  font-size: 26px;
  text-shadow: 0 0 3px #faecc5, 0 0 5px #faecc5, 0 0 7px #faecc5;
  background: url('https://static.vecteezy.com/system/resources/previews/066/661/019/non_2x/seamless-baroque-floral-damask-pattern-in-elegant-style-free-vector.jpg');
  background-size: 100% 100%;
  padding: 6px 10px 6px 6px;
  border: 1px solid #000000;
}

#dashboard ul {
  border: 5px solid #8b2036;
}

#chapter_index.expandable.secondary li #selected_id,
option {
  background: #FFCCE6;
}

.listbox,
fieldset fieldset.listbox {
  background-image: url('https://img.freepik.com/premium-photo/2281927789_1249123-246.jpg');
  background-repeat: repeat;
  background-size: 20%;
  border: 1px solid #8b2036;
}

.listbox h3.heading {
  color: #000000;
  font-family: Lucida Calligraphy, cursive;
  background: #ffff99;
  border: 1px solid #ff1493;
  border-radius: 20px;
}

li.warnings a.tag {
  color: #FD0E35;
  background: #FFFFFF;
  padding: 1px 1px 1px 1px;
}

li.relationships a.tag {
  background: #ffff00;
  color: #000000;
}

li.characters a.tag {
  background: #00FF00;
  color: #000000;
}

li.freeforms a.tag {
  background: #50BFE6;
  color: #000000;
}

#footer {
  background: url('https://static.vecteezy.com/system/resources/previews/066/661/019/non_2x/seamless-baroque-floral-damask-pattern-in-elegant-style-free-vector.jpg');
  background-repeat: repeat;
  background-size: 25%;
}

#footer h4.heading,
#footer .actions a:link,
#footer .actions a,
#footer .action,
#footer .action:link,
#footer .actions button,
#footer .actions input,
#footer input[type=“submit”],
#footer button,
#footer .actions label {
  background: #FFCCFF;
  border: 1px solid #ff1493;
  color: #000000;
}

Series this work belongs to:

• Part 7 of Site skin experiments
• Part 18 of Goddess_of_the_arena's CSS Playground