This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862  Did you know? If you're looking for a free CSS file host for your custom MAL themes, you probably already have one included with your PC! For Windows users, I am of course referring to OneDrive! Now, technically, OneDrive is a file backup and sharing solution, not a file host. What this means is that, typically, only certain people can access files kept in it, and only by going through some form of UI. And yet, endpoints do exist within the API that make hotlinking files possible. This allows your browser to read a given OneDrive file's contents directly--including from CSS @import statements. Here's how: Step 1: Sync with OneDrive This step should be obvious. Before you can start sharing your CSS with the world, it must be saved somewhere in OneDrive itself. The specific location isn't important, but for safety, it would be a good idea to store files you intend to share publicly in a separate folder from everything else. Step 2: Get embed code  Next, login to your OneDrive account in your web browser. On Windows, you can take a shortcut by right-clicking on the CSS file and choosing "View Online". On any other OS, just point your browser to https://onedrive.com/ and navigate to your CSS file. Open the CSS file in OneDrive online, then select β― > Embed. This will generate a public link to the file.  Step 3: Decode URL Copy and paste the embed code into a text editor of your choice. The embed code has some extra junk we don't need for a direct link. Delete everything except the URL contained in src="". It should look something like this: https://onedrive.live.com/embed?resid=71D457C7C0AD8A3D%211016504&authkey=!ANlUtr7ZEdkffUA If not, you probably got a short link instead. A short link looks something like this: https://1drv.ms/u/s!Aj2KrcDHV9RxvoU42VS2vtkR2R99QA This link cannot be used to import CSS and needs to be decoded into the original URL. To find this, you can use a service like https://wheregoes.com/ to trace the short link to its final destination, which should look like the first URL above. Step 4: Edit URL Finally, to convert the embed URL into a direct URL, simply change the word "embed" after "onedrive.live.com" to "download". For example: https://onedrive.live.com/download?resid=71D457C7C0AD8A3D%211016504&authkey=!ANlUtr7ZEdkffUA To test, try pasting the final link into your web browser address bar. Navigating to the link should prompt to download a copy of your CSS file directly. Step 5: Import! You can now use your URL in MyAnimeList custom CSS styles! Just add @import followed by the URL in quotes and you're good to go! @import "https://onedrive.live.com/download?resid=71D457C7C0AD8A3D%211016504&authkey=!ANlUtr7ZEdkffUA"; Enjoy your new CSS host! |
Lulech23Jun 23, 2024 12:01 PM
| I've added this to the list of tutorials :D If there's a screenshot I can add that too but I might make one later Have you tried this with a newer account or an older one? The reason I ask is because as far as I knew a couple year ago, I had hosting privileges on my long time account which they took away from newer users. I hope this works for new users and don't mean to rain on the parade :/ |
| I gave up on adding screenshots before because embeds seem to be totally broken on MAL right now. Added a couple as image links--it'll have to do, I guess. My Microsoft account is about as old as they come, but embedding is different from hosting. I searched around and couldn't find anything to suggest the embed function is restricted for anyone. |
| I've noticed that the code I imported from my OneDrive no longer works. I checked the link and it looks like OneDrive changed how they structure their links (?). I followed the steps in the above tutorial before and this code/link for my tags used to work: I just recently noticed that it's no longer working after checking my anime list. I also got this message on OneDrive: "This item might not exist or is no longer available This item might have been deleted, expired, or you might not have permission to view it. Contact the owner of this item for more information." But I still have the code in my drive! It's just that the old link is no longer working for some reason. The link used to look like: (https://onedrive.live.com/download?resid= blah blah blah) Now, it looks like this: (https://1drv.ms/u/c/ blah blah blah) I tried using the new link but I can't seem to make it work. I think I already reached the character limit so I can't just copy and paste that code for my tags into my entire CSS code. Is there a way I could make my import work like how it used to? I'd like to still use OneDrive for hosting that part of my code in the meantime, though (uhm, because my DropBox is already full and I haven't used it in so long; but if I'd really have to use DropBox for hosting then I better make a new one). |
IridescentJauneJun 19, 2024 1:05 PM
| Looks like Microsoft has switched to using a URL shortener by default. You can still get the real URL out of it, but it adds an extra step or two to the process. You can use a site like wheregoes.com and paste the URL from your embed into that to get the original URL. Then just add "download" after the domain. For example... https://onedrive.live.com/?id=71D457C7C0AD8A3... becomes... https://onedrive.live.com/download?id=71D457C7C0AD8A3... Some of the other URL parts have changed since I wrote this guide, so just keep the rest as-is, no need to rename any parameters to match the old versions. |
| @Lulech23, I just used the site you've shared and applied the link I got to my code. I got the real URL and it's still the same with my old embed. I replaced "embed" with "download" and imported that to my CSS code but the emojis (to replace the texts), tooltips or effects for my tags (TOP RATED, MOST POPULAR, MOST FAVORITED) are still not showing in my list. I don't know why it's not working. Can we still really use OneDrive for hosting CSS for our layouts? |
Reply to IridescentJaune
@Lulech23, I just used the site you've shared and applied the link I got to my code.
I got the real URL and it's still the same with my old embed.
I replaced "embed" with "download" and imported that to my CSS code but the emojis (to replace the texts), tooltips or effects for my tags (TOP RATED, MOST POPULAR, MOST FAVORITED) are still not showing in my list.
I don't know why it's not working. Can we still really use OneDrive for hosting CSS for our layouts?
I got the real URL and it's still the same with my old embed.
I replaced "embed" with "download" and imported that to my CSS code but the emojis (to replace the texts), tooltips or effects for my tags (TOP RATED, MOST POPULAR, MOST FAVORITED) are still not showing in my list.
I don't know why it's not working. Can we still really use OneDrive for hosting CSS for our layouts?
| @IridescentJaune If your link isn't redacted on purpose, it's broken. You're missing multiple URL parameters ("id" and "cid" at least). Clicking it just gives a 404. If your link is set up correctly, clicking it should prompt to download the CSS directly. If you haven't already, make sure the file is shared to the public ("anybody with the link can view" in Microsoft terms). Then try generating the embed again. |
Reply to Lulech23
@IridescentJaune If your link isn't redacted on purpose, it's broken. You're missing multiple URL parameters ("id" and "cid" at least). Clicking it just gives a 404. If your link is set up correctly, clicking it should prompt to download the CSS directly.
If you haven't already, make sure the file is shared to the public ("anybody with the link can view" in Microsoft terms). Then try generating the embed again.
If you haven't already, make sure the file is shared to the public ("anybody with the link can view" in Microsoft terms). Then try generating the embed again.
| @Lulech23 I've set it before to be viewable by anyone. (Anyone Share with anyone, doesn't require sign-in) I haven't made any changes as well. So I'm not sure what's wrong. I tried tweaking the resid to cid and id but it's still not working. I'm able to see the cid and id: But not the authkey part (?) like before: Here's the trace: I even made a new CSS file with the exact same code on OneDrive. I used the wheregoes site to get the real URL and it gave me a really long embed. I tried applying that to my code by replacing "embed" with download" but it still won't work. π |
IridescentJauneJun 19, 2024 11:25 PM
| yep its not working anymore. the link has no auth key thingy which i assume is important? @IridescentJaune time to use github π https://myanimelist.net/forum/?topicid=2140737 |
Reply to karmashizzle
yep its not working anymore. the link has no auth key thingy which i assume is important?
@IridescentJaune time to use github π https://myanimelist.net/forum/?topicid=2140737
@IridescentJaune time to use github π https://myanimelist.net/forum/?topicid=2140737
| @karmashizzle Yeah, I believe it has something to do with the authkey or something... I guess OneDrive no longer supports hosting like with what happened with Photobucket years ago. Well, maybe they still do but behind a paywall like with image hosting on Photobucket. I'm still not confident on using GitHub as of the moment (even though I've researched a lot on it in the past). But I might use it one day for a static site for my blogs and as a repo... Anyways, I'll try DropBox; I'll follow the club's tutorial for that later on... I chose OneDrive before because this tutorial was easy to follow. It's such a shame that OneDrive made changes... |
Reply to IridescentJaune
@karmashizzle Yeah, I believe it has something to do with the authkey or something... I guess OneDrive no longer supports hosting like with what happened with Photobucket years ago. Well, maybe they still do but behind a paywall like with image hosting on Photobucket.
I'm still not confident on using GitHub as of the moment (even though I've researched a lot on it in the past). But I might use it one day for a static site for my blogs and as a repo... Anyways, I'll try DropBox; I'll follow the club's tutorial for that later on... I chose OneDrive before because this tutorial was easy to follow. It's such a shame that OneDrive made changes...
I'm still not confident on using GitHub as of the moment (even though I've researched a lot on it in the past). But I might use it one day for a static site for my blogs and as a repo... Anyways, I'll try DropBox; I'll follow the club's tutorial for that later on... I chose OneDrive before because this tutorial was easy to follow. It's such a shame that OneDrive made changes...
| @IridescentJaune Not true, you can definitely still use OneDrive. I've just updated the guide with new screenshots and extra notes about how to decode short links. Although, in my testing now, OneDrive wasn't giving me short links anymore like it was the other day. Weird! |
Reply to karmashizzle
hmm.. same result
| @karmashizzle Did you try the last link in the trace? Looks like that's what you need. Just replace "embed" with "download". |
Reply to Lulech23
@karmashizzle Did you try the last link in the trace? Looks like that's what you need. Just replace "embed" with "download".
| @Lulech23 yep. i've tried various forms of the link its aight. i've moved to github |
| I just couldn't make it work with OneDrive after trying again so I made a new DropBox account for my CSS since my old one is already full. But the effects on my Tags.CSS still won't show on my list even after following this tutorial: [CSS] How to host your own CSS on Dropbox. I also tried placing the import at the very top. But it still won't work. π Anyways, for now I just added the Tag.CSS to my entire CSS and edited as well as compressed to have everything within the limit. I used https://csscompressor.com because I couldn't compress everything on my own. I was able to have it from 65k down to 63k but MAL's editor only allows around 60k and keeps cutting off my code. With the compressor, it's now down to 50k. So far everything looks fine; well, I haven't noticed anything unusual (yet) except for some blank covers (the delay or lag is to be expected because of my Notes). I've a copy of the uncompressed code so I could just edit that whenever and then compress again as I'm having a hard time using OneDrive and DropBox for hosting. I'll use GitHub one of these days as suggested before. BTW, thanks for entertaining my inquiries. |
IridescentJauneJun 30, 2024 12:32 PM
| @IridescentJaune for dropbox you'll need the extra stuff behind the link now: ex-- |
Reply to karmashizzle
| @karmashizzle All of these are missing the authkey parameter, which is the part that makes it publicly accessible. Are you getting these links from the "embed" option on your files (not "share")? |
Reply to Lulech23
@karmashizzle All of these are missing the authkey parameter, which is the part that makes it publicly accessible. Are you getting these links from the "embed" option on your files (not "share")?
| @Lulech23 its the same for both, no authkey. |
| @Lulech23 Have you tried your method on a new account or new upload? It still works for me with old imports (it has for years) but I never got it working with a newly uploaded file. I think they cut off hotlinking after a specific time, but old imports still can hotlink |
Reply to karmashizzle
| @karmashizzle I tried your suggestion for Dropbox and it worked so I'm now using my uncompressed code again but with the Dropbox import instead of OneDrive. So we just need to add the part after the file name (Tags.css in my case) or extra stuff as you've mentioned. I omitted that part since the Dropbox tutorial mentioned to delete that. I guess the tutorial needs to be updated. I'll mention it there then. Thanks! |
Reply to Shishio-kun
@Lulech23
Have you tried your method on a new account or new upload? It still works for me with old imports (it has for years) but I never got it working with a newly uploaded file. I think they cut off hotlinking after a specific time, but old imports still can hotlink
Have you tried your method on a new account or new upload? It still works for me with old imports (it has for years) but I never got it working with a newly uploaded file. I think they cut off hotlinking after a specific time, but old imports still can hotlink
| @Shishio-kun Still working for me on new files. The download link trick is actually making an API call, so it's unlikely they'll retire it any time soon--Microsoft rarely makes breaking API changes. I'm wondering if there's an account setting somewhere that's limiting the sharing scope for people? I'm getting a public authKey every time. |
Reply to Lulech23
@Shishio-kun Still working for me on new files. The download link trick is actually making an API call, so it's unlikely they'll retire it any time soon--Microsoft rarely makes breaking API changes.
I'm wondering if there's an account setting somewhere that's limiting the sharing scope for people? I'm getting a public authKey every time.
I'm wondering if there's an account setting somewhere that's limiting the sharing scope for people? I'm getting a public authKey every time.
| @Lulech23 That sounds possible because I can't get new files to do this but old files hotlink fine. I should probably look into it on a new account sometime, since this is a great hotlinking alternative (so far). |
| @Lulech23 do these still work for you? All my old storage/link (Onedrive) files can't be used to as imports anymore after, like, 12 years lol. Mine are a lil different. I contacted both CS and a dev there, no one understands the idea of hotlinking there no matter how many times I explain it. Lately I've been using Github for the CSS hosting it seems to be working great. |
Reply to Shishio-kun
@Lulech23 do these still work for you? All my old storage/link (Onedrive) files can't be used to as imports anymore after, like, 12 years lol. Mine are a lil different.
I contacted both CS and a dev there, no one understands the idea of hotlinking there no matter how many times I explain it.
Lately I've been using Github for the CSS hosting it seems to be working great.
I contacted both CS and a dev there, no one understands the idea of hotlinking there no matter how many times I explain it.
Lately I've been using Github for the CSS hosting it seems to be working great.
| @Shishio-kun Yep, still working here. I'm not surprised Microsoft support has no concept of hotlinking since this is using the download endpoint of the OneDrive API. It's not meant for hotlinking per se, plus it's just pretty obscure for a support staff whose first script is "have you rebooted your PC?" π Does it work for you if you create a public share link instead of an embed? (Share settings should be "Anyone with the link can view" and permissions set to "View Only".) You'll get a shortlink for sure that way, but decoding it should reveal the "resid" and "authkey" URL parameters you need to construct a download URL. The only reason I suggest using Embed instead is because it automates the correct public link settings--the end result is the same either way. |
Reply to Lulech23
@Shishio-kun Yep, still working here. I'm not surprised Microsoft support has no concept of hotlinking since this is using the download endpoint of the OneDrive API. It's not meant for hotlinking per se, plus it's just pretty obscure for a support staff whose first script is "have you rebooted your PC?" π
Does it work for you if you create a public share link instead of an embed? (Share settings should be "Anyone with the link can view" and permissions set to "View Only".) You'll get a shortlink for sure that way, but decoding it should reveal the "resid" and "authkey" URL parameters you need to construct a download URL. The only reason I suggest using Embed instead is because it automates the correct public link settings--the end result is the same either way.
Does it work for you if you create a public share link instead of an embed? (Share settings should be "Anyone with the link can view" and permissions set to "View Only".) You'll get a shortlink for sure that way, but decoding it should reveal the "resid" and "authkey" URL parameters you need to construct a download URL. The only reason I suggest using Embed instead is because it automates the correct public link settings--the end result is the same either way.
| @Lulech23 It is publicly shared to Anyone at the moment, has been for a long time. I think that's what you're referring to. |
Reply to Shishio-kun
@Lulech23 It is publicly shared to Anyone at the moment, has been for a long time. I think that's what you're referring to.
| @Shishio-kun What if you delete the old link and create a new one? The format has definitely changed in the last decade, but starting fresh should still work based on my experience. Check the "Manage Access" interface instead of sharing--it will have an option to view and remove existing links. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] π° Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] βοΈ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
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 |