[List Design] Takana no Hana's layout collection - New Updated: -Homura Akemi minimalistic layout (Madoka Magica)-.
New
Feb 28, 2016 7:18 PM
#1
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial This design can be used for anime list. For more layouts check the full list of Premade Layouts. I figure out I will just put all my layouts into a topic for easy browsing. Hope you guys enjoy! A layout might has 2 versions which you can choose from. ----------o0o----------
It's probably due to adblock blocks some of the import codes. Here's how to fix: Confirmed that it is Adblock picking up @imports as ads for some reason. Fix by going to any list, selecting Adblock's "Don't run on pages in this domain", and adjusting the slider until it reads "myanimelist.net/animelist". Same for mangalists. Another quick fix: Found an easier way thanks to what Koolman511 said... Go to Adblock > Options > Filter Lists and hit Update Now. This'll also solve the problem of not being able to click on links to CSS hosted on Dropbox. ----------o0o---------- New Layout Updated!! Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; /* Main code*/ @import url(https://dl.dropboxusercontent.com/u/118667597/AkemiHomura/HomuraV1.css); /*Enter your MAL username or any desired name after content*/ :nth-child(5) .header_title::before { content: "USERNAME"; } /* Change USERNAME to your MAL username, this displays your own manga covers */ @import "http://mal-image.appspot.com/manga/USERNAME"; /* Main code*/ @import url(https://dl.dropboxusercontent.com/u/118667597/AkemiHomura/Manga/HomuraMangaV1.css); {} Version 2 Update!!! (none) ----------o0o---------- Hibike! Euphonium layout. Menu bar and credit section: Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Hibike/HibikeEuphoniumV1.css); {} Click to see the full size image Changes:
Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Hibike/HibikeEuphoniumV2.css); {} ----------o0o---------- 1/ Yahari Ore no Seishun theme layout. /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Yahari/YahariOreV2.css); {}
The list isn't the final version yet, some improvements might be made in the future. If you have any suggestions or ideas, feel free to drop in. ----------o0o---------- 2/ Oshino Shinobu theme: A cloudy day. /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; /* Main code */ @import url(https://dl.dropboxusercontent.com/u/118667597/Shinobu/ShinobuV2Simple.css); {} Credits: _ Thanks Doomcat55 for bug fixes. ----------o0o---------- 3/ A layout based on the anime "Grimgar of Fantasy and Ash theme layout." /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import "https://dl.dropboxusercontent.com/u/118667597/GrimgarV1.css"; /*Enter your MAL username or any desired name after content*/ :nth-child(5) .header_title::before { content: "USERNAME"; }
/* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import "https://dl.dropboxusercontent.com/u/118667597/GrimgarV2.css"; /*Enter your MAL username or any desired name after content*/ :nth-child(5) .header_title::before { content: "USERNAME"; } **New updated menu for both versions** Credits: _ Thanks Doomcat55 for fixing codes. _ Hahaido for the top menu bar. ----------o0o---------- 4/ A layout based on the anime "Erased", one of my favorite show. Effects: _ Sliding animation for the starry sky background. _ Snow effects. /* Change USERNAME to your MAL username */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/ErasedV2.css); /*Enter your MAL username or any desired name after content*/ :nth-child(1) .header_title::before { content: "USERNAME"; } Credits: _ Thanks Doomcat55 for helping me with the codes. _ Thanks Hahaido for some css codes. _ Thanks /r/anime for the Satoru render on the bottom right. [/spoiler] ----------o0o---------- 5/ A Tomori Nao theme-list from the anime Charlotte in a beautiful but late Sunset! This is my third attempt at creating a list and my first published list to the club. Current version: V2 (updated on 05/02/16) Effects: _ A short animated intro to present the list. _ An effect of drifting stars . _ A special effect of misty cloud which blends well with the background, represents the sunset. @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/TomoriNaoDonatedCodeV2.css); #copyright:before { font-size: 10px; content: "Lots of things change with the flow of time. But there are things that never change. Things that are precious because they change, and things that are precious because they dont change . . . Both are precious. Dont you feel the same?"; } V1 Codes: Credits: _ The list was modified from Madoka template from TheHolyPotato, big thanks to him. _ Thanks Doomcat for helping me with bug fixes. _ Thanks Yorium for showing me a few tricks to use in pts to design the list. ----------o0o---------- + If you have any question or request, feel free to comment here or message me. + You are free to edit anything in the code as long as you keep the credits. |
Takana_no_HanaApr 12, 2016 3:53 AM
Feb 28, 2016 7:25 PM
#2
sickkkk that looks super great. i might install your layout actually thanks for putting your effort into this! |
Feb 29, 2016 3:20 AM
#3
Thanks, I have updated a new topbar menu for the list |
Feb 29, 2016 3:39 PM
#4
Beautiful and fun layouts; you've become very strong with imagery, color, and making icons! |
Feb 29, 2016 9:23 PM
#5
Shishio-kun said: Beautiful and fun layouts; you've become very strong with imagery, color, and making icons! Thank you very much, I learn a lot from your club. All of the css tutorials are very useful. ---o0o--- I updated the Grimgar layout a bit: _ Icons are smaller. _ Move menu to the right top side. These are probably the final changes to the list. Or until I find a nice set of icons to replace the current category icons. |
Feb 29, 2016 10:57 PM
#6
great layout design! :D i've seen your post on the reddit about these layouts~ any plan for making layout design for any other anime? keep up the good work mate ^o^ |
Feb 29, 2016 11:12 PM
#7
Thanks! I plan to make a layout for bakemonogatari up next, I already have some designs in mind. Though I can't say when will I finish. I also plan to make a simple layout for easy customization. But MAL will stop supporting classic list in a month, so if I can't finish the next layout within a month, it will have to wait for a period of time. |
Mar 1, 2016 12:58 PM
#8
Takana_no_Hana said: But MAL will stop supporting classic list in a month, so if I can't finish the next layout within a month, it will have to wait for a period of time. Where do you read that they will stop supporting classic a month from now? What I've been told by Kineta is that we can expect classic support to exist until at least until April 15th, and that is not a set date for it ending, so it may continue well beyond that. |
Mar 1, 2016 2:42 PM
#9
Shishio-kun said: Where do you read that they will stop supporting classic a month from now? What I've been told by Kineta is that we can expect classic support to exist until at least until April 15th, and that is not a set date for it ending, so it may continue well beyond that. My bad then, hopefully they still continue to support the classic. |
Mar 2, 2016 8:07 PM
#10
Takana_no_Hana said: Shishio-kun said: Where do you read that they will stop supporting classic a month from now? What I've been told by Kineta is that we can expect classic support to exist until at least until April 15th, and that is not a set date for it ending, so it may continue well beyond that. My bad then, hopefully they still continue to support the classic. Oh good, I thought they made some stealth announcement that would screw us hard ha. They should continue support via just updating the old one with some new features and then leaving it be. Mandatory updates suck; choice is good. Classic is simpler and many ppl like that about it who don't use custom CSS- btw that's something I didn't see that coming lol |
Mar 3, 2016 10:46 PM
#11
I have created a simple layout for Oshino Shinobu fans out there. Enjoy! Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; /* Main code */ @import url(https://dl.dropboxusercontent.com/u/118667597/Shinobu/ShinobuV2Simple.css); {} |
Mar 4, 2016 8:39 AM
#12
These are great. One question, is there a reason they don't seem to work in google chrome? It worked in chrome last week but now none of these show up in chrome. |
Mar 4, 2016 11:11 AM
#13
I have to take this layout! Shinobu is awesome + the design is great and everything is easy to read.. you did a great job. |
Mar 4, 2016 11:40 AM
#14
Wow, these are really great list designs. Awesome job. |
Mar 4, 2016 3:13 PM
#15
Jimmydamage said: These are great. One question, is there a reason they don't seem to work in google chrome? It worked in chrome last week but now none of these show up in chrome. It's best suited for Chrome because it's the browser that I designed on, I'm running on Chrome and they appear just fine. Probably due to adblock which blocks the import code because it thinks it's an ad. Here's how to fix (thanks to Doomcat) Confirmed that it is Adblock picking up @imports as ads for some reason. Fix by going to any list, selecting Adblock's "Don't run on pages in this domain", and adjusting the slider until it reads "myanimelist.net/animelist". Same for mangalists. Another quick fix: Found an easier way thanks to what Koolman511 said... Go to Adblock > Options > Filter Lists and hit Update Now. This'll also solve the problem of not being able to click on links to CSS hosted on Dropbox. |
Takana_no_HanaMar 4, 2016 3:26 PM
Mar 4, 2016 5:22 PM
#16
Wow your growth is crazy. The new Shinobu girl layout is alot of fun to use. and pleasant to look at. |
Mar 9, 2016 4:58 PM
#17
So here's the Yahari Ore no Seishun theme layout I have been making this week. Hope you guys enjoy. /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Yahari/YahariOreV2.css); {} Notes:
If you have any suggestions or ideas, feel free to drop in. |
Mar 9, 2016 8:56 PM
#18
How do you make the list to show the picture of the anime |
Mar 10, 2016 6:57 AM
#19
THANKS these are AWESOME!!! |
Mar 12, 2016 7:33 PM
#20
Thanks guys, I just made some improvements for the Yahari layout:
I plan to remake the left side menu completely but I will leave that for now. Memori_ said: How do you make the list to show the picture of the anime You can find the tut in here. |
Takana_no_HanaMar 13, 2016 4:55 AM
Mar 13, 2016 3:12 AM
#21
I am not getting the comments section for some reason. It's showing blank. |
Mar 13, 2016 4:48 AM
#22
xaos12 said: I am not getting the comments section for some reason. It's showing blank. The comment section is actually the tag section, my bad. You can add comments by clicking "edit" and add your comment on the tag section. |
Mar 13, 2016 4:51 AM
#23
Takana_no_Hana said: xaos12 said: I am not getting the comments section for some reason. It's showing blank. The comment section is actually the tag section, my bad. You can add comments by clicking "edit" and add your comment on the tag section. Thanks for that, fixed now. Anyway this design looks great! The Erased one is perhaps the best of all. |
Mar 19, 2016 11:09 PM
#24
Updated Hibike! Euphonium layout. Menu bar and credit section: Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Hibike/HibikeEuphoniumV1.css); {} |
Takana_no_HanaMar 22, 2016 10:20 PM
Mar 22, 2016 10:19 PM
#25
Update Hibike! Euphonium V2 layout: Click to see the full size image Changes:
Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/Hibike/HibikeEuphoniumV2.css); {} |
Mar 27, 2016 4:27 PM
#26
Codes: /* Change USERNAME to your MAL username, this displays your own anime covers */ @import "http://mal-image.appspot.com/anime/USERNAME"; /* Main code*/ @import url(https://dl.dropboxusercontent.com/u/118667597/AkemiHomura/HomuraV1.css); {} Bonus: Here is the banner in full size which I made it into a wallpaper for anyone interests. |
Takana_no_HanaMar 27, 2016 4:38 PM
Mar 29, 2016 3:30 AM
#27
*Slight update* for the minimalistic Homura layout, now you can enter your username on the list. ---o0o--- Hey guys, here's a head up, in a few weeks MAL will probably end up not supporting classic template. Which potentially means, a lot of the current designs would be unusable (though I'm not too sure since there aren't any official news about this but it has happened before according to Shishio). I plan to continue making the series of minimalistic layout for Madoka Magica (currently making one for Madoka, and then Madoka x Homura theme, finally a Kyouko theme after). So I will import these series of layout first into the new list structure and do the rest later on (it can take months depended on my free time). If you have any request (which layout would you want to be imported, or any ideas for up coming layouts), please let me know. |
Apr 6, 2016 11:05 PM
#28
Thank you, your design is awesome! By the way, where's the link about Homura Akemi minimalistic layout for manga list? |
Apr 7, 2016 2:21 AM
#29
Takana_no_Hana said: Hey guys, here's a head up, in a few weeks MAL will probably end up not supporting classic template. Which potentially means, a lot of the current designs would be unusable (though I'm not too sure since there aren't any official news about this but it has happened before according to Shishio). What are you saying I said "has happened before" exactly? I'm pretty sure I never said they changed the old CSS if that's what you're saying. They've altered it slightly over the years, but never made it unusable. This current new CSS they have changed since its creation. That was something I posted recently you might be quoting. Several early layouts we took a lot of time to make for it were rendered unusable and never saw use |
Apr 7, 2016 5:08 AM
#30
Shishio-kun said: What are you saying I said "has happened before" exactly? I'm pretty sure I never said they changed the old CSS if that's what you're saying. They've altered it slightly over the years, but never made it unusable. This current new CSS they have changed since its creation. That was something I posted recently you might be quoting. Several early layouts we took a lot of time to make for it were rendered unusable and never saw use I thought u meant the old design would be unusable, mb :P. Since a lot of people have changed to the new CSS, I will probably try to experiment with the new CSS soon. vaan_tw said: Thank you, your design is awesome! By the way, where's the link about Homura Akemi minimalistic layout for manga list? Here's the code for it /* Change USERNAME to your MAL username, this displays your own manga covers */ @import "http://mal-image.appspot.com/manga/USERNAME"; /* Main code*/ @import url(https://dl.dropboxusercontent.com/u/118667597/AkemiHomura/Manga/HomuraMangaV1.css); {} |
Apr 27, 2016 6:11 PM
#32
Hello :) your Layouts are awesome. I will use Oshino Shinobu one, but hasn't anime cover when i put cursor on it? Or i do something wrong in copy paste the code... |
Falx92Apr 27, 2016 6:15 PM
Apr 27, 2016 10:24 PM
#33
Falx92 said: Hello :) your Layouts are awesome. I will use Oshino Shinobu one, but hasn't anime cover when i put cursor on it? Or i do something wrong in copy paste the code... Hi, due to some performance issues I didn't add in the code for covers because it will slow down your browser a lot. So Shinobu theme is the only layout which doesn't have cover function. |
Apr 28, 2016 3:44 AM
#34
Takana_no_Hana said: No problem :) I have only another question. Why the top immage is cut on my display :(Falx92 said: Hello :) your Layouts are awesome. I will use Oshino Shinobu one, but hasn't anime cover when i put cursor on it? Or i do something wrong in copy paste the code... Hi, due to some performance issues I didn't add in the code for covers because it will slow down your browser a lot. So Shinobu theme is the only layout which doesn't have cover function. http://oi64.tinypic.com/2zf0gty.jpg |
Apr 28, 2016 4:47 PM
#35
Falx92 said: Takana_no_Hana said: No problem :) I have only another question. Why the top immage is cut on my display :(Falx92 said: Hello :) your Layouts are awesome. I will use Oshino Shinobu one, but hasn't anime cover when i put cursor on it? Or i do something wrong in copy paste the code... Hi, due to some performance issues I didn't add in the code for covers because it will slow down your browser a lot. So Shinobu theme is the only layout which doesn't have cover function. http://oi64.tinypic.com/2zf0gty.jpg seems like I was unable to find the fix. I design it using my small screen latop so yeah the display could be weird on larger screen. I will revisit the layout once I have more time though. |
Apr 29, 2016 3:09 AM
#36
Takana_no_Hana said: seems like I was unable to find the fix. I design it using my small screen latop so yeah the display could be weird on larger screen. I will revisit the layout once I have more time though. Yeah i think the issue is something pertinent with monitor size. Desktop PC 1980x1080 cut the picture and portable 1366x768 is fine... |
More topics from this board
» Anime hoodies - Would you wear it ?abambata - Apr 17 |
1 |
by DesuMaiden
»»
5 hours ago |
|
» What software(s) and hardware(s) do you use for digital drawings?DesuMaiden - Apr 16 |
11 |
by DesuMaiden
»»
5 hours ago |
|
» Have you tried using lmms?Cammell - 7 hours ago |
0 |
by Cammell
»»
7 hours ago |
|
» Help me modify this layoutLuffie00 - Yesterday |
0 |
by Luffie00
»»
Yesterday, 7:01 PM |
|
» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page )nin-tendo - Dec 16, 2022 |
357 |
by nin-tendo
»»
Yesterday, 12:16 PM |