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 has separate versions for anime and manga lists. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b]  In this topic are the codes for my popular Mio Dating Sim Style CSS, so you can have it too! I modified it so all users can use it, and you can replace the graphics if you have a little experience doing so on other layouts and make your own dating sim graphics. There's notes in the CSS to guide you. Every category (completed, on-hold, etc) has its own individual response with a different pic of Mio! You cycle through them with the right hand menu. In the pic above, you're seeing the scene from the "plan to watch" anime category. There's two versions, both with their own different Mio graphics and text, and then an anime version and manga version of each of those two styles. This way, you can have the style you want on whatever list you want. I'll post all four codes in this topic, one in this post and the next three in separate posts. One more VERY IMPORTANT but easy step before you install one of these codes! Before you install these CSS codes and save, you should set your anime/manga settings correctly for the best overall look. You can do this after installing the CSS too. Go here: http://myanimelist.net/editprofile.php?go=listpreferences and update your anime/manga list settings with the way I have them here in this example: http://i55.tinypic.com/68wpi8.jpg Type 1 style features Mio in neko cosplay, bikini (with special guest), maid outfit, and other sexy outfits! Type 2 features Mio in a wet T-shirt, kimono, waitress costume and some low cut shirts! Type 1 style code (for anime lists), check the other posts for other versions |
Shishio-kunJul 8, 2015 1:20 PM
| Type 1 style code (for manga lists) |
Shishio-kunJul 18, 2014 9:01 AM
| Type 2 style (for anime lists) |
Shishio-kunJul 2, 2014 7:15 AM
| Type 2 style (for manga lists) |
Shishio-kunJul 18, 2014 9:05 AM
Hinaya said: I was strolling in the club layouts when I stumbled here yesterday. I'm really intrigued by this layout! So I wanna know what pic lresolution should I use for the bgs. Furthermore, I'm wiling to make a drastic change in the whole layout without non-repetitive bg, one pic for different pages for all anime, watching etc. Lastly, which codes should I remove for the sub headers like title, score etc. to have the original MAL settings with transparency in the list? I love when people customize this, only two people have actually done that as far as I seen. Its my fave I ever made! Just know this is a really touchy layout- it is the hardest layout here to edit (in my opinion) but ClearSinz made a really good remix: http://myanimelist.net/animelist/TooJustice The resolution of the background is about 2000x1200: http://img585.imageshack.us/img585/8513/miodatingsimbg2011.jpg The resolution of the dating sim pics (Mio) is about 1020 by 800. But keep in mind there is empty space on the side of it, so it would fit it to the right of the list. You can see the space if you put it in a photo editor like Photoshop: http://i52.tinypic.com/ibfjsw.jpg I don't think you can do an all anime page for this type of layout, since when you do all-anime all the Mios pop up and it can look really messy. Thats why I only use the five main categories separate. Unless you're using a random background generator, if you want alternate backgrounds in addition to alternate messages (Mio things) this is extremely hard to do imo cuz you have to use the backgrounds in codes that only show up per each individual category at a time. The only I know that you can use for that is padding around selected links which is what I did on my World of Moecraft layout but its not up atm, tho the code is here (last spoiler in first post) if you install the layout and find the codes that have the alternating backgrounds you could use those for this maybe, however my personal CSS isn't made for other accounts either so you may have to dig: http://myanimelist.net/forum/?topicid=411779 I just reduce the list categories to episodes complete and score. But keep in mind there are many pieces to the thing on the left to make it work. If you learn and use Firebug (tutorials for it in this group) you can pick it apart in real time and get an idea of how it works. List surround and table header have the backgrounds for that part. |
Shishio-kunMay 6, 2012 2:20 AM
| Lol, thx for sharing mine, tho it is actually still incomplete, just placed the list on-hold for now... but anyhow @Hinaya, are there anything else/ specifics you need to know? happy to know that someone else is willing to making something out of this awesome code/layout XD |
Probably.... do I need to make a "Click to Exit" text as well? I've designed my navigation texts but forgot to place that text. Here's the pic: Basically I don't want that text. That wasn't that important but this is. I thought over the point that Shishio-kun and you used a same pic for the background. How about I use a white background and then overlap it with the alternate full reso. pics in the different segments. I've yet to edit my pics for the backgrounds. I tried overlapping Shishio-kun's original background as well as removing it, it didn't work. |
| OK you'd have to change all the headers with these codes: width: 2000px !important; height: 1200px !important; z-index: -2 !important; Now they'll be the new background and alternate. Unfortunately I just realized its not made for that cuz of the copyright section, which shares a background with body so that it can make the list have a top (hard to explain but you'll see it if you remove the images), but its something you can adjust later after you put in your alternating backgrounds. |
| Oh and yeah add an exit button it'll be much easier to add images. |
| Hey i used this design layout, but i need some help cleaning up and fixing my list. Can you assist me with that? For starters my columns don't exactly align up with my entries. The only categories i use usually are just Name of title, Type, Episode#, score and tag. Is it possible to add these to the top header or maybe just add title and score at the top header and the rest have them just aligned, cause right now it looks like a mess and im pretty sure thats because this design layout is created by only using less categories. Also change the font or the width size of the list it self so it expands a little further out to the right would probably help because with the default width that the profile design has is rather small. Anyways let me know where to go in the code to change these, and i can probably do it my self, other wise you can copy and changed code here and i can just insert it. I am a real green horn at this stuff though. But learning. Once im done with this im going to try and edit this one with different theme and photo's of my own. But i really love this design layout, probably my most favorite, the poster design layout looks nice to but for large lists like me, its pretty difficult to use. |
  |
link9us said: For starters my columns don't exactly align up with my entries. The only categories i use usually are just Name of title, Type, Episode#, score and tag. In the top post it says "One more VERY IMPORTANT.." and shows what your category settings need to be. Unfortunately its not possible to add those to the top header as it is, since my original design replaced the header and list background with a custom one (the blue graphics) and made the default text invisible. I made this for myself in 2010, with the graphics intended for the settings I had at the time and just released this here for anyone to use it, but they can edit with Firebug or replace the graphics. Its not intended to be something flexible or easy to customize. imo this is the hardest layout to customize by far since you have to replace the graphics but some people have. I'm glad you like it tho, a lot of love went into this lol. link9us said: Also change the font or the width size of the list it self so it expands a little further out to the right would probably help because with the default width that the profile design has is rather small. For the premade version, I can't make those changes you're suggesting. It will affect the overall design on computer screens at 1024px width and cover the graphic. link9us said: Anyways let me know where to go in the code to change these, and i can probably do it my self, other wise you can copy and changed code here and i can just insert it. For the changes you want, you could remove the header, list background, and expand width of the list. For now you could go to #list_surround, then width (near the bottom) and change it to "470px !Important" from "312px !important". Or whatever width you'd prefer. Then you can make a new header graphic and list background graphic to replace these old ones but with the width you choose: http://img39.imageshack.us/img39/1385/2listbg1.png http://img51.imageshack.us/img51/4540/tabelheader21.png If you made those you can upload those and replace the urls in the parenthesis under #list_surround and .table_header. If the list covers the dating sim part, it might be possible to use background-size on the Mio graphics so they will be resized for the new dimensions. |
Shishio-kunJun 3, 2012 12:40 AM
| I know this designs is amazing, i can tell alot of hard work went into it. Ok thanks, i understand that. You have to make sure the size of the background graphic is exactly the same as what you want to add to the list categories. I have another question though. The header that you created, is it possible to create the same functions as what the default header has, for example clicking on the different header titles organizes your entries. I notice that this design layout does not have that function. Is that possible to add? Because for a list design as large as mine, its definitively mandatory for me to be able to organized my entries by like name or type, etc. |
| |
link9us said: I know this designs is amazing, i can tell alot of hard work went into it. Ok thanks, i understand that. You have to make sure the size of the background graphic is exactly the same as what you want to add to the list categories. I have another question though. The header that you created, is it possible to create the same functions as what the default header has, for example clicking on the different header titles organizes your entries. I notice that this design layout does not have that function. Is that possible to add? Because for a list design as large as mine, its definitively mandatory for me to be able to organized my entries by like name or type, etc. Yes! You can have the old header text come back. It will take a simple code patch I can write for you later if you create the header for it. It would have to be similar to this one, except blank, and fit the width of the list, which you choose. http://img51.imageshack.us/img51/4540/tabelheader21.png |
| Thanks! This is splendid! Hoping for more versions :p |
| my one is kinda out of place from the original... i dont know how to fix it to make it look like the pre-made, coulds yall help? :D |
 |
J1gS4wLTD said: my one is kinda out of place from the original... i dont know how to fix it to make it look like the pre-made, coulds yall help? :D always read the top post  |
Shishio-kunJul 20, 2012 7:06 AM
| thank you, sorry about wasting ur time |
|
| Thank you so much for this lovely design ^^ I saw it once in someone's list and thought: Whoa, I would love to have a list like this. And I finally find out, where it came from, lucky day~ I changed it a little according my tastes, so you can check my Lelouch design, if you want. Thanks a lot once more~ |
namea said: Thank you so much for this lovely design ^^ I saw it once in someone's list and thought: Whoa, I would love to have a list like this. And I finally find out, where it came from, lucky day~ I changed it a little according my tastes, so you can check my Lelouch design, if you want. Thanks a lot once more~ Wow I love it! The little background pics are a really nice touch. On the first version of this I had a TV screen with a screenshot from the anime on it, but I like these pics a lot more cuz of things like that. |
Shishio-kun said: namea said: Thank you so much for this lovely design ^^ I saw it once in someone's list and thought: Whoa, I would love to have a list like this. And I finally find out, where it came from, lucky day~ I changed it a little according my tastes, so you can check my Lelouch design, if you want. Thanks a lot once more~ Wow I love it! The little background pics are a really nice touch. On the first version of this I had a TV screen with a screenshot from the anime on it, but I like these pics a lot more cuz of things like that. Yeah, background photos are really nice. I thought I will change the background, but I couldn't find any good picture and the one you've chosen is nice enough, so I just changed those photos. It would be weird if Lelouch had girls from K-On on wall in his living-room xD |
| Thank you for this lovely design, the instruction on the css is easy to follow. You are awesome you know. :D Btw, here is my Steins;Gate Design. There's some minor mistake in it. like the link hovering on the right bar is kinda messy and some of the character picture quality is kinda bad. But i still like it. hehehehe... |
 |
GGSunshiners said: Thank you for this lovely design, the instruction on the css is easy to follow. You are awesome you know. :D Btw, here is my Steins;Gate Design. There's some minor mistake in it. like the link hovering on the right bar is kinda messy and some of the character picture quality is kinda bad. But i still like it. hehehehe... Cool, I'm always so happy to see remakes of this more than anything! I have a new version on my list currently which will hopefully be public soon and even more customizable! |
| Wow, i will be waiting for your new version Shishio-kun. Again, thank you for your lovely design. ^^ |
|
| I've restored these layouts back to normal as well after Imageshack deleted most of the pics. |
| I love this layout! And I think this is the first time I manage to make it look good. (by good I mean, with everything in order) Thank you for the code and for making it simple to understand ^^ |
 |
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 |