This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 This topic is also featured in our BBcode Tutorials section: https://myanimelist.net/forum/?topicid=2077105 Viewing another user's CSS on MAL 1. Right click the list with the CSS you want and choose View Page Source. 2. Scroll down to <style id="custom-css" type="text/css"> or <style type="text/css"> Note: you could just CTRL+F the page and search custom-css to find this section fast! There's the code below that line. Some CSS may be in an import link (another page with CSS). If the CSS is bunched together and hard to read, google for a CSS formatter or cleaner, and enter the code into there to try to make it readable. Viewing BBcode on MAL The MAL enhancer extension has an option to extract BBcode: https://chrome.google.com/webstore/detail/mal-enhancer/lhlbjaffbmnccljibbnphpcgemkecgca?hl=en&authuser=0 If you don't want to use the extractor this is much trickier, depending on what you want to view, and it won't always give you the full BBcode. 1. You'll have to right click the page with the page with the BBcode you want and choose view page source. The BBcode isn't on this page exactly, it's in HTML format. The entire page is here in HTML form. 2. You'll need to scroll down to the part you want to rip BBcode from. This can take some time to search the whole page. At this time, profile About Me codes are under <div class="container-right">. 3. Copy the HTML for the BBcode and enter it into Seabreeze HTML to BBCode converter. This will convert most or all into BBcode you can use and learn from. If any parts are missing, carefully look at the HTML to try to learn the BBcode they used. http://www.seabreezecomputers.com/html2bbcode/ Alternative: https://html2bbcode.ru/converter/ Note: To find the section with the BBcode you want easily on View Page Source, what you could do is copy a word from the part with the BBcode you want to copy, and use CTRL+F to search the page for that word. Is it wrong to view people's codes? I know this makes some people mad, but all CSS and BBcode is public, so there is no such thing as privacy when it comes to your layouts. And its a good way for people to learn coding and how to make their own designs by borrowing someone else's codes. I started that way. But you are definitely an ass if you lie and take credit for the work someone put into coding and making a layout. Take it further! Use Inspect Element to build layouts and do advanced customization! https://myanimelist.net/forum/?topicid=1780591 https://myanimelist.net/forum/?topicid=1788327 |
Shishio-kunFeb 21, 2023 10:08 AM
| whaa thx alot, time to get started on my new list lollllllllll |
Serhiyko said: I had the default layout with slightly modified colours, and thanks to you I could place it in the advanced editor. It turns out to be really easy thanks for letting me knwo it is easy; my goal with forming this group was to make the "impossible" coding and design attainable by ppl no matter their level of experience |
| I can't get this to work anymore. There doesn't seem to be an "About Me" section anymore. Am I just being oblivious or is this no longer possible? |
Gytanzo said: I can't get this to work anymore. There doesn't seem to be an "About Me" section anymore. Am I just being oblivious or is this no longer possible? I think now it starts at <div class="container-right"> |
Gytanzo said: I can't get this to work anymore. There doesn't seem to be an "About Me" section anymore. Am I just being oblivious or is this no longer possible? I think now it starts at <div class="container-right"> |
| Thanks a ton. I was reading all of you BBCode post yesterday. Now today started with this topic today. Its like a next level cheat code. I was mainly reading because wanted to fix screenshot preview in a torrent side. Side by side. I tried everything. No space. No Enter. But I only got one picture to appear in side by side. The other option was to top to bottom. Finally viewed other peoples code & learned I just need to use some space between all pictures to make them side by side. I know in MAL no space brings pictures side by side. Here's what I was working on |
kingrazaAug 3, 2019 8:21 PM
kingraza said: Thanks a ton. I was reading all of you BBCode post yesterday. Now today started with this today. Its like a next level cheat code. I was mainly reading because wanted to fix screenshot preview in a torrent side. Side by side. I tried everything. No space. No Enter. But I only got one picture to appear in side by side. The other option was to top to bottom. Finally viewed other peoples code & learned I just need to use some space between all pictures to make them side by side. I know in MAL no space brings pictures side by side. Here's what I was working on Awesome! :D |
| Updated this, it should be easier now |
| @Shishio-kun the HTML to BBCode converter site seems down, do you have some other? |
 Let's be Otaku-Friends! |
