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. |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |