| My list looks fine on Firefox, but when I look at in on Chrome the progress column is jagged. Any idea what's wrong or how to fix it? |
 |
LEGOF said: My list looks fine on Firefox, but when I look at in on Chrome the progress column is jagged. Any idea what's wrong or how to fix it? Oh, wow by the looks of it, I first didn't even notice, but looking at it closer it struck me that you probably re-designed one of the layouts I re-designed some time ago from the premade one's as well, you really did a good job...xD Anyway, that's why I felt obligated to answer you: Any idea what's wrong yes, the list in Chrome is normally "jagged" as you mentioned it, because of "Tags" what is a common problem for myanimelist site (don't ask me why). Some time ago, I decided to somehow fix this problem for my own current anime list, and I was successful, if you ask me... ^_^ how to fix it? currently I don't have much free time, so I'm not really able to play myself with layouts (well I could notify you through PM, when I will have time to fix this, but it might take quite a lot of time time untill than) but if you want to fix it yourself or if somebody would be willing to do it for you, I recommend he/she looks at the "Preview.css" of my current anime layout, where I don't have this kind of problem anymore, coz this is already resolved with codes: nth-of-type(6) span[id*="tagRow"] span[id*="tagLinks"] PS: look at the post below (thnx to Hahaido, who came up with the right codes), where I later took myself a few seconds to adjust the numbers, so that it looks good on all screens and added a code for Tags (previous editing in Tags was a pain, if you ask me): |
MonsterguyAug 15, 2013 6:55 AM
 |
LEGOF said: My list looks fine on Firefox, but when I look at in on Chrome the progress column is jagged. Any idea what's wrong or how to fix it? Play with this |
 |