http://www.seabreezecomputers.com/html2bbcode/ This? it loads for me |
well, it loads but the website doesn't work properly after I submit the HTML, and doesn't let me copy the bbcode, so I used this one instead: https://html2bbcode.ru/converter/ |
| Let's be Otaku-Friends! |
-ARIZONO- said: well, it loads but the website doesn't work properly after I submit the HTML, and doesn't let me copy the bbcode, so I used this one instead: https://html2bbcode.ru/converter/ OK I'll add it to the OP |
| @Shishi-kun u said, I could copy someone's list css with view page source, but the thing is I wanted to copy someone's list, but I just can't find that <style id="custom-css" type="text/css">... how am I supposed to copy that css now? |
-ARIZONO-Oct 2, 2021 1:46 PM
| Let's be Otaku-Friends! |
-ARIZONO- said: @Shishi-kun u said, I could copy someone's list css with view page source, but the thing is I wanted to copy someone's list, but I just can't find that <style id="custom-css" type="text/css">... how am I supposed to copy that css now? Whose list |
Shishio-kun said: -ARIZONO- said: @Shishi-kun u said, I could copy someone's list css with view page source, but the thing is I wanted to copy someone's list, but I just can't find that <style id="custom-css" type="text/css">... how am I supposed to copy that css now? Whose list HIs name is Skittles (at least in MAL) |
| Let's be Otaku-Friends! |
He's using the old layout (Classic) so its different named, but its near the top under "text/css". The code starts on line 5  |
| then I should copy it starting from there, right? |
| Let's be Otaku-Friends! |
-ARIZONO- said: then I should copy it starting from there, right? Line 5 is the first line of CSS so you can copy that first and down to line 1236, that's where the code ends for now Line 1237 is a style tag </style> This is a non-CSS tag you don't need to copy It's also classic CSS layout so you need to set your list to classic first, see a classic list install tutorial if you don't know (see and search the stickies first) |
Shishio-kun said: -ARIZONO- said: then I should copy it starting from there, right? Line 5 is the first line of CSS so you can copy that first and down to line 1236, that's where the code ends for now Line 1237 is a style tag </style> This is a non-CSS tag you don't need to copy It's also classic CSS layout so you need to set your list to classic first, see a classic list install tutorial if you don't know (see and search the stickies first) thanks a lot! |
| Let's be Otaku-Friends! |
| How do we know we stopped copying at the right spot? Do we always copy-paste from there all the way to the end? Or could that create errors? Because the one I'm using came out fine, except with some tiny differences, and the fact that it's only an anime list design. I don't know if I'll ever fix it all properly to my liking though. Copy-pasting it to the developer mode app doesn't work either. Isn't that made to customize any code or?... I guess not. Says error, and gets stuck on loading. Frustrating. |
waalex11Sep 13, 2023 11:24 PM
Reply to waalex11
How do we know we stopped copying at the right spot?
Do we always copy-paste from there all the way to the end?
Or could that create errors?
Because the one I'm using came out fine, except with some tiny differences, and the fact that it's only an anime list design.
I don't know if I'll ever fix it all properly to my liking though.
Copy-pasting it to the developer mode app doesn't work either.
Isn't that made to customize any code or?... I guess not. Says error, and gets stuck on loading.
Frustrating.
Do we always copy-paste from there all the way to the end?
Or could that create errors?
Because the one I'm using came out fine, except with some tiny differences, and the fact that it's only an anime list design.
I don't know if I'll ever fix it all properly to my liking though.
Copy-pasting it to the developer mode app doesn't work either.
Isn't that made to customize any code or?... I guess not. Says error, and gets stuck on loading.
Frustrating.
| @waalex11 You can do copy the layout by using inspect element, I used it in the video in the first post, since you can see/edit any layout with Inspect Element you can also copy the layout and paste it to anywhere else. Please see this video on quickly how I recorded it for you just now https://www.youtube.com/watch?v=f6K2jbnyWb4 How to: open Firefox right click list page choose inspect choose style editor find tab with the CSS should be one of the first 5 and will probably have "imports" at the top, copy and paste into your CSS editor on your list to be sure I don't know what you mean by developer mode app, but you don't need to be in developer mode for this. Looks like Getnorted put many image and color codes at the top, you'd have to swap out the colors and image links. You can see me changing out colors and images in these videos it's a similar thing with his he just has all the codes to change at the top. I also install full layout codes in these if that's needed too https://myanimelist.net/forum/?goto=post&topicid=2077862&id=68646629 edit: Yeah the images at the top can be swapped with imgur links and looks like many colors can be replaced https://youtu.be/Ls3mgmhHyQQ (video needs time to process as of this edit) |
Shishio-kunSep 14, 2023 3:25 AM
| I've been meaning to ask for help with an issue on my manga list but I tried to see if I could fix it by myself first and I finally did after such a long time! The issue was just because of a missing parenthesis. 😩🤦 LOL. 😂 VSCode was pretty helpful as I really had a hard time finding what was wrong before. Perhaps you could also mention VSCode as a tool in these threads?: 💚 How to repair and speed up list layouts [2023 VERSION] [ WEBSITES ~ EXTENSIONS ~ APPS ] All tools for MyAnimeList [ LIST TUTORIALS ] All CSS guides and extensions for lists [CSS - MODERN] ⭐️ Moving and customizing all individual text and sections on the layout Yeah, we can always use Inspect Element... But VSCode made it easier for me to spot errors and tweak some stuff; I'll clean or polish my code a bit next time... There are still some things I want to fix on my list but I'll check other threads here and ask for help later on. |
Reply to IridescentJaune
I've been meaning to ask for help with an issue on my manga list but I tried to see if I could fix it by myself first and I finally did after such a long time! The issue was just because of a missing parenthesis. 😩🤦 LOL. 😂 VSCode was pretty helpful as I really had a hard time finding what was wrong before. Perhaps you could also mention VSCode as a tool in these threads?:
💚 How to repair and speed up list layouts [2023 VERSION]
[ WEBSITES ~ EXTENSIONS ~ APPS ] All tools for MyAnimeList
[ LIST TUTORIALS ] All CSS guides and extensions for lists
[CSS - MODERN] ⭐️ Moving and customizing all individual text and sections on the layout
Yeah, we can always use Inspect Element... But VSCode made it easier for me to spot errors and tweak some stuff; I'll clean or polish my code a bit next time... There are still some things I want to fix on my list but I'll check other threads here and ask for help later on.
💚 How to repair and speed up list layouts [2023 VERSION]
[ WEBSITES ~ EXTENSIONS ~ APPS ] All tools for MyAnimeList
[ LIST TUTORIALS ] All CSS guides and extensions for lists
[CSS - MODERN] ⭐️ Moving and customizing all individual text and sections on the layout
Yeah, we can always use Inspect Element... But VSCode made it easier for me to spot errors and tweak some stuff; I'll clean or polish my code a bit next time... There are still some things I want to fix on my list but I'll check other threads here and ask for help later on.
| @IridescentJaune I've never heard of it, can you just give me a quick rundown of it, please? Looks like it's an ap for Windows, you paste code in, and it finds errors right away? No need to pay, sign up, or other BS? |
Shishio-kunSep 15, 2023 6:59 PM
Reply to Shishio-kun
@IridescentJaune
I've never heard of it, can you just give me a quick rundown of it, please? Looks like it's an ap for Windows, you paste code in, and it finds errors right away? No need to pay, sign up, or other BS?
I've never heard of it, can you just give me a quick rundown of it, please? Looks like it's an ap for Windows, you paste code in, and it finds errors right away? No need to pay, sign up, or other BS?
| @Shishio-kun Uhm, it's a source-code editor. It's free to install on Windows, Mac or Linux (https://code.visualstudio.com). I sometimes use it for markdown, javascript and other scripts for Obsidian. Others (like developers) use it for other languages and GitHub, etc. I used other online editors before for my CSS code but I figured why not try fixing mine in VSCode. It underlines some errors kinda similar to how Microsoft Word highlights mistakes... |
| @Shishio-kun I appreciate all of your help, thanks. Anyway. I'll continue to studying your threads/videos in the coming days if I have the time. I think at this point your threads are what will mostly help after having watched your videos and understanding them now. |
waalex11Sep 15, 2023 10:06 PM
Reply to IridescentJaune
@Shishio-kun Uhm, it's a source-code editor. It's free to install on Windows, Mac or Linux (https://code.visualstudio.com). I sometimes use it for markdown, javascript and other scripts for Obsidian. Others (like developers) use it for other languages and GitHub, etc. I used other online editors before for my CSS code but I figured why not try fixing mine in VSCode. It underlines some errors kinda similar to how Microsoft Word highlights mistakes...
| @IridescentJaune markdown, Obsidian Unfortunately I'm already lost lol. 😭 I dont know much about web coding beyond what I donate here as its a self-taught hobby. But I'll install the ap later if it's simple tho and see if I can simply paste in a code to find errors sounds similar to a MS Word ap you can just stick code into |
Shishio-kunSep 15, 2023 11:35 PM
Reply to waalex11
@Shishio-kun
I appreciate all of your help, thanks.
Anyway. I'll continue to studying your threads/videos in the coming days if I have the time.
I think at this point your threads are what will mostly help after having watched your videos and understanding them now.
I appreciate all of your help, thanks.
Anyway. I'll continue to studying your threads/videos in the coming days if I have the time.
I think at this point your threads are what will mostly help after having watched your videos and understanding them now.
| @waalex11 OK nice progress then, and I'll try to get these issues later. What I would suggest is to just list individual things you're trying to change in a thread (try to be really clear with screenshots or visual examples if you can, etc so we know the exact change to make). Then we can just go one by one with each issue and make the adjustments over time! :D About the dates that's hardcoded in, I think, but maybe there's some complex way to do it with some kind of generator. If it gets really frustrating and starts taking more than 15 mins with no progress, honestly that's the time to just ask and try something else and return to the problem thing tomorrow fresh |
| @Shishio-kun Alright. Thank you. I'll make a theead and clarify with screenshots or a video then. I waste far too much time with this, when I should be doing other things. I'm very tempted to just pay to not do it, lol. |
Reply to Shishio-kun
@IridescentJaune
I've never heard of it, can you just give me a quick rundown of it, please? Looks like it's an ap for Windows, you paste code in, and it finds errors right away? No need to pay, sign up, or other BS?
I've never heard of it, can you just give me a quick rundown of it, please? Looks like it's an ap for Windows, you paste code in, and it finds errors right away? No need to pay, sign up, or other BS?
| @Shishio-kun Think of it like Notepad or Notepad++ but made solely for developers with better code highlighting, debugging, and runtime tools. It also has auto-complete and quick links to documentation for most languages, including CSS. I use it a bunch for coding my JavaScript tools and occasionally for CSS since I'm used to the interface now. It's an extremely popular code editor made by Microsoft and with a lot of community plugins and support. It is open source under the MIT license, which means it is completely free and no BS, yes. Not to be confused with "Visual Studio", which is a different application (I made this mistake early on). That said, it's probably a bit heavy for most users. I'm glad Jaune found it useful to debug the CSS, but I don't think it has that many benefits over the Firefox dev tools Style Editor (*for new users). Correct me if I am wrong of course Jaune, but the only CSS debugging tools I've found on VSCode are the highlighting, which is helpful if you know what colours to look for but Firefox does this too. On one hand, the code highlighting is great for figuring out when CSS rules are being applied and the auto-complete and documentation links could be helpful for newer users. On the other hand, I think recommending most people to install it would be a big barrier of entry for not a huge benefit. If you have Notepad++ or other editors listed in one of your threads, it couldn't hurt to list it as it is a great application, but it won't be a golden ticket to solving people's issues I don't think. Edit: While I'm here, Markdown is an alternative to BBCode used by websites like Discord, AniList, Github, Reddit, and more. Whenever you bold text **like this**, you're using Markdown. Obsidian is a note-taking app that uses Markdown for its notes. |
Valerio_LyndonSep 16, 2023 12:26 PM
| @Shishio-kun Idk if you will see this, but I need your help, I tried to get the CSS code like you showed, but it just doesn't work. I tried to get it from other users and it worked, but from iRaphahell, the person from whom I've been trying to get it just doesn't. If you could help me it would mean a lot. |
Reply to Valerio_Lyndon
@Shishio-kun Think of it like Notepad or Notepad++ but made solely for developers with better code highlighting, debugging, and runtime tools. It also has auto-complete and quick links to documentation for most languages, including CSS. I use it a bunch for coding my JavaScript tools and occasionally for CSS since I'm used to the interface now. It's an extremely popular code editor made by Microsoft and with a lot of community plugins and support. It is open source under the MIT license, which means it is completely free and no BS, yes. Not to be confused with "Visual Studio", which is a different application (I made this mistake early on).
That said, it's probably a bit heavy for most users. I'm glad Jaune found it useful to debug the CSS, but I don't think it has that many benefits over the Firefox dev tools Style Editor (*for new users). Correct me if I am wrong of course Jaune, but the only CSS debugging tools I've found on VSCode are the highlighting, which is helpful if you know what colours to look for but Firefox does this too. On one hand, the code highlighting is great for figuring out when CSS rules are being applied and the auto-complete and documentation links could be helpful for newer users. On the other hand, I think recommending most people to install it would be a big barrier of entry for not a huge benefit. If you have Notepad++ or other editors listed in one of your threads, it couldn't hurt to list it as it is a great application, but it won't be a golden ticket to solving people's issues I don't think.
Edit: While I'm here, Markdown is an alternative to BBCode used by websites like Discord, AniList, Github, Reddit, and more. Whenever you bold text **like this**, you're using Markdown. Obsidian is a note-taking app that uses Markdown for its notes.
That said, it's probably a bit heavy for most users. I'm glad Jaune found it useful to debug the CSS, but I don't think it has that many benefits over the Firefox dev tools Style Editor (*for new users). Correct me if I am wrong of course Jaune, but the only CSS debugging tools I've found on VSCode are the highlighting, which is helpful if you know what colours to look for but Firefox does this too. On one hand, the code highlighting is great for figuring out when CSS rules are being applied and the auto-complete and documentation links could be helpful for newer users. On the other hand, I think recommending most people to install it would be a big barrier of entry for not a huge benefit. If you have Notepad++ or other editors listed in one of your threads, it couldn't hurt to list it as it is a great application, but it won't be a golden ticket to solving people's issues I don't think.
Edit: While I'm here, Markdown is an alternative to BBCode used by websites like Discord, AniList, Github, Reddit, and more. Whenever you bold text **like this**, you're using Markdown. Obsidian is a note-taking app that uses Markdown for its notes.
| @Valerio_Lyndon Sorry for the late response as I haven't been notified of your reply... I've just checked some of the threads here and found this one which I've yet to reply to... I don't have Notepad or Notepad++ that's why I thought of downloading VSCode back then and since the Mac's Text Editor felt vanilla to me. I used to use Notepad in my old Windows computer, though. I don't really like using MAL's editor to edit or look for mistakes since I often get the "polishing inside screen" message. So I find the colors, highlighting and search in VSCode + the live preview useful for identifying some errors in my codes and viewing my layouts. I used some online editors before but had to squint really hard just to find any errors. I just stumbled upon VSCode while looking for editors... Yeah, it might not be for most users here... I just thought of suggesting for those who don't have Notepad or Notepad++ in their system or as an alternative for others. I only had Safari and wasn't satisfied with 'Inspect Element' around the time I suggested VSCode (I didn't want to install other browsers that could be a resource hog at that time too). Anyways, I have since downloaded Firefox and it works fine. But I kinda got used to viewing my code on VSCode already. Although, I like using Firefox to inspect my code when I'm using my Windows computer. Oh, I mentioned Obsidian because I discovered it around the time I had issues with my MAL blog... Yeah, AniList uses it too (When I import my MAL lists there for backup, the notes section looks weird because MAL uses BBCode while AniList uses Markdown. Haha.). Sometimes I wish MAL also has Markdown so it'd be easier to edit my threads, stacks and blogs or move my blogs elsewhere (I'd still have to convert some of my blogs in BBCode to Markdown and there's really no decent BBCode to Markdown editor yet; I've been meaning to move my MAL blog to Notion and/or GitHub or Obsidian Publish and they all use Markdown so that's my dilemma)... But BBCode is fine for forums. |
| Is there a way to view and copy list CSS of someone who made their list private? |
 |
Reply to rupu-
Is there a way to view and copy list CSS of someone who made their list private?
| @rupu- Probably not. Just ask them for their code, a lot of people don't mind sharing list CSS unlike other communities |
@Shishio-kun it's incredible how desperate people can get when they have no individuality (╯⊙⊱ ⊙╰) |
 |
@sunnysummerday omigosh 😭 And I'm so paranoid I thought for sure the creep was going to be me somehow 😭😭😭  Hmmmm btw a way to protect your CSS may be to use PHP and a code that when a user without your username uses your direct CSS rip it activates with a black screen or different CSS. I did this long ago to keep banned users from using our imports. They could still rip your CSS by reading the imports, but if you use hosted image files you can move those if they take the CSS.. if they take the CSS and download the images then there's nothing you can do I guess haha ":D There may have been a way to make CSS useless without imports, so the person would also have to know how to import themselves. Hahaido did something like this once probably without knowing Within the CSS there could also be a "bomb" hidden deep in the files that when someone uses the CSS the file blackens their list. A selector for the list user's link on their list, with an asterix, which won't appear anywhere on MAL, and it's like z index 0 height width both 100% background black. I've used that it works everytime. You can also change their background to something fucked or something they can't see (use a selector from their list when viewers visit but not them personally) to prank them :D Example of a list stealing prank but this was april fools and went away after a few seconds xD (code goes through an import I control of course)  There was also some way to recode your imports to hexadecimal or something like that to make them hard to open. List stealers are rarely talented enough to get through all these unless they go to me so hopefully I wouldn't give them the unlock methods lol. If you want any such codes just ask >:D |
@Shishio-kun i had that same idea of spamming useless stuff that only the user would see (and i could hide), but it's not worth it  |
|
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 |