[CSS - CLASSIC] Touhou-style layout: shows DVD covers of your titles off with multiple transistions and more
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: http://myanimelist.net/forum/?topicid=419405 The design works on both anime and manga. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587  Whats Touhou you ask? I love Touhou so I had to make this! It uses characters from Touhou and changes your titles into their DVD cover pics when you put the cursor on them, and there are many different easy ways to customize the way they transition! Also, there are notes in the code to change the settings of the layout and I'll give you some options to change the characters out if you don't prefer Patchouli and Kaguya on the sides. Best of all, it has a Touhou version of the icon style toolbar! Layout codes Extra changes you can make If you want to change the characters out or reposition them  Scroll down to the "inlinecontent" part of the code. You'll see two background urls. The one on the left is the left character, and the right is the right character. You can switch them out with these characters and their link, and get a different character on the side! You can also replace the URLs with your own renders. Click a link to see a preview! Remilia Scarlet: http://i.imgur.com/TfDzb63.png Koakuma: http://i.imgur.com/Z99veOD.png Marisa: http://i.imgur.com/1lrDF4k.png Tenshi: http://i.imgur.com/N3TK3HD.png Aya: http://i.imgur.com/G0twteO.png Sanae: http://i.imgur.com/mdIMDbv.png Reisen: http://i.imgur.com/olQY5Su.png Kaguya: http://i.imgur.com/CYtdDpt.png Sakuya: http://i.imgur.com/6jil35e.png Patchouli (normal version): http://i.imgur.com/YEu0mxT.png Patchouli (schoolgirl version): http://i.imgur.com/1fIc6ad.png To get a different cover style Go down to COVER AREA in the code and delete the codes below it. Stop deleting when you come to: a { color: black; text-decoration: none; } Now go to this topic and copy and paste the cover style you want from any of the styles on this page, under step 3 in this topic: http://myanimelist.net/forum/?topicid=563993 To change or take out the icon menu bar  This layout even has a Touhou style icon bar! Its in the upper right and controls things you had on your black bar and the category link. If you want to change or set it back to norma, use another touhou bar from this page: Using the custom fonts The headers (Completed, Dropped, etc) use custom imported fonts to give them those special font looks. Use this tutorial to change yours if you want! http://myanimelist.net/forum/?topicid=450049&show=0#post1 Suggestion? Questions? Requests? Post in this topic if any. I'd really like more transition styles if you can come make any! |
Shishio-kunAug 14, 2017 11:03 AM
| It lacks my beloved Reisen Udongein Inaba! <3 That aside, this layout is brilliant! My mangalist still has no layout that's why I temporarily put it in private, lol. I plan on using this layout for it! Just need to study this for a bit. (Kinda busy right now) I'll return in this thread if I have any questions. Thanks for sharing this layout! :D |
| Oh, it looks awesome, no matter which transition you choose... but in Opera I see a little bug.. the bottom image, in category_totals, is not in the middle, and when you resize Opera window stay in the same position, not in the middle.. but works well if you change this: left: 0px; margin: 0px auto; right: 0px; to this: left: 0px; //remove margin: 0px -32px; //change auto to -32px* right: 0px; //remove *as far as category_totals is part of list_surround is not necesary center the image in the screen, only extend the margin 32px in this case cuz the image is bigger than the list width. |
al_exsJun 8, 2012 11:38 PM
LunyRed said: It lacks my beloved Reisen Udongein Inaba! <3 That aside, this layout is brilliant! My mangalist still has no layout that's why I temporarily put it in private, lol. I plan on using this layout for it! Just need to study this for a bit. (Kinda busy right now) I'll return in this thread if I have any questions. Thanks for sharing this layout! :D Wow didn't think anyone else would know Touhou at all, since no one mentions it on their pages... anyhow I found a good render for her here, its been added to the main post! http://danbooru.donmai.us/post?tags=reisen_udongein_inaba+transparent_background&commit=Search |
Shishio-kun said: Wow didn't think anyone else would know Touhou at all, since no one mentions it on their pages... anyhow I found a good render for her here, its been added to the main post! http://danbooru.donmai.us/post?tags=reisen_udongein_inaba+transparent_background&commit=Search Woah-ho! Nice picks! Thanks for adding. I love my bunny waifu! <3 I'd like to help by providing some nice quality renders of Touhou characters. There are just too many characters to list from the first game up to Touhou 13! Now I have to face a fight-to-the-death battle against my laziness first, lol! EDIT 4 hours later: Is it possible to change the background of the Scarlet Devil Mansion library to something else? Like....an outside view of Eientei during the evening, or the Hakugyokurou, or even the Hakurei Shrine? Oh well. I guess we gotta gather more images huh? Lol. |
LunyRemJun 10, 2012 10:57 PM
LunyRed said: Is it possible to change the background of the Scarlet Devil Mansion library to something else? Like....an outside view of Eientei during the evening, or the Hakugyokurou, or even the Hakurei Shrine? I got the background from here: http://danbooru.donmai.us/post?tags=scenery+touhou&commit=Search If you use Autopager in Firefox to search, you can load all pages at once that way. You might be able to find a background more fitting for you there. I'd like to add an alternate background later for the more cute renders but won't get to it any time soon. I chose the library since it goes with Patchouli (my favorite) carrying books and shes what I want on the layout by default. |
Speirix said:
It is possible. I can see how, but it is a high level technique with complicated coding. You should look over or complete all CSS tutorials (including expert) before trying to do something so complicated. However you might be able to but it will be more frustrating. For example if you're not using Firebug (advanced tutorial) for complicated CSS editing, you're literally going to add hours of needless busy work. 1. If you look at my own anime list "World of Moecraft" you'll see I have an alternating background and header. There are three selector codes I know of that change with each category page they are: the headers you know about, the category links when selected, and the padding around the category links when selected. You'd have to use one of these for the changing background, and set it so its Z-index is lower then the list. But you'd lose the headers on the list itself. 2. Yes, you'd have the code you use for multiple backgrounds (probably header is best and easiest) fill up the entire background. Then it overshadows body. In addition to that, you'd have multiple urls for the two renders. So essentially, you'd have the header fill up the entire bg url + one render url in front on left+ one render url in front on right. 3. Yes you can have a fourth background attached to header that would be the list. It should be in front of the main background. So now, you'd have 4 background urls in the header. The main background, the list, the 2 renders. 4. I don't know how to do that atm. Its not a high priority either so I don't plan to ever try to make it transition like the others. The icon bar is imported so when I know how to make this change I will be automatically implemented. This would be an example of the currently watching header taking over the whole background. You'll notice the entire background will be red. You'd do a similar thing with all the headers, and if you used a different color for each, you'd get a different color on each category's page. But you'd need to add multiple backgrounds too, there's a tutorial on that, and using Firebug to edit the backgrounds would be best (tutorial for that too). For now, if you're going to try focus on just one thing at a time mainly getting the multiple backgrounds in: http://myanimelist.net/forum/?topicid=419405 .header_cw { background-color: red !important; position: fixed !important; width: 2000px !important; height: 1200px !important; z-index: -1 !important; margin: auto !important; left: 0 !important; right: 0 !important; } |
| I really like the idea of showing DVD covers on the side of the list when you hover over a title however is there a way I can make this happen without changing the layout of my list? I've tried adding the code: @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; to my CSS layout at the top, but it doesn't seem to work.... :/ |
 |
