First off you can stop the hash mark from turning your line into a header by prepending a \ before the hash mark.

To answer your question, the old HTML for anime lists had specific IDs for custom lists so your fulfilling romance custom list had something like #Fulfillingromance as a CSS selector. In the current state, the only ID that your fulfilling romance custom list has is #completed which is shared by your completed, completed OVA, completed movies, and anime that made me cry lists.

Since we don't have any specific ID for each list the best you can really do to fix the issue for now is to use a unique selector. The drawback of this solution is that you don't have any guarantee that the order of the elements in #lists stays consistent.

As a side note I don't think it would be a particularly difficult fix by reimplementing the specific IDs for the custom lists and I've been meaning to ask Josh to see if he can do something about it. @Josh pls

Thank you for these :3

haganbmj can you give me copy of you css i like it

There are two ways that I can think of that will accomplish what you want, the results are slightly different based on which method you go with so the final solution is up to your preference.

The first method is rather simple, by default, the header is fixed so it always displays over top of your list, instead you can set the position to relative and you can specify a width relative to the header's parent container.

\#list\_header {
  position:relative;
  width: 100%;
}

The drawback with that solution is that the header is no longer fixed, so when you scroll down your list, your header will disappear.
The second solution is slightly more complex and involves media tags since the width of the list wrapper changes based on the width of the browser window. After a bit of investigating and playing around I'm fairly certain that the following CSS should provide equal width throughout all browser sizes.

@media (min-width: 1420px) {
  \#list\_header {
    width: calc(66.66666667% - 63px) !important;
  }
}

@media (max-width: 992px) {
  \#list\_header {
    width: calc(100% - 80px) !important;
  }
}

@media (max-width: 768px) {
  \#list\_header {
    width: calc(100% - 70px) !important;
  }
}

\#list\_header {
  width: calc(83.33333333% - 72px);
}

Oh thanks for reminding me, I've been meaning to look into covers since 2.0.

I'll look at this tonight and see what I can come up with :)

Centered to the Left is kind confusing, but I would try this.

.list_wrapper { float: left; }

Alternatively, if you want it totally centered I think this undos all of the spacing issues?

#container-main { margin-left: 0; }

lists { margin: 0 auto; }

lists .list { width: 100%; }

If you wanted it off center to the left then you could try adding this to that...

#lists { position: relative; left: -220px; }

or something.

You certainly can! Just add

\#list_header {
  position:fixed;
  bottom: 30px;
  right: 30px;
  margin: 0;
}

You'll also need to remove the "left: 0; right: 0;" on line 382.

1) To have lists appear on mouse-over you'd want this.

\#lists > div table.list { display: none; }
\#lists > div:hover table.list { display: table; }

We're just looking at when the user hovers over the entire list entity (including the title).
If you want to only have this for some of them and not all you'd need to do...

\#lists > div:nth-of-type(3) table.list { display: table; }

(this restores the list, if you wanted to only have the hover feature on certain ones you could choose to display:none those select ones instead.

At the moment the IDs for custom lists aren't functional, so rather than being able to do #plantowatch as you used to, you'll need to get the number of the location of the individual list. ( #lists > div:nth-of-type(X) ).

Here's a picture describing what I mean. There are hidden lists on the page, so you'll need to double check that you have the right number. In the above example, 3 actually refers to your second list (Hyped Fall 2014). yeah...
http://i.imgur.com/t3zflpa.png

2) To reorder you lists you'll need to use the same kind of numbering scheme as above.

\#lists > div:nth-of-type(3) { order: 2; }
\#lists > div:nth-of-type(4) { order: 1; }

For some reason this puts them at the bottom. I'd wager a guess that the default order is 0. You'd probably have to number every list to get this to work properly. I've never worked with ordering, but I can have a look later.

3) To remove certain lists you'll need to use the same kind of numbering scheme as above.

\#lists > div:nth-of-type(3) { display: none; }

