List Customisation

Fixing List CSS (2016 update)

Josh · 10y

2988

With the new front end update we've made some small changes to the default list styles, and some of these changes may require you to make some fixes to your custom list CSS.

Whats changed

Bootstrap grid has been replaced with Flexbox grid, this will probably disrupt the widths of some of the list elements, but should be very easy to fix.
The Open Sans font has been replaced with Montserrat.
The Font Awesome icon font has been replaced with the Material icons font (font-awesome classes remain).
We've added a background-color to every other row, and removed the row borders
The site navigation bar is now 60px wide instead of 50px

How to fix things

1. Incorrect sizing/widths

Change width to min-width on any of the affected elements.
You may also need to add width:100%;.

2. White background colour on every other row

If you've adjusted the background color of the table or parent element of a row add:

tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0);
}

If you've styled the row or row class itself add:
tr:nth-of-type(odd) {
background: whatever your background colour is
}

3. Change font back to old version

We still load and use Open Sans so just add

table {
    font-family: 'Open Sans', sans-serif;
}

I'll be added more common fixes and changes here as we find them

haganbmj 10y
Some random observations of my own as I adjust my lists in case they help out others.
(Back to functional)
1. Table Header backgrounds are set to white. Header links are also independently color styled.
  th { background: stuff; color: stuff; }
2. List text color is bound to the .rtitle, rather than just to the page/list as a whole.
  .rtitle { color: stuff; }
3. Nav is no longer nested under the nav tag, and instead is under div.nav
4. Nav links are colored differently than the rest of the nav.
  .nav__links div { color: stuff; }
5. I have no idea how the nav__links background is being assigned, I'll need to dig eventually.
  
  EDIT: 'kay... so there's layers of backgrounding going on, including one that's declaring with opacity. What's interesting is that the notifications box has a 5000px border-bottom declaration of the same color the background below it would normally be.
  .nav__notifications { background: stuff; border-bottom: 0px; }
- FFrey 10y
  this helped alot lol. the background color for the nav was killing me. now i gotta change my list back to how it was e-e.
  haganbmj 10y
  Yeah definitely.
  Looking at your list I guess it's worth pointing out that you can change the hover color of the nav links with something like this..
  
  .nav .nav__links a:hover div { color: stuff; }
  
  If you want to change the icon colors on hover, I'd recommend removing the .material-icons declaration you have and just assigning that color to the a tag instead, but this should work.
  
  .nav .nav__links a:hover .material-icons,
  .nav .nav__footer a:hover .material-icons,
  .nav .nav__notifications:hover .material-icons { color: stuff; }
  FFrey 10y
  i used the material icons declaration beacuse i want every icon to be that color, including the notes icon and whatever other icons there are. Should i not have done that? Also i'm having some problems with changing the anilist logo to one i edited in photoshop and uploaded on imgur. Its not showing up ;-;.
  haganbmj 10y
  Nah, it works well. I just wanted to let you know that if you wanted them to change colors on hover you'd have to use a bit more specific selector (above) to do it.
  I brought it up because hovering over an icon on your page changes the text color.
- vampie 10y
  
  do u know of a way to change the bg color of the notifications and settings/search so the whole thing is all one color??
  
  also how do u make the whole background one color when u hover over the links? for some reason it's only changing it behind the text and icon
  haganbmj 10y
  Yeah, there are a couple layers of things going on there. I think this covers what you want.
  
  .nav__notifications, .nav__logo { background-color: black; }
  
  Additionally, I think it might look nice if you make your top bar the same width as the side bar so that it matches the height of your avatar too.
  
  #list_header { height: 60px; }
  
  Oh, and you mentioned changing the hover color. I think you've got the icons and the div covered, but you're missing the big one.
  
  .nav .nav__links a:hover { background-color: black; }
  vampie 10y
  it fixed the bg on the logo and notifications but not the settings/search bar and it's still doing the hover thing
  this is what i have
  
  div.nav{background-color:#000000;}
  .navlinks div {color:#000000;}
  .nav .navlinks a:hover div { color: #ffffff;background-color:#000000; }
  .nav .navlinks a:hover .material-icons,
  .nav .navfooter a:hover .material-icons,
  .nav .navnotifications:hover .material-icons { color: #ffffff; background-color:#000000;}
  .navnotifications, .nav__logo { background-color: black; color:white;}
  haganbmj 10y
  Oh, you did mention changing the hover color. I think you've got the icons and the div covered, but you're missing the big one.
  
  .nav .nav__links a:hover { background-color: black; }
  
  Edited that back in the original too.
  vampie 10y
  that worked thank u
chriskin 10y
Apparently I can no longer change the chapter I have read unless I open a window and write the new number there. Simply clicking on the + button only temporarily changes the number but doesn't save it.
- Josh 10y
  Sorry about that, it should be fixed now
  chriskin 10y
  That was fast, thanks :D
Kokora 10y
Since I'm completely clueless when it comes to this sort of thing and scared I'll mess it up, could someone help me out with my css? Here's the link: http://pastebin.com/b8HnaLT3
- Removed 10y
  I fixed everything that I noticed that looked off ^^
  
  http://pastebin.com/raw/SAPcUBjq
  Kokora 10y
  Thanks! ^_^
  Only things that seem off now are a little black box to the right of each header and the info is displayed way beneath where it should be.
  Removed 10y
  Oh woops, this should fix it.
  http://pastebin.com/raw/n6ZFpLbj
  Kokora 10y
  Sorry to bother again, but it's soo close to being fixed, just that I think it all needs to be moved up now, I think the title was moved down instead, but it's now in the right proportions. Thanks again for all the help
  Removed 10y
  Oh, did you want it to look like this?
  
  Use this, then ^^
  http://pastebin.com/raw/4JyRennh
  continue this thread →
adustyspectacle 10y
Okay, what is up with the .nav background? Is it drawn with javascript or something? If it is... why? It's completely uneditable through CSS and it's kinda frustrating...

Nevermind, it's apparently a border-bottom, wtf
- haganbmj 10y
  Yeah that one stumped me for a bit too, I wasn't even thinking about that until I by chance noticed that the element was 5027px tall.
  adustyspectacle 10y
  when I edited that one out and clicked notifications, the nav background is gone. u_u so weird.
  haganbmj 10y
  Not sure which you're talking about.
  .nav__notifications { border-bottom: 0px; }
  
  Is pretty much sufficient for getting rid of that problem area and doesn't screw up the notification popup.
naught 10y
http://pastebin.com/srHZ69tt
My list had a lot of problems and I fixed most of them but I can't figure out how to fix the sizing issues when editing an item. This is what pops up after I click to edit something http://imgur.com/JXvzRTl
Can anyone help? Id like to change to pop-up edit box to the default anilist one.
- naught 10y
  Anyone have any ideas?
  Kuwabara 10y
  Can you reupload your entire code? It seems like there's only a part of it in the link you posted.
  user27150 10y
  Just add ".rtitle.fitter" after the tr in /CARDS/ and it should be fine. And delete that .list-input{ in /CARDS END/. It serves no purpose and leaves an open bracket.
  naught 10y
  It works! Thanks
Hanayo 10y
I've managed to fix most of the things that broke on my CSS so far, mostly width and color issues, but the only thing I can't work out is how to put back the white lines between each item in the list.
Supposed to look like
Looks like:
Pastebin
I would appreciate if someone with knowledge on these things gave me a hand. Thanks a lot in advance.

EDIT:
Also I can't seem to change the width of the chapters and volumes rows on the manga list like I can change the episodes row width on my anime list
Anime:
.row__episodes { width: 75px; }
Manga:.row__chapters { min-width:75px; }
.row__volumes { min-width:75px; }
The anime one works but the manga one doesn't
- haganbmj 10y
  Something like this is what you want I would imagine.
  
  .list tr { border-bottom: 1px solid white; }
  .list tr:last-of-type { border-bottom: none; }
  
  I think the naming for the mangalist changed, it's now
  
  .row__score, .row__chap, .row__vol
  Hanayo 10y
  Yeah! Thanks a lot! Both things worked fine!
  haganbmj 10y
  Absolutely, glad to hear it.
  For reference, I think both lists use .row__title for the series title.
Zaphkiel 10y
I'm not the most knowledgeable person when it comes to CSS so apologize in advance if this seems like a silly question: Is there anyway to hide the navigation bar on the left? My CSS before hid it and now the bar seems to be pushing everything and messing it up.
- haganbmj 10y
  div.nav { display: none; }
  
  I haven't taken the time to fix the nav links on that layout though, so you'd be without a link back to the main page and forum at the top.
  Zaphkiel 10y
  Hmm, I see. Is fixing the nav links hard to do? Would I just need to reposition it? I suppose I could always just leave the original navigation bar on the left but then I would delete the nav links and additional avatar and move the covers to the right.
  haganbmj 10y
  Yeah that's kind of what I did in the mean time - eyeballed the repositioning of stuff and called it a night. If I were to keep it like this, which it's actually not bad looking, I'd adjust the Nav color scheme of course. I wanted to get my anime list in order last night, so the manga was just a hotfix.
  
  It shouldn't be that tough, it would just be updating the tags for the nav links and figuring out if there's any positioning issues with those.
  
  Zaphkiel 10y
  Which fields did you reposition in the CSS? I tried to do some stuff but I couldn't tell which ones to edit xD None of them seemed to change
  haganbmj 10y
  Ah yeah, that whole CSS is a mess now because a bunch of the stuff doesn't exist anymore.
  
  Here's the relevant stuff. I don't think mine was generating the black bar right after the update, looks like yours might be? Not sure if you even want that bar, I think yours looks good without it because of the background on that icon, which you can use
  #list_header a.display_name { background-color: unset; }
  
  #view { background: linear-gradient(90deg, #000 280px, #FFF 280px); } / Make the black bar if you want it /
  #list_header a.al_link { left: 120px; } / Move the Anime List link over for now /
  #lists .list tr.rtitle:hover td.row__type { left: 80px; } / Move the Cover image over /
  #list_header a.display_name { left: 80px; } / Move my username over /
  
  And I think that might be it for the moment? There's a whole bunch of invalid stuff in that css sheet now though.
  continue this thread →
Skythia 10y
I'm clueless when it comes to CSS so I would greatly appreciate it if someone could tell me how to make the headers translucent like the rest of my list! I copy pasted the code to make the list transparent in the first place, so I'm not sure which area I'd have to modify @_@
- Removed 10y
  th { background-color: rgba(0, 0, 0, 0); }
vampie 10y
if i wanted to remove my icon in the header, how would i do that?
- Hanayo 10y
  This should work
  #list_header .img_crop { display:none; }
abber 10y
I'm kind of inexperienced with CSS, so I apologize if this is a rather stupid question. I am trying to change the background opacity for my list (the table part), and I can't figure out how because the 'a' value in rgba is changing the hue of the color, not the opacity. I've tried using just 'opacity' but that changes the entire opacity - text and background and I just want the background.
- adustyspectacle 10y
  Assuming it's your anime list you want edited, it's because your table still has a white background color. So it's either:
  
  table { background-color: none; }
  
  or:
  
  tr:nth-of-type(2n), tr:nth-of-type(2n+1) { background-color: none; }
  
  Then style the other accordingly. If you want alternate-color rows I'd go with the former, but if it's just gonna be all the same I'd go with the latter.
  abber 10y
  I got it, thank you so much!
FloozyGod 10y
sigh, I need halp

I'm trying to fix the font color's of the table header, and everything else in the list.
I also need to change the opacity of the info box so it matches the list, and change the font too
I can figure out the color stuff, i just need to know that the title commands thingy's are (h3, tr, .animelist, etc)
So if anyone can help, that would be sweet

Here is my css pastbin
- haganbmj 10y
  I'm at work at the moment, so this'll be brief and possibly inaccurate.
  
  Headers
  .th { color: stuff; }
  .th:hover { color: stuff; }
  
  Basically all the list information and such
  .rtitle { color: stuff; }
  .rtitle:hover { color: stuff; }
  
  Haven't had much time to look at the EDIT box stuff. Think it's this stuff, it's all declared separately for whatever reason...
  .list-input section { background: none; }
  .list-input .input__main { background: none; }
  .custom { background: none; }
  .list-input .notes textarea { background: none; }
  
  .list-input .input__main input, .list-input .input__main select { color: inherit; }
  FloozyGod 10y
  thank you very much, ill see what i can do
CptJesse 10y
I'm fairly happy with how my CSS looks but I would like to add a background image as well as make the horizontal rows slightly transparent so the image shows through. If someone could help me do so. I would appreciate it. :D

*I copied someone elses CSS since I have no idea how to :P

.list_wrapper {
width: 800px;
margin-left: 0px!important;
}

{ANILIST-COVERS=LRG}

.sml_col:last-of-type,.sml_col:nth-of-type(1) {display: none;}

.list tr {background-size: 0;}

.row__type {
background-size:cover;
background-image: inherit;
display: none;
position: fixed;
top: 118px;
margin-left: 15px;
height: 400px;
width: calc(400px * 0.67771084337);
font-size:0;
box-shadow:4px 4px 8px rgba(0,0,0,.3);
}

.rtitle:hover .row__type {display:block;}
- adustyspectacle 10y
  To add a background image:
  
  body { background-image: url("IMAGE"); background-size: cover; background-attachment: fixed; }
  
  where IMAGE is the direct link to the background image (you'll have to upload it somewhere, like imgur).
  
  For making the tables translucent:
  
  table { background-color: rgba(255,255,255,OPACITY); } tr:nth-of-type(2n), tr:nth-of-type(2n+1) { background-color: none; }
  
  where OPACITY is a value between 0 and 1, with 0 being completely transparent and 1 being complete opaque.
Sumia 10y
So I can't seem to figure out how to put the text in my header on the same horizontal line.. have tried adjusting width or text-align but well it's not working xD Would appreciate any help!

This is my CSS
- adustyspectacle 10y
  I'm assuming you want everything in a single line, so delete all of your styles starting from #list_header and replace it with this:
  
  #list_header { background: rgba(255,255,255,0.6); border-radius: 0; color: #000066; margin: 0; top: 0; left: 0; max-width: 100%; padding: 0; } list_header a { display: inline-block; vertical-align: middle; padding: 0 1em; } list_header .img_crop { border-radius: 0 float: none; vertical-align: middle; } list_header #filter { float: none; display: inline-block; vertical-align: middle; color: #000066; margin: 0; padding: 0 1em; background: none; height: auto; }
  Sumia 10y
  That indeed puts everything in one line so thank you very much! However now I have the problem that my text won't go inline with the middle of my block ^^' it looks like this:
  
  adustyspectacle 10y
  Ah, forgot the display: inline-block. So add these to the original one I gave you and copy that one again.
  
  #list_header { height: auto; } list_header .img_crop { display: inline-block; margin: 0 1em; } list_header #filter { width: 10em; }
  Sumia 10y
  It's perfect! Thank you :)
vampie 10y

ik this is probably already somewhere but how do u fix the small column so that the chapters read fit on one line?
- ashieruno 10y
  How did you fix it?
khaleesi 10y
It’s been a while since I last logged in and now my css is a mixture of old and new codes, what is the new css to style the width of the list?

Also, I arranged my css to make everything translucent except for the headers and the hovered row, but I’ve completely forgotten, any idea about it? (sorry for my incompetence…)
ThatGuy 10y
So I was never adept at this but now with the update I have no clue what to do. Could someone fix my code please? Here's the link: http://pastebin.com/2eHPA6Tn
Edit: I fixed or well to be honest just mashed several people's code together but I have some questions about the scrollbar. Nothing important though.
AshSaitoru 10y
I'm definitely inexperienced in CSS so this might be a stupid question.
Before the update, for my lists, the tables used to have rounded corners. Is there a way to get this back? If not, it's okay, I'm just curious.

EDIT: I just looked at my list and only some of the sections have the bottom corners rounded. I never noticed this, but I still need help fixing it.