Monsterguy said: LEGOF said: My list looks fine on Firefox, but when I look at in on Chrome the progress column is jagged. Any idea what's wrong or how to fix it? Oh, wow by the looks of it, I first didn't even notice, but looking at it closer it struck me that you probably re-designed one of the layouts I re-designed some time ago from the premade one's as well, you really did a good job...xD Anyway, that's why I felt obligated to answer you: Any idea what's wrong yes, the list in Chrome is normally "jagged" as you mentioned it, because of "Tags" what is a common problem for myanimelist site (don't ask me why). Some time ago, I decided to somehow fix this problem for my own current anime list, and I was successful, if you ask me... ^_^ how to fix it? currently I don't have much free time, so I'm not really able to play myself with layouts (well I could notify you through PM, when I will have time to fix this, but it might take quite a lot of time time untill than) but if you want to fix it yourself or if somebody would be willing to do it for you, I recommend he/she looks at the "Preview.css" of my current anime layout, where I don't have this kind of problem anymore, coz this is already resolved with codes: nth-of-type(6) span[id*="tagRow"] span[id*="tagLinks"] PS: look at the post below (thnx to Hahaido, who came up with the right codes), where I later took myself a few seconds to adjust the numbers, so that it looks good on all screens and added a code for Tags (previous editing in Tags was a pain, if you ask me): Ah, so you were the one who redesigned the premade layout I used. Thank you very much for redesigning it! I was trying to look for the original post but the premade layouts page only linked me to the CSS code. It's awesome to actually run into the guy who redesigned it. Thank you for your help with my list. I appreciate the explanation and consideration. Hahaido said: LEGOF said: My list looks fine on Firefox, but when I look at in on Chrome the progress column is jagged. Any idea what's wrong or how to fix it? Play with this Thank you very much Hahaido, I love how the tags are positioned so they don't run into the other columns. |
|
| I played around with my list and tried to find a way to add a white line border around my list. I managed to get it on the sides and on the totals, but I'm unable to find a way to get it on the top of the list. When I tried adding it to the header section, there was a border but it was more like an oval on the top right which didn't make contact with any part of my list. Would someone be so kind as to pointing out where in my code I can get the border on the top? Also, I'd like to know how to get rid of the top line on the totals part if possible. Thanks in advance. Here is my CSS code: EDIT: Thanks again, Hahaido. I really appreciate it. |
LEGOFAug 16, 2013 12:49 PM
|
| Try: |
|
Eagleshadow said: Hi! I'm new here, amazing club, thanks for all the tutorials. I've spent two days getting custom images to work as thumbnails in front of all my anime I care about, I'm still not finished with all the images so some images are missing at the moment. However, while doing this, it was unavoidable for the "more" button to stop working (so naturally I've hidden it, as advised). This brings up the problem of not being able to see the comments. I'm transferring my list from ANN to MAL, so I've already got a lot of comments written out as short reviews, but they aren't short enough to fit into tags section. I haven't yet pasted my comments to the MAL comments section. I need a compact way to display those comments, ideally on mouseover (similar to the way Monsterguy has it set up with tags, except I don't care much for covers). I figure it should be possible by maybe utilising the tags section in a similar way, and then use CSS content Property to insert the longer comment/review. I'm completely fine with having all the comments inside the .css file that I'd host on my dropbox. So, it seems possible, I guess, but I'm unexperienced with css and have no idea how to actually pull it off. Is it possible? Has anyone ever done anything similar? If not, would anyone be kind enough to write it for me, or at least point me in the right direction? You can manually customize the titles without using a #more CSS and .hide codes, those are intended only if you're using generators. Since you're doing it manually you can keep the #more button but no one does this since its too much busywork. There might be an easier way but this is what comes to mind for me if you're adding thumbnails manually. Try adding this to the bottom after deleting the imports and .hide code. You should be able to import this too. You need to do it with every title and you can play around with the settings with Firebug. td a[href="http://myanimelist.net/anime/9776/A-Channel"] { background-attachment: scroll; background-image: url("https://dl.dropboxusercontent.com/u/5293445/Ordered/4ever/ann/timeline/achannel.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover !important; border-radius: 7px 7px 7px 7px; left: -89px; padding-bottom: 7px; padding-left: 83px !important; padding-top: 8px; position: relative; } td a[href="http://myanimelist.net/anime/9776/A-Channel"] span { left: 89px !important; position: absolute !important; padding-top: 1px; } You can add this too so the anime title links underline on hover but only need to add once. td a span:hover { text-decoration: underline; } That will let you keep the more button if you want it instead of displaying comments, seems thats what you wanted originally.. if you still wanna post comments with the titles on the list itself I use this for unlimited space on tags http://myanimelist.net/forum/?topicid=548073&show=0#post1 just move the tag section to wherever you want it with positioning codes (ask if you don't know). And Hahaido just posted a response at the same time I did so you have two reliable options. btw iirc somebody once posted a topic here a while ago on displaying your comments like tags, if you look back several pages in this club you can find the topic if its still up. But with that there's three options for you. |
Shishio-kunAug 17, 2013 4:39 AM
| Hey everyone, I have a lot questions/problems for all of you CSS pros out there. I have no knowledge of CSS and have just been editing some of the CSS (through the tutorials) of a template that I found. Here is my list: http://myanimelist.net/animelist/delti Code: Question/Problem 1: I didn't realize this until I checked, my the list only displays properly on 1920x1080 resolution. How can I generalize it for lower/higher resolutions? Question/Problem 2: How do I get my category buttons fixed in place? I checked this and the codes there more or less broke my buttons. Question/Problem 3: How do I round off the right side of my list? The template I took the list from had the list all the way to the right originally so I guess they never coded it in. (This is what I'm talking about) Question/Problem 4: When I hover over a title on my list, the list shifts to the right and becomes unaligned. How can I keep it straight while hovering over it? Question/Problem 5: When I hover over the black bar (which says anime title, score, etc.) the tag column reappears and pushes everything out of line. How can I keep it the same after I hover over it? Question/Problem 6: Is there any way to center "Anime Titles"? This is a small complaint so I can overlook it if your already too tired from solving my other requests but the OCD in me wants it to be centered with the titles themselves lol. I understand if there are a lot of requests so it's ok if you leave some of them unanswered lol. I'm quite the picky person and completely a noob at CSS lol. Thanks for reading through the post. |
DeltiAug 17, 2013 6:19 AM
Delti said: Hey everyone, I have a lot questions/problems for all of you CSS pros out there. I have no knowledge of CSS and have just been editing some of the CSS (through the tutorials) of a template that I found. Question/Problem 1: I didn't realize this until I checked, my the list only displays properly on 1920x1080 resolution. How can I generalize it for lower/higher resolutions? Question/Problem 2: How do I get my category buttons fixed in place? I checked this and the codes there more or less broke my buttons. Question/Problem 3: How do I round off the right side of my list? The template I took the list from had the list all the way to the right originally so I guess they never coded it in. (This is what I'm talking about) Question/Problem 4: When I hover over a title on my list, the list shifts to the right and becomes unaligned. How can I keep it straight while hovering over it? Question/Problem 5: When I hover over the black bar (which says anime title, score, etc.) the tag column reappears and pushes everything out of line. How can I keep it the same after I hover over it? Question/Problem 6: Is there any way to center "Anime Titles"? This is a small complaint so I can overlook it if your already too tired from solving my other requests but the OCD in me wants it to be centered with the titles themselves lol. I understand if there are a lot of requests so it's ok if you leave some of them unanswered lol. I'm quite the picky person and completely a noob at CSS lol. Thanks for reading through the post. Most of the tutorials I mentioned are linked here: http://myanimelist.net/forum/?topicid=419405 1. List table must be 1000px, so it fits all computer screens. Then must be fixed in the center or to the right. There's easy tutorials for each of those under "Customizing the list table (colors, position, width, and shape)" and a complicated one for fixing it for phones near the bottom but you shouldn't use it unless you got a lot of exp. 2. Find #list_surround .status_selected, #list_surround .status_not_selected change position from absolute to fixed. Adjust the left to something like 100px not a negative amount. You can adjust top amount too. 3. See rounding corners tutorial then ask if having trouble. 4. I don't see that problem; still there? If so whats your browser? 5. Errors at the bottom; find the bottom part starting with this and change it to- /* HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { position: fixed; display: none; } /* TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) a { display: none; } 6. Try .table_header:nth-of-type(2) { padding-left: 300px; } adjust amount. There's always issues after so you might have more questions after we can help with in this topic or respective tutorial threads. |
Shishio-kunAug 17, 2013 9:44 AM
Eagleshadow said: Thanks for the help, you guys rock! I decided to go with moving the tag section, having it appear on mouseover and having unlimited space in it. I set everything up, and now I have two problems. Small problem is that mousing over the row shifts it a bit to the left, like this: http://i.imgur.com/vLRKpmi.png It also causes momentary lag. This only happens in chrome. Bigger problem is that unlimited tag space css trick simply isn't working for me and I don't know why. Here is my css: https://dl.dropboxusercontent.com/u/5293445/Ordered/4ever/ann/css/mal.css I added it to Oreshura (Ore no Kanojo to Osananajimi ga Shuraba Sugiru / 14749) but area is still only displaying the tag "test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag " without displaying the actual comment after it. http://i.imgur.com/8FYKD1i.png Well thats meant to go with reviewer style layouts which wasn't yours template so you need to first remove the "tag edit section" that comes right before that part in the CSS. Secondly you can't have three paragraphs for content, it has to be one solid text with no space between the last period and last quotation. You can have one space after the first quotation. Since you want three paragraphs, use the normal tags section, then this additional trick for the second paragraph under it, then you can try a third extended review with :before codes instead of after ones. Just replace the words after with before. You can move the second and third paragraph down with adding additional codes to those sections: padding-top: ###px !important; position: absolute; otherwise they'll cover each other up. The bottom should start looking like this if you want to see the first paragraph: /* HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } td.td1 span#tagLinks14749:after, td.td2 span#tagLinks14749:after{ content: "I had no idea what I was going into, literally, I didn't know to expect a harem. And at first it seemed like a love triangle anime, and it was what first 4 episodes were about. And they were really really great! Then after that, with introductions of other girls, quality fell off. Some silly things started happening. It wasn't terrible but it was a sharp contrast to how great first arc was. But then when things settled into place, it just keeps getting better all the way to the end, and ends up surpassing the first arc."; color: white; font-size: 14px; } |
Shishio-kun said: ~snip Thanks a lot! All of your comments worked except for the one regarding the tags. Now it looks like this. The tag column now creates it's own space instead of shoving over the other colums. (I also assume that once this get's fixed the top right corner will be rounded). http://myanimelist.net/animelist/delti Here is the new code: Although that bug about the titles being shifted when I hover over them is still there. I use Chrome. Also, I do plan on trying to use that advanced guide for different resolutions. I was thinking about changing the table width to accommodate smaller screen sizes (maybe resize some of the other stuff too). If I have problems with that I will be in your care again. Thanks |
Shishio-kun said: Eagleshadow said: Thanks for the help, you guys rock! I decided to go with moving the tag section, having it appear on mouseover and having unlimited space in it. I set everything up, and now I have two problems. Small problem is that mousing over the row shifts it a bit to the left, like this: http://i.imgur.com/vLRKpmi.png It also causes momentary lag. This only happens in chrome. Bigger problem is that unlimited tag space css trick simply isn't working for me and I don't know why. Here is my css: https://dl.dropboxusercontent.com/u/5293445/Ordered/4ever/ann/css/mal.css I added it to Oreshura (Ore no Kanojo to Osananajimi ga Shuraba Sugiru / 14749) but area is still only displaying the tag "test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag test tag " without displaying the actual comment after it. http://i.imgur.com/8FYKD1i.png Looking at how this person is a mere beginner with CSS, I wrote him/her a fast example: what needs to be added for each new comment (for every title you want) is: span#tagLinks14749:before { display: block !important; background: red; height: auto; width: 250px; position: absolute !important; left: 188px; border: solid 1px white; text-align: justify !important; padding: 3px 8px 8px 8px; color: yellow !important; text-shadow: none !important; border-radius: 10px; font-size: 12px; content: 'Here you can write anything, no matter how long it is. Oh, but remember this comment is written in CSS directly, so you can change each individual "window outlook" (like: colors, size, positioning,...), only in CSS directly as well !!!'; } where one needs to change: 1) span#tagLinks14749:before taken from: myanimelist.net/anime/14749/Ore_no_Kanojo_to_Osananajimi_ga_Shuraba_Sugiru 2) content:'TEXT'; 3) other things are not necessary, unless you want different appearance |
MonsterguyAug 17, 2013 7:06 PM
|
Delti said: Shishio-kun said: ~snip Thanks a lot! All of your comments worked except for the one regarding the tags. Now it looks like this. The tag column now creates it's own space instead of shoving over the other colums. (I also assume that once this get's fixed the top right corner will be rounded). http://myanimelist.net/animelist/delti Here is the new code: Although that bug about the titles being shifted when I hover over them is still there. I use Chrome. Also, I do plan on trying to use that advanced guide for different resolutions. I was thinking about changing the table width to accommodate smaller screen sizes (maybe resize some of the other stuff too). If I have problems with that I will be in your care again. Thanks Take out CSSforfoxgirls import, add this #list_surround small a:last-of-type { display: none !important; } #list_surround small { visibility: hidden; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } keeps the more button removal and won't conflict with the template anymore. The round corner shouldn't adjust automatically when you remove tags since it targets a corner you're trying to remove, so you'll need to round this corner, second to last corner: .table_header:nth-last-of-type(2) Chrome messes up a lot but its probably one of your hover codes- what you should do is save your CSS and remove the hover code sections one by one and check the layout after each removal, when the problem stops that is the problem section we need to know. When you can identify it I can figure out what to do with it then. Most ppl don't get that advanced resolution guide because they don't test out the code provided on a blank CSS first to see how the background color changes with resolution change. They just throw it on a layout and wonder why its not automatically adjusting it for their phone- it doesn't work that way. You apply it first then put codes to the resolution you want them in, and overriding codes in each resolution after. There isn't really anything more to explain about it than that. |
Shishio-kun said: Delti said: Shishio-kun said: ~snip Thanks a lot! All of your comments worked except for the one regarding the tags. Now it looks like this. The tag column now creates it's own space instead of shoving over the other colums. (I also assume that once this get's fixed the top right corner will be rounded). http://myanimelist.net/animelist/delti Here is the new code: Although that bug about the titles being shifted when I hover over them is still there. I use Chrome. Also, I do plan on trying to use that advanced guide for different resolutions. I was thinking about changing the table width to accommodate smaller screen sizes (maybe resize some of the other stuff too). If I have problems with that I will be in your care again. Thanks Take out CSSforfoxgirls import, add this damm, I must have looked at this thread a few seconds before Shishio-kun, now it seems my efforts were wasted, and I worked almost half an hour to come thz far.... Anyway, I cleaned the entire code for Delti and made it so that it fits for all screens, coz I liked the design so much : PS: Oh let me tell you Tags were removed on your list, so I didn't fix that problem at the end, coz it's a lot of work with that...hehehe |
MonsterguyAug 18, 2013 4:13 AM
|
Shishio-kun said: ~snip Monsterguy said: ~snip Thank you both very much! You both are indeed CSS gods. I played around with the different resolution code and it worked exactly like Shishio-kun said so now I just have to find the correct sizes of things for different resolutions and my list will be perfect (even in my OCD eyes). Also Monsterguy, I was thinking about cleaning up the code at one point but then I decided against it since I am not very knowledgeable about css. I can look at the code that you gave me and incorporate it into the existing code (and also take stuff out which isn't needed lol), so it definitely did not go to waste! Can't thank you both enough for the help. You have my deepest gratitude. Delti P.S Once I am done, I'll donate the theme so if you ever wanted to see the final code you can check there everyone in awhile. |
DeltiAug 18, 2013 4:29 AM
Eagleshadow said: Thanks guys, having three paragraphs for content was indeed why it wasn't working. Removing paragraphs fixed it. However, I managed to find a more convenient way to achieve paragraphs that do work. Trick was to add white-space:pre-line; after the comment, which in turn enables the usage of a inside the content, which works the same as <br> in html. Now I'm happy with pretty much everything. Guess I can live with that small Chrome bug. I'll be adding the rest of comments, images, dates and such over the course of next few days. Here is how it looks now: http://i7.minus.com/ibk9E667bj5p1f.jpg Here's css and the imports zipped, in case anyone else wants to use it, or take it apart and use parts of it: https://dl.dropboxusercontent.com/u/5293445/Ordered/4ever/css.zip Wow that white space preline trick will be very useful for some ppl! |
Eagleshadow said: Thanks guys, having three paragraphs for content was indeed why it wasn't working. Removing paragraphs fixed it. However, I managed to find a more convenient way to achieve paragraphs that do work. Trick was to add white-space:pre-line; after the comment, which in turn enables the usage of a inside the content, which works the same as <br> in html. Now I'm happy with pretty much everything. Guess I can live with that small Chrome bug. I'll be adding the rest of comments, images, dates and such over the course of next few days. Here is how it looks now: http://i7.minus.com/ibk9E667bj5p1f.jpg Here's css and the imports zipped, in case anyone else wants to use it, or take it apart and use parts of it: https://dl.dropboxusercontent.com/u/5293445/Ordered/4ever/css.zip Well you see there are many ways to solve your problem, and just now I realized that you could do it in a way that would not give you any lagging at all !!! Here is a test that can solve all your problems: PS: If you decide to use this option, you can remove "Tags" completely in your settings !!! |
MonsterguyAug 18, 2013 12:49 PM
|
Eagleshadow said: @Monsterguy Thanks for trying to help. However, I tried replacing my css with the one you wrote, and it didn't solve the chrome lag problem, neither did comment popup work, at all, in both chrome and firefox. I tried disabling the tags section in my settings, but it didn't make much difference. strange coz it should work when "Tags" are disabled, although only a comment next to anime "Ore no Kanojo to Osananajimi ga Shuraba Sugiru" should appear, sorry for not making that clear to you... could you try again and only point at anime "Ore no Kanojo to Osananajimi ga Shuraba Sugiru" ??? If it still does not work even than, than I really don't know what might the reason for that be, but just in case: Could somebody else try the code I wrote before* and tell me if the window next to anime "Ore no Kanojo to Osananajimi ga Shuraba Sugiru" even appears on your list ??? *Here is the code from before: NOTE: Eagleshadow, you will NOT have a lot of work, if you only want to use those previews, at all. The only thing you need to do after you see that it works, is make color changes and preferably some other small changes you desire. Than use function "find and replace for all" in "notepad" (program that is on almost all computers) to change the code with comments/reviews you wrote untill now and to create new code for comments. Easy not even 5 minutes of work, if you ask me. Ask for help, if you would not know anything even than...^_^ |
MonsterguyAug 19, 2013 4:40 PM
|
Eagleshadow said: @Monsterguy Yeah, I read through your code, to look at what changes you made. It was pretty clear that only the comment for Oreshura should have appeared. However, for some reason it just didn't appear on mouseover. I guess you could make an alt account to test it with if you wanted. Look at my list now and check that anime, tell me if the window appears or not: http://myanimelist.net/animelist/Monsterguy ON HOLD --> number 17 PS: It might be that you need to import this entire code not just write it in CSS !!! |
MonsterguyAug 19, 2013 4:49 PM
|
Eagleshadow said: Oh wow, it works on your list. I just tried it again and it still does not work on mine. I'm using your code right now, take a look: http://myanimelist.net/animelist/Eagleshadow I even removed both tags and dates sections to make it identical to yours. (Though I'd like to keep the dates column when/if we figure this out.) "PS: It might be that you need to import this entire code not just write it in CSS !!!" I'm not sure what exactly you mean by that. This is what I'm doing: - Going to my list style - Advanced Style CSS Editor - select Style ID#149815 (the only one) - paste your entire code there. http://i.imgur.com/dV4cZKq.gif (*and yes, i made sure to click the "update css" button) - make sure Style ID#149815 is the selected one in "Change My List Style/Anime List Style" no, no what the import means is instead of the long code(http://i.imgur.com/dV4cZKq.gif), just/only write this short code: @import "https://dl.dropboxusercontent.com/u/144008148/Premade/Requests/Eagleshadow/Anime_List.css";{} |
|
Eagleshadow said: It works when I only paste the import code you just provided. Though enabling "Start/End Dates" in list settings re-introduces the lag and makes the start date column disappear. I'm guessing fixing that would be easy for you? Or should I see if I can fix it myself? I see that the content of the imported code, and code I was manually pasting are the same (other than a a which doesn't make a difference). Would you happen to know why it works when imported and doesn't work otherwise? It makes little sense to me. I fixed it earlier so no lag anymore !!! Additionally look in the code, if you want to enable "More" function as well !!! To answer you "why the entire code needs to be imported", it is because some sectors of the code would not function otherwise (you are unable to target them in CSS) !!! PS: Oh and be sure to have your own code which you will be importing into CSS, I'm short with space on dropbox, so I will have this code up only a few more days: https://dl.dropboxusercontent.com/u/144008148/Premade/Requests/Eagleshadow/Anime_List.css The code for backup: And also backup test with "More" function enabled: |
MonsterguyAug 20, 2013 11:53 AM
|
| I'd appreciate if someone took a look at my list. There just a few things which I'm not sure how to take care of... 1. The little white "watching", how do I go about hiding it? I could paint it with the same color as the header and all that but I want to know if there's other workarounds. 2. In the header (currently watching etc) could you guys give me directions on how to make them separated? I've taken a look at tutorials but I'm not completely sure how to go on about editing the code. You can see I made them a rounded as possible for now but it's kinda ugly like that. 3. Also in the header, it looks the way I want in Firefox and everything else aside from webkit based browsers such as Chrome and Opera, could you guys inspect my code and see if you can find the why? My apologies if any of those questions could be easily answered with a search in this thread... well that's it, I dunno about searching everything. |
 |