(we're targeting the entire list entity - including the header - in this case)

You seem to have resolved the first issue yourself.

As for the second I am assuming you mean in your custom lists.
Custom lists all contain the extra 'Status' column by default. You have removed the header for this row (th:nth-last-child(2)) but not the column in each row. To fix this use:

td.row__status.sml\_col.cap {
display: none;
}

or something to that effect.

You can use attribute value selectors for "plan to watch" if I'm not mistaken.

div[id='plan to watch'] {
}

There are a few different backgrounds in there, so I broke them down for you.

/\ This is the entire box's background \/
.update { background: red; }

/\ This is the selection input fields (score, progress, etc) \/
.update input, .update select { background: green; }

/\ This is the Notes text field \/
.update .listNotes { background: orange; }

Always forget this bit: http://hastebin.com/sonitizino.avrasm

So if I understand what you mean you want multiple drop shadows?
You might be able to layer another background image behind each cover image?
Otherwise I'm not sure you can as the rtitle is what will give you the white border and the black shadow, I don't think you can apply a shadow to a background declaration.

If you're just trying to get to what you have in that picture above (a white border and a list shadow), it's probably something like this..

.rtitle { 
background-repeat: no-repeat;
background-size: 100px 144px;
background-color: white;
width: 108px;
height: 152px;
box-shadow: 1px 1px 1px 1px \#000;
}

Not quite sure what the shadow should be to match yours.

On line 73 you have

text-shadow: 2px 2px 2px rgba (0, 0, 0, 1) !important;

text-shadow: 2px 2px 2px rgba(0, 0, 0, 1) !important;

Pretty sure the .tag_re selector refers only to the rewatch icon.

I can help you, but what's your problem? What do you want to do?

No.

You can, actually... I think. If I understood it right, you can't do much, but you can still mess with it a little bit, since each anime/manga has its own ID. And you can user :before and :after to insert stuff in between.

So, yeah, you can mess with it, but you probably won't get much far with only CSS.

The color of the sidebar is on line 28. Additionally you can change the color of the text and icons on line 31, and line 34/35 for hover.
The color for the titles on the list are available on line 161/162 to change.
For displaying your scoring, you can add:

position: relative;

bottom: -215px;

Try adding the following:

body { background-size: cover }

The issue here is that it's using ANILIST-COVERS=SML instead of =LRG like you have defined.

Double check that you don't have the comment that creating a new CSS generates. Remove it if it happens to still be there.

I made a note of this in the bugs/feedback thread already, but Anilist will take the first declaration of ANILIST-COVERS, regardless of if it's commented out or not. So in this case it sees SML first and uses that, you'll also notice that you probably have COUNT and POPUP as well if you still have the comment there.

The issue here is that it's using ANILIST-COVERS=SML instead of =MED like you have defined.

Double check that you don't have the comment that creating a new CSS generates. Remove it if it happens to still be there.

I made a note of this in the bugs/feedback thread already, but Anilist will take the first declaration of ANILIST-COVERS, regardless of if it's commented out or not. So in this case it sees SML first and uses that, you'll also notice that you probably have COUNT and POPUP as well if you still have the comment there.

table.list tr:before {position: relative; / whatever you want to do with them /}

Make sure to set position: relative or the left or top properties won't really do anything.

Thanks for changing that, Josh.

Is there a way I can see the code for other people's CSS? There are some I'd like to modify, but didn't know if that was an option here like it was on MAL.

Thanks a lot

I'm not quite sure how you want it fixed.

One thing you can do is make the headers wide enough so that they display inline

\#lists h3 {
  width: 200%;
  margin-left: -50%;
}

\#lists h3 {
  display:inline;
}

First of all, I don't know how you're doing it but

body{ background: url(/your pic/) no-repeat fixed center center; background-size: cover; }

does work.

As for your other problem, you also have to set it to no-repeat:

.rtitle{ background-repeat: no-repeat !important; }

And in case you don't just want it not to repeat but don't want the covers appearing in the rows at all, just position them away with something like this:

.rtitle{ background-position: -999px 0px !important; }

Aren't you using the wrong selectors here, btw?

th.sml_col.header__score{ visibility:hidden; }

th.sml_col.header__score::before{ content:"スコア";visibility:visible; position:relative; top:100%; }

th.sml_col.header__progress.header__episodes{ visibility:hidden; }

th.sml_col.header__progress.header__episodes::before{ content:"進捗";visibility:visible; position:relative; top:100%; }

This seems to work.

As for adding covers, use {ANILIST-COVERS=LRG}, {ANILIST-COVERS=MED} or {ANILIST-COVERS=SML} depending on the size you want. If you have further questions regarding placement, feel free to ask.

Just add

.tag_airing {

display:none;

}

up

"Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language." -Wikipedia

It's a file used to format the look of a Website.

A good place to start is w3schools and the donation thread, if you just want to roll with a finished Style.

#lists h3 {color:white;}

th.sml_col.header__score{color:white;}
For progress and type just put those into the score's place. Although, I think that that's a clunky way to do it and there's probably a more elegant one. If somebody knows what it is, please correct me.

And for the black to transparent one, I have no idea, but would also like to know.

.update {
background: transparent;
}

I'm not too sure since I haven't and don't really want to test it but if you replace

td.hover_icon a {

position: absolute;

width: 158px;

padding: 0 7px;

top: 10px;

}

td.hover_icon a {

width: 158px;

padding:0 7px;

top: 10px;

}

td.row__title {

width: 158px;

display: inline-block;

height: 100px;

}
td.row__score, td.row__type, td.row__episodes {

top: -40px;

}

If I had to guess though, I imagine that clicking the score/episodes/type won't work for bringing up the edit panel thing but clicking either side of the title or between the title and other information will work.