Help with skins?

[lannamichaels]

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. :)

Comments

Wall of Code ahoy!

[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!

[lannamichaels]

Doesn't seem to do anything. :( I think this is what I tried before, copying and pasting the css? Maybe I'm doing the settings wrong. I've tried it with both add on to archive skin and replace archive skin.

Re: Wall of Code ahoy!

[samjohnsson]

I'll try poking at it. You're using Archive 2.0 as the base?

Re: Wall of Code ahoy!

[lannamichaels]

Yeah, I just picked that one because I knew the skin name.

[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.

[lannamichaels]

Thanks! Okay, that worked for changing the blurb, although now the background of the page is black and the text is white and I had to remove the parent skin before it would work. I don't know if you can see a private skin, but here's what it looks like.

Do you know which parts need to be changed to make the text of the work look like Archive 1.0? That's the really important part; I really like how the work is formatted under Archive 1.0.

[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?

[lannamichaels]

so did removing the parent from your created skin fix the white on black?

Sorry, I wasn't clear. :( It idnd't let me show the parts with it having a parent skin attached to it at all. Once I removed the parent skin, I was able to see the components. And after removing the blurb one, the page turned white text on black background.


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?

Yes. I tried One Point Faux, but that's not it. Archive 1.0 is, so *shrug* that's the one I use.

[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;
}

[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;
}

[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.

[lannamichaels]

Wow, thanks for all of this! This is really close! :D The margins are too far in, but I'll try poking at that, and turning off the bold on the summary and notes and adding back the border between notes and the work text.