lannamichaels: Jonny Lee Miller with his finger in his mouth. (jl is pondering what you are pondering)
[personal profile] lannamichaels posting in [community profile] ao3_skins
Hi, all. I like the way that Archive 1.0 styles works and the box that contains tags and metadata information. I would like to isolate those parts of it so that I can layer it on top of another skin, or just use those settings for how a work looks and not have the rest of the Archive 1.0.

I tried to copy and paste css from the source code, but that didn't help.

If anyone could help me get the CSS settings to style works like Archive 1.0, that would be so helpful. Metadata, too, but Archive 1.0 somehow lost the commas between tags and so if you could also help get those back, that would be so awesome. :)

Wall of Code ahoy!

Date: 2011-11-30 03:42 am (UTC)
samjohnsson: eyesight is overrated (Random Eyestrain)
From: [personal profile] samjohnsson
This is the blurb text from 1.0, spliced in with the icons from 2.0 - I haven't tested live, but it ought to work.

/* BLURB*/
/* the blurb class is used on index pages where we create individual blurbs for each item */
.blurb ul li,.blurb dd ul li { display: inline }
li.blurb { padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.25em; padding-bottom: 0.25em; position: relative; clear:left; min-height: 100px }
.blurb .module { float:none;}
.work .blurb .header, .series .blurb .header, .blurb .work .header, .bookmark .blurb .header, .works .blurb .header, .work.blurb .header
{ min-height:55px; }
.blurb .header h4 { font-size: 1.1425em; margin: 0.375em 5.25em 0 65px }
#main .blurb .header img { position: relative; margin: 0; }
.blurb .header h5, .blurb .header ul
{ font-size: 1em; margin: 0.375em 6em 0 65px }
.blurb h4 a:link,.blurb h4 img { color: #900; vertical-align: bottom }
.blurb ul.required-tags { position: absolute; top: 0; width:60px; margin:0;}
.blurb ul.required-tags li, #main .blurb ul.required-tags li img, .blurb ul.required-tags li a
{ position:static; display: inline; height: 25px; width: 25px; border:none; }
.blurb ul.required-tags li span.text { display:none }
.blurb ul.required-tags li span{ display:block; background-repeat:no-repeat; height: 25px; width: 25px; }
.blurb ul.recent-bookmarks li { display: block; }
.blurb .category, .blurb .iswip, .blurb .external-work
{ position: absolute; left: 28px; }
.blurb .category { top: 0; }
.blurb .iswip, .blurb .external-work
{ top: 28px; }
.blurb .rating, .blurb .required-tags .warnings
{ margin:0 0 3px }

/*icon image replacement*/
.blurb .rating-general-audience {background:url("/images/skins/iconsets/default/rating-general-audience.png")}
.blurb .rating-explicit {background:url("/images/skins/iconsets/default/rating-explicit.png")}
.blurb .rating-mature {background:url("/images/skins/iconsets/default/rating-mature.png")}
.blurb .rating-notrated {background:url("/images/skins/iconsets/default/rating-notrated.png")}
.blurb .rating-teen {background:url("/images/skins/iconsets/default/rating-teen.png")}
.blurb .category-femslash {background:url("/images/skins/iconsets/default/category-femslash.png")}
.blurb .category-gen {background:url("/images/skins/iconsets/default/category-gen.png")}
.blurb .category-slash {background:url("/images/skins/iconsets/default/category-slash.png")}
.blurb .category-het {background:url("/images/skins/iconsets/default/category-het.png")}
.blurb .category-multi {background:url("/images/skins/iconsets/default/category-multi.png")}
.blurb .category-other {background:url("/images/skins/iconsets/default/category-other.png")}
.blurb .category-none {background:url("/images/skins/iconsets/default/category-none.png")}
.blurb .complete-no {background:url("/images/skins/iconsets/default/complete-no.png")}
.blurb .complete-yes {background:url("/images/skins/iconsets/default/complete-yes.png")}
.blurb .warning-yes {background:url("/images/skins/iconsets/default/warning-yes.png")}
.blurb .warning-no {background:url("/images/skins/iconsets/default/warning-no.png")}
.blurb .warning-choosenotto {background:url("/images/skins/iconsets/default/warning-choosenotto.png")}
.blurb .external-work {background:url("/images/skins/iconsets/default/warning-external-work.png")}
.blurb .public {background:url("/images/skins/iconsets/default/bookmark-public.png")}
.blurb .rec {background:url("/images/skins/iconsets/default/bookmark-rec.png")}
.blurb .count {background:url("/images/skins/iconsets/default/category-none.png")}

I believe this is the call to include commas:

li.blurb:after
{ content:" "; display:block; height:0; font-size:0; clear:both; visibility:hidden; }

Let me know what works.

Re: Wall of Code ahoy!

Date: 2011-11-30 04:14 pm (UTC)
samjohnsson: It's just another mask (Default)
From: [personal profile] samjohnsson
I'll try poking at it. You're using Archive 2.0 as the base?

Date: 2011-12-01 12:32 am (UTC)
facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)
From: [personal profile] facetofcathy
Try this, and see what you think. I tested it myself and I think it's working okay.

Take the code Sam posted with the bit at the end for the commas. Paste that into the create a skin box, give it a name (if you already have this done, click edit on that skin).

Then, click on the advanced > show button down at the bottom.

In the What it does section, choose replace archive skin entirely (this is the counter intuitive part--go with it)

Then at the bottom a checkbox should have appeared that says load archive skin components. Check this box and hit submit.

You should be taken to a page with all the individual skins that make up Archive 2.0 listed. Scroll down until you find the one called Blurb (I think it's number 13) and hit the grey X button (way over on the right, not the red X by the name) to take it off the list.

Click update and then you have to click to Use the skin and it should work.

Let me know if this skin hokey pokey doesn't make sense somewhere, and I'll try to clarify it.

Date: 2011-12-01 02:52 am (UTC)
facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)
From: [personal profile] facetofcathy
Oh, yeah, I should have clarified that to use this method the skin you create can't have any other parent skins. It appears I can't view a private skin, so did removing the parent from your created skin fix the white on black? I do see that the icon blocks are messed up though, so there's a problem anyway with what I suggested. I don't think what Sam posted had enough of the icon block rules in it to do a total replace. I can have another bash at it tomorrow.

If you want to change the way a work page itself looks, that's more complicated. There's several sections which don't line up directly to Archive 2.0 sections and a lot of the base styles, fonts, colours, sizes margins are inherited from the core skin code. A skin can be built to mimic 1.0 just on the work page, but it would be more complex than just switching out the blurb code one to one.

Are you looking for an exact replica of the old work page? Same font, colour, style on everything--the header, the notes and summary and the text? Or are you only after the margins and spacing on the text itself?








Date: 2011-12-01 07:47 am (UTC)
samjohnsson: It's just another mask (Default)
From: [personal profile] samjohnsson
One Point Faux is not a good base.

I've gotten the search blurbs formatted via the following code and "Add to Archive Skin" - I don't know why Facet's having to exclude the Archive parent.

/* BLURB*/
/* the blurb class is used on index pages where we create individual blurbs for each item */
.blurb ul li,
.blurb dd ul li {
display: inline;
}

li.blurb {
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
position: relative;
clear: left;
min-height: 100px;
}

li.blurb,
.blurb .blurb {
border-radius: none;
box-shadow: none;
display: block;
overflow: visible;
}

#login-block,
li.blurb,
fieldset,
form dl {
border: none;
}

.blurb .module {
float: none;
}

.work .blurb .header,
.series .blurb .header,
.blurb .work .header,
.bookmark .blurb .header,
.works .blurb .header,
.work.blurb .header {
min-height: 55px;
}

.blurb .header h4 {
font-size: 1.1425em;
margin: 0.375em 5.25em 0 65px;
}

#main .blurb .header img {
position: relative;
margin: 0;
}

.blurb .header h5,
.blurb .header ul {
font-size: 1em;
margin: 0.375em 6em 0 65px;
}

.blurb h4 a:link,
.blurb h4 img {
color: #900;
vertical-align: bottom;
}

.blurb ul.required-tags {
position: absolute;
top: 0;
width: 60px;
margin: 0;
}

.blurb ul.required-tags li,
#main .blurb ul.required-tags li img,
.blurb ul.required-tags li a {
position: static;
display: inline;
height: 25px;
width: 25px;
border: none;
}

.blurb ul.required-tags li span.text {
display: none;
}

.blurb ul.required-tags li span {
display: block;
background-repeat: no-repeat;
height: 25px;
width: 25px;
}

.blurb ul.recent-bookmarks li {
display: block;
}

.blurb .category,
.blurb .iswip,
.blurb .external-work {
position: absolute;
left: 28px;
}

.blurb .category {
top: 0;
}

.blurb .iswip,
.blurb .external-work {
top: 28px;
}

.blurb .rating,
.blurb .required-tags .warnings {
margin: 0 0 3px;
}


/*icon image replacement*/
.blurb .rating-general-audience {
background: url("/images/skins/iconsets/default/rating-general-audience.png");
}

.blurb .rating-explicit {
background: url("/images/skins/iconsets/default/rating-explicit.png");
}

.blurb .rating-mature {
background: url("/images/skins/iconsets/default/rating-mature.png");
}

.blurb .rating-notrated {
background: url("/images/skins/iconsets/default/rating-notrated.png");
}

.blurb .rating-teen {
background: url("/images/skins/iconsets/default/rating-teen.png");
}

.blurb .category-femslash {
background: url("/images/skins/iconsets/default/category-femslash.png");
}

.blurb .category-gen {
background: url("/images/skins/iconsets/default/category-gen.png");
}

.blurb .category-slash {
background: url("/images/skins/iconsets/default/category-slash.png");
}

.blurb .category-het {
background: url("/images/skins/iconsets/default/category-het.png");
}

.blurb .category-multi {
background: url("/images/skins/iconsets/default/category-multi.png");
}

.blurb .category-other {
background: url("/images/skins/iconsets/default/category-other.png");
}

.blurb .category-none {
background: url("/images/skins/iconsets/default/category-none.png");
}

.blurb .complete-no {
background: url("/images/skins/iconsets/default/complete-no.png");
}

.blurb .complete-yes {
background: url("/images/skins/iconsets/default/complete-yes.png");
}

.blurb .warning-yes {
background: url("/images/skins/iconsets/default/warning-yes.png");
}

.blurb .warning-no {
background: url("/images/skins/iconsets/default/warning-no.png");
}

.blurb .warning-choosenotto {
background: url("/images/skins/iconsets/default/warning-choosenotto.png");
}

.blurb .external-work {
background: url("/images/skins/iconsets/default/warning-external-work.png");
}

.blurb .public {
background: url("/images/skins/iconsets/default/bookmark-public.png");
}

.blurb .rec {
background: url("/images/skins/iconsets/default/bookmark-rec.png");
}

.blurb .count {
background: url("/images/skins/iconsets/default/category-none.png");
}


/*end icon image replacement */
.blurb .relationships {
background: #eee;
}

.blurb blockquote,
.blurb ul.wranglers,
.blurb form {
clear: none;
margin: 0.5625em auto;
text-align: justify;
}

.blurb ul.series {
font-size: 0.9em;
padding: .5em 0;
}

.blurb dl.stats {
background: #eee;
font-size: 0.8575em;
text-align: right;
padding: 0 0.3em 0.3em;
margin-top: 0.1em;
}

.blurb.own dl.stats {
padding-left: 11em;
}

.own dl.stats {
background: #fffef9;
padding-bottom: 0.10em;
}

Date: 2011-12-01 07:47 am (UTC)
samjohnsson: It's just another mask (Default)
From: [personal profile] samjohnsson
Here's what I can figure for the code for the Works page - you can put it in the same skin, or make two skins and parent them together into a third.

.preface h2.title {
font-variant: normal;
}

#workskin {
font-size: 100%;
}

.chapter .preface {
border-top: none;
border-bottom: 3px double;
}

#main .preface h3 {
background: none repeat scroll 0 0 transparent;
color: #333333;
}

#main .preface h2.title,
#main .preface h3.title {
border-bottom: 0 none;
clear: both;
font-size: 1.5em;
font-weight: 700;
margin: 1.5em auto 0;
text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: FertigoProRegular,Cambria,Constantia,Palatino,Georgia,sans-serif;
}

body {
font-size: 100%;
line-height: 1.5;
font-family: 'Lucida Grande',Verdana,Helvetica,sans-serif;
color: #222;
background: fffef9;
}

#main .userstuff p {
margin: 1.5em auto;
line-height: 1.5em;
}


/* CHAPTER*/
#chapters {
margin: auto 3% 2.5em;
padding: 0.5em 3% 0;
}

.chapter {
margin: auto auto 3em;
}

#chapters .preface {
margin: auto 0 1.286em 0;
padding: 0;
}

#main #chapters .footnote {
font-size: 85.7%;
border-bottom: 1px solid #ddd;
}
Edited (all the code.) Date: 2011-12-01 08:20 am (UTC)

Date: 2011-12-01 08:21 am (UTC)
samjohnsson: It's just another mask (Default)
From: [personal profile] samjohnsson
I should note that the chapter headers may still look odd - the site used to have a dynamic display of the font Fertigo. It doesn't have (or use) that font anymore.

Profile

ao3_skins: OTW logo with text "Emerging" (Default)
AO3 Skins

May 2017

S M T W T F S
 123456
78910111213
14151617181920
2122 2324252627
28293031   

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 24th, 2017 08:49 am
Powered by Dreamwidth Studios