AraZeL said: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/datatitlebefore"; Not working anymore. Other solution? Yes, see the first post there are new imports |
| So I followed the video tutorial and read through the post here but I am zeroing on what exactly do I need to fix with my list to make it work. I am trying to use Turnip's modern layout. Here's how my list looks like rn:  |
Hinaya said: So I followed the video tutorial and read through the post here but I am zeroing on what exactly do I need to fix with my list to make it work. I am trying to use Turnip's modern layout. Here's how my list looks like rn: What are you trying to fix? What is Turnips layout code or link, and how is it supposed to look? I don't know who that is or what layout they made. |
| bumping to fix the stickies back |
| Hello everyone! I would like to know if it is possible to add falling snow on my anime and manga background, I tried with the layout and some codes but it didn´t work :( |
[img] [img] |
LeFaChu said: Hello everyone! I would like to know if it is possible to add falling snow on my anime and manga background, I tried with the layout and some codes but it didn´t work :( I was planning to do a topic with all the CSS effects soon, so keep an eye out for it. |
| Updated the OP with new solutions for private lists. More to come probably, to help prevent the need for manual updates and changing imports again. |
Shishio-kun said: Hinaya said: So I followed the video tutorial and read through the post here but I am zeroing on what exactly do I need to fix with my list to make it work. I am trying to use Turnip's modern layout. Here's how my list looks like rn: What are you trying to fix? What is Turnips layout code or link, and how is it supposed to look? I don't know who that is or what layout they made. Hey, sorry for the delayed reply. This is the link to the code that I pasted while following the video instructions: http://pasted.co/141d0c26 As for the layout, it's 7th on the left from the bottom on the main page, under the modern layout options, the one with Miku banner with deep sea colours. |
Hinaya said: Shishio-kun said: What are you trying to fix? What is Turnips layout code or link, and how is it supposed to look? I don't know who that is or what layout they made. Hey, sorry for the delayed reply. This is the link to the code that I pasted while following the video instructions: http://pasted.co/141d0c26 As for the layout, it's 7th on the left from the bottom on the main page, under the modern layout options, the one with Miku banner with deep sea colours. This one, I take it.  The result you are getting seems to match the image and what I get when I use the code. The only difference is the banner image, which is controlled via the default theme settings and not the CSS (in the case of this theme, anyhow). The banner image itself seems to be a cropped version of the background image: https://anime-pictures.net/pictures/view_post/307948 https://i.imgur.com/poQXO58.jpg To get a similar result, you can use an online tool such as https://www.photopea.com/ or https://ezgif.com/ to crop the image and then optimize/downscale it to the point that it's 1MB or less in size (MAL has a 1MB upload limit on banner images). |
This has been updated again for like the millionth time to fix new issues |
theanimenerd999 said: um i was trying to edit my list but for some reason the images are halved i was hoping you could look into the css and tell me if something is wrong with it here's the link to the css https://pastebin.com/aGHevPBb here's my profile https://myanimelist.net/profile/theanimenerd999 any help would be much appreciated As in, the images are cropped smaller than you'd like? For instance, on this banner, are you saying you want it to display more like this? Current: What I assume you want: If that's correct, then you're in luck as I have made code for this before. Add this code to the bottom of your CSS, then you can change the number at the top (the "500px"). Increase it to something like "660px" to reveal more of the image. For changing image sizes, it will usually require some modification of the code like this, although usually simpler than the code I gave above. I also recommend checking out the commented code near the top of the theme's CSS where Shishio has quite a few notes on changing parts of the theme. If you meant something else, I'll need you to explain it in some more detail. |
| @Valerio_Lyndon hmm I wonder if that can be done with the new default codes now, or if I should add some contain/cover codes to each banner |
Shishio-kun said: @Valerio_Lyndon hmm I wonder if that can be done with the new default codes now, or if I should add some contain/cover codes to each banner Most of what that code does can be accomplished with your new customizations at the top, yep. IIRC you have one for increasing banner height and for moving list items down, so that achieves a pretty similar result. |
| This might be an easy fix but I haven't been able to do it. When trying to edit the score, putting my mouse directly on the number will not enable the hover. When I put my mouse just under or just above it, then I can click it to change the score. Edit: I forgot to mention I changed it to pointer events none so it wouldn't bug me for now. |
Paper2017Jun 8, 2021 9:19 AM
| I'm having an issue where I've got images hovering to the left for my anime and manga lists; for the animelist, everything works really well, but on the mangalist, the hovering images only show up black. I've got the anime theme as the dark blue, and manga as white blue, if that makes a difference. Here's my code for the manga: Thanks in advance! |
johneastonJun 25, 2021 5:36 AM
johneaston said: I'm having an issue where I've got images hovering to the left for my anime and manga lists; for the animelist, everything works really well, but on the mangalist, the hovering images only show up black. I've got the anime theme as the dark blue, and manga as white blue, if that makes a difference. Here's my code for the manga: Thanks in advance! Did you try the solutions in the opening post? Because you don't have it in your CSS and this should fix it |
Paper2017 said: This might be an easy fix but I haven't been able to do it. When trying to edit the score, putting my mouse directly on the number will not enable the hover. When I put my mouse just under or just above it, then I can click it to change the score. Edit: I forgot to mention I changed it to pointer events none so it wouldn't bug me for now. I can't find the error in the version you sent- link the code that was broken before you changed around the pointer events and when you had to find the perfect spot to change score I'm guessing the score link needs a higher Z index and a relative position maybe. The add/edit section may be blocking it out .list-table .list-table-data .data.score .link { Z-INDEX: 1000 !important; position: relative; pointer-events: inherit; } |
Shishio-kunJun 25, 2021 7:45 AM
| I'm not sure exactly how, but I tried opening it up after work today, and everything worked perfectly without making any changes. I'll take it, but I am very confused. Looks really nice now though. |
| Hi, can I change that transparent white box to black transparent and that black text to white? If I can...in what part of CSS? I tried to find it by my self but unsuccessfully. (Left pic change to right one)   It would be best if I could change it to exactly same style look...but I will be okay w just colours... |
TwixinkaaJul 1, 2021 5:23 AM
 -English is not my national language- |
Jazzmatic said: Hello I have a problem I do not see my image covers when I am disconnected , it happened suddenly my profils : https://myanimelist.net/animelist/Jazzmatic ( you don't see any cover but me as i'm log i see them all ) my css : https://justpaste.it/49i0e Try Part D in the opening post |
Twixinkaa said: Hi, can I change that transparent white box to black transparent and that black text to white? If I can...in what part of CSS? I tried to find it by my self but unsuccessfully. (Left pic change to right one) It would be best if I could change it to exactly same style look...but I will be okay w just colours... There's already an extension for this in the topic it comes from |
wintersflame said: so i have this issue with my top bar behind the icons it shows a black bar i have no clue how to remove or make it look better: https://prnt.sc/17tnpv3 also i was wondering if it would be possible to change the ''on hold '' header/catagory to : ''movies''? here is a link to my list : https://myanimelist.net/animelist/wintersflame and a link to the css : https://justpaste.it/3svgd Watch my Inspect element video on my channel in my sig, find the selector for that black part and set it to opacity: 0; or display: none There's a modern tutorial on changing header text. You could use that, except you swap out the selector for on hold on modern with the selector for on hold in classic. You get the selector thru inspect element |
solojoker said: pls visite my anime list and tell me why there no hovering preview pics in it Use the solutions in the opening post |
BigDickToxicity said: I imported a custom CSS code the other day for the first time. But it won't let me see my custom anime list. I can see the design on incognito tabs, on other devices and other people can see it but I can't on my normal browser? Please Help... My first thought is what URL are you visiting it with. For instance, when you click this version:  And visit https://myanimelist.net/animelist/BigDickToxicity directly, does it work? Additionally, does it work when logged in while incognito or logged in on a different computer/browser? Assuming the URL is correct and it works on other devices while logged in, it must be an issue with your browser configuration. Disable all browser extensions temporarily and see if it fixes it. If it does, enable the extensions again one at a time, reloading your list each time until it breaks. When it breaks, you know that extension was a problem. Depending on the extension, it may have options you can change to have it still enabled while not breaking anything. For instance, an adblocker may have a filter list or custom rule you've added that you could disable. Or a userscript extension such as Tampermonkey may have a script that is acting in an undesired fashion that you can disable. |
Valerio_Lyndon said: BigDickToxicity said: I imported a custom CSS code the other day for the first time. But it won't let me see my custom anime list. I can see the design on incognito tabs, on other devices and other people can see it but I can't on my normal browser? Please Help... My first thought is what URL are you visiting it with. For instance, when you click this version: And visit https://myanimelist.net/animelist/BigDickToxicity directly, does it work? Additionally, does it work when logged in while incognito or logged in on a different computer/browser? Assuming the URL is correct and it works on other devices while logged in, it must be an issue with your browser configuration. Disable all browser extensions temporarily and see if it fixes it. If it does, enable the extensions again one at a time, reloading your list each time until it breaks. When it breaks, you know that extension was a problem. Depending on the extension, it may have options you can change to have it still enabled while not breaking anything. For instance, an adblocker may have a filter list or custom rule you've added that you could disable. Or a userscript extension such as Tampermonkey may have a script that is acting in an undesired fashion that you can disable. Thanks for that suggestion, it worked once I disabled one of my chrome extensions. Much appreciated ;) |
I'm using the Clarity Dark on my Animelist and sometimes the Days column and the Studios column coincide |
 "𝓣𝓱𝓮 𝓼𝓱𝓸𝓻𝓽𝓮𝓼𝓽 𝓹𝓪𝓽𝓱 𝔀𝓪𝓼 𝓪 𝓭𝓮𝓽𝓸𝓾𝓻" -𝒢𝓎𝓇𝑜 𝒵𝑒𝓅𝓅𝑒𝓁𝒾 |
FervidJubatus said: I'm using the Clarity Dark on my Animelist and sometimes the Days column and the Studios column coincide This is mentioned in step 1 of the installation on the Clarity forum post.  To change this behaviour, you will need to add this code to the very bottom of your CSS. .data.days {
top: 0;
width: 70px;
margin: 0;
}
.data.days::after {
content: none;
} |
How did you make you MyAnimeList look like that?? I have a design too but isn't not mostly dark mode with characters on the side. But your MAL looks pretty different in the picture. So can you tell me what you're using to get that style? This is how MAL looks for me:  |
   StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: How did you make you MyAnimeList look like that?? I have a design too but isn't not mostly dark mode with characters on the side. But your MAL looks pretty different in the picture. So can you tell me what you're using to get that style? This is how MAL looks for me: https://i.imgur.com/Fyy437O.png It's an abandoned project of mine. I had started making a custom style in 2018 and initially intended to finish and release it, but making a full redesign of MAL is extremely complex due to their spaghetti code and I began having doubts about some of my design decisions. Thus, it never came to be. I still personally use it despite the jank and unfinished pages because it's easier on the eyes. |
Valerio_Lyndon said: LEGENDS_OF_ANIME said: How did you make you MyAnimeList look like that?? I have a design too but isn't not mostly dark mode with characters on the side. But your MAL looks pretty different in the picture. So can you tell me what you're using to get that style? This is how MAL looks for me: https://i.imgur.com/Fyy437O.png It's an abandoned project of mine. I had started making a custom style in 2018 and initially intended to finish and release it, but making a full redesign of MAL is extremely complex due to their spaghetti code and I began having doubts about some of my design decisions. Thus, it never came to be. I still personally use it despite the jank and unfinished pages because it's easier on the eyes. If you don't wanan post release it publically then is it okay if you sent it to me at least??? Though I'm pretty sure just like me a lot of people would want it finished or not. I started learning HTML and CSS a few weeks ago and I am not doing any practice projects other than the ones provided with the course so I may just try to see if how much of your design I can complete (of course if you don't mind about that). |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: If you don't wanan post release it publically then is it okay if you sent it to me at least??? Though I'm pretty sure just like me a lot of people would want it finished or not. I started learning HTML and CSS a few weeks ago and I am not doing any practice projects other than the ones provided with the course so I may just try to see if how much of your design I can complete (of course if you don't mind about that). Sure, why not. The code is here: https://pastebin.com/raw/2TNVwrXs It's formatted for import into Stylus (or Stylish if it still supports that, I don't use it so I wouldn't know). The code is a bit of a mess and there's a bunch of stuff that's half-done, but it could be interesting if you haven't done this before I suppose. Restyling a messy website like MyAnimeList is definitely one of the hardest things you can do in CSS though. |
Valerio_Lyndon said: Sure, why not. The code is here: https://pastebin.com/raw/2TNVwrXs It's formatted for import into Stylus (or Stylish if it still supports that, I don't use it so I wouldn't know). The code is a bit of a mess and there's a bunch of stuff that's half-done, but it could be interesting if you haven't done this before I suppose. Restyling a messy website like MyAnimeList is definitely one of the hardest things you can do in CSS though. Thanks, Love the blue!, this is the first MAL dark theme I can see myself actually keeping, was only half a dozen things I noticed that needed fixed IMO, I did have to edit a lot of hacker09's userscripts so they would fit in better places and change the comments for the sections so they would be named correctly (not sure if it's cause I use chrome), but you should definitely release it somewhere.  |
ShaggyZEOct 11, 2021 3:29 PM
   My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Skylleker said: I've tried but I could not change my background wallpaper. No matter what image I put when I try to preview its always blue. What wallpaper are you trying to change to, and how are you doing it? You change the background here /* WALLPAPER */ body, body.ownlist { background-image: url(https://i.imgur.com/k4Qs5Le.jpg); } Right now that wallpaper is on your anime list, is that what you're seeing now? If that's what you changed it to, it worked. Make sure you're editing the themes you have shaded the bubbles under https://myanimelist.net/ownlist/style |
Valerio_Lyndon said: LEGENDS_OF_ANIME said: If you don't wanan post release it publically then is it okay if you sent it to me at least??? Though I'm pretty sure just like me a lot of people would want it finished or not. I started learning HTML and CSS a few weeks ago and I am not doing any practice projects other than the ones provided with the course so I may just try to see if how much of your design I can complete (of course if you don't mind about that). Sure, why not. The code is here: https://pastebin.com/raw/2TNVwrXs It's formatted for import into Stylus (or Stylish if it still supports that, I don't use it so I wouldn't know). The code is a bit of a mess and there's a bunch of stuff that's half-done, but it could be interesting if you haven't done this before I suppose. Restyling a messy website like MyAnimeList is definitely one of the hardest things you can do in CSS though. Sorry for the late reply. I really list this style, IT'S JUST AMAZING HOW MUCH YOU CHANGED MAL. I made some changes (and still trying to figure out a lot of things about the code) but it really works. I made not be much of a help since you know much more about HTML and CSS than this miserable infant but tell me if you plan to release it. I am trying to complete some of the pages which you didn't do yet (Ex: the watch history page). And I would just want one help. I can't figure out how to change the background. I really wanna make this style work with this but I just can't get it to work. If you could just tell me how to change the dotted background image then I think I will be able to figure out the rest somehow. PS: Can you send me a friend request in MAL if you don't mind. I feel like you're a pretty busy person (I THINK), But when I finish my course that I'm currently doing and start doing some projects I want for practice I would like to get your help sometimes if possible. But sending the messages in forums of a different topic or in the comments doesn't look right to me. So I was wondering if I could PM you. It's totally fine if you don't wanna, thanks for this beautiful style. PEACE (─‿‿─) |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: PS: Can you send me a friend request in MAL if you don't mind. Sure, I've continued the thread there since I feel we're getting a bit off topic for this thread. ShaggyZE said: Thanks, Love the blue!, this is the first MAL dark theme I can see myself actually keeping, was only half a dozen things I noticed that needed fixed IMO, I did have to edit a lot of hacker09's userscripts so they would fit in better places and change the comments for the sections so they would be named correctly (not sure if it's cause I use chrome), but you should definitely release it somewhere. Thanks for the kind words. Even if I finished it, I'm hesitant to officially release it since the moment MAL makes a change I'll get people asking why something is broken. But you never know. |
Vivian_Lira666 said: Hi guys, I'm having a little problem with my layout, well basically all anime images work, except for the anime "Re:Zero kara Hajimeru Isekai Seikatsu 2nd Season Part 2", I really wanted you to help me solve this problem, here Below is my code: See the first post for solutions- Top three imports are outdated or don't work for your layout, remove them and use part B to get a working one Other imports for the actual layout are broken see solution part D |
Vivian_Lira666 said: Shishio-kun said: See the first post for solutions- Top three imports are outdated or don't work for your layout, remove them and use part B to get a working one Other imports for the actual layout are broken see solution part D Hi so after a while I had given up trying to fix the layout because I always failed at it, so I decided to let it go, only now I went to look at my animelist and the anime "Re:Zero kara Hajimeru Isekai Seikatsu 2nd Season Part 2" is working perfectly, I was very happy, but then I saw that another anime on my list ran out of the cover that was the anime "Marudase Kintarou"... Now my brain bugged The top three imports were part of the problem and they still are, you need to remove them like I said (delete them completely), or else they will keep causing issues, and also you need to replace them with a working one from part B. I suggest the full database one since it has the most recent updates. 1. REMOVE/DELETE THESE TOP THREE IMPORTS FROM THE TOP OF YOUR CSS @\import "https://malscraper.azurewebsites.net/covers/anime/MaximalDisguised/presets/more"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; @\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css"; 2. REPLACE THEM WITH ONE FROM PART B I think this is best for your situation @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; The final CSS should look like this
@\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more";
/*
------------------------------------------
[sᴇᴄʀᴇᴛ ᴘʟᴀᴄᴇ] - theme #06 edited by nadeko_ (original code by TheHolyPotato) | merumomo.tumblr.com | myanimelist.net/profile/Nadeko_
Please do not delete the credit. Do not claim as your own. Do not copy any part of the code. Do not redistribute. Thank you.✧
------------------------------------------
*/
@\import
url(\68 \74 \74 \70 \73 \3a \2f \2f \64 \6c \2e \64 \72 \6f \70 \62 \6f \78 \75 \73 \65 \72 \63 \6f \6e \74 \65 \6e \74 \2e \63 \6f \6d \2f \73 \2f \71 \34 \76 \35 \6b \64 \62 \78 \66 \35 \6d \74 \6b \70 \70 \2f \41 \72 \69 \61 \5f \42 \6c \75 \65 \53 \6b \79 \5f \53 \65 \63 \72 \65 \74 \5f \50 \6c \61 \63 \65 \5f \54 \68 \65 \6d \65 \2e \63 \73 \73 );{}
 As an alternative you could also try this, normally I don't think you should mix malscrapers but I think this will be fine if the above CSS doesn't cover everything during down times on MAL. It also makes it so other users can see the layout, normally its hidden to everyone except you
@\import "https://malscraper.azurewebsites.net/covers/anime/Vivian_Lira666/presets/more";
@\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more";
/*
------------------------------------------
[sᴇᴄʀᴇᴛ ᴘʟᴀᴄᴇ] - theme #06 edited by nadeko_ (original code by TheHolyPotato) | merumomo.tumblr.com | myanimelist.net/profile/Nadeko_
Please do not delete the credit. Do not claim as your own. Do not copy any part of the code. Do not redistribute. Thank you.✧
------------------------------------------
*/
@\import
url(\68 \74 \74 \70 \73 \3a \2f \2f \64 \6c \2e \64 \72 \6f \70 \62 \6f \78 \75 \73 \65 \72 \63 \6f \6e \74 \65 \6e \74 \2e \63 \6f \6d \2f \73 \2f \71 \34 \76 \35 \6b \64 \62 \78 \66 \35 \6d \74 \6b \70 \70 \2f \41 \72 \69 \61 \5f \42 \6c \75 \65 \53 \6b \79 \5f \53 \65 \63 \72 \65 \74 \5f \50 \6c \61 \63 \65 \5f \54 \68 \65 \6d \65 \2e \63 \73 \73 );{}
@import "https://dl.dropboxusercontent.com/s/snaujxxx8c1xm0n/TodokanaiKoi_topbar.css";
@import url('https://fonts.googleapis.com/css?family=Amaranth');
/*
MAIN BACKGROUND
*/
body {
background-attachment:fixed;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/tla1S6r.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size:cover;
font-family:calibri;
}
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.
Google RGBA color generator for easy to copy color and opacity numbers customized for you.
*/
.td1 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color: rgba(2, 129, 134, 0.6);
}
/*
MAGICA LOGO
Background-image is the Magica logo at page top. You can move it with background position.
*/
#list_surround {
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:60px;
position:absolute;
right:-4px !important;
width:700px;
}
/*
SIDE BUTTONS
*/
#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i.imgur.com/C18QlIM.png);
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid transparent;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
left:-300px;
padding:0;
position:absolute;
top:20px;
width:263px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/Lh7RiFh.png);
background-position:100% 0;
top:140px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/BkpE7PU.png);
background-position:0 0;
top:260px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/edsCiZQ.png);
background-position:100% 0;
top:380px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/DOfr8wo.png);
background-position:0 0;
top:500px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/S5Ge0XR.png);
background-position:100% 0;
top:620px;
}
/*
CUSTOM HEADERS
*/
.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/wppqZ5u.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -200px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i.imgur.com/ziN0kUa.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i.imgur.com/TLxRUZc.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i.imgur.com/ixqRL6W.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i.imgur.com/K5PtbLE.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
/*
TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel iteself.
*/
.table_header {
background-color: rgba(28, 81, 147, 0.7);
}
.table_header, .table_header a{
color: white;}
/*
LIST FONT COLOR
*/
.td1, .td2, .category_totals {
color:white;
}
/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout.
*/
a {
color: #FFF;
text-shadow: 1px 0px 3px #1375ED !important;
text-decoration: none;
}
a:hover {
color:#fff;
text-decoration:none;
letter-spacing: 1px;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
.category_totals {
background-color:rgba(28, 81, 147, 0.7);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:white;
text-align:center;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
font-size: 0;
height: 265px;
line-height: 24px;
padding-bottom: 5px;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:transparent;
border:0 none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
color:#000000;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(220, 135, 140, 0.8);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#ffffff;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}
.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity: none;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
#list_surround {
left:0 !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
}
.animetitle {
font-family: Amaranth;
font-size: 16px;
font-weight: normal;}
.animetitle + small {
color: #49FCD8 !important;
text-shadow: 1px 0px 3px #BBC5D5 !important;
font-weight: normal;
}
small::before {
content: '~ ';
}
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;}
.table_header:nth-last-of-type(2) {
border-radius: 0 10px 0 0;}
.td1:nth-of-type(6), .td2:nth-of-type(6){
background-color: transparent !important;
font-family: century gothic;}
td:nth-of-type(6) small {
font-size: 0;
color: #ffffff;
text-shadow: 1px 0px 3px rgba(19, 117, 237, 1);
font-weight: bold;
left: 52px;
position: relative;
}
td:nth-of-type(6) small:after {
font-size: 11px !important;
content: "Edit Tags"
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 73% !important;
}
.animetitle {
padding-left: 5px;
}
}
/* Media query for devices above 1000px */
@media all and (min-device-width:1001px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -270px;}
#list_surround {
left: 24% !important;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;
padding-top: 8px;}
}
/* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -300px;}
#list_surround {
left: 17% !important;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;}
}
/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -290px;}
#list_surround {
left: 17% !important;
width: 850px;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 530px !important;}
}
/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -330px;}
#list_surround {
left: 20% !important;
width: 800px;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 575px !important;}
}
/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -385px;}
#list_surround {
left: 17% !important;
width: 960px;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 635px !important;}
#list_surround {
background-position: center -40px;}
}
/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -430px;}
#list_surround {
left: 16% !important;
width: 1050px;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 720px !important;}
}
/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {
#list_surround .status_selected, #list_surround .status_not_selected {
left: -530px;}
#list_surround {
left: 10% !important;
width: 1100px;}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 770px !important;}
}
::-webkit-scrollbar-thumb:vertical {background-color: #8DB6CD;
height: 7px;}
::-webkit-scrollbar-thumb:horizontal {background-color: #8DB6CD; height:7px!important;}
::-webkit-scrollbar {background-color: #ffffff; height:7px; width:7px;}
#copyright::before {
content: " ";
display: block !important;
font-size: 0px !important;
color: rgba(0, 0, 0, 0) !important;
position: fixed !important;
width: 46px;
height: 52px;
bottom: 14px;
right: 39px;
background-color: rgba(51, 51, 51, 0);
background-image: url(http://i.imgur.com/IO7tPuU.png);
background-repeat: no-repeat;
transition-duration: 0.6s;
background-position: 76% 74%;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
#copyright:hover::before {
z-index: 1000;
width: 250px;
height: 55px !important;
margin-right: -49px;
font-size: 0px !important;
color: #E5E5E5 !important;
text-align: justify !important;
background-image: url(http://i.imgur.com/uPE94mA.png);
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
|
Shishio-kunNov 12, 2021 5:25 PM
| Hey Umm so my animelist layout used to be pretty awesome,but now all of a sudden something has happened. here take a look:https://i.imgur.com/PiLTcWE.png the search option suddenly decided to fly and the stats option isn't there. So could you take a look at my profile and help me. Also this:https://i.imgur.com/FwOW6N8.png if you see the back of the anime cover there are three boxes below,which used to be the about,edit and tag options,but now they are ..well they're just boxes. I'd really appreciate if someone could help.Thanks! |
ZangifNov 17, 2021 7:19 AM
 |
| Hey, I have an issue with my lists that worked flawlessly up today. As you can see in the linked picuture the top bar is all wrong. Instead of the usual symbols you get a Sigma, a Quantifier etc. https://i.imgur.com/Ivvi3yR.png Can somebody help me? |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |