| This topic is outdated; MalCat has been upgraded and the new version can be found here. I've left this version up for those who are already using it, but unless the new version crashes, don't use this one. This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 Thanks to @LukeLC and the guys at Web Development and Programming for helping me out with this! All of it is much appreciated. MalCat is an open source web application for generating custom CSS. With it, you can quickly generate repetitive code to a webpage, then import that webpage into your CSS or save the code locally. How to use Start off by going to the MalCat homepage: http://malcat-gen.appspot.com/ Once there, fill out the form as explained: Username: Self-explanatory. Anime/Manga: Select the list type that you would like to generate code for. As of now, MalCat can only generate code for one list at a time. External Data: Toggle the availability of external data tags (indicated in the page sidebar). When external data is turned off, relevant tags such as [DESC] will not work. Having external data turned on will drastically increase your code's load time, so it's not recommended for automatic updating (you can save the codes to a local file). CSS Template: Insert your custom CSS template. Tags inserted into the template will be replaced with the relevant information. Generate CSS: This will generate a page containing your fully generated CSS. You can save it locally or import it into your CSS for automatic updating. If you would rather insert the template directly into the URL, you can do that as well. Append your encoded string to the following URL: http://malcat-gen.appspot.com/code?username=USERNAME&listType=ANIME&external=True&cssTemplate= Other Features Status Headers for Modern List Design This feature enables status headers for the "All Anime"/"All Manga" pages of modern list layouts. Add the following import to the top of your CSS: @import "http://malcat-gen.appspot.com/headers"; body[data-query='{"status":7}'] .status { position: relative; }
body[data-query='{"status":7}'] .list-item:before {
display: table-row;
height: 50px;
}
body[data-query='{"status":7}'] .data.status:before {
display: block;
position: absolute;
top: -50px;
left: 0;
width: 1023px;
height: 50px;
line-height: 50px;
font-size: 24px;
text-align: left;
text-indent: 10px;
border: solid black;
border-width: 1px 0;
}It's important to note that the status headers are created as pseudo children of .data.status (the colored status bars), so hiding the colored bars with display: none; will affect the headers as well. If you want to hide the colored bars and keep the headers, use visibility codes instead, as demonstrated here: http://myanimelist.net/forum/?topicid=200323&show=3800#msg46067359 Status headers won't show on your list preview page or when sorting. MalCat is brand new and still very much a work in progress, so it's sure to be full of bugs - so tell me if you find one. Keep in mind, though, that this is a project that I started to teach myself Python, and I've only been at it for about a month, so you may have to explain to me how to fix the issue yourself! Also, suggestions are always welcome. You can view the source code and pull requests on GitHub here: https://github.com/doomcat55/MalCat |
Shishio-kunFeb 18, 2018 11:56 AM
 |
Doomcat55May 17, 2016 7:10 PM
|
| Cool, a button that actually submits a form! You are better than 99% of website makers! You might want to provide a default, or some examples. I was able to figure it out, but I already had an idea of how it would work. Load time is 1.1s for me. You might want to consider caching the output or something (at the cost of delayed updates, or having your own DB of mal info to avoid excessive API calls). I thought the MAL CSS editor had trouble with "&" (for classic lists) and that was why that other tool got changed to not use any? Something to check. |
  |
BurntJelly said: Thanks! I actually pulled a few ideas from your own generator, so props to you for that.Cool, a button that actually submits a form! You are better than 99% of website makers! You might want to provide a default, or some examples. I was able to figure it out, but I already had an idea of how it would work. Load time is 1.1s for me. You might want to consider caching the output or something (at the cost of delayed updates, or having your own DB of mal info to avoid excessive API calls). I thought the MAL CSS editor had trouble with "&" (for classic lists) and that was why that other tool got changed to not use any? Something to check. I know the caching bit needs work - tbh this is my first actual web project, and I have yet to read up on how caching works. Currently I'm working on a version that'll use Google's Datastore to store previous info, though I might set up my own server soon, so it's up in the air. The separate DB is also likely - I'm literally about to start checking those out now. Dunno about the editor and ampersands - I tested it on both classic and modern, and it worked fine. iirc Fellow Writer uses ampersands, and that's what most people use for the classic list. |
|
Doomcat55 said: Confirmed, there is no problem. (now I wonder if it was a problem before and mal fixed it at some point...)Dunno about the editor and ampersands - I tested it on both classic and modern, and it worked fine. iirc Fellow Writer uses ampersands, and that's what most people use for the classic list. |
|
| Updated with info on the status headers feature. |
|
| I'm still a bit cloudy about this. Would it be possible to share a video example demonstrating what it does? Thanks! |
 |
| @MoFried I'm too lazy for a video, but hopefully screenshots will be fine: It's basically a cover generator (if you've seen those around), except that it does more than just covers - it can also handle synonyms, episode counts, series descriptions etc. You use it by filling out the form on the linked webpage with a CSS "template" using tags to show where you want info to be filled in. For example, if you fill out the form as follows: and hit "generate," you'll get sent to this page: which contains CSS covers for your entire list (in the #more style). You can then copy the link from that page and import it into your CSS: and then you'll have covers that update automatically when you load your list (you don't need to keep going back to the website manually). |
|
@Doomcat55 By "covers", are you referring to these? |
|
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 |
7924 |
by Shishio-kun
»»
Yesterday, 1:50 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |