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 anime lists only. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b]  Here is an alternate version I made of my Mio Dating Sim CSS with 5 different characters! You can get it from the spoiler button below. This preview above cycles through all 5 girls. On the list itself, choosing a new category brings up a new girl and message with the list. When you install the code, you cycle through the categories with the right hand menu or exit. One more VERY IMPORTANT but easy step! Before you install these CSS codes and save, 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 the code |
Shishio-kunJul 18, 2014 9:36 AM
syiboi said: I'm getting an error where the background won't up at all, its just white. Any ideas? At the top of your CSS, you have: / body { background: url(http://i56.tinypic.com/2d9u537.jpg) no-repeat fixed center top transparent; } The backslash "/" at the very top is interfering with body which is what adds the main background. When it interferes it nullifies body and leaves the main background all white. You need to remove it (normally that backslash was part of the whole code descrip and was fine when kept at top before body but when its been reduced to just the backslash it interferes). Delete that backslash at the top before body but leave body alone, then save. |
syiboi said: That was it, thank you so much, I feel kinda dumb for not figuring it out myself though. Don't feel bad about it, everyone makes that kind of mistake all the time. Hope you like the layout! |
| Ty Shishio-kun for the code was able to make something for a friend lol tho there are still some fixes i need to make ,more or less it almost done, http://www.myanimelist.net/animelist/TooJustice |
| Wow thats amazing! I'm really glad to see someone do something with this. Let me see your future designs too, I really want more of that in this club. |
| lol tx, tho it wasnt rly much just replacing the visuals, it is all thx to ur code >_< , I'll def willing to make more designs as long as there is the coding XD dont know much bout css XD |
| This is an awesome layout ! Thanks for making this ! ^^ |
| "However, by that point you'll have been torn into pieces." |
| I remade an anime list too, could you give me some tips, because there are still some problems? |
thomasrmNov 14, 2013 12:23 PM
 |
thomasrm said: I remade an anime list too, could you give me some tips, because there are still some problems? Wow this is cool! There's a few easy changes to make: Copyright must have the same settings as body so that the main background matches the background in the upper left corner. So add background-size:100% 100%; to it. Also the width is supposed to be equal to the parts below it, about 309px. Table header should have size settings more like this, make yours match it and adjust if you need to. height: 26px; margin-top: -60px; padding-left: 160px; width: 224px; Go to where the headers are in the code (where you put the images for the girls) and increase the amount next to left for some of the headers. This controls how far to the right or left the image is. For example if you go to it right now they're all only set to 0px. But if you were to go to the Dropped header with Minami and change it to 300px, she will be more centered on most resolutions. You should do this with all the girls one by one. Some don't need the left changed. You also might want to consider these settings for the header's position instead of what you have now left: 30% !important; right: 0 !important; width: 100%; height: 100% !important; background-size: contain; This should let you keep the girl always in the same height and width as any screen and resized in. You can adjust the left percentage to move her to the right or left. So mess with those and let me know if everything goes alright; save you old code in case something crucial gets deleted or messed up on accident. |
| It looks much better now!! If it's not too much trouble would you give me some more tips (if they aren't to difficult to fix) And I would like to know how I can make the title (nr. Title...) clickable so it can make an order alphabetically or max score to min score. Would you please help me? I appriciate what you have done for me until now! |
| |
thomasrm said: It looks much better now!! If it's not too much trouble would you give me some more tips (if they aren't to difficult to fix) And I would like to know how I can make the title (nr. Title...) clickable so it can make an order alphabetically or max score to min score. Would you please help me? I appriciate what you have done for me until now! The table header has to be completely reworked for that- I might look into it someday cuz I was sort of a noob when I made the dating sim layout back in 2010 and didn't know how to keep those links then, now I do. You'd first have to remove the table header codes. I think there's only one set in the whole CSS. Then you'd have to customize the individual parts to the table header links. You can find all the codes with this guide http://myanimelist.net/forum/?topicid=410909 for example, the code for anime title would be this .table_header:nth-of-type(2){ background: purple; position: fixed; top: 41px; z-index: 10 !important; padding-right: 90px; } that moves it into the proper spot (won't work till table header codes are removed tho). So you would do that for all the other links you want to customize. And after you'd replace them with the images you want. Just ask back if u have trouble with this. Other than that, I guess you can just round the menus and give them borders, but thats not really that important but it would probably look more game-like and be a small improvement. It looks really nice as it is! |
| Thank you very much for all the help, i'm sorry for all the questions, but I have one last question: How can i place the anime titles on the same row as score and progress? |
| |
thomasrm said: Thank you very much for all the help, i'm sorry for all the questions, but I have one last question: How can i place the anime titles on the same row as score and progress? This shoudl work. You need to put the background into them, and might need to add padding-right or width to any parts that aren't long enough. Also remove the Read more at http://myanimelist.net/forum/?topicid at the bottom of your list. .table_header:nth-of-type(1) { position: fixed; left:0; top: 41px; z-index: 10 !important; color: white; } .table_header:nth-of-type(2) { position: fixed; left: 40px; padding-right: 200px; top: 41px; z-index: 10 !important; } .table_header:nth-of-type(3) { position: fixed; left: 200px; top: 41px; z-index: 10 !important; } .table_header:nth-of-type(4){ position: fixed; top: 41px; left: 250px; z-index: 10 !important; } |
| Thank you very much for all your help. srry for the trouble! :D |
| |
| I've made an anime list starting from this layout, but appears all images together, what's i doing wrong? Reasons: 1. All Girls Images are together. 2. Background Image is very big (¿?) 3. Two Title Headers My code: |
daniyanMar 16, 2014 10:12 AM
daniyan said: Go to edit profile and under My List Settings Change your default Manga List Settings from all to whichever and it should fix.(Problem was that its spawning all pics into one page because all pics have their own destination, but you had your list to all so they cluttered up in the middle) Same hoes for your anime list settings.... There is an older post that explains how to proceed with it. Please read before commenting.I've made an anime list starting from this layout, but appears all images together, what's i doing wrong? Reasons: 1. All Girls Images are together. 2. Background Image is very big (¿?) 3. Two Title Headers My code: http://myanimelist.net/editprofile.php?go=listpreferences |
 |
Red-Fox said: daniyan said: Go to edit profile and under My List Settings Change your default Manga List Settings from all to whichever and it should fix.(Problem was that its spawning all pics into one page because all pics have their own destination, but you had your list to all so they cluttered up in the middle) Same hoes for your anime list settings.... There is an older post that explains how to proceed with it. Please read before commenting.I've made an anime list starting from this layout, but appears all images together, what's i doing wrong? Reasons: 1. All Girls Images are together. 2. Background Image is very big (¿?) 3. Two Title Headers My code: http://myanimelist.net/editprofile.php?go=listpreferences I've made the changes of list preferences and the list hasn't changed, maybe can be a broken string somewhere in the code? |
daniyan said: I've made the changes of list preferences and the list hasn't changed, maybe can be a broken string somewhere in the code? I can tell you why you're seeing all 5 at once. Both your lists still have the wrong settings, which RedFox pointed out to change. You also don't have the layout on either list so I can't see the problem to make any adjustments... I also pointed out the correct settings you need in the first post under One more VERY IMPORTANT but easy step!. I even provide a screenshot of the right settings... just set default status selected to something other than Show All and save. So why don't you set the proper settings on your list, and leave the layout on your list, so I can see how to make any more adjustments. |
| Now it works, i have my default anime view in show all, instead of watching, i feel very unuseful right now. Thanks for the help. |
daniyan said: Now it works, i have my default anime view in show all, instead of watching, i feel very unuseful right now. Thanks for the help. Don't worry about it, it happens, glad its working great now! |
| Well, I'm making graphics! Let's see if I can manage to not completely fail when it comes to the coding. I might have to come here for help a few times. |
| Okay, I got all the graphics arranged and put the code together, and I'm pretty happy with it except for one issue. http://i59.tinypic.com/2qso5yv.jpg The list header for some reason has some of the top cut off and I can't figure out how to fix it. Any suggestions? (I'm not sure how it will look on a different computer, I scaled everything for mine.) |
| @Imreadytoball Read the first post. |
 |
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 |