Niyawa said: I'd appreciate if someone took a look at my list. There just a few things which I'm not sure how to take care of... 1. The little white "watching", how do I go about hiding it? I could paint it with the same color as the header and all that but I want to know if there's other workarounds. 2. In the header (currently watching etc) could you guys give me directions on how to make them separated? I've taken a look at tutorials but I'm not completely sure how to go on about editing the code. You can see I made them a rounded as possible for now but it's kinda ugly like that. 3. Also in the header, it looks the way I want in Firefox and everything else aside from webkit based browsers such as Chrome and Opera, could you guys inspect my code and see if you can find the why? My apologies if any of those questions could be easily answered with a search in this thread... well that's it, I dunno about searching everything. 1. Add this .header_title { color:transparent; } 2. Try changing the width of them like the extra space you have in "Currently Watching" 3. This is what it looks like on my Chrome with 1366 x 768 resolution.  In my opinion you should make the space from the anime titles to the "Add" a little smaller. Hope I could help :) |
| 1. I see, I see. 2. I tried that, it doesn't work. The only thing I'm able to change is the padding that makes the boxes bigger and larger. To make it more clear, I want to make it separated like this: http://myanimelist.net/forum/?topicid=412787 3. I was thinking about that, and also make the opacity a little more lower, however... that is not what I meant. When you open the list in firefox, the header has the 6 boxes in perfect same size, Chrome and Opera are the only ones that show what you're seeing (Currently Watching bigger than everything else). |
|
| How can i change the size of the preview image? |
The Heart Signature Background Created By Tite Kubo All right reserved |
| Hey there, I just recently joined MAL a few days ago, so basically I'm a total noob at BB Coding, lol. Anyways, I was inspired by some users' About Me profiles and decided to try it at my own with the help of your tutorials. I have a problem though, when I post all links, they all look extremely misaligned and messy (except for the big picture of Kagura). Is it because of the way I sliced my picture or the way I set up the codes? (I put them together to test the way it looked like) http://oi41.tinypic.com/25up7j8.jpg http://oi43.tinypic.com/2csfnte.jpg |
shiiroyasha said: Hey there, I just recently joined MAL a few days ago, so basically I'm a total noob at BB Coding, lol. Anyways, I was inspired by some users' About Me profiles and decided to try it at my own with the help of your tutorials. I have a problem though, when I post all links, they all look extremely misaligned and messy (except for the big picture of Kagura). Is it because of the way I sliced my picture or the way I set up the codes? (I put them together to test the way it looked like) http://oi41.tinypic.com/25up7j8.jpg http://oi43.tinypic.com/2csfnte.jpg Theres nothing I can tell u about the code from a screenshot so post it here in its messy state so I can look at it. |
Mirati said: How can i change the size of the preview image? Look in your code, it says in the notes... |
Niyawa said: 1. I see, I see. 2. I tried that, it doesn't work. The only thing I'm able to change is the padding that makes the boxes bigger and larger. To make it more clear, I want to make it separated like this: http://myanimelist.net/forum/?topicid=412787 3. I was thinking about that, and also make the opacity a little more lower, however... that is not what I meant. When you open the list in firefox, the header has the 6 boxes in perfect same size, Chrome and Opera are the only ones that show what you're seeing (Currently Watching bigger than everything else). 2. Take the codes you added to the button's padding to the buttons links and switch them. In case u dont know, this is the buttons padding code .status_selected, .status_not_selected this is link .status_selected a, .status_not_selected a 3. Don't know what you wanna do with it. |
Shishio-kun said: shiiroyasha said: Hey there, I just recently joined MAL a few days ago, so basically I'm a total noob at BB Coding, lol. Anyways, I was inspired by some users' About Me profiles and decided to try it at my own with the help of your tutorials. I have a problem though, when I post all links, they all look extremely misaligned and messy (except for the big picture of Kagura). Is it because of the way I sliced my picture or the way I set up the codes? (I put them together to test the way it looked like) http://oi41.tinypic.com/25up7j8.jpg http://oi43.tinypic.com/2csfnte.jpg Theres nothing I can tell u about the code from a screenshot so post it here in its messy state so I can look at it. It looks just like this; http://oi39.tinypic.com/2ega6pf.jpg |
Shishio-kun said: 2. Take the codes you added to the button's padding to the buttons links and switch them. In case u dont know, this is the buttons padding code .status_selected, .status_not_selected this is link .status_selected a, .status_not_selected a 3. Don't know what you wanna do with it. 2. Okay, not sure if I got it but I'll try. 3. In Firefox, the currently watching is the same size as all the others (completed, etc), Chrome and Opera that shows it bigger than it should. So I was wondering why is that. |
|
| Never mind, I decided to slice the image in a different way and got it to work. Btw, do pictures show on blog entries? No matter how many times I copied and pasted the http://myanimelist.net/blog.php?eid=737589 |
shiiroyasha said: Never mind, I decided to slice the image in a different way and got it to work. Btw, do pictures show on blog entries? No matter how many times I copied and pasted the http://myanimelist.net/blog.php?eid=737589 yeah but I think today there's BBcode problem but pics should show up in blogs like they do here if they're entered right: http://myanimelist.net/blog.php?eid=720018 And for future reference if you use this topic for questions you should post the code when we ask or link to the page; in almost all cases screenshots like that don't tell us anything on how to fix something. A problem can be a number of things which all look the same. We don't want to just see the problem visually we also want to investigate the code on the page and fix it (we have tools to look at and edit anyones code right on a page). |
Niyawa said: Shishio-kun said: 2. Take the codes you added to the button's padding to the buttons links and switch them. In case u dont know, this is the buttons padding code .status_selected, .status_not_selected this is link .status_selected a, .status_not_selected a 3. Don't know what you wanna do with it. 2. Okay, not sure if I got it but I'll try. 3. In Firefox, the currently watching is the same size as all the others (completed, etc), Chrome and Opera that shows it bigger than it should. So I was wondering why is that. 2. Why don't you just edit all your links individually. If you have CSS exp u don't need to review this whole tutorial just copy the code and edit your buttons as you have them now. http://myanimelist.net/forum/?topicid=416069 3. Use a Chrome hack to edit that button differently than the others http://myanimelist.net/forum/?topicid=397909 |
Shishio-kun said: Mirati said: How can i change the size of the preview image? Look in your code, it says in the notes... you dont say! the problem its were, and what exactly says |
The Heart Signature Background Created By Tite Kubo All right reserved |
Shishio-kun said: 2. Why don't you just edit all your links individually. If you have CSS exp u don't need to review this whole tutorial just copy the code and edit your buttons as you have them now. http://myanimelist.net/forum/?topicid=416069 3. Use a Chrome hack to edit that button differently than the others http://myanimelist.net/forum/?topicid=397909 2. Okay okay, I'll try that code. I wanted see if there was another way since it's a very long code to edit but... alright. 3. I see. So I need the hack to make sure it's goes the way I want. Okay. Thanks for the support Shio and Pot. I greatly appreciate it. |
|
Shishio-kun said: shiiroyasha said: Never mind, I decided to slice the image in a different way and got it to work. Btw, do pictures show on blog entries? No matter how many times I copied and pasted the http://myanimelist.net/blog.php?eid=737589 yeah but I think today there's BBcode problem but pics should show up in blogs like they do here if they're entered right: http://myanimelist.net/blog.php?eid=720018 And for future reference if you use this topic for questions you should post the code when we ask or link to the page; in almost all cases screenshots like that don't tell us anything on how to fix something. A problem can be a number of things which all look the same. We don't want to just see the problem visually we also want to investigate the code on the page and fix it (we have tools to look at and edit anyones code right on a page). I see, so today, there seems to be a little problem on making the BBCode work. & I'll keep that in mind, thanks! |
 How do I keep the the category links the same as the others if I'm in that category? And make it so they don't move over to the right? The list is made completly for a certain screen resolution so I don't know how it looks on other screens. |
TheHolyPotato said: How do I keep the the category links the same as the others if I'm in that category? And make it so they don't move over to the right? The list is made completly for a certain screen resolution so I don't know how it looks on other screens. What category link code are you using, or what list is it on? If its on your manga list, its private. There's one code for the links thats very very long but it lets you set the links the same on every category, the one in this topic, maybe it will be better for what you're doing. http://myanimelist.net/forum/?topicid=416069 |
| Woops accidently put the img in the spoiler meant to be the code... Oh and this is where I'm working on it www.myanimelist.net/animelist/linkswordsman |
| As Shishio says, read... /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the actual section by changing the numbers after the top and left codes. Resize the pic with the px amount after background-size:. It will resize the actual cover pic! Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too. Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically). Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: 50% 50% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 350px; left: 670px; position: fixed; top: 158px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; } |
al_exsAug 24, 2013 5:45 PM
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
»»
2 hours ago |
|
» 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 |