yea, I know I tested it on your list before I sent it using Stylus, that's the way I wanted it for my list, V.L hasn't released an official horizontal genre/demographic, was there something you wanted it to do differently? because now at least your genres and tags aren't overlapping and are below the titles, I don't suggest putting them on the same line because if you look at my manga list I have a lot of tags so there wouldn't be enough room for both and be within the width of the list. |
ShaggyZENov 18, 2021 4:58 PM
   My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: yea, I know I tested it on your list before I sent it using Stylus, that's the way I wanted it for my list, V.L hasn't released an official horizontal genre/demographic, was there something you wanted it to do differently? because now at least your genres and tags aren't overlapping and are below the titles, I don't suggest putting them on the same line because if you look at my manga list I have a lot of tags so there wouldn't be enough room for both and be within the width of the list. Well I only need themes and the genres on mine, so it'll fit just fine. I already had it setup using tags before. However all kinds of automatic tags updaters tend to skip some entries every time rn, so I figured I'd just use the genres and do the themes using tags instead. Though I'd need them on the same line for it look satisfying. |
 🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
| Now everything is back to normal there's 1 or 2 things missing but I can live with that, thank you guys! @ShaggyZE @Shishio-kun |
 |
Leguch said: ShaggyZE said: yea, I know I tested it on your list before I sent it using Stylus, that's the way I wanted it for my list, V.L hasn't released an official horizontal genre/demographic, was there something you wanted it to do differently? because now at least your genres and tags aren't overlapping and are below the titles, I don't suggest putting them on the same line because if you look at my manga list I have a lot of tags so there wouldn't be enough room for both and be within the width of the list. Well I only need themes and the genres on mine, so it'll fit just fine. I already had it setup using tags before. However all kinds of automatic tags updaters tend to skip some entries every time rn, so I figured I'd just use the genres and do the themes using tags instead. Though I'd need them on the same line for it look satisfying. which tag updater are you using that skips? I updated akarin's so it has fixed genres, themes, and demographics now that doesn't skip. https://myanimelist.net/forum/?topicid=1961132 these are the values you will need to change to move it depending on how many tags you have, I don't know of a way to place them side by side no matter what the length is so you will need to adjust accordingly if you start adding more tags and will be a gap for those with fewer tags. .list-table .list-table-data .data.genre {
margin-top: 85px !important;
margin-left: -38px !important;
} |
ShaggyZENov 18, 2021 5:56 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Black_D-44 said: what's missing?Now everything is back to normal there's 1 or 2 things missing but I can live with that, thank you guys! @ShaggyZE @Shishio-kun |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: Leguch said: Well I only need themes and the genres on mine, so it'll fit just fine. I already had it setup using tags before. However all kinds of automatic tags updaters tend to skip some entries every time rn, so I figured I'd just use the genres and do the themes using tags instead. Though I'd need them on the same line for it look satisfying. which tag updater are you using that skips? I updated akarin's so it has fixed genres, themes, and demographics now that doesn't skip. https://myanimelist.net/forum/?topicid=1961132 these are the values you will need to change to move it depending on how many tags you have, I don't know of a way to place them side by side no matter what the length is so you will need to adjust accordingly if you start adding more tags and will be a gap for those with fewer tags. .list-table .list-table-data .data.genre {
margin-top: 85px !important;
margin-left: -38px !important;
}The Akarin is just the one I'm using. I've "installed" the update as well but it still tends to either not add all the tags or completely skip some entries for some reason. |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Leguch said: only thing I can think of is you need to increase the timer in the settings, but personally, that has never happened once for me as you can see by how many complete tags I have.The Akarin is just the one I'm using. I've "installed" the update as well but it still tends to either not add all the tags or completely skip some entries for some reason. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Shishio-kun said: @Valerio_Lyndon I want to make this a sticky, so I am saving the topic here in case anything like @/import breaks when I edit it. I copied the text from quick edit so it seems the backslashes are still there after making it a sticky I base the stickies on what should be go-to topics for starters or problems, basically core topics and fundamentals (plus indexes), and this has proven to be very simple to use for newbies, and advanced users learn from it too! So I added it to the stickies :D Alright, cool! Exciting to be a stickied post lol. Luckily I keep backups of all my list design topics, but doesn't hurt to have one more. |
To change the large preview images, add this to the bottom of your code. Then, change the "--width: #px" and "--height: #px" to whatever "px" numbers you want. This code uses the default, so you can increase from there. /* Hover image dimensions */
.data.image a::before {
--width: 150px;
--height: 200px;
left: calc(-16px + var(--width) * -1);
width: var(--width);
}
.list-item:hover .data.image a::before {
top: calc(50% - var(--height) * 0.5);
height: var(--height);
}Or if you meant the small preview images, add this to the bottom of your code. Then, change all the "64px" to whatever "px" number you want.  /* Image dimensions */
.data.image, .data.image img {
width: 64px !important;
height: 64px !important;
}
.data.image a::after {
line-height: 64px;
} |
ShaggyZE said: Leguch said: only thing I can think of is you need to increase the timer in the settings, but personally, that has never happened once for me as you can see by how many complete tags I have.The Akarin is just the one I'm using. I've "installed" the update as well but it still tends to either not add all the tags or completely skip some entries for some reason. What do you set your timer at? Mine is 5000 and it still has issues. |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
I keep mine at the default 3000, it could be your PC/memory/internet speed or a dozen other things, but you'd have to point out what anime on your list has issues. I checked about 10 from your list and they were all correct, not all anime have themes set yet so some are going to be blank unless you select genres too.  |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: I keep mine at the default 3000, it could be your PC/memory/internet speed or a dozen other things, but you'd have to point out what anime on your list has issues. I checked about 10 from your list and they were all correct, not all anime have themes set yet so some are going to be blank unless you select genres too. Strange thing is, it worked fine before. Well I'll just try out all the different solutions for now. |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Leguch said: Strange thing is, it worked fine before. Well I'll just try out all the different solutions for now. you still haven't mentioned which anime/what is wrong, cause I don't see any that's been skipped, I may need to just make another version that uses the old genre code (could be a browser compatibility thing for all I know) since no one has posted or complained about it. have you tried BurntJelly/V.L's updater? https://myanimelist.net/forum/?topicid=1905478 would need to request that he add themes/demographic when he has time. |
ShaggyZENov 18, 2021 10:50 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: Leguch said: Strange thing is, it worked fine before. Well I'll just try out all the different solutions for now. you still haven't mentioned which anime/what is wrong, cause I don't see any that's been skipped, I may need to just make another version that uses the old genre code (could be a browser compatibility thing for all I know) since no one has posted or complained about it. have you tried BurntJelly/V.L's updater? https://myanimelist.net/forum/?topicid=1905478 would need to request that he add themes/demographic when he has time. I believe the skipped entries were all random. I have tried the BurntJelly updater but I feel like it's incomparably slower than the Akarin one? |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Leguch said: I believe the skipped entries were all random. I have tried the BurntJelly updater but I feel like it's incomparably slower than the Akarin one? I'm not sure I never tried the updater part of that script, and okay..can you find 1 random one that it didn't work on when you get a chance to try again? otherwise, I have to assume it's working fine. |
ShaggyZENov 18, 2021 11:19 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: Leguch said: I believe the skipped entries were all random. I have tried the BurntJelly updater but I feel like it's incomparably slower than the Akarin one? I'm not sure I never tried the updater part of that script, and okay..can you find 1 random one that it didn't work on? if not I assume it's working fine. I'm not at home right now, so I'll have to check later. Tho iirc Youjo Senki Movie was skipped at least once |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Leguch said: I believe the skipped entries were all random. I have tried the BurntJelly updater but I feel like it's incomparably slower than the Akarin one? This is all conjecture of course since I haven't looked through Akarin's code, but it could be because the BurntJello code uses synchronous code (stops everything until it's finished fetching and processing the anime information). If Akarin uses asynchronous code ("multi-tasks"), then that could be why it feels faster. Of course, that could also be why some entries fail if perhaps your internet is slow it might still be loading one page when it tries to get the next. Total guess, I could easily be wrong. Or it could be the half-decade old code that checks for every piece of info when it may only need a couple of pieces. Would be a good project for me to try optimising that. |
| @Valerio_Lyndon akarin's does use async, and retry's/waits for responses, so not sure why it'd skip some, but I also don't have a full understanding of all its code yet which is why I'm trying to get just a little feedback as it seems to work fine for me atm unless I have some random entry out of 2,000+ missing some tags I'm unaware of. @Leguch Youjo Senki Movie wasn't skipped on my list, so the code to gather should be fine at least, it just may be random as you said or possibly internet issues as V.L said |
ShaggyZENov 18, 2021 11:35 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: @Valerio_Lyndon akarin's does use async, and retry's/waits for responses, so not sure why it'd skip some, but I also don't have a full understanding of all its code yet which is why I'm trying to get just a little feedback as it seems to work fine for me atm unless I have some random entry out of 2,000+ missing some tags I'm unaware of. @Leguch Youjo Senki Movie wasn't skipped on my list, so the code to gather should be fine at least, it just may be random as you said or possibly internet issues as V.L said I'll try again when I get back home. Though I don't think it's my internet's fault since I got 300 Mbps / 25 Mbps and it worked fine before. |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
| @Valerio_Lyndon You probably know this but f067 (plus icon) is broken period even with the font awesome update on MAL's end https://imgur.com/oqn8e14 https://fontawesome.com/v5.15/icons/plus |
Shishio-kun said: @Valerio_Lyndon You probably know this but f067 (plus icon) is broken period even with the font awesome update on MAL's end https://imgur.com/oqn8e14 https://fontawesome.com/v5.15/icons/plus F may this icon rest in peace right along-side non-escaped @import statements and image randomizers |
| @Valerio_Lyndon it died? is that why you were forced to Font Awesome 4? or did you just use a + sign? takes too much time to look up and compare all the changes that's been happening in the last 24 hours lol |
ShaggyZENov 19, 2021 1:39 AM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: @Valerio_Lyndon it died? is that why you were forced to Font Awesome 4? or did you just use a + sign? takes too much time to look up and compare all the changes that's been happening in the last 24 hours lol All I know is the icon isn't working on MAL lol. But yes I downloaded the official Fontawesome 4.7 and hosted it on Github to hopefully completely avoid this issue. Because while I do intend to play with the new icons, I'm sure most people who installed the list just want it to look like it always did. |
Valerio_Lyndon said: ShaggyZE said: @Valerio_Lyndon it died? is that why you were forced to Font Awesome 4? or did you just use a + sign? takes too much time to look up and compare all the changes that's been happening in the last 24 hours lol All I know is the icon isn't working on MAL lol. But yes I downloaded the official Fontawesome 4.7 and hosted it on Github to hopefully completely avoid this issue. Because while I do intend to play with the new icons, I'm sure most people who installed the list just want it to look like it always did. yea, thanks for that, I'm using it on my animelist that I maintain the imports too cause the new icons are bigger and mess with the aesthetics compared to everything else. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Valerio_Lyndon said: To change the large preview images, add this to the bottom of your code. Then, change the "--width: #px" and "--height: #px" to whatever "px" numbers you want. This code uses the default, so you can increase from there. /* Hover image dimensions */
.data.image a::before {
--width: 150px;
--height: 200px;
left: calc(-16px + var(--width) * -1);
width: var(--width);
}
.list-item:hover .data.image a::before {
top: calc(50% - var(--height) * 0.5);
height: var(--height);
}Or if you meant the small preview images, add this to the bottom of your code. Then, change all the "64px" to whatever "px" number you want. /* Image dimensions */
.data.image, .data.image img {
width: 64px !important;
height: 64px !important;
}
.data.image a::after {
line-height: 64px;
}Thanks you very much, this is exactly what i wanted. Another quick question if I may, is it possible to have improved quality on the preview images (both) or is that asking too much. If it can't be done then no worries and thanks again for this layout it is really good. |
Leguch said: ShaggyZE said: @Valerio_Lyndon akarin's does use async, and retry's/waits for responses, so not sure why it'd skip some, but I also don't have a full understanding of all its code yet which is why I'm trying to get just a little feedback as it seems to work fine for me atm unless I have some random entry out of 2,000+ missing some tags I'm unaware of. @Leguch Youjo Senki Movie wasn't skipped on my list, so the code to gather should be fine at least, it just may be random as you said or possibly internet issues as V.L said I'll try again when I get back home. Though I don't think it's my internet's fault since I got 300 Mbps / 25 Mbps and it worked fine before. Well it seems to work fine now, maybe it was some issues with MAL itself earlier. On a side note, I believe there was a way to move the tags more to the right so that image preview goes down? |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Leguch said: On a side note, I believe there was a way to move the tags more to the right so that image preview goes down? I'm not sure what you mean can you rephrase that, in anycase this code is what you'll use to move it right. .list-table-data {
padding-top: 5px !important;
padding-bottom: 15px !important;
}
.data.tags {
top: 0px !important;
left: 75px !important;
} |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: Leguch said: On a side note, I believe there was a way to move the tags more to the right so that image preview goes down? I'm not sure what you mean can you rephrase that, in anycase this code is what you'll use to move it right. .list-table-data {
padding-top: 5px !important;
padding-bottom: 15px !important;
}
.data.tags {
top: 0px !important;
left: 75px !important;
}Either stick the tags closer to the add and more buttons or center all the elements so there's an even distance at the top and the bottom of an entry |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
| @Leguch okay, that's what the codes I sent will do, the padding-top and bottom will help with spacing and the top and left of data.tags will help with moving them and you can do - negative px values as well. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
| @ShaggyZE Nevermind I checked again and there's nothing missing, yesterday the only thing missing was the "Close" button in the filters tab |
|
| So sorry if this has already been asked/answered but is there a way to get the old checkmark back? I just personally prefer the filled in look of the old one to the new see through one. Thanks! |
killhi12 said: Thanks you very much, this is exactly what i wanted. Another quick question if I may, is it possible to have improved quality on the preview images (both) or is that asking too much. If it can't be done then no worries and thanks again for this layout it is really good. This would be possible, yeah, but it will require a bit of tweaking. And I'm not sure if it will make much difference at their current size. But anyhow. Firstly, you need to change your high-resolution image preset. Find the cover image imports at the top of your CSS: @\import "https://malscraper.azurewebsites.net/covers/anime/killhi12/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/killhi12/presets/dataimagelinkbefore"; And change the ending "dataimagelinkbefore" text to "dataimagelink". @\import "https://malscraper.azurewebsites.net/covers/anime/killhi12/presets/dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/manga/killhi12/presets/dataimagelink"; Then, you could add this to the bottom of your code. /* HD Image on both normal and hover images */
.data.image a {
z-index: 44;
background-size: cover;
background-position: center;
}
.data.image img {
position: relative;
z-index: -1;
}
.data.image a::before {
background-image: inherit;
}What these two changes do is to: - Make the HD images apply to both the small image portrait as well as the pop-up, and - Move the normal image below the small portrait so it's only visible when the HD image fails. |
Geebear said: So sorry if this has already been asked/answered but is there a way to get the old checkmark back? I just personally prefer the filled in look of the old one to the new see through one. Thanks! This was due to a change MAL made. A fix has been applied to versions R27 and above, but to fix older versions (such as your own) without re-installing you can apply this patch. Add to the bottom of your CSS: /*-S-T-A-R-T--------------------*\
| FontAwesome Icon Fix |
\*------------------------------*/
.header .header-title,
.header-info,
.icon-menu,
.list-menu-float .icon-menu,
.icon-menu.quick-add:before,
.stats a,
.list-table > tbody:first-of-type:after,
.header .header-title:after,
.header .icon-menu.manga-list .text,
.header .icon-menu.anime-list .text,
.icon-menu.setting .text a,
.stats a,
.list-table[data-items="[]"]:after,
div[style^="width: 300px;"] input,
#advanced-options #fancybox-close:after
{
font-family: Arial, Verdana, "FontAwesome 4", FontAwesome, sans-serif;
}
.list-table .list-table-header .header-title .link.sort,
.data.score select,
.data.progress input,
.data.chapter input,
.data.volume input {
font: 11px/26px Verdana, Arial, "FontAwesome 4", FontAwesome, sans-serif;
}
.header .header-title:before,
[data-owner=""] .icon-menu.profile:before,
.icon-menu.quick-add:before,
.list-table > tbody:first-of-type:after,
.data.image a:after,
.data.progress span:only-of-type:after,
.data.chapter span:only-of-type:after,
.data.volume span:only-of-type:after,
.data.priority:before,
.data.tags a.edit:after,
#fancybox-outer #fancybox-close:after,
#advanced-options .advanced-options-header .description:before,
#advanced-options .btn-apply:before,
#advanced-options .btn-clear:before
{
font-family: "FontAwesome 4", FontAwesome;
}
i.fa-chart-column::before {
content: "\f080";
}
.sort-icon.fa-sort-up { top: 2px; }
.sort-icon.fa-sort-down { bottom: 2px; }
/*------------------------E-N-D-*/I notice you've already got the FontAwesome import at the top of your code, so you can ignore this second step. But, for anyone else reading, they will need to also add the FontAwesome import to the top of their code: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/resources/font-awesome-4.7.0/css/font-awesome-force-legacy.min.css"; |
Valerio_LyndonNov 22, 2021 12:32 AM
Valerio_Lyndon said: Geebear said: So sorry if this has already been asked/answered but is there a way to get the old checkmark back? I just personally prefer the filled in look of the old one to the new see through one. Thanks! This was due to a change MAL made. A fix has been applied to versions R27 and above, but to fix older versions (such as your own) without re-installing you can apply this patch. Add to the bottom of your CSS: /*-S-T-A-R-T--------------------*\
| FontAwesome Icon Fix |
\*------------------------------*/
.header .header-title,
.header-info,
.icon-menu,
.list-menu-float .icon-menu,
.icon-menu.quick-add:before,
.stats a,
.list-table > tbody:first-of-type:after,
.header .header-title:after,
.header .icon-menu.manga-list .text,
.header .icon-menu.anime-list .text,
.icon-menu.setting .text a,
.stats a,
.list-table[data-items="[]"]:after,
div[style^="width: 300px;"] input,
#advanced-options #fancybox-close:after
{
font-family: Arial, Verdana, "FontAwesome 4", FontAwesome, sans-serif;
}
.list-table .list-table-header .header-title .link.sort,
.data.score select,
.data.progress input,
.data.chapter input,
.data.volume input {
font: 11px/26px Verdana, Arial, "FontAwesome 4", FontAwesome, sans-serif;
}
.header .header-title:before,
[data-owner=""] .icon-menu.profile:before,
.icon-menu.quick-add:before,
.list-table > tbody:first-of-type:after,
.data.image a:after,
.data.progress span:only-of-type:after,
.data.chapter span:only-of-type:after,
.data.volume span:only-of-type:after,
.data.priority:before,
.data.tags a.edit:after,
#fancybox-outer #fancybox-close:after,
#advanced-options .advanced-options-header .description:before,
#advanced-options .btn-apply:before,
#advanced-options .btn-clear:before
{
font-family: "FontAwesome 4", FontAwesome;
}
i.fa-chart-column::before {
content: "\f080";
}
.sort-icon.fa-sort-up { top: 2px; }
.sort-icon.fa-sort-down { bottom: 2px; }
/*------------------------E-N-D-*/I notice you've already got the FontAwesome import at the top of your code, so you can ignore this second step. But, for anyone else reading, they will need to also add the FontAwesome import to the top of their code: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/resources/font-awesome-4.7.0/css/font-awesome-force-legacy.min.css"; Ah this works great, thank you :) |
| My "All Anime" list lags a lot! My PC isn't all that great, but, It lags only on the "All Anime" section. The "Completed", "PTW", etc are all very smooth. By lag, I don't mean it takes too much time to load, but that It's really choppy, like watching a 1080p video on a 1 MB/s network. So, is the problem with my CSS? sm1 pls help me make it smoother. |
[  |
killhi12 said: On another note I have noticed that under the "more" information section for storage it does't include any of my blu-rays and will only show the number in storage if I have chosen "retail DVD" is there a way to make it recognize blu-rays and other storage or will it only recognize "retail DVD" Hmm, that is odd. The "More" section is mostly unchangable by CSS themes, so this is on MAL's end. But when trying to reproduce this, I found the same. Well, NAS and Hard Drive entries seem to work, didn't test all the others, but Blu-rays show up as "None". They do show up in the Storage column, just not in the "More" section.  Should probably fill out a bug report on this in the support forum. If you don't, then I will probably do a bit more testing over the next couple of days and fill it out instead. |
| I'll have to test on a low-power machine before I can get back to jery_js but I don't see any CSS problem at a cursory look. |
jery_js said: My "All Anime" list lags a lot! My PC isn't all that great, but, It lags only on the "All Anime" section. The "Completed", "PTW", etc are all very smooth. By lag, I don't mean it takes too much time to load, but that It's really choppy, like watching a 1080p video on a 1 MB/s network. So, is the problem with my CSS? sm1 pls help me make it smoother. What's the browser you use, see if it lags in another browser you don't use. This way it isolates if the browser you are using has any issues you can change to speed it up. |
| @Valerio_Lyndon just for the record the list is very smooth for me after the initial load and I've seen lag with lists that are too heavy or the cursor is janky, but not getting that here. @jery_js I also noticed the original snow animations could be taken out because when I added the snow images back (by deleting snow codes at the bottom) I got some lag so maybe the animation codes which create the snow caused issues. Maybe you can also try to import the entire layout, this can reduce lag for some people, but its no guarantee https://myanimelist.net/forum/?topicid=1911384 Also you can use a separate Clarity layout on manga to reduce some of the weight, when you take the manga import out of anime and keep it only on manga and only use the anime import on anime lists. This reduces some of the size along with using JPEGS instead of PNGs if you are but again it's not often you see a lag difference but sometimes you do. Maybe that custom cursor is causing issues for local too |
Shishio-kun said: Thanks for looking into it. jery_js said: My "All Anime" list lags a lot! My PC isn't all that great, but, It lags only on the "All Anime" section. The "Completed", "PTW", etc are all very smooth. By lag, I don't mean it takes too much time to load, but that It's really choppy, like watching a 1080p video on a 1 MB/s network. So, is the problem with my CSS? sm1 pls help me make it smoother. What's the browser you use, see if it lags in another browser you don't use. This way it isolates if the browser you are using has any issues you can change to speed it up. I'm using Opera GX, and then I tried it on a couple other browsers (UC, Edge, Chrome & Firefox). In the end, It was lagging on all browsers except Firefox. Firefox was very smooth, but, the rest were still lagging (tho, one browser was a bit slower than the other) I also tried it in android browsers and all were fine. Shishio-kun said: I have already tried importing the entire layout (there wasn't much speed difference) and also tried converting most of the larger png to webp format.@jery_js I also noticed the original snow animations could be taken out because when I added the snow images back (by deleting snow codes at the bottom) I got some lag so maybe the animation codes which create the snow caused issues. Maybe you can also try to import the entire layout, this can reduce lag for some people, but its no guarantee https://myanimelist.net/forum/?topicid=1911384 Also you can use a separate Clarity layout on manga to reduce some of the weight, when you take the manga import out of anime and keep it only on manga and only use the anime import on anime lists. This reduces some of the size along with using JPEGS instead of PNGs if you are but again it's not often you see a lag difference but sometimes you do. Maybe that custom cursor is causing issues for local too Can you explain how to separate the manga and anime imports?. I came across another problem when trying in different browsers. The code for showing MAL Scores and Synopsis on Hover didn't work on any of the browsers, but, they worked again when I signed into my MAL account in them. Also, the Names are in English before signing in and then turn to romaji after signing in(I want it in Romaji) FYI, The MAL Scores code is on Lines 11, 12, 1274 & the Synopsis Codes are on Lines 9, 10, 1293. |
jery_jsNov 26, 2021 5:14 AM
[ |
jery_js said: My "All Anime" list lags a lot! My PC isn't all that great, but, It lags only on the "All Anime" section. The "Completed", "PTW", etc are all very smooth. By lag, I don't mean it takes too much time to load, but that It's really choppy, like watching a 1080p video on a 1 MB/s network. So, is the problem with my CSS? sm1 pls help me make it smoother. Pretty sure it's the background image. When I removed it, the laptop I tested on performed a lot better. Should have thought of it earlier as I've seen this behaviour before with large images on Chrome. I would try removing the background image to test, and if it improves for you too then you can try either downscaling the image to a resolution closer to your native one (you can use a tool like ezgif for that), or using a different image. If you still have lag you can also try removing the status text to see if it makes a difference. To do this you would either delete/comment-out lines 201-272 or by adding this to the bottom of your code: .data.status::before {
content: none !important;
}If it were still laggy after that I'd try a similar process as the background image, removing to see if performance improves and then resizing the image down if it does. jery_js said: I came across another problem when trying in different browsers. The code for showing MAL Scores and Synopsis on Hover didn't work on any of the browsers, but, they worked again when I signed into my MAL account in them. Also, the Names are in English before signing in and then turn to romaji after signing in(I want it in Romaji) FYI, The MAL Scores code is on Lines 11, 12, 1274 & the Synopsis Codes are on Lines 9, 10, 1293. Pretty sure this is an easy fix of changing your @import format. MAL broke the regular formatting in 2018 when they tried to lock up the security, so now you have to format imports with a backslash and double quotes. Nothing else works. For your imports, here's a before: @import "https://jeryjs.github.io/Hosting/Anime-Synopsis.css"; @import "https://jeryjs.github.io/Hosting/Manga-Synopsis.css"; @import "https://jeryjs.github.io/Hosting/Anime-Score.css"; @import "https://jeryjs.github.io/Hosting/Manga-Score.css"; And after the fix: @\import "https://jeryjs.github.io/Hosting/Anime-Synopsis.css"; @\import "https://jeryjs.github.io/Hosting/Manga-Synopsis.css"; @\import "https://jeryjs.github.io/Hosting/Anime-Score.css"; @\import "https://jeryjs.github.io/Hosting/Manga-Score.css"; jery_js said: In the end, It was lagging on all browsers except Firefox. That would make sense. Almost every browser is using the same engine as Chrome, except for Firefox which has their own engine that (IMO) is miles better. That and the fact I can keep 1000+ tabs open at once with minimal performance hits are what keep me on Firefox. |
killhi12 said: I know I am asking a lot of questions and I sorry for that but this should be my last one for now, as i have changed the size of teh icon images (circular) they now cover the "number" section in the list is there a way to move the number up a bit or not. Good question, I didn't think about the numbers. You could use some code like this: .data.number {
z-index: 45; /* raises object in front of images */
--offset: -38px;
top: var(--offset);
left: calc(110px * 0.5 + var(--offset) - 10px);
/* the only reason this uses a variable and a fancy calc function is so i don't have to keep doing math in my head */
} |
Valerio_Lyndon said: jery_js said: My "All Anime" list lags a lot! My PC isn't all that great, but, It lags only on the "All Anime" section. The "Completed", "PTW", etc are all very smooth. By lag, I don't mean it takes too much time to load, but that It's really choppy, like watching a 1080p video on a 1 MB/s network. So, is the problem with my CSS? sm1 pls help me make it smoother. Pretty sure it's the background image. When I removed it, the laptop I tested on performed a lot better. Should have thought of it earlier as I've seen this behaviour before with large images on Chrome. I would try removing the background image to test, and if it improves for you too then you can try either downscaling the image to a resolution closer to your native one (you can use a tool like ezgif for that), or using a different image. If you still have lag you can also try removing the status text to see if it makes a difference. To do this you would either delete/comment-out lines 201-272 or by adding this to the bottom of your code: .data.status::before {
content: none !important;
}If it were still laggy after that I'd try a similar process as the background image, removing to see if performance improves and then resizing the image down if it does. Turned out that the problem was the status text. Disabling it produced a noticeable result, but, there's still a bit of lag. I'll try downsizing the bg image too. jery_js said: I came across another problem when trying in different browsers. The code for showing MAL Scores and Synopsis on Hover didn't work on any of the browsers, but, they worked again when I signed into my MAL account in them. Also, the Names are in English before signing in and then turn to romaji after signing in(I want it in Romaji) FYI, The MAL Scores code is on Lines 11, 12, 1274 & the Synopsis Codes are on Lines 9, 10, 1293. Pretty sure this is an easy fix of changing your @import format. MAL broke the regular formatting in 2018 when they tried to lock up the security, so now you have to format imports with a backslash and double quotes. Nothing else works. For your imports, here's a before: @import "https://jeryjs.github.io/Hosting/Anime-Synopsis.css"; @import "https://jeryjs.github.io/Hosting/Manga-Synopsis.css"; @import "https://jeryjs.github.io/Hosting/Anime-Score.css"; @import "https://jeryjs.github.io/Hosting/Manga-Score.css"; And after the fix: @\import "https://jeryjs.github.io/Hosting/Anime-Synopsis.css"; @\import "https://jeryjs.github.io/Hosting/Manga-Synopsis.css"; @\import "https://jeryjs.github.io/Hosting/Anime-Score.css"; @\import "https://jeryjs.github.io/Hosting/Manga-Score.css"; Thx, adding the backslashes fixed it. jery_js said: In the end, It was lagging on all browsers except Firefox. That would make sense. Almost every browser is using the same engine as Chrome, except for Firefox which has their own engine that (IMO) is miles better. That and the fact I can keep 1000+ tabs open at once with minimal performance hits are what keep me on Firefox. I agree with ur opinion of firefox, but I just cant let go of Opera and its features (especially the sidebar) |
jery_jsNov 29, 2021 3:03 AM
[ |
| It's finally Smooth! I split the layout into anime and manga separately and imported both as a whole separately. Also, removed a part of the status text and some similar changes. Its now pretty smooth. Thx a lot! |
[ |
| Hello again @Valerio_Lyndon I have noticed that with the new update that MAL did which added a new icon for available episodes on this site (please tell me how to hide this), the option for now changing the color of a title while hovering makes it that the dates for that line will disappear (both user date and when the anime aired). What should I change on my code for this to be fixed? or is it something that needs to be updated on the theme import? |
SheyCroix said: Hello again @Valerio_Lyndon I have noticed that with the new update that MAL did which added a new icon for available episodes on this site (please tell me how to hide this), the option for now changing the color of a title while hovering makes it that the dates for that line will disappear (both user date and when the anime aired). What should I change on my code for this to be fixed? or is it something that needs to be updated on the theme import? he will eventually update it on the import .malicon, .icon-watch2 {
display:none !important;
} |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Hello! I want to move the "content-status" element next to the "data.type" element. By only changing the position of the "content-status" element, when the "data.type" element differs from "TV", the "content_status" element overlaps with the "data.type" element, like this: (if it's hard to see, the dash is overlapping with the "A" in "ONA".) If i just move the "content-status" element left, I'm going to have a bit of space inbetween of the two elements, and i don't like that. How can i make it so the "content-status" element's position is always a set amount of pixels left from the end of the "data.type" element? Thanks in advance! I'm using Google Chrome. Here is all of my custom CSS: |
ThatAlphaPigeonDec 27, 2021 7:52 AM
| hello ! apologies if this has been answered before, but how do i make it so that when i hover my mouse over a transparent row, it becomes opaque/darker ? for example on this users list. here is my css: thanks in advance ! |
mimikwuDec 29, 2021 10:21 PM
 |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [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 |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |
|
» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!Shishio-kun - Feb 6, 2012 |
37 |
by sunnysummerday
»»
Jun 11, 7:44 PM |