QueenCythia said: Shishio-kun said: QueenCythia said: I have some problem with this layout: It won´t work on my Manga list. If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga. How do I fix it? You don't have any CSS on your manga list atm so its hard to identify what's wrong without seeing. It sounds like you added the anime list to both lists or used the anime cover for the manga list. Try to add the manga style with manga covers CSS to the manga list separate. If you don't know how to add the manga covers, look in the parenthesis under Generated Covers, replace whats in parenthesis with this http://dl.dropbox.com/u/49469857/MAL/premade/manga.css Also you learn how to add manga list style CSS separately here: http://myanimelist.net/forum/?topicid=485001 I changed it to the list style again so you can see what I mean. When I add the style to my Manga list, Random pictures shows up that dosen´t have anything to do with the Manga. While my Anime list works fine? (Sorry I´m rather confused about this...But I´m not that good with CCS codes) OK it looks like you're using the anime list CSS on the manga list. You can do that you just need to have the CSS you put on the manga list with a switched out code (see below). You do have- two different CSS edit boxes right- one for the anime list and one for the manga list? In the manga list's CSS edit box you have to switch the part I told you about, go to the box where you put in the manga list code and look in the parenthesis under Generated Covers, replace whats in parenthesis with this http://dl.dropbox.com/u/49469857/MAL/premade/manga.css |
| I was wondering when you are going to update your premade code beyond 4500 entries for the anime and manga lists. Or is their a way for us to do that manually? For the photo's that have the default pictures displayed instead of the correct images. |
  |
| You can generate your own CSS file with all your personal entries with the following program: http://myanimelist.net/forum/?topicid=436031 Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links. But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons. |
u531355 said: You can generate your own CSS file with all your personal entries with the following program: http://myanimelist.net/forum/?topicid=436031 Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links. But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons. Thanks but the link to the generator is broken. http://dl.dropbox.com/u/78340470/MALmoreCSSgenerator.zip Also the one you have linked on that thread contains malicious file. http://dl.dropbox.com/u/49469857/MAL/premade/MALmoreCSSgenerator.zip I tired to use Hahaido's Generator since it alot user friendly, but i can't get it to work either. I followed the tutorial and i got an entire huge line of @more codes for my entire list that have been updated with the generator when i click on "Go" I added these entries right after /* 1) Generated covers */ then the rest of the code for the square layout. /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/theme.css); /* 5) Addons - Add as many as you want */ /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/seasons.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ I also tried using the dropbox installation to create a separate @import compiled file, but when i installed the application i was confused exactly where to put the CSS entry files and how to compile them. All it shown was a folder that displayed but when i tried copying the CSS files nothing happened. Something is definitively wrong, i am a noobie at this, its my first time. It doesn't display my list style at all so if you find out what problems i am having, that would be great, thanks! In any case i returned my original CSS code with the square layout so my list does not looked all screwed up. |
ArtimesGamerJan 11, 2013 3:44 PM
| |
link9us said: u531355 said: You can generate your own CSS file with all your personal entries with the following program: http://myanimelist.net/forum/?topicid=436031 Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links. But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons. Thanks but the link to the generator is broken. http://dl.dropbox.com/u/78340470/MALmoreCSSgenerator.zip Also the one you have linked on that thread contains malicious file. http://dl.dropbox.com/u/49469857/MAL/premade/MALmoreCSSgenerator.zip I tired to use Hahaido's Generator since it alot user friendly, but i can't get it to work either. I followed the tutorial and i got an entire huge line of @more codes for my entire list that have been updated with the generator when i click on "Go" I added these entries right after /* 1) Generated covers */ then the rest of the code for the square layout. /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/theme.css); /* 5) Addons - Add as many as you want */ /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/seasons.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ I also tried using the dropbox installation to create a separate @import compiled file, but when i installed the application i was confused exactly where to put the CSS entry files and how to compile them. All it shown was a folder that displayed but when i tried copying the CSS files nothing happened. Something is definitively wrong, i am a noobie at this, its my first time. It doesn't display my list style at all so if you find out what problems i am having, that would be great, thanks! In any case i returned my original CSS code with the square layout so my list does not looked all screwed up. You need to add the import link similar to this: http://dl.dropbox.com/u/78340470/shishio-kun_anime.css under the Generated Covers line and nothing else, or at the very top of the CSS. Making your own import CSS is an expert level tactic because so many ppl have trouble with it, so you just have to keep doing it till its right. You can use this tutorial to make your own cover CSS and import it, I've updated it for all the recent changes to Dropbox and this U5's generator. You should start with a new generator and begin from step 1 again. http://myanimelist.net/forum/?topicid=443333&show=0#post1 I have a new link with the new generator too. http://dl.dropbox.com/u/78340470/Past%20Stuff/MALmoreCSSgenerator.zip btw if his link says malicious file, don't worry its just a misread. Browsers and virus programs read certain files (especially self extracting ones) as malicious but it doesn't mean they contain a virus from the site unknown to the uploader or something like that. If it says malicious file and the uploader or website are unknown, then its more likely there could be a problem but thats not the case here. |
| Is it posible to align the covers to the center because when its a smaller screen and it shows only 3 covers there will be empty space on the side because it could just barley not fit a 4th cover in there. Example |
Fynov said: Is it posible to align the covers to the center because when its a smaller screen and it shows only 3 covers there will be empty space on the side because it could just barley not fit a 4th cover in there. Example Try adding this at the bottom of the CSS edit box: #list_surround { margin: 526px 0 43px 105px !important; width: 70% !important; } Let me know if it works for you, not sure since most of the CSS is imported. |
Fynov said: Shishio-kun said: Try adding this at the bottom of the CSS edit box: #list_surround { margin: 526px 0 43px 105px !important; width: 70% !important; } Let me know if it works for you, not sure since most of the CSS is imported. Nope, did not have the desired effect all it did was make the area for the cover smaller so it could only fit 2 per row and it still had the empty area. My biggest problem is i have 2 screens difrent sizes and i also want for it to always neatly fit no matter the screen size so i can't do it by just massing with the margins. I'm looking if there is a way to just align the covers to the center like there is with text-align, if there isn't i'm just gona have to deal with my ocd =) Hmm ok I installed the Square layout to my list and I think I might have an idea of what you are trying to do, try this instead #list_surround { left: 50% !important; margin-bottom: auto !important; margin-left: auto !important; margin-right: auto !important; margin-top: 512px; width: 729px !important; } I don't have a 1920 widescreen to check but this seems to keep it to three titles on a row on all resolutions, and keeps it centered in the middle of all screen resolutions. If you're trying to make it so it always has no gap on all resolutions with the size of the pics always taking up the same portion, then you'd need to take the import out and rewrite it so the cover pics and the position of the stuff in the pics is all set by % and list surround is also a %. Then the pics would be 25% of the screen all the time, etc. I do that with the text box and background render on my own list. But even then it doesn't guarantee there won't be some gap here and there. Honestly it'd be best to use my resolution trick and make a CSS that adjusts it for your wide screen. That'd be much easier. http://myanimelist.net/forum/?topicid=524033 |
Fynov said: Shishio-kun said: Try adding this at the bottom of the CSS edit box: #list_surround { margin: 526px 0 43px 105px !important; width: 70% !important; } Let me know if it works for you, not sure since most of the CSS is imported. Nope, did not have the desired effect all it did was make the area for the cover smaller so it could only fit 2 per row and it still had the empty area. My biggest problem is i have 2 screens difrent sizes and i also want for it to always neatly fit no matter the screen size so i can't do it by just massing with the margins. I'm looking if there is a way to just align the covers to the center like there is with text-align, if there isn't i'm just gona have to deal with my ocd =) Check out my manga list, I got this cuz I have 2 screens too, 1920x1080px and 1280x800px and I make this layout to fit any resolution. Sorry, I can't post the code cuz I'm not in home, so I can't look at my files.. |
al_exs said: Check out my manga list, I got this cuz I have 2 screens too, 1920x1080px and 1280x800px and I make this layout to fit any resolution. al_exs uses display:inline-block; instead of the float:left; property. This needs to update the base layout file but it adds some bugs with the paddings or I don't know what. However, if you only have one resolution, one easy thing is to adapt the max-width property to 3 times the width of one cover wich is 242px. So it makes max-width: 726px; in this case. PS: I added a new addon to put your top-bar on the right side of your list. |
| Is there other places where you can get addons for this layout or just the ones you post will work? |
I might be missing something here but this theme needs uggghh.. this button... |
| Ok, I've got everything working the way I wanted it to except for the background wallpaper; how do I add that? Also, how do I change the text's colour, and change the position of the words "watching", "completed" etc? They're off-centre on my 1080p display and it's really bothering me, haha. |
Spades-DeuceFeb 19, 2013 8:37 PM
  |
GoldenBRS said: I get volumes instead of episodes. liked the list thanks Check the first post, do you have the settings he recommends under: Some list settings are needed for this layout. if you do then try adding td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before { content: "Volumes: "; display: none !important; } Should clear away the volume text or take out display none and make it whatever you want instead. Not sure if it needs to be imported or not dont' see why not |
FMA-Xorcist said: This is awesome! Thanks! (^__^) I have a question, though. I want to add a picture of Yuno Gasai on both sides of the list instead of Asuka; how do I do that? If anyone could answer that, I would be very happy. :D Create your own css that you put online on dropbox for instance and change the links of Asuka to Gasai. You can also adapt the margin-left, you will find 2 of them in the css, the negative one is for the left picture and the positive one for the right picture Okay buy which links i have to change because in the css it's have only body:after { pointer-events: none; position: fixed; bottom: 11px; width: inherit; min-width: inherit; max-width: inherit; margin-left: 212px; content: url(RIGHT.png); text-align: right; z-index: 1; } |
| I made it 1920x420 but it repeated it self on parts to make it all fit...does that mean I need to make it bigger? |
 |
| How do I make the background area around the pictures transparent so you can see the background image? I've tried something that I thought would work but no matter the number i put in it will only be completely invisible for me. |
Omegadark said: How do I make the background area around the pictures transparent so you can see the background image? I've tried something that I thought would work but no matter the number i put in it will only be completely invisible for me. Add this at the end: #list_surround {background-color: rgba(1, 149, 195, 0.6);} and change 0.6 to whatever you want |
| Hi; I really liked this style, thanks for the effort. On a side note the only thing I want to ask is how to always show tags on titles that have a set tag without hovering the mouse over it and to keep it hidden on titles without one. If that's asking too much then how can I set it so it always shows the tags square? |
u531355 said: Omegadark said: How do I make the background area around the pictures transparent so you can see the background image? I've tried something that I thought would work but no matter the number i put in it will only be completely invisible for me. Add this at the end: #list_surround {background-color: rgba(1, 149, 195, 0.6);} and change 0.6 to whatever you want Thanks so much |
netoxr2000 said: Hi; I really liked this style, thanks for the effort. On a side note the only thing I want to ask is how to always show tags on titles that have a set tag without hovering the mouse over it and to keep it hidden on titles without one. If that's asking too much then how can I set it so it always shows the tags square? To display only the tags panel on titles with tags would require to display only the links, and not the td anymore. But I don't want to do that right now. To display the tag panel all the time add this at the end of your code: .td1[width="125"], .td2[width="125"] {display: block;} |
u531355 said: To display only the tags panel on titles with tags would require to display only the links, and not the td anymore. But I don't want to do that right now. To display the tag panel all the time add this at the end of your code: .td1[width="125"], .td2[width="125"] {display: block;} Thanks, that fixes it for the meantime. |
| Sorry to ask again, but how do I make the area around the icons and buttons on the header picture transparent? |
| opacity: 0.9; or lower the number if you want it to be even more transparent (0.1-0.9) Edit it in the style.css and add the opacity Line as shown in the Spoiler. If that's sufficient enough |
sibbo7 said: opacity: 0.9; or lower the number if you want it to be even more transparent (0.1-0.9) Edit it in the style.css and add the opacity Line as shown in the Spoiler. If that's sufficient enough Hmm I tried that, but it didn't work. https://dl-web.dropbox.com/get/88.css?w=AADXgcfB9FkazXofubjGFiMWvTZHmMwBGDcoKCVM7VgvhA I put opacity in the two places you listed. |
Omegadark said: sibbo7 said: opacity: 0.9; or lower the number if you want it to be even more transparent (0.1-0.9) Edit it in the style.css and add the opacity Line as shown in the Spoiler. If that's sufficient enough Hmm I tried that, but it didn't work. https://dl-web.dropbox.com/get/88.css?w=AADXgcfB9FkazXofubjGFiMWvTZHmMwBGDcoKCVM7VgvhA I put opacity in the two places you listed. Add this to the bottom of your CSS edit box or an import. #mal\_control\_strip { background: none repeat scroll 0 0 rgba(1, 149, 195, 0.5) !important; } It works on my manga list. You should put that in an imported CSS instead putting it in the edit box if you can. If you notice it stops working you have to readd the slanty lines \ back after #mal and control and save again. btw the import you posted doesn't seem like a correct import and I don't see it on your CSS at all. |
Shishio-kun said: Omegadark said: sibbo7 said: opacity: 0.9; or lower the number if you want it to be even more transparent (0.1-0.9) Edit it in the style.css and add the opacity Line as shown in the Spoiler. If that's sufficient enough Hmm I tried that, but it didn't work. https://dl-web.dropbox.com/get/88.css?w=AADXgcfB9FkazXofubjGFiMWvTZHmMwBGDcoKCVM7VgvhA I put opacity in the two places you listed. Add this to the bottom of your CSS edit box or an import. #mal_control_strip { background: none repeat scroll 0 0 rgba(1, 149, 195, 0.5) !important; } It works on my manga list. You should put that in an imported CSS instead putting it in the edit box if you can. If you notice it stops working you have to readd the slanty lines back after #mal and control and save again. btw the import you posted doesn't seem like a correct import and I don't see it on your CSS at all. Thanks, it worked and yea i figured i was importing them wrong since my link titles are so different. |
Hi. I was looking for solution of my problem, but I did not found any. On my mangalist i get text "Manga" instead of number of "Volumes". Could you help me? I am complete novice for those matter. I put a screenshot below: Sorry if my english is not correct. |
u531355 said: Some list settings are needed for this layout. For both anime- and manglist, you have to check the first four columns. The Tags column can be checked too but is optional. All other checked columns won't be displayed, but they won't crash the layout either. Picture in the spoiler. |
u531355 said: u531355 said: Some list settings are needed for this layout. For both anime- and manglist, you have to check the first four columns. The Tags column can be checked too but is optional. All other checked columns won't be displayed, but they won't crash the layout either. Picture in the spoiler. Oh.. My bad. Thanks and sorry for problem. :) |
| This is awesome! Looks really nice and editing it was pretty easy. Thanks a lot for sharing :) |
| Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of |
Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of NikeHatter said: Selectors are case sensitive, it's not #inlinecontent but #inlineContentOk here's my problem. I use the exact codes but the header never shows up, help? http://myanimelist.net/mangalist/NikeHatter |
u531355 said: Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of I feel like I'm just missing something. The default "seasons" header is definitely wider than my computer resolution, yet it fits nicely. My imgur image doesn't seem to want to do the same. Would the solution simply be to resize it to my personal res, or change the aspect ratio? Thanks. |
Darkstar1141 said: I'm not sure I understand what you want. The header picture is 420px high, and it'll show the right part of the picture that your screen is able to display. For example if your header picture is 1920px wide and your screen only 1366px, it'll only display the 1366 rightmost pixels of the picture.u531355 said: Darkstar1141 said: Looks complicated.Sorry, CSS noob here. I'm wondering how to make the header image to fit smaller display sizes while being 420x1980. I've tried adding variations of I feel like I'm just missing something. The default "seasons" header is definitely wider than my computer resolution, yet it fits nicely. My imgur image doesn't seem to want to do the same. Would the solution simply be to resize it to my personal res, or change the aspect ratio? Thanks. So if you want a 1920px picture to fit your 1366px screen, yes you can resize it. But it'll look bad for ppl with wider resolutions. So I think what you want is for the picture to automatically adjust to the screen size. But there are 2 ways you can adjust it. One is to keep the 420px height and stretch the width depending on the screen resolution. Your code for that was almost correct: #inlineContent {background-size: cover;} If you use that you have to keep in mind that a 1920px wide picture would need more than 420px of height to fill the 420px on a 1366px screen. A quick math tells you it would need to be 591px high.I hope I didn't lose you .. the other way would be not to need a 1920x591px picture and just keep the 1920x420px. But then it would have to auto-adjust the height of the #inlineContent and many others elements in the code depending on the screen resolution ... that's what I think is complicated if not impossible. Blazeflack said: It's not a bug, it's a design choice. Most of the time text is not long enough for the scrollbar to appear, but it's better for the scrollbar to appear than not being able to see the end of the text at all. The following lines are responsible for this:Thanks for sharing this design, I love it. I found a small 'bug' though. When mousing over the icons in the top bar the image will switch to text, and if the text is long enough a horizontal scrollbar is shown. It doesn't look good. You may have to view another persons list to see the effect, or log out and view your own. overflow-x: auto; But if you've have a better design idea, I want to hear it, because you're right it's not perfect this way.overflow-y: hidden; white-space: nowrap; letter-spacing: -1px; |
u531355 said: But if you've have a better design idea, I want to hear it, because you're right it's not perfect this way. I actually spent some time trying to find a way to do word-wrapping while keeping the text centered, which I didn't succeed at unfortunately. CSS lacks a valign control for stuff other than table-cells. What I ended up doing was decreasing the line-height and use word-wrapping which causes the text to spawn at the top and then break to new lines if the text is too wide. #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a { display: block; position: absolute; top: 11px; width: 64px; height: 64px; line-height: 16px; letter-spacing: -1px; font-size: 0px; font-weight: bold; text-align: center; text-decoration: none; border-radius: 7px; word-wrap: break-word; }  It doesn't look as good as having the text vertically centered, but since I have to choose between 2 bad solutions, I think this is the better one. |
removed-userMay 29, 2013 9:31 AM
| Thanks u531355, that addressed my confusion. Thanks for the awesome layout. |
AvalonBright said: Just discovered this yesterday, and it's absolutely gorgeous! One thing though, I'm a complete newb to CSS stuff (literally I have no idea what I'm doing), and I'd love to put a background image on my anime list instead of the plain blue background. How do I go about doing that? I didn't see anything in the css that seemed to suggest adding an actual image instead of just colors, so I'm assuming it needs written in from scratch :( Add to bottom of box /* AREA AROUND THE TITLES AND COVERS Change the color and transparency here. The first three numbers are the amount of red, then green, then blue; can be 0-255. The last number is how transparent it is. Can be from 0.0 - 1.0. 0.0 is completely transparent. */ #list_surround { background-color: rgba(1, 149, 195, 0.0); } /* BACKGROUND BEHIND TITLES */ body { background-color: transparent; background-image: url("http://i.imgur.com/kkze0IX.jpg"); background-attachment: fixed; background-position: top; background-size: cover; } |
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 |