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; } |
Blazeflack said: 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. Thank you for posting your code, people who want the other bad solution can now get it. |
| Hey just joined the club since I just got one of my own premade CSS layouts. Though everything's been working out fine as of yet, I seem to not get how to fix one thing. I don't know if this has already been answerd, though I couldn't find anything in the thread regarding this. I would like to know if there's a way to center the font at the overhead bar, displaying which tab you're on.  This is my first time dealing with CSS, so I'm a complete newb at it. Though great work with the premade layouts! Liking them all alot! |
RosemarkJun 8, 2013 5:15 AM
| Add this code after the options: .header_title {padding-left: 0px;} |
u531355 said: Add this code after the options: .header_title {padding-left: 0px;} Thanks for the fast reply, it fixed the problem! :) |
sayami said: I would like to change the top bar's style completely to one of the styles here. How should I start? This list has its own top bar built in the #2 CSS. That CSS has a group of MAL top bar codes like #mal_control_strip and what not all starting with #mal that interfere with the top bar mods. You could copy the CSS from the link put it in your CSS edit box or another import, then delete those codes then use a top bar import more easily. If you don't know how to do that ask back. |
| Thanks a lot, now it works :) But one problem still remains for me, and it is the Manga title, Score, Chapters, Volumes buttons, which were under the top bar.They're still at the same place. How should I move them somewhere else or erase them? |
sayamiJun 11, 2013 1:55 AM
 |
| It's this selector: .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table {} You can change it's current position or make it display: none; |
| Thank you so much, it works now perfectly :) |
|
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 |
7822 |
by Thereisnoonehere
»»
Yesterday, 4:04 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and TemplatesShishio-kun - Feb 16, 2023 |
41 |
by ohpishhposh
»»
May 25, 5:04 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1207 |
by laBelphe
»»
May 23, 7:30 PM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
May 12, 12:00 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |