Reply to Shishio-kun
@CringeBby
What is your display screen size? Is it a laptop, PC, 4k, TV, etc?
The thing is, this background
https://imgur.com/7e0a7WN
its not a typical screen size afaik, so it might have to be manually adjusted
One thing you can do is add these codes to the bottom of your CSS
and then adjust the px amounts until the wallpaper fills your display manually. The first px is width, second is height.
You can also use this
and it will fit the wallpaper into your screen, although there may be space on the sides since it's not able to fill it in.
And before you can add any codes, you need to close the CSS you already have at the bottom, it should look like this:
What is your display screen size? Is it a laptop, PC, 4k, TV, etc?
The thing is, this background
https://imgur.com/7e0a7WN
its not a typical screen size afaik, so it might have to be manually adjusted
One thing you can do is add these codes to the bottom of your CSS
body{
background-size: 2000px 1000px !important;
}and then adjust the px amounts until the wallpaper fills your display manually. The first px is width, second is height.
You can also use this
body{
background-size: contain !important;
}and it will fit the wallpaper into your screen, although there may be space on the sides since it's not able to fill it in.
And before you can add any codes, you need to close the CSS you already have at the bottom, it should look like this:
#copyright::after {
content: "ShelterStyleV3 - Layout originally designed by Takana no Hana";
}| @Shishio-kun thank you omg 😭🙏🙏 i used your second code to finally fix my issue. My pc display is 1440x900, using the first code stretched out my backgorund pics even more 😭 but there's always some type of trouble when you have a macbook fr. btw...is there a way to have a background for my background? 😭? I don't mind the white space, but if i can have something else other than that it would also be good |
 |
| I have a problem with the Stylus extension. Every time I visit a page, it stops working, but when I click on the icon at the top right of my browser and disable and then re-enable the theme I installed for MAL, and works fine. However, if I visit another page, it stops working, and I have to do it again. Also, if I visit a page where I already did this process, I'll have to do disable and enable it again. The same thing happens if I reload the page I'm currently at. Does anyone have any idea why this is happening? I didn't touch anything. Here's the CSS code I'm using: |
 |
Reply to LuoBingmei
@Shishio-kun
thank you omg 😭🙏🙏 i used your second code to finally fix my issue. My pc display is 1440x900, using the first code stretched out my backgorund pics even more 😭 but there's always some type of trouble when you have a macbook fr.
btw...is there a way to have a background for my background? 😭? I don't mind the white space, but if i can have something else other than that it would also be good
thank you omg 😭🙏🙏 i used your second code to finally fix my issue. My pc display is 1440x900, using the first code stretched out my backgorund pics even more 😭 but there's always some type of trouble when you have a macbook fr.
btw...is there a way to have a background for my background? 😭? I don't mind the white space, but if i can have something else other than that it would also be good
Reply to Shishio-kun
@CringeBby
Yah, you need a second background code for each section and add cover for those
body{
background-size: contain, cover !important;
}
/*CURRENTLY WATCHING MAIN WALLPAPER*/
body[data-query*='"status":1'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*COMPLETED MAIN WALLPAPER*/
body[data-query*='"status":2'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDNC9bhfv4-VMtGEBvzOzrA), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*ON HOLD MAIN WALLPAPER*/
body[data-query*='"status":3'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwI2sXr7ujzFjKxjLFL4piGQ) , url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*DROPPED MAIN WALLPAPER*/
body[data-query*='"status":4'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwGrj5pnw9IBG3XCGpggK1Is) ,url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*PLANNED MAIN WALLPAPER*/
body[data-query*='"status":6'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwK7RLRw4JTu6soSjQ1YRgsY) ,url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*ALL ANIME/MANGA MAIN WALLPAPER*/
body[data-query*='"status":7'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwE4Isn48tAmYxuuMMKJIrXs), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
Yah, you need a second background code for each section and add cover for those
body{
background-size: contain, cover !important;
}
/*CURRENTLY WATCHING MAIN WALLPAPER*/
body[data-query*='"status":1'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*COMPLETED MAIN WALLPAPER*/
body[data-query*='"status":2'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDNC9bhfv4-VMtGEBvzOzrA), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*ON HOLD MAIN WALLPAPER*/
body[data-query*='"status":3'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwI2sXr7ujzFjKxjLFL4piGQ) , url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*DROPPED MAIN WALLPAPER*/
body[data-query*='"status":4'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwGrj5pnw9IBG3XCGpggK1Is) ,url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*PLANNED MAIN WALLPAPER*/
body[data-query*='"status":6'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwK7RLRw4JTu6soSjQ1YRgsY) ,url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
/*ALL ANIME/MANGA MAIN WALLPAPER*/
body[data-query*='"status":7'] {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwE4Isn48tAmYxuuMMKJIrXs), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEGI6EF9-GIVzkoQITmaBf0);
}
| @Shishio-kun Thanks so much for your help :D !!!!!!!!!!! |
|
| Hey, I'm having the same issue @Pokitaru mentioned in his post above with Stylus. I only have code to place a background pic behind my mal page, nothing fancy and I didn't do anything and suddenly it stopped working unless I disable and re-enable my style on Stylus. On opening the 'manage style' page I did notice that there are 3 issues raised, listed as an 'empty rule'. They are lines of code in the section that says not to tamper with it, so I have come to seek advice rather than make a mess myself. As always, thank you Shishio from someone who is not the best at tech and code stuff, you're advice and assistance is invaluable, and helps me put a nice background on my mal page :) These are the 3 lines that have the issues flagged: body:not(.ownlist)::before { } body:not(.ownlist){ } #myanimelist::before{ } Here's the code I'm using: |
 |
| @23feanor @Pokitaru I think MAL changed the layout of the website slightly with the stacks challenge thing, so please update to the newest version https://myanimelist.net/forum/?topicid=2073022 If they change it again, there's a chance another update would be needed until I find codes they won't mess with (I got some ideas). |
| That did the job, thanks @Shishio-kun |
|
Reply to Shishio-kun
@23feanor
@Pokitaru
I think MAL changed the layout of the website slightly with the stacks challenge thing, so please update to the newest version
https://myanimelist.net/forum/?topicid=2073022
If they change it again, there's a chance another update would be needed until I find codes they won't mess with (I got some ideas).
@Pokitaru
I think MAL changed the layout of the website slightly with the stacks challenge thing, so please update to the newest version
https://myanimelist.net/forum/?topicid=2073022
If they change it again, there's a chance another update would be needed until I find codes they won't mess with (I got some ideas).
| @Shishio-kun, First of all, again, thank you so much for your help! Just wanted to give you an update. The new version works fine, but I did have to make a couple of tweaks. Specifically, I added the following links to the "custom excluded" section: "https://myanimelist.net/animelist/" and "https://myanimelist.net/mangalist/" because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists. Just to clarify, I’m totally fine with this and don’t mind doing it whenever something's off. It’s just adding two links in one box, no big deal. I’m just bringing it up in case there’s more going on with MAL’s new layout. For the record, I’m using the Brave browser, though I doubt it’s any different from the other Chromium-based browsers. @23feanor Not sure if you ran into this too, but if you did, just add those two links to your "excluded" box like this:https://prnt.sc/UcuaD0i4eMaB |
|
Reply to Pokitaru
@Shishio-kun, First of all, again, thank you so much for your help!
Just wanted to give you an update. The new version works fine, but I did have to make a couple of tweaks. Specifically, I added the following links to the "custom excluded" section: "https://myanimelist.net/animelist/" and "https://myanimelist.net/mangalist/" because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
Just to clarify, I’m totally fine with this and don’t mind doing it whenever something's off. It’s just adding two links in one box, no big deal. I’m just bringing it up in case there’s more going on with MAL’s new layout. For the record, I’m using the Brave browser, though I doubt it’s any different from the other Chromium-based browsers.
@23feanor Not sure if you ran into this too, but if you did, just add those two links to your "excluded" box like this:https://prnt.sc/UcuaD0i4eMaB
Just wanted to give you an update. The new version works fine, but I did have to make a couple of tweaks. Specifically, I added the following links to the "custom excluded" section: "https://myanimelist.net/animelist/" and "https://myanimelist.net/mangalist/" because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
Just to clarify, I’m totally fine with this and don’t mind doing it whenever something's off. It’s just adding two links in one box, no big deal. I’m just bringing it up in case there’s more going on with MAL’s new layout. For the record, I’m using the Brave browser, though I doubt it’s any different from the other Chromium-based browsers.
@23feanor Not sure if you ran into this too, but if you did, just add those two links to your "excluded" box like this:https://prnt.sc/UcuaD0i4eMaB
| @Pokitaru I didn't have that problem (using Chrome so maybe that's why), but thanks for the heads up in case |
|
Reply to 23feanor
Hey, I'm having the same issue @Pokitaru mentioned in his post above with Stylus. I only have code to place a background pic behind my mal page, nothing fancy and I didn't do anything and suddenly it stopped working unless I disable and re-enable my style on Stylus. On opening the 'manage style' page I did notice that there are 3 issues raised, listed as an 'empty rule'. They are lines of code in the section that says not to tamper with it, so I have come to seek advice rather than make a mess myself.
As always, thank you Shishio from someone who is not the best at tech and code stuff, you're advice and assistance is invaluable, and helps me put a nice background on my mal page :)
These are the 3 lines that have the issues flagged:
body:not(.ownlist)::before {
}
body:not(.ownlist){
}
#myanimelist::before{
}
Here's the code I'm using:
As always, thank you Shishio from someone who is not the best at tech and code stuff, you're advice and assistance is invaluable, and helps me put a nice background on my mal page :)
These are the 3 lines that have the issues flagged:
body:not(.ownlist)::before {
}
body:not(.ownlist){
}
#myanimelist::before{
}
Here's the code I'm using:
These weren't errors that affected the theme before, but they do now, along with the background code being changed probably after the stack update. They were likely codes which I used in the past but left blank in case I needed to use them again. They've been completely removed in the new update. |
Shishio-kunSep 22, 2024 2:26 AM
Reply to Pokitaru
@Shishio-kun, First of all, again, thank you so much for your help!
Just wanted to give you an update. The new version works fine, but I did have to make a couple of tweaks. Specifically, I added the following links to the "custom excluded" section: "https://myanimelist.net/animelist/" and "https://myanimelist.net/mangalist/" because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
Just to clarify, I’m totally fine with this and don’t mind doing it whenever something's off. It’s just adding two links in one box, no big deal. I’m just bringing it up in case there’s more going on with MAL’s new layout. For the record, I’m using the Brave browser, though I doubt it’s any different from the other Chromium-based browsers.
@23feanor Not sure if you ran into this too, but if you did, just add those two links to your "excluded" box like this:https://prnt.sc/UcuaD0i4eMaB
Just wanted to give you an update. The new version works fine, but I did have to make a couple of tweaks. Specifically, I added the following links to the "custom excluded" section: "https://myanimelist.net/animelist/" and "https://myanimelist.net/mangalist/" because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
Just to clarify, I’m totally fine with this and don’t mind doing it whenever something's off. It’s just adding two links in one box, no big deal. I’m just bringing it up in case there’s more going on with MAL’s new layout. For the record, I’m using the Brave browser, though I doubt it’s any different from the other Chromium-based browsers.
@23feanor Not sure if you ran into this too, but if you did, just add those two links to your "excluded" box like this:https://prnt.sc/UcuaD0i4eMaB
Pokitaru said: `because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists. I dont see this error, so it may be Brave only. btw you can try to fix that missing preview pic with the new github imports under part B https://myanimelist.net/forum/?topicid=2130234 |
Reply to Shishio-kun
Pokitaru said:
because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
`because the Stylus wallpaper was showing up on my anime and manga lists instead of the custom one I use. The same thing happened when viewing other people's lists.
I dont see this error, so it may be Brave only. btw you can try to fix that missing preview pic with the new github imports under part B
https://myanimelist.net/forum/?topicid=2130234
| @Shishio-kun Yeah maybe it's just me. I'll be keeping my eyes on it in the following days, in case something changes. Thank you for that as well! I'll definitely try to fix that too. Much appreciate it! ^^ |
|
My dark mode theme was also having this issue however turning on "Circumvent CSP 'style-src' via adoptedStyleSheets" in Stylus options also fixes the problem. |
   My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
| Apparently, I love visiting this thread :P Here's my current situation: A few months ago, I added a new code from this club (of course), but now I can't find it anywhere. The code was for the preview images. When I hover over an anime on my list, a preview image appears on the left side of the screen, like this. Some of the images are broken and don’t show up, which I’m fine with. It only happens occasionally. The real issue is that my list takes a lot longer to load now. At first, I thought something else was causing it, but after checking thoroughly, it turns out it’s definitely the code. Ideally, I’d love to fix the loading issue while keeping the preview images, but I’d be okay with removing it altogether if that’s the only option. Unfortunately, my attempts to fix or remove the code haven’t worked. Could someone help me with this? |
|
Reply to Pokitaru
Apparently, I love visiting this thread :P
Here's my current situation: A few months ago, I added a new code from this club (of course), but now I can't find it anywhere. The code was for the preview images. When I hover over an anime on my list, a preview image appears on the left side of the screen, like this. Some of the images are broken and don’t show up, which I’m fine with. It only happens occasionally.
The real issue is that my list takes a lot longer to load now. At first, I thought something else was causing it, but after checking thoroughly, it turns out it’s definitely the code. Ideally, I’d love to fix the loading issue while keeping the preview images, but I’d be okay with removing it altogether if that’s the only option. Unfortunately, my attempts to fix or remove the code haven’t worked.
Could someone help me with this?
Here's my current situation: A few months ago, I added a new code from this club (of course), but now I can't find it anywhere. The code was for the preview images. When I hover over an anime on my list, a preview image appears on the left side of the screen, like this. Some of the images are broken and don’t show up, which I’m fine with. It only happens occasionally.
The real issue is that my list takes a lot longer to load now. At first, I thought something else was causing it, but after checking thoroughly, it turns out it’s definitely the code. Ideally, I’d love to fix the loading issue while keeping the preview images, but I’d be okay with removing it altogether if that’s the only option. Unfortunately, my attempts to fix or remove the code haven’t worked.
Could someone help me with this?
| @Pokitaru yea, it's because it's loading an old CSS (with broken image links) of almost every anime/manga cover into your list, as that's it's failsafe for when it's scraping fails or is blocked in some way, in your case since auto is depreciated. you can try my replacement to malscraper azurewebsites import below (highest quality and highest speed) [API CSS] MAL-Scraper-API Cover/CSS Generator or see part B https://myanimelist.net/forum/?topicid=2130234 |
ShaggyZEOct 7, 2024 1:13 AM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to Pokitaru
Apparently, I love visiting this thread :P
Here's my current situation: A few months ago, I added a new code from this club (of course), but now I can't find it anywhere. The code was for the preview images. When I hover over an anime on my list, a preview image appears on the left side of the screen, like this. Some of the images are broken and don’t show up, which I’m fine with. It only happens occasionally.
The real issue is that my list takes a lot longer to load now. At first, I thought something else was causing it, but after checking thoroughly, it turns out it’s definitely the code. Ideally, I’d love to fix the loading issue while keeping the preview images, but I’d be okay with removing it altogether if that’s the only option. Unfortunately, my attempts to fix or remove the code haven’t worked.
Could someone help me with this?
Here's my current situation: A few months ago, I added a new code from this club (of course), but now I can't find it anywhere. The code was for the preview images. When I hover over an anime on my list, a preview image appears on the left side of the screen, like this. Some of the images are broken and don’t show up, which I’m fine with. It only happens occasionally.
The real issue is that my list takes a lot longer to load now. At first, I thought something else was causing it, but after checking thoroughly, it turns out it’s definitely the code. Ideally, I’d love to fix the loading issue while keeping the preview images, but I’d be okay with removing it altogether if that’s the only option. Unfortunately, my attempts to fix or remove the code haven’t worked.
Could someone help me with this?
| @Pokitaru Please check the stickies first because ppl using them helps me improve the stickies and address common problems. Repair sticky part B is frequently updated and tested for this kinda thing. There's other tips on speeding up a layout there too. Although your layout loads quickly for me. This is probably the most important stuff: You have to delete the old import which isnt set up correctly: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; For the highest speed and high quality on the preview covers you can use this, paste it to the top of your CSS @\import "https://malscraper.azurewebsites.net/covers/anime/Pokitaru/presets/dataimagelinkafter"; If covers are ever missing wait a day and they should return For the highest quality covers on anime, paste this to the top of your CSS instead, although it's a few more MB to load so that might make a difference depending on the connection and browser settings @\import "https://shishiohub.github.io/Covers/dataimagelinkafter.css"; If you need an import for the manga list use this (fastest) @\import "https://malscraper.azurewebsites.net/covers/manga/Pokitaru/presets/dataimagelinkafter"; |
| @ShaggyZE @Shishio-kun Thanks so much for your help! And sorry for missing the stickies. |
|
| how can i hide my hentais on my list is there have anyway ? |
  |
Reply to Gros
how can i hide my hentais on my list is there have anyway ?
| @Gros there's a Hide Hentai mod here https://myanimelist.net/forum/?topicid=2168274&msgid=71357550 in the spoiler at the bottom of the post. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
| I've noticed that my list takes longer to load compared to other lists, sometimes the background image is just completely white too (it should be a generic anime wallpaper instead). Any way to fix this? |
Reply to NextUniverse
I've noticed that my list takes longer to load compared to other lists, sometimes the background image is just completely white too (it should be a generic anime wallpaper instead). Any way to fix this?
| @NextUniverse Seems like something imports would cause, or a download being multiplied too often, or a download dragging the page down from a random spot like a Notes section. I don't see anything like the latter two at a quick glance tho You can remove the imports if you're not using them for preview pics, doesn't look like you are since there's codes to hide the cover pic. Particularly, this one @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; is loading a lot of extra covers you're not using including like 75,000 manga covers. If the list speeds up after that that's the cause. When I removed the imports it sped the layout up significantly |
Shishio-kunMar 3, 12:07 PM
| Hi. First of all, sorry if this has been answered before, in that case just link me to it and i'll figure it out how to apply it on my list. I wanna know if there's any way to show the total animes i have in each category (completed, plan to watch etc), something like a count in a db. For further information, i'm using Clarity Theme by Valerie under MALFOX extension via Tampermonkey, so i'm thinking either show it on categories' header or in each MALFOX split. If u need a complete CSS code lmk Thx a lot in advance |
 |
Reply to Zaos_10
Hi.
First of all, sorry if this has been answered before, in that case just link me to it and i'll figure it out how to apply it on my list.
I wanna know if there's any way to show the total animes i have in each category (completed, plan to watch etc), something like a count in a db.
For further information, i'm using Clarity Theme by Valerie under MALFOX extension via Tampermonkey, so i'm thinking either show it on categories' header or in each MALFOX split.
If u need a complete CSS code lmk
Thx a lot in advance
First of all, sorry if this has been answered before, in that case just link me to it and i'll figure it out how to apply it on my list.
I wanna know if there's any way to show the total animes i have in each category (completed, plan to watch etc), something like a count in a db.
For further information, i'm using Clarity Theme by Valerie under MALFOX extension via Tampermonkey, so i'm thinking either show it on categories' header or in each MALFOX split.
If u need a complete CSS code lmk
Thx a lot in advance
| @Zaos_10 yes, very quick and simple, copying the codes from IridescentJaune's list /* CW */ a.status-button.watching::before { content: "(1,179) "; font: var(--fa-font-solid); font-size: 9px !important; position: absolute; padding: 20px 65px; width: 60px; margin-left: -18px; } /* C */ a.status-button.completed::before { content: "(2,353) "; font: var(--fa-font-solid); font-size: 9px !important; position: absolute; padding: 20px 35px; width: 60px; margin-left: -18px; } /* OH */ a.status-button.onhold::before { content: "(1,732) "; font: var(--fa-font-solid); font-size: 9px !important; position: absolute; padding: 20px 20px; width: 60px; margin-left: -18px; } /* D */ a.status-button.dropped::before { content: "(84) "; font: var(--fa-font-solid); font-size: 9px !important; position: absolute; padding: 20px 25px; width: 60px; margin-left: -18px; } /* PTW */ a.status-button.plantowatch::before { content: "(7,083) "; font: var(--fa-font-solid); font-size: 9px !important; position: absolute; padding: 20px 35px; width: 60px; margin-left: -18px; } These you'd put in manually and update the numbers, edit as you please to improve the text positioning To do it automatically with CSS: I don't see these stats on your list anywhere. They are on the profile page but I don't see them on the list. We'd need those numbers on the list to make a code with them with just CSS. If you see those numbers on the list somewhere let me know I can make codes for them that way. If someone had a mod that does something like this that could be used as well, extracting the data and generating it in an import that posts the count numbers/codes to your list. Maybe something like this is in the Clarity topic, he had a lot of mods. You'd also maybe be potentially slowing down or breaking your list with such an import (versus just safe manual updates) but that's rare. |
Shishio-kunMar 9, 1:01 PM
Reply to Shishio-kun
@Zaos_10 yes, very quick and simple, copying the codes from IridescentJaune's list
/* CW */
a.status-button.watching::before {
content: "(1,179) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 65px;
width: 60px;
margin-left: -18px;
}
/* C */
a.status-button.completed::before {
content: "(2,353) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
/* OH */
a.status-button.onhold::before {
content: "(1,732) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 20px;
width: 60px;
margin-left: -18px;
}
/* D */
a.status-button.dropped::before {
content: "(84) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 25px;
width: 60px;
margin-left: -18px;
}
/* PTW */
a.status-button.plantowatch::before {
content: "(7,083) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
These you'd put in manually and update the numbers, edit as you please to improve the text positioning
To do it automatically with CSS: I don't see these stats on your list anywhere. They are on the profile page but I don't see them on the list. We'd need those numbers on the list to make a code with them with just CSS. If you see those numbers on the list somewhere let me know I can make codes for them that way.
If someone had a mod that does something like this that could be used as well, extracting the data and generating it in an import that posts the count numbers/codes to your list. Maybe something like this is in the Clarity topic, he had a lot of mods. You'd also maybe be potentially slowing down or breaking your list with such an import (versus just safe manual updates) but that's rare.
/* CW */
a.status-button.watching::before {
content: "(1,179) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 65px;
width: 60px;
margin-left: -18px;
}
/* C */
a.status-button.completed::before {
content: "(2,353) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
/* OH */
a.status-button.onhold::before {
content: "(1,732) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 20px;
width: 60px;
margin-left: -18px;
}
/* D */
a.status-button.dropped::before {
content: "(84) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 25px;
width: 60px;
margin-left: -18px;
}
/* PTW */
a.status-button.plantowatch::before {
content: "(7,083) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
These you'd put in manually and update the numbers, edit as you please to improve the text positioning
To do it automatically with CSS: I don't see these stats on your list anywhere. They are on the profile page but I don't see them on the list. We'd need those numbers on the list to make a code with them with just CSS. If you see those numbers on the list somewhere let me know I can make codes for them that way.
If someone had a mod that does something like this that could be used as well, extracting the data and generating it in an import that posts the count numbers/codes to your list. Maybe something like this is in the Clarity topic, he had a lot of mods. You'd also maybe be potentially slowing down or breaking your list with such an import (versus just safe manual updates) but that's rare.
| @Shishio-kun About those stats in my list, they're hidden atm, but you can find them clicking on the button left to the filter: So yeah, my idea was calculate it automatically (something similar to the MALFOX mod does) based on that stats MAL provides itself, but combining all types because i don't like at all the way they show it. Any of these versions could work for me:  In the meantime i'm gonna test with the manual code, and is there any option to have the default stats always on screen instead of under a button? |
|
Reply to Zaos_10
@Shishio-kun
About those stats in my list, they're hidden atm, but you can find them clicking on the button left to the filter:
So yeah, my idea was calculate it automatically (something similar to the MALFOX mod does) based on that stats MAL provides itself, but combining all types because i don't like at all the way they show it. Any of these versions could work for me:
In the meantime i'm gonna test with the manual code, and is there any option to have the default stats always on screen instead of under a button?
About those stats in my list, they're hidden atm, but you can find them clicking on the button left to the filter:
So yeah, my idea was calculate it automatically (something similar to the MALFOX mod does) based on that stats MAL provides itself, but combining all types because i don't like at all the way they show it. Any of these versions could work for me:
In the meantime i'm gonna test with the manual code, and is there any option to have the default stats always on screen instead of under a button?
| @Zaos_10 yeah I'm referring to the number of anime in each category, not the general list Stats I shouldn't have used that word lol, since the list Stats don't have that info. If we're still talking about the number of current anime for example, does MALfox post that info to your list somewhere but hidden? If you unhide it with whatever invisibility code, I can move them wherever. I'm not familiar with Malfox at all. Zaos_10 said: Any of these versions could work for me: Zaos_10 said: is there any option to have the default stats always on screen instead of under a button? The code I gave you does do something like that. It sticks it to the sticky menu so it is already present at all times, but you need to edit the text to pretty it up  It's easy to add such manual numbers to the headers to like in your example |
Shishio-kunMar 9, 2:47 PM
Reply to Shishio-kun
@Zaos_10 yeah I'm referring to the number of anime in each category, not the general list Stats I shouldn't have used that word lol, since the list Stats don't have that info.
If we're still talking about the number of current anime for example, does MALfox post that info to your list somewhere but hidden? If you unhide it with whatever invisibility code, I can move them wherever. I'm not familiar with Malfox at all.
The code I gave you does do something like that. It sticks it to the sticky menu so it is already present at all times, but you need to edit the text to pretty it up
It's easy to add such manual numbers to the headers to like in your example
If we're still talking about the number of current anime for example, does MALfox post that info to your list somewhere but hidden? If you unhide it with whatever invisibility code, I can move them wherever. I'm not familiar with Malfox at all.
Zaos_10 said:
Any of these versions could work for me:
Any of these versions could work for me:
Zaos_10 said:
is there any option to have the default stats always on screen instead of under a button?
is there any option to have the default stats always on screen instead of under a button?
The code I gave you does do something like that. It sticks it to the sticky menu so it is already present at all times, but you need to edit the text to pretty it up
It's easy to add such manual numbers to the headers to like in your example
| @Shishio-kun yeah, sorry about that confusion on screenshot, i was just posting an example of what i want and probs i didn't explain that well. Let's work with this base:  These numbers are what i want to see on the header, but in an automatic way, the manual code really helps me a lot for the moment but at any time i'll forget to update it. So what i thought are these two options: 1. Calculate it from the stats button that shows TV, OVAs, Movie, Special etc (i don't know if there's a CSS code that can add those totals) 2. Calculate it using the MALFOX mod (here i have the same problem as you, i'm not familiar with that code, i just followed a guide in order to make it work, but when i add any anime under a specified category, that mod recalcs the splits so somehow there's a count on it that i'm not understading) |
|
Reply to Zaos_10
@Shishio-kun yeah, sorry about that confusion on screenshot, i was just posting an example of what i want and probs i didn't explain that well.
Let's work with this base:
These numbers are what i want to see on the header, but in an automatic way, the manual code really helps me a lot for the moment but at any time i'll forget to update it. So what i thought are these two options:
1. Calculate it from the stats button that shows TV, OVAs, Movie, Special etc (i don't know if there's a CSS code that can add those totals)
2. Calculate it using the MALFOX mod (here i have the same problem as you, i'm not familiar with that code, i just followed a guide in order to make it work, but when i add any anime under a specified category, that mod recalcs the splits so somehow there's a count on it that i'm not understading)
Let's work with this base:
These numbers are what i want to see on the header, but in an automatic way, the manual code really helps me a lot for the moment but at any time i'll forget to update it. So what i thought are these two options:
1. Calculate it from the stats button that shows TV, OVAs, Movie, Special etc (i don't know if there's a CSS code that can add those totals)
2. Calculate it using the MALFOX mod (here i have the same problem as you, i'm not familiar with that code, i just followed a guide in order to make it work, but when i add any anime under a specified category, that mod recalcs the splits so somehow there's a count on it that i'm not understading)
| @Zaos_10 Unfortunately I can't think of how custom CSS can calculate that from stats. It mainly just styles things already on the page. It's basically an overlay. Thats all its intended for, but there might be some crafty way to do it though if I think of it I'll reply it here. The imports, generators, and extra stuff in layouts link to code sources outside of CSS (and MAL) to tailor make new CSS for your specific page, CSS you'd otherwise have to manually make and update, on top of them being insanely complex CSS as it is. And yeah those outside code sources calculate stuff, and much more like extracting info from the database I looked through your list code a bit but I don't see anything that corresponds to an actual number of current or completed anime which we could post to the page somehow, unfortunately. I don't know what MALfox is at all actually haha, so I can't use it to calculate anything (I'd probably have to learn its code to use it). Is it a Tampermonkey script you said? But go to where you got this tool and see if there's anything related to it that does this, or ask the creator for help with this, since they know it well. Probably Valerio_Lyndon or Doomcat's creation Also anyone with knowledge on whatever code it uses might be able to figure out something. There's a lot of good coders in the Creative Corner forum as well. I'm barely familiar with coding outside of CSS and a bit of extension stuff (hobbies) and routing (what I went to school for) which is very different haha. |
Shishio-kunMar 9, 5:39 PM
Reply to Shishio-kun
@Zaos_10
Unfortunately I can't think of how custom CSS can calculate that from stats. It mainly just styles things already on the page. It's basically an overlay. Thats all its intended for, but there might be some crafty way to do it though if I think of it I'll reply it here.
The imports, generators, and extra stuff in layouts link to code sources outside of CSS (and MAL) to tailor make new CSS for your specific page, CSS you'd otherwise have to manually make and update, on top of them being insanely complex CSS as it is. And yeah those outside code sources calculate stuff, and much more like extracting info from the database
I looked through your list code a bit but I don't see anything that corresponds to an actual number of current or completed anime which we could post to the page somehow, unfortunately.
I don't know what MALfox is at all actually haha, so I can't use it to calculate anything (I'd probably have to learn its code to use it). Is it a Tampermonkey script you said?
But go to where you got this tool and see if there's anything related to it that does this, or ask the creator for help with this, since they know it well. Probably Valerio_Lyndon or Doomcat's creation
Also anyone with knowledge on whatever code it uses might be able to figure out something. There's a lot of good coders in the Creative Corner forum as well. I'm barely familiar with coding outside of CSS and a bit of extension stuff (hobbies) and routing (what I went to school for) which is very different haha.
Unfortunately I can't think of how custom CSS can calculate that from stats. It mainly just styles things already on the page. It's basically an overlay. Thats all its intended for, but there might be some crafty way to do it though if I think of it I'll reply it here.
The imports, generators, and extra stuff in layouts link to code sources outside of CSS (and MAL) to tailor make new CSS for your specific page, CSS you'd otherwise have to manually make and update, on top of them being insanely complex CSS as it is. And yeah those outside code sources calculate stuff, and much more like extracting info from the database
I looked through your list code a bit but I don't see anything that corresponds to an actual number of current or completed anime which we could post to the page somehow, unfortunately.
I don't know what MALfox is at all actually haha, so I can't use it to calculate anything (I'd probably have to learn its code to use it). Is it a Tampermonkey script you said?
But go to where you got this tool and see if there's anything related to it that does this, or ask the creator for help with this, since they know it well. Probably Valerio_Lyndon or Doomcat's creation
Also anyone with knowledge on whatever code it uses might be able to figure out something. There's a lot of good coders in the Creative Corner forum as well. I'm barely familiar with coding outside of CSS and a bit of extension stuff (hobbies) and routing (what I went to school for) which is very different haha.
| @Shishio-kun Just in case u r curious about MALFOX stuff, i got it from Valerio's github: https://github.com/ValerioLyndon/MAL-Public-List-Designs/wiki/Install-Section-Category-Headers Basically, as u can see there or in my list, it's a script that bring back the old MAL style splited by categories, so when u add any anime under a category, updates the interface, but my knowledge about coding its limited since i've always hated it in my degree haha (even my CSS code in the anime list is a Frankenstein since i've been adding functions and it's not optimized at all). I'll ask in the Clarity's dedicated thread as u suggested, but in any case thx a lot for ur help and lmk if u find out something interest in that script |
|
Reply to Zaos_10
@Shishio-kun
Just in case u r curious about MALFOX stuff, i got it from Valerio's github:
https://github.com/ValerioLyndon/MAL-Public-List-Designs/wiki/Install-Section-Category-Headers
Basically, as u can see there or in my list, it's a script that bring back the old MAL style splited by categories, so when u add any anime under a category, updates the interface, but my knowledge about coding its limited since i've always hated it in my degree haha (even my CSS code in the anime list is a Frankenstein since i've been adding functions and it's not optimized at all).
I'll ask in the Clarity's dedicated thread as u suggested, but in any case thx a lot for ur help and lmk if u find out something interest in that script
Just in case u r curious about MALFOX stuff, i got it from Valerio's github:
https://github.com/ValerioLyndon/MAL-Public-List-Designs/wiki/Install-Section-Category-Headers
Basically, as u can see there or in my list, it's a script that bring back the old MAL style splited by categories, so when u add any anime under a category, updates the interface, but my knowledge about coding its limited since i've always hated it in my degree haha (even my CSS code in the anime list is a Frankenstein since i've been adding functions and it's not optimized at all).
I'll ask in the Clarity's dedicated thread as u suggested, but in any case thx a lot for ur help and lmk if u find out something interest in that script
| @Zaos_10 answered you here https://myanimelist.net/forum/?goto=post&topicid=1723114&id=72460516 I had made this automatic a month ago for @IridescentJaune but apparently he's back to manually doing it. Related: https://myanimelist.net/forum/?goto=post&topicid=1807962&id=72094116 |
ShaggyZEMar 10, 1:46 AM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to Shishio-kun
@Zaos_10 yes, very quick and simple, copying the codes from IridescentJaune's list
/* CW */
a.status-button.watching::before {
content: "(1,179) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 65px;
width: 60px;
margin-left: -18px;
}
/* C */
a.status-button.completed::before {
content: "(2,353) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
/* OH */
a.status-button.onhold::before {
content: "(1,732) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 20px;
width: 60px;
margin-left: -18px;
}
/* D */
a.status-button.dropped::before {
content: "(84) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 25px;
width: 60px;
margin-left: -18px;
}
/* PTW */
a.status-button.plantowatch::before {
content: "(7,083) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
These you'd put in manually and update the numbers, edit as you please to improve the text positioning
To do it automatically with CSS: I don't see these stats on your list anywhere. They are on the profile page but I don't see them on the list. We'd need those numbers on the list to make a code with them with just CSS. If you see those numbers on the list somewhere let me know I can make codes for them that way.
If someone had a mod that does something like this that could be used as well, extracting the data and generating it in an import that posts the count numbers/codes to your list. Maybe something like this is in the Clarity topic, he had a lot of mods. You'd also maybe be potentially slowing down or breaking your list with such an import (versus just safe manual updates) but that's rare.
/* CW */
a.status-button.watching::before {
content: "(1,179) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 65px;
width: 60px;
margin-left: -18px;
}
/* C */
a.status-button.completed::before {
content: "(2,353) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
/* OH */
a.status-button.onhold::before {
content: "(1,732) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 20px;
width: 60px;
margin-left: -18px;
}
/* D */
a.status-button.dropped::before {
content: "(84) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 25px;
width: 60px;
margin-left: -18px;
}
/* PTW */
a.status-button.plantowatch::before {
content: "(7,083) ";
font: var(--fa-font-solid);
font-size: 9px !important;
position: absolute;
padding: 20px 35px;
width: 60px;
margin-left: -18px;
}
These you'd put in manually and update the numbers, edit as you please to improve the text positioning
To do it automatically with CSS: I don't see these stats on your list anywhere. They are on the profile page but I don't see them on the list. We'd need those numbers on the list to make a code with them with just CSS. If you see those numbers on the list somewhere let me know I can make codes for them that way.
If someone had a mod that does something like this that could be used as well, extracting the data and generating it in an import that posts the count numbers/codes to your list. Maybe something like this is in the Clarity topic, he had a lot of mods. You'd also maybe be potentially slowing down or breaking your list with such an import (versus just safe manual updates) but that's rare.
| @Shishio-kun I tweaked the code from one of your many helpful guides (I try to read the guides and threads for fixes first and see what I could do, if I couldn't really fix something on my own or I'm having some trouble then that's the time I ask for help since some of the fixes are in the club's threads already). I was inspired by this (one of VL's classic themes from 2021; I still think the winning layouts from 2021 are the best especially the Hades theme) and wanted to recreate it. Nice that others can also use that CSS snippet for their lists. They just need to tweak it a little bit for the positioning and their preferred FontAwesome icons. I'm not really good with positioning stuff. Ah, I was using ShaggyZE's code for a while. I recently reverted to using CSS for the total number of entries because of the long loading time. I don't mind manually updating the header, anyways. I prefer faster loading time (my list with my CSS already takes a while to load because of all the gifs, notes and YT embeds I have and with the API it takes even longer; I'd rather deal with the lag or delay than a blank white screen). I see the code shared here is the one I recently edited since I used 10px for the font size before. 9px fits better for the All Anime's width so I just applied that to the other categories as well for consistency. 9.5px also works fine. Below 9px is already small. I still haven't chosen FontAwesome icons for each category. I'm still using the hippo for all. Haha. Oh, even though I already like the counter, I'm still wondering how I could position the FontAwesome icons before the category texts (I mean before All Anime, Currently Watching and so on)? I think it's possible for other themes like with sunnysummerday's theme which inspired me to use more FA icons. I'm not sure with the Default. I would prefer using FA icons since there's a plethora to choose from instead of emojis. I wish hideso would reappear. Hehe. |
Reply to ShaggyZE
@Zaos_10 answered you here https://myanimelist.net/forum/?goto=post&topicid=1723114&id=72460516
I had made this automatic a month ago for @IridescentJaune but apparently he's back to manually doing it.
Related:
https://myanimelist.net/forum/?goto=post&topicid=1807962&id=72094116
I had made this automatic a month ago for @IridescentJaune but apparently he's back to manually doing it.
Related:
https://myanimelist.net/forum/?goto=post&topicid=1807962&id=72094116
| @ShaggyZE I'm back to using CSS because the API takes too long to load. Although, it's fine once loaded. But I usually had to wait quite a while each time I opened my list. So I used to open the Dropped list first since that's only a few titles long. I had someone check my list before and they told me they could only see the Miku cursor while the rest took quite some time to load. I think most can tolerate a bit of delay or lag but I wouldn't want others who would like to check my list experience such long loading times. Btw, I changed the font size from 10px to 9px to fit the text (unfortunately, the FA icon is now tinier). So I guess if I decide to use your code again (not the hard coded one) then I would just have to edit the font sizes since I only changed those? |
Reply to IridescentJaune
@ShaggyZE I'm back to using CSS because the API takes too long to load. Although, it's fine once loaded. But I usually had to wait quite a while each time I opened my list. So I used to open the Dropped list first since that's only a few titles long. I had someone check my list before and they told me they could only see the Miku cursor while the rest took quite some time to load. I think most can tolerate a bit of delay or lag but I wouldn't want others who would like to check my list experience such long loading times.
Btw, I changed the font size from 10px to 9px to fit the text (unfortunately, the FA icon is now tinier). So I guess if I decide to use your code again (not the hard coded one) then I would just have to edit the font sizes since I only changed those?
Btw, I changed the font size from 10px to 9px to fit the text (unfortunately, the FA icon is now tinier). So I guess if I decide to use your code again (not the hard coded one) then I would just have to edit the font sizes since I only changed those?
| @IridescentJaune I really don't recommend you using the incredibly slow one, I can change the font size on the hard coded one for you if you want, but think the fa icon looks better at 10px but yea it's up to you. I am planning on adding cron jobs to my API so that it loads everyone's commonly used query's every 6 hours (same as the cache) so it's updated and faster, but will be awhile as I'm not quite sure how to fully do it yet. |
ShaggyZEMar 11, 5:18 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to ShaggyZE
@IridescentJaune I really don't recommend you using the incredibly slow one, I can change the font size on the hard coded one for you if you want, but think the fa icon looks better at 10px but yea it's up to you.
I am planning on adding cron jobs to my API so that it loads everyone's commonly used query's every 6 hours (same as the cache) so it's updated and faster, but will be awhile as I'm not quite sure how to fully do it yet.
I am planning on adding cron jobs to my API so that it loads everyone's commonly used query's every 6 hours (same as the cache) so it's updated and faster, but will be awhile as I'm not quite sure how to fully do it yet.
| @ShaggyZE I changed the font size because when I updated my CSS the total number of entries moved below the FA icon for All Anime. Yeah, I agree the FA icons look better with 10px. Hmm, I guess you wouldn't have to edit the font size in your code for now. I tested it again and there's no problem with the positioning of the numbers. I think it's because I use commas for the total number of entries in my CSS (ex: 12,431) vs. your code which doesn't use commas (12405). I might use that code you've made for me if the loading time wouldn't be too long. --- Oh, if I add more tags later on and import from DropBox then I guess I would have to ask you to change it. 😆🙈 I'm planning on moving most of my horizontal tags to Dropbox... Hehe. |
IridescentJauneMar 11, 5:24 PM
Reply to IridescentJaune
@ShaggyZE I changed the font size because when I updated my CSS the total number of entries moved below the FA icon for All Anime.
Yeah, I agree the FA icons look better with 10px.
Hmm, I guess you wouldn't have to edit the font size in your code for now. I tested it again and there's no problem with the positioning of the numbers.
I think it's because I use commas for the total number of entries in my CSS (ex: 12,431) vs. your code which doesn't use commas (12405).
I might use that code you've made for me if the loading time wouldn't be too long.
---
Oh, if I add more tags later on and import from DropBox then I guess I would have to ask you to change it. 😆🙈 I'm planning on moving most of my horizontal tags to Dropbox... Hehe.
Yeah, I agree the FA icons look better with 10px.
Hmm, I guess you wouldn't have to edit the font size in your code for now. I tested it again and there's no problem with the positioning of the numbers.
I think it's because I use commas for the total number of entries in my CSS (ex: 12,431) vs. your code which doesn't use commas (12405).
I might use that code you've made for me if the loading time wouldn't be too long.
---
Oh, if I add more tags later on and import from DropBox then I guess I would have to ask you to change it. 😆🙈 I'm planning on moving most of my horizontal tags to Dropbox... Hehe.
| @IridescentJaune if you open the actual links of those imports you can see how one is huge and it only needs the last line it prints, while the other one only has the 1 line so yea the way those two API endpoints work is just different as one counts every entry on your list one by one and the other gets the full count from your profile page. why would adding more tags or you switching to dropbox change anything? the only thing you really need me to change would be the fa icons, the rest you can add additional CSS with the !important tag to make adjustments to it, like the padding and font size. |
ShaggyZEMar 11, 5:34 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to ShaggyZE
@IridescentJaune if you open the actual links of those imports you can see how one is huge and it only needs the last line it prints, while the other one only has the 1 line so yea the way those two API endpoints work is just different as one counts every entry on your list one by one and the other gets the full count from your profile page.
why would adding more tags or you switching to dropbox change anything? the only thing you really need me to change would be the fa icons, the rest you can add additional CSS with the !important tag to make adjustments to it, like the padding and font size.
why would adding more tags or you switching to dropbox change anything? the only thing you really need me to change would be the fa icons, the rest you can add additional CSS with the !important tag to make adjustments to it, like the padding and font size.
| @ShaggyZE Alright. I shall try the hard coded one. Will report back if I experience any issues. Ah, one more thing. While I wait for my list to load I see various links on the bottom of my browser since it's connecting to the API, Dropbox imports and resources of my gifs. I know what they're for but I guess those might alarm others that's why I reverted to using CSS. I use Firefox so I could see those links at the bottom of my browser. I think it's the same with Brave. With Safari I don't see such links. |
Reply to IridescentJaune
@Shishio-kun
I tweaked the code from one of your many helpful guides (I try to read the guides and threads for fixes first and see what I could do, if I couldn't really fix something on my own or I'm having some trouble then that's the time I ask for help since some of the fixes are in the club's threads already). I was inspired by this (one of VL's classic themes from 2021; I still think the winning layouts from 2021 are the best especially the Hades theme) and wanted to recreate it. Nice that others can also use that CSS snippet for their lists. They just need to tweak it a little bit for the positioning and their preferred FontAwesome icons. I'm not really good with positioning stuff.
Ah, I was using ShaggyZE's code for a while. I recently reverted to using CSS for the total number of entries because of the long loading time. I don't mind manually updating the header, anyways. I prefer faster loading time (my list with my CSS already takes a while to load because of all the gifs, notes and YT embeds I have and with the API it takes even longer; I'd rather deal with the lag or delay than a blank white screen). I see the code shared here is the one I recently edited since I used 10px for the font size before. 9px fits better for the All Anime's width so I just applied that to the other categories as well for consistency. 9.5px also works fine. Below 9px is already small. I still haven't chosen FontAwesome icons for each category. I'm still using the hippo for all. Haha.
Oh, even though I already like the counter, I'm still wondering how I could position the FontAwesome icons before the category texts (I mean before All Anime, Currently Watching and so on)? I think it's possible for other themes like with sunnysummerday's theme which inspired me to use more FA icons. I'm not sure with the Default. I would prefer using FA icons since there's a plethora to choose from instead of emojis. I wish hideso would reappear. Hehe.
I tweaked the code from one of your many helpful guides (I try to read the guides and threads for fixes first and see what I could do, if I couldn't really fix something on my own or I'm having some trouble then that's the time I ask for help since some of the fixes are in the club's threads already). I was inspired by this (one of VL's classic themes from 2021; I still think the winning layouts from 2021 are the best especially the Hades theme) and wanted to recreate it. Nice that others can also use that CSS snippet for their lists. They just need to tweak it a little bit for the positioning and their preferred FontAwesome icons. I'm not really good with positioning stuff.
Ah, I was using ShaggyZE's code for a while. I recently reverted to using CSS for the total number of entries because of the long loading time. I don't mind manually updating the header, anyways. I prefer faster loading time (my list with my CSS already takes a while to load because of all the gifs, notes and YT embeds I have and with the API it takes even longer; I'd rather deal with the lag or delay than a blank white screen). I see the code shared here is the one I recently edited since I used 10px for the font size before. 9px fits better for the All Anime's width so I just applied that to the other categories as well for consistency. 9.5px also works fine. Below 9px is already small. I still haven't chosen FontAwesome icons for each category. I'm still using the hippo for all. Haha.
Oh, even though I already like the counter, I'm still wondering how I could position the FontAwesome icons before the category texts (I mean before All Anime, Currently Watching and so on)? I think it's possible for other themes like with sunnysummerday's theme which inspired me to use more FA icons. I'm not sure with the Default. I would prefer using FA icons since there's a plethora to choose from instead of emojis. I wish hideso would reappear. Hehe.
| @IridescentJaune On the last thing I don't see what you're referring to on Sunny's layout, but I'm guessing it's like you want to use font awesome icons before the category link and keep the manual numbers below it without font awesome. Problem is the :after part is dedicated to the little color line: it's easier to probably rewrite the status buttons so they use a gradient background color for the little line and then after is freed up for custom text, you can figure it out from here I think: 
a.status-button.onhold{
background: linear-gradient(180deg, transparent 95%, cyan 5%);
}
a.status-button.onhold.on {
background: linear-gradient(180deg, transparent 95%, red 5%);
}
.status-menu-container .status-menu .status-button:hover {
background: linear-gradient(180deg, transparent 95%, blue 5%);
}
a.status-button.onhold::before{
content:"X";
padding: inherit;
width: inherit;
margin-left: inherit;
position: inherit;
}
a.status-button.onhold::after{
content: "number" !important;;
color: red !important;
opacity: 1 !important;
font-size: 12px !important;
background: transparent !important;
top: 33px !important;
}
font awesome where the X goes, this is just for one button btw for hold you have to code the rest for other categories too "button on" is for when you on that button's category's page, so on hold on only shows up on the on hold page btw it actually is possible to automatically display the number of anime in each category with pure CSS on Modern- I found a way to last night. But the problem is I can't stick the numbers to your list's style of moving sticky menus, sort of defeats the purpose, and only works on All. It could be useful for some kind of custom menu bar in the future fixed to the side (as on defaults), or similar to what we had on classic layouts, but I doubt it since there's other limitations. Hope I can figure out more with it in the future. |
Shishio-kunMar 11, 5:50 PM
Reply to Shishio-kun
@IridescentJaune
On the last thing
I don't see what you're referring to on Sunny's layout, but I'm guessing it's like you want to use font awesome icons before the category link and keep the manual numbers below it without font awesome. Problem is the :after part is dedicated to the little color line: it's easier to probably rewrite the status buttons so they use a gradient background color for the little line and then after is freed up for custom text, you can figure it out from here I think:
font awesome where the X goes, this is just for one button btw for hold you have to code the rest for other categories too
"button on" is for when you on that button's category's page, so on hold on only shows up on the on hold page
btw it actually is possible to automatically display the number of anime in each category with pure CSS on Modern- I found a way to last night. But the problem is I can't stick the numbers to your list's style of moving sticky menus, sort of defeats the purpose, and only works on All. It could be useful for some kind of custom menu bar in the future fixed to the side (as on defaults), or similar to what we had on classic layouts, but I doubt it since there's other limitations. Hope I can figure out more with it in the future.
On the last thing
I don't see what you're referring to on Sunny's layout, but I'm guessing it's like you want to use font awesome icons before the category link and keep the manual numbers below it without font awesome. Problem is the :after part is dedicated to the little color line: it's easier to probably rewrite the status buttons so they use a gradient background color for the little line and then after is freed up for custom text, you can figure it out from here I think:
a.status-button.onhold{
background: linear-gradient(180deg, transparent 95%, cyan 5%);
}
a.status-button.onhold.on {
background: linear-gradient(180deg, transparent 95%, red 5%);
}
.status-menu-container .status-menu .status-button:hover {
background: linear-gradient(180deg, transparent 95%, blue 5%);
}
a.status-button.onhold::before{
content:"X";
padding: inherit;
width: inherit;
margin-left: inherit;
position: inherit;
}
a.status-button.onhold::after{
content: "number" !important;;
color: red !important;
opacity: 1 !important;
font-size: 12px !important;
background: transparent !important;
top: 33px !important;
}
font awesome where the X goes, this is just for one button btw for hold you have to code the rest for other categories too
"button on" is for when you on that button's category's page, so on hold on only shows up on the on hold page
btw it actually is possible to automatically display the number of anime in each category with pure CSS on Modern- I found a way to last night. But the problem is I can't stick the numbers to your list's style of moving sticky menus, sort of defeats the purpose, and only works on All. It could be useful for some kind of custom menu bar in the future fixed to the side (as on defaults), or similar to what we had on classic layouts, but I doubt it since there's other limitations. Hope I can figure out more with it in the future.
| @Shishio-kun that looks way better, will try changing that for IridescentJaune and Zaos_10 since that way the fa icon will be big again. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to Shishio-kun
@IridescentJaune
On the last thing
I don't see what you're referring to on Sunny's layout, but I'm guessing it's like you want to use font awesome icons before the category link and keep the manual numbers below it without font awesome. Problem is the :after part is dedicated to the little color line: it's easier to probably rewrite the status buttons so they use a gradient background color for the little line and then after is freed up for custom text, you can figure it out from here I think:
font awesome where the X goes, this is just for one button btw for hold you have to code the rest for other categories too
"button on" is for when you on that button's category's page, so on hold on only shows up on the on hold page
btw it actually is possible to automatically display the number of anime in each category with pure CSS on Modern- I found a way to last night. But the problem is I can't stick the numbers to your list's style of moving sticky menus, sort of defeats the purpose, and only works on All. It could be useful for some kind of custom menu bar in the future fixed to the side (as on defaults), or similar to what we had on classic layouts, but I doubt it since there's other limitations. Hope I can figure out more with it in the future.
On the last thing
I don't see what you're referring to on Sunny's layout, but I'm guessing it's like you want to use font awesome icons before the category link and keep the manual numbers below it without font awesome. Problem is the :after part is dedicated to the little color line: it's easier to probably rewrite the status buttons so they use a gradient background color for the little line and then after is freed up for custom text, you can figure it out from here I think:
a.status-button.onhold{
background: linear-gradient(180deg, transparent 95%, cyan 5%);
}
a.status-button.onhold.on {
background: linear-gradient(180deg, transparent 95%, red 5%);
}
.status-menu-container .status-menu .status-button:hover {
background: linear-gradient(180deg, transparent 95%, blue 5%);
}
a.status-button.onhold::before{
content:"X";
padding: inherit;
width: inherit;
margin-left: inherit;
position: inherit;
}
a.status-button.onhold::after{
content: "number" !important;;
color: red !important;
opacity: 1 !important;
font-size: 12px !important;
background: transparent !important;
top: 33px !important;
}
font awesome where the X goes, this is just for one button btw for hold you have to code the rest for other categories too
"button on" is for when you on that button's category's page, so on hold on only shows up on the on hold page
btw it actually is possible to automatically display the number of anime in each category with pure CSS on Modern- I found a way to last night. But the problem is I can't stick the numbers to your list's style of moving sticky menus, sort of defeats the purpose, and only works on All. It could be useful for some kind of custom menu bar in the future fixed to the side (as on defaults), or similar to what we had on classic layouts, but I doubt it since there's other limitations. Hope I can figure out more with it in the future.
| @Shishio-kun I mean since sunnysummerday's header allows for usage of FA icons then I think adding my total number of entries CSS would work on it. Sorry, I should've worded that better. Thanks! Yes, like in your photo. I will play with the codes later then. Ah, the :after for the color lines/bars. Oh, so that's why I had trouble figuring things out no matter how I much I tried. So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep. 😭 Oh, exciting news! Maybe that might work with other themes like Clarity or Clarified. Hopefully for the Default theme too. 🤞🙏 |
Reply to IridescentJaune
@Shishio-kun I mean since sunnysummerday's header allows for usage of FA icons then I think adding my total number of entries CSS would work on it. Sorry, I should've worded that better.
Thanks! Yes, like in your photo. I will play with the codes later then.
Ah, the :after for the color lines/bars. Oh, so that's why I had trouble figuring things out no matter how I much I tried. So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep. 😭
Oh, exciting news! Maybe that might work with other themes like Clarity or Clarified. Hopefully for the Default theme too. 🤞🙏
Thanks! Yes, like in your photo. I will play with the codes later then.
Ah, the :after for the color lines/bars. Oh, so that's why I had trouble figuring things out no matter how I much I tried. So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep. 😭
Oh, exciting news! Maybe that might work with other themes like Clarity or Clarified. Hopefully for the Default theme too. 🤞🙏
| @IridescentJaune IridescentJaune said: So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep. But you should be able to keep everything since there's more room this way? |
| @IridescentJaune with Shishio's code since it separates the bars, icons and numbers you can use his code for making the adjustments and my import for adding the numbers without needing to ask me to change anything. |
ShaggyZEMar 11, 8:11 PM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Reply to Shishio-kun
@IridescentJaune
But you should be able to keep everything since there's more room this way?
IridescentJaune said:
So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep.
So It seems I can't apply all the stuff I want on the headers. I will have to choose which ones to keep.
But you should be able to keep everything since there's more room this way?
| @Shishio-kun I mean with my old code... 😅 Ah, is that so? I've yet to use the code you've shared. Will play around with it later. |
Reply to ShaggyZE
@IridescentJaune with Shishio's code since it separates the bars, icons and numbers you can use his code for making the adjustments and my import for adding the numbers without needing to ask me to change anything.
| @ShaggyZE Oh! Nice! I'll try things later in the day. Thanks! |
| Is there a tutorial for the new About me section? |
Reply to Miku_Melody
Is there a tutorial for the new About me section?
| @Miku_Melody many, depending on what you're looking for. https://myanimelist.net/forum/?topicid=2077151 https://myanimelist.net/forum/?topicid=2077488 https://myanimelist.net/forum/?topicid=2077105 Most ppl just use the Modern About Me maker that does all that for you instead, it's a really good option over using BBcode and graphic design |
More topics from this board
» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 3 )Valerio_Lyndon - Aug 1, 2022 |
111 |
by Shishio-kun
»»
1 hour ago |
|
» [CSS Modern] ⭐️ NieR Automata Menu Layout - Killingdyl ( 1 2 )killingdyl - Apr 22, 2017 |
51 |
by Mula_Niilista
»»
Mar 24, 11:20 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
18 |
by Shishio-kun
»»
Mar 19, 5:45 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1255 |
by Shishio-kun
»»
Mar 19, 11:21 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
380 |
by cosmicskye
»»
Mar 12, 8:35 AM |