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.
Change width to min-width on any of the affected elements.
You may also need to add width:100%;.
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
}
We still load and use Open Sans so just add
table {
font-family: 'Open Sans', sans-serif;
}
Some random observations of my own as I adjust my lists in case they help out others.
(Back to functional)
th { background: stuff; color: stuff; }.rtitle { color: stuff; }nav tag, and instead is under div.nav.nav__links div { color: stuff; }.nav__notifications { background: stuff; border-bottom: 0px; }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.
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; }
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 ;-;.
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
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; }
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;}
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
I fixed everything that I noticed that looked off ^^
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.
Oh woops, this should fix it.
http://pastebin.com/raw/n6ZFpLbj
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.
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
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.
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.
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.
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.

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
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.
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.
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.
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
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; }
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;}
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.
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!
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;
}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…)
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.
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.