anigram

← view full thread · Fixing List CSS (2016 update)

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