Shinjiteru said: I really like the idea of showing DVD covers on the side of the list when you hover over a title however is there a way I can make this happen without changing the layout of my list? I've tried adding the code: @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; to my CSS layout at the top, but it doesn't seem to work.... :/ That import makes DVD covers appear to the right. But you need to have the import to make DVD covers appear in the first place. So use these two imports at the top. Also this isn't an add-on, so it isn't made to work with other layouts and probably cause issues. But you can try to adjust it later for your layout or ask in this club ways how to. @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; |
| I also would like to use just the DVD covers on the right side, but as you said it's not working correctly. And I have absolutely no idea how to adjust it ... Please help. If this is too much trouble for you, maybe a link to a tutorial would do as well. Also it made my list very slow, is that normal? |
LirinaAug 8, 2012 1:02 PM
 |
Lirina said: I also would like to use just the DVD covers on the right side, but as you said it's not working correctly. And I have absolutely no idea how to adjust it ... Please help. If this is too much trouble for you, maybe a link to a tutorial would do as well. Also it made my list very slow, is that normal? You can take the CSS from this imports @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; then reimport from your own dropbox and edit it with Firebug or something to suit the list. Then add @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; for the actual pictures to show up. All available tutorial links on the front page under "customize your list" but there's no tutorial for putting that particular thing on any list its just something that takes know-how from doing CSS a lot. The codes here were intended for the Touhou layout and nothing else. It never made my lists slow and I can't remember hearing that complaint so probably not normal. |
| Updated this to fix all the images that got deleted and to work with the new cover styles that came out since this layout's creation. |
| I love this animelist design of yours, I've been using it since but now it's down. Some of the images were deleted even css on dropbox are n/a |
rainfalls said: I love this animelist design of yours, I've been using it since but now it's down. Some of the images were deleted even css on dropbox are n/a I can look into restoring it, but these old ones can be hard to bring back if at all |
| Nah forget about it, It was good while it lasted. I like your designs I'll move on from this one. Thank you for sharing your designs. |
rainfalls said: Nah forget about it, It was good while it lasted. I like your designs I'll move on from this one. Thank you for sharing your designs. Ah no problem. Well if you're interested again I was able to restore the original anime version even the fonts, only took about 15 minutes and there should be some improvements particularly with the covers and copyright text at the top. But restoring the manga version will take a while I think, so I'm not going to be able to get around to it. edit: Oh cool, the anime list layout works on the manga list perfectly fine so no need to restore it. Both lists can use the same CSS. All the backing up and improvements over the years to codes really paid off for this, lol. |
Shishio-kunAug 14, 2017 11:05 AM
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» 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 |