Cateinya said: uSourFox said: Hello, I have a little problem with the synopsis, when I try to make the text, pops up an error I checked the generation code with both firefox and chrome and it still work for me. I even tested it with your list and it works fine. Can you tell me what browser you are using (and if possible its version) ? I can't think of anything else that could cause this problem... I use Chrome, but still tried another browser Vivaldi, but got the same error. my version chrome 55.0.2883.87 m |
Go, Bird!   |
| @Cateinya: Hey I'm trying to break your layout down to some basic elements so I can add notes and make customizing easier later for Modern CSS Noobs like me. The basic grid seems to be here, but do you already know how to make the list table stretch out to a % the user can set, along with having it centered? I want ppl to be able to adjust the table width and therefore the number of covers as we had with these layouts:   ANy help would be appreciated! /* COVER TEST (Bisho Sailor Moon)*/ a img{ height: 300px !important; width: 200px !important; background-size: contain !important; display: block !important; border: solid gold 3px !important; } .data.image a[href*="/14751/"]:before{ background-image:url('https://myanimelist.cdn-dena.com/images/anime/11/60085.jpg'); } .data.image a:before{ height: 300px; width: 200px; background-size: contain; display: block; border: solid red 3px; content: ""; position: absolute; } /* GRID BASICS*/ .list-block { /* variables used in calc (explicit names) */ --height-img: 250px; --height-info: 130px; --margin-left-bg-std: calc( var(--padding-h-img) + var(--width-img) + 10px ); --margin-left-bg-last-in-row: calc(-1 * ( var(--width-info) + var(--padding-h-img) ) + 10px ); --padding-h-img: 13px; --padding-v-img: 7px; --width-img: 178px; --width-info: 400px; padding-bottom: 200px; margin: 0 auto; } .list-table > tbody:first-child { background-color: transparent; display: block; margin-bottom: 50px; margin-top: 50px; } .list-table tbody.list-item { background: transparent; border: none; float: left; padding-left: 33px; margin: var(--padding-v-img) var(--padding-h-img) var(--padding-v-img) var(--padding-h-img); width: var(--width-img); } I can add on the rest of the layout after |
uSourFox said: Cateinya said: I checked the generation code with both firefox and chrome and it still work for me. I even tested it with your list and it works fine. Can you tell me what browser you are using (and if possible its version) ? I can't think of anything else that could cause this problem... I use Chrome, but still tried another browser Vivaldi, but got the same error. my version chrome 55.0.2883.87 m I have exactly the same chrome version so I don't think this is where the problem comes from. Can you try to test if it works with firefox (I don't have vivaldi and I don't think it will work with it anyway) ? Also, check that you copied the whole code and there is no line missing (it could cause this kind of error). |
Cateinya said: I have exactly the same chrome version so I don't think this is where the problem comes from. Can you try to test if it works with firefox (I don't have vivaldi and I don't think it will work with it anyway) ? Also, check that you copied the whole code and there is no line missing (it could cause this kind of error). oh, it's work fine with firefox, thank you |
Go, Bird! |
| @uSourFox I'm glad it finally works. But still, I don't know what the problem was, and honestly, I've run out of ideas. I'll need to investigate further... @Shishio-kun Unfortunately, I don't think it will be easy to add auto resizing to this layout. In fact, I also wanted to have this feature at first, but it would not have worked with the layout. The main purpose of this layout was the overlay positioned either on the left or the right of the cover, depending on the free space around the latter. But it can't be set automatically with css, that's why I had to define the number of covers there will be per line, and then use the "nth-child" selector to position the first 3 overlays on the right of the cover and the last 2 on the left. You can understand now why it was impossible for me to implement the resizing of the list, because it would change the number of covers per line, and thus break the layout. However, here are 2 workarounds to allow this implementation : - Getting rid of the overlay. Since it only displays additional information, it can be removed and this will still make a complete working layout with basic components. - Manually coding the behaviour to adopt when resizing the list, using "media" selector. That is to say, adding code to set the first 2 on the left and the 2 last on the right when there are 4 covers on the row, 4 on the right and 2 on the left for 6 covers... and so on for every possible number. This could be really long... but it would work. Other customizations are possible, but since the code isn't very well sorted, it can be hard to know what to change. I plan to add a customization tutorial with the most asked ones. Also, you can tell me if there some parts of the code you don't understand. |
Cateinya said: @uSourFox I'm glad it finally works. But still, I don't know what the problem was, and honestly, I've run out of ideas. I'll need to investigate further... @Shishio-kun Unfortunately, I don't think it will be easy to add auto resizing to this layout. In fact, I also wanted to have this feature at first, but it would not have worked with the layout. The main purpose of this layout was the overlay positioned either on the left or the right of the cover, depending on the free space around the latter. But it can't be set automatically with css, that's why I had to define the number of covers there will be per line, and then use the "nth-child" selector to position the first 3 overlays on the right of the cover and the last 2 on the left. You can understand now why it was impossible for me to implement the resizing of the list, because it would change the number of covers per line, and thus break the layout. However, here are 2 workarounds to allow this implementation : - Getting rid of the overlay. Since it only displays additional information, it can be removed and this will still make a complete working layout with basic components. - Manually coding the behaviour to adopt when resizing the list, using "media" selector. That is to say, adding code to set the first 2 on the left and the 2 last on the right when there are 4 covers on the row, 4 on the right and 2 on the left for 6 covers... and so on for every possible number. This could be really long... but it would work. Other customizations are possible, but since the code isn't very well sorted, it can be hard to know what to change. I plan to add a customization tutorial with the most asked ones. Also, you can tell me if there some parts of the code you don't understand. @cateinya: Ah nevermind! I got something going just now. Can you explain how the codes in red work please? I haven't seen something like this before. a img{ height: 300px !important; width: 200px !important; background-size: contain !important; display: block !important; border: solid gold 3px !important; } .data.image a[href*="/14751/"]:before{ background-image:url('https://myanimelist.cdn-dena.com/images/anime/11/60085.jpg'); } .data.image a:before{ height: 300px; width: 200px; background-size: contain; display: block; border: solid red 3px; content: ""; position: absolute; } .list-container { width: 100%; } .list-unit{ width: 90%; } .list-table tbody.list-item { float: left; padding-left: 33px; margin: var(--padding-v-img) var(--padding-h-img) var(--padding-v-img) var(--padding-h-img); width: var(--width-img); } .list-block { /* variables used in calc (explicit names) */ --height-img: 250px; --height-info: 130px; --margin-left-bg-std: calc( var(--padding-h-img) + var(--width-img) + 10px ); --margin-left-bg-last-in-row: calc(-1 * ( var(--width-info) + var(--padding-h-img) ) + 10px ); --padding-h-img: 13px; --padding-v-img: 7px; --width-img: 178px; --width-info: 400px; } .list-table > tbody:first-child { display: block; } |
Shishio-kunJan 4, 2017 11:02 PM
btw can you (or tell me how to) move the wheel to side like this? If you don't have the time I can look into later.  |
Shishio-kun said: .list-table tbody.list-item { float: left; padding-left: 33px; margin: var(--padding-v-img) var(--padding-h-img) var(--padding-v-img) var(--padding-h-img); width: var(--width-img); } .list-block { /* variables used in calc (explicit names) */ --height-img: 250px; --height-info: 130px; --margin-left-bg-std: calc( var(--padding-h-img) + var(--width-img) + 10px ); --margin-left-bg-last-in-row: calc(-1 * ( var(--width-info) + var(--padding-h-img) ) + 10px ); --padding-h-img: 13px; --padding-v-img: 7px; --width-img: 178px; --width-info: 400px; } These are variables. They work like labels : they have a name and are attached to a value. You first declare the label (for example, --width-img: 178px links the value "178px" to the label "--width-img"), and then you can use the name anywhere in the code to refer to its value (for example in width: var(--width-img) the whole "var(--width-img)" will be replaced by 178px when the browser process it, so the width's value will be 178px). It reduces repetitions inside the code and is especially useful when computing the position of the overlay, as I explain it below. The following code position the overlay (with margin-left) using a specific variable for the two possible positions : --margin-left-data-std for right and --margin-left-data-last-in-row for left (nth-of-type(5n) and nth-of-type(5n + 1) selectors target the 2 last covers on each row). /* default position */
.data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
margin-left: var(--margin-left-data-std);
z-index: 1;
}
/* information on the left (end of line) */
.list-item:nth-of-type(5n) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume),
.list-item:nth-of-type(5n + 1) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
margin-left: var(--margin-left-data-last-in-row);
}These 2 variables are computed using calc in following code. It is useful because it allows me to define a variable --margin-left-data-adjusted used inside the formula and I will just have to change its value for each data item. .data, .more-info {
--margin-left-data-std: calc( var(--padding-h-img) + var(--margin-left-data-adjusted) );
--margin-left-data-last-in-row: calc(-1 * ( var(--width-img) + var(--width-info) + var(--padding-h-img) ) + var(--margin-left-data-adjusted) );
--margin-left-data-adjusted: 0px;
border: none !important;
color: black;
}With the following code, the type is now positioned 60px from the top and 200px from the left of the overlay (which is pretty useful). .data.type {
--margin-left-data-adjusted: 200px;
margin-top: 60px;
z-index: 2 !important;
}So if you want to change the size of the covers, just change the value after --height-img and --width-img. That's how it works. Unfortunately, Internet Explorer doesn't support this (unlike most of modern browsers), so I added a fix at the end of the layout (~ l. 1177 after @supports not (margin-left:var(--checkvar)) ) which is basically the computation of all the formulas and all you need to add to get rid of all the lines with variables. So if you don't want to be bothered by it, just remove the lines with variables and move the code inside theses brackets into the main code of the layout. Shishio-kun said: btw can you (or tell me how to) move the wheel to side like this? If you don't have the time I can look into later. Here are the modifications you need to do to position it on the left of the list (~ l. 265). This is not the best way to do it (it's using transform), but it does the work. #status-menu { /* box with overflow:hidden for semicircle */ background: transparent; border-bottom: none; height: 16em; left: 88px; margin-left: -16em; margin-top: -16em; overflow: hidden; pointer-events: none; position: fixed; top:50%; transform: rotateZ(90deg); width: 32em; } |
Really weird that Firefox fails to load the cover images for me while it looks fine using Chrome. I'm using Firefox 50.1.0 currently. Anyone having the same issues or someone knows how to fix this? :/ @Cateinya This is happening because the covers import is in the DropBox import. It needs to be directly within the user's CSS to work properly |
 |
| @cateinya: Would you be ok with us updating the source code in the original post for this layout for all or any of these things: * notes are adjusted for user customization * there's a 4 columns version and full-page version (as in you see as many columns as possible for the page width). * Will use this for covers @import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore); * Default thumbnails show up what behind the high quality covers (so they will be visible if the cover import dies). * some extra customizations ppl can add which aren't in the source code (add on CSS) It's ok if not; what I would do is share you my updated version of the OP here and you can edit it, and we go back and forth until it's suitable. It would probably need your help anyhow. That would be awesome! Depends on what you want or is comfortable with you, I don't want to encroach. |
Doomcat55 said: Really weird that Firefox fails to load the cover images for me while it looks fine using Chrome. I'm using Firefox 50.1.0 currently. Anyone having the same issues or someone knows how to fix this? :/ @Cateinya This is happening because the covers import is in the DropBox import. It needs to be directly within the user's CSS to work properly @iamtaicho It's exactly as Doomcat55 said. You can still use dropbox to host the code, but for the cover import link to work, you have to put the link (~ l.10) at the same place than your dropbox link (in the "custom CSS" part of your theme), but before the dropbox link. @Shishio-kun I'm ok with you updating the original post to update the code and add these features. I'll then check the updated code so I can still help people having problems using it. Anyway I will update my works in progress to follow these rules as well. However, if I remember correctly, I had to split the tutorial into different parts because there weren't enough place in the first post. So if you plan to do the same with the customization part, I would rather post this part myself so I can add other items afterwards. @Lobnowow Thank you ! Regarding your question, yes, you can extract one part of my layout and use it as you like. Below is the extracted code used for the overlay. However, I think this code is really difficult to understand, and thus to reuse, even for a veteran. You can still look at this post where I tried to explain how it works. Since Shishio-kun is at the moment working on an update including a commented version of this layout, I suggest you to wait until it is published, as it may help you have a better understanding. The tag section is already present in the overlay, but is hidden if there is no tag. Try to add one for an entry, and reload the page. It will be displayed on top of the synopsis part. |
Cateinya said: @Shishio-kun I'm ok with you updating the original post to update the code and add these features. I'll then check the updated code so I can still help people having problems using it. Anyway I will update my works in progress to follow these rules as well. However, if I remember correctly, I had to split the tutorial into different parts because there weren't enough place in the first post. So if you plan to do the same with the customization part, I would rather post this part myself so I can add other items afterwards. OK thanks for being so willing to work with me! I will try to get to this sometime in the future. It's our most popular one atm I think |
| @cateinya: I've been thinking the best way to make this code more easy to customize and add more options would be to add sections to the top (notes for newbies) and bottom (other stuff) rather than rewriting any of the original code. edit: I've done my first revision; I added onto the original code without changing anything. How do you feel about this? I added easy cover size changing, the default covers are behind the hi res versions, and a background character can be added. This is NOT a replacement for the style of the original; what I was thinking would be very effective is the original should be updated with these codes after they have been changed to make the layout resemble the original again. So basically this revised version would be restyled to resemble the original layout, so it keeps the ability to change its cover size and add background characters easily. In another part of the topic, we can add notes on how to make use of the customizations so the layout gains new abilities without changing the default version's style. See it here: https://myanimelist.net/animelist/Shishio-kun?status=6  I'd like to add other features later when you're ok with this, thanks! The added codes are in purple. What do you think? |
Shishio-kunFeb 11, 2017 4:21 AM
| OK and here's a second revision! This is the original style but with the default covers hidden behind the HD ones (for when the import fails) and this also has the ability to change the cover size and add a background character! So basically it's the same just with additional features if the user wishes to use them. I'd like to tell the user how to make those changes in additional posts after the original. https://myanimelist.net/animelist/Shishio-kun?status=6 Stuff that's been added in purple, everything else should be the same as the original source code. |
Shishio-kunFeb 11, 2017 4:18 AM
| @Shishio-kun Good job! I looked at the code and the added possibility to display a character seems great. I think it will be easier to customize this way. However I'm not sure to understand what kind of code you want to have at the end. Do you want to keep the default code like this and add customization code at the top with !important to override the default one? Or do you want to split the already existing code into specific parts with comments on how to customize it? The first one would definitely be easier to do, but it will also bring issues for example concerning custom font colors because they are already set using !important in the original code. So maybe a mix of both solutions would be better... When all of this is done, should we make another topic in order to have all the posts together at the begining? PS: I'm sorry I could not answer earlier (I'm quite busy at the moment), but feel free to ask me anything and I'll answer as soon as possible. |
This layout is beyond awesome (i'm using it) but I have one question: 1. Why did you add - filter: blur(1px); This made all backgrounds unable to be HD or clear. (I removed it, soz) I also removed the synopsis since I can't be bothered to do the advanced part -  I'm just really lazy.  |
| @3ccentricity I used the filter code to blur the background image because it gives a nice effect with the default one used in this layout, and since I wanted to keep the focus on the list itself and not the background image. That being said, if you want your background to be displayed clearly, you can of course remove it. You've got a point. Now that I look back at this layout, I think I should have made 2 different versions: the classic one and the one specially designed to display the synopses. I'll keep it in mind for my next layouts. |
Thanks for your quick response. |
| Actually before and after installing the theme, the "Modern only" section is still grayed out and so I'm unable to tick the boxes. What could be the reason behind it? And it's showing two different images when I save and submit the code |
 |
| @FinalFlash18 It looks like you are still using the classic design, that's why the modern settings are disabled and the list does not display correctly. To switch from classic to modern, you have to follow these steps (first spoiler). Don't forget to click the "save" button under the theme list after switching to modern and selecting the correct theme. |
Cateinya said: @FinalFlash18 It looks like you are still using the classic design, that's why the modern settings are disabled and the list does not display correctly. To switch from classic to modern, you have to follow these steps (first spoiler). Don't forget to click the "save" button under the theme list after switching to modern and selecting the correct theme. Thanks, it worked out. Seems I didn't save the modern style. Also, is it possible to display the completed/dropped/plantowatch anime from a new row under "All anime"? It just gets confusing, that's all. |
|
FinalFlash18 said: Cateinya said: @FinalFlash18 It looks like you are still using the classic design, that's why the modern settings are disabled and the list does not display correctly. To switch from classic to modern, you have to follow these steps (first spoiler). Don't forget to click the "save" button under the theme list after switching to modern and selecting the correct theme. Thanks, it worked out. Seems I didn't save the modern style. Also, is it possible to display the completed/dropped/plantowatch anime from a new row under "All anime"? It just gets confusing, that's all. I guess what you are asking for is to have a blank space between the different categories while on the "All anime" page, so you can differentiate them because they form more understandable blocks? If yes, unfortunately it is really difficult right now since it is not implemented by MAL. You can have a look at Doomcat55's generator (link here) which provides a workaround. I haven't tried it yet, but I think it will be ok, as long as you do not sort your list or use the search system (which could result in headers being randomly placed in the list). |
Cateinya said: I guess what you are asking for is to have a blank space between the different categories while on the "All anime" page, so you can differentiate them because they form more understandable blocks? If yes, unfortunately it is really difficult right now since it is not implemented by MAL. You can have a look at Doomcat55's generator (link here) which provides a workaround. I haven't tried it yet, but I think it will be ok, as long as you do not sort your list or use the search system (which could result in headers being randomly placed in the list). Oh thanks for the reply. I'll think about it. |
|
| I feel kind of stupid being the only one asking this but... Is there a way to change the status title's font or maybe change it for an image? Or am I asking for too much? :S By the way I love this layout :) and that Everlasting Summer's background lol <3 |
"If you wish so ardently for your life to disappear then give it to me!"  |
| @Myrga It's not stupid at all. It rather shows that you want to customize the layout in a way that was never done before =) If you want to change the font of the status title, you have to add this piece of code (preferably at the beginning of the code, immediately after the other import links, otherwise it may not work): This is an example using the font "Roboto" from google fonts. You basically have to first import your font, then set it using the "font-family" property. Change both of them to match the font you want to use. If you want to use an image instead, then use this code: This code will hide the text and replace it by the image provided in the "background-image" property. You can resize the image by changing the "height" property value. |
Cateinya said: @Myrga It's not stupid at all. It rather shows that you want to customize the layout in a way that was never done before =) If you want to change the font of the status title, you have to add this piece of code (preferably at the beginning of the code, immediately after the other import links, otherwise it may not work): This is an example using the font "Roboto" from google fonts. You basically have to first import your font, then set it using the "font-family" property. Change both of them to match the font you want to use. If you want to use an image instead, then use this code: This code will hide the text and replace it by the image provided in the "background-image" property. You can resize the image by changing the "height" property value. It worked perfectly! Thank you so much!! :') Now I just need to decide on a background image I like hahaha |
"If you wish so ardently for your life to disappear then give it to me!" |
Skrind said: Took a quick peek at their list and could confirm that the covers are working, seems to be something on your end...Hi, i recently noticed that the covers aren't showing on anyone's lists (even yours). This is a pity since i really like this layout. Is there a possible fix for this? |
         |
| @Skrind Covers are also working for me, so you are the only one having this issue. My guess is that it is caused by your browser. Which one are you using? For stater, try clearing you cookies and cache. Also check that you are using the latest version of your browser and update it if necessary. If it still does not work, try viewing the pages using another browser. Can you post a screenshot of one of the pages as well? |
| Might also be caused by add-ons in the browser, like ad-blockers and the like. |
|
| Ok, then try the steps 3 and 4 of this guide. If it does not work, open the inspector (Ctrl + Shift + I), go to the "Network" tab, and reload the page. Check if you see the lines corresponding to the images, and that the number under the "status" column is 200. If it is not, can you send a screenshot of the inspector? |
| Actually, I have them too. It seems like lines with webp correspond to the thumbnails (by default for the lists) and the jpeg ones are the big covers (which are missing). Do you have any of these lines or do you only have webp lines? |
| The first line in the "Network" tab list should be named after the owner of the list you are viewing, then the second one should be "?code=.list-item.........." (if you do not see it, try searching for it using the "filter" field at the top). If you have this second line, is the status 200? If it is, click on the name, it should open tabs on the right, go to "preview". It should look like this: |
| Ok, so the issue is that the generation does not work because it does not have the required information (in this case, it needs the username of the list's owner). In the "headers" tab, when you scroll down, you have the "request headers". It should look like this (some things can be different, but make sure that there is a "referer" line and that it contains the URL of the list). |
| For some reason, your browser is set to prevent the referer from being passed in the request headers. I honestly have no idea why it became like this... There are various ways to solve this, but I think the easiest one is to reinstall Chrome (by doing this, the browser's settings will be reset to default and it should work again). Try to see if it works before and after connecting your google account (if you are using one), since the browser's settings could be saved with your profile and restored after connecting it. |
| 0 Skrind said: well, the charm of reinstallations is the you usually bypass all the bug fixing. It is almost always a surefire way of fixing problems caused by unknown settings. I would though, in the case that your chrome is not installed in your appdata folder (assuming you are using Windows), advise you to delete the contents of this folder instead. This will clear all your settings and history, just like reinstalling, but it is quicker. is there another easy way that doesn't involve uninstalling anything? |
|
| I guess it is, yes. But since I never saw this kind of issue, and even though we now know what the exact problem is, I am running out of ideas to try to solve it. Maybe you can have a look at this chrome extension, and see if you can use it to enable the referer headers for every page of MAL... |
Skrind said: Hi, i recently noticed that the covers aren't showing on anyone's lists (even yours). This is a pity since i really like this layout. Is there a possible fix for this? I'm having this problem as well! I don't think any of my account's settings and extensions are doing this either. I tried to download the referer extension you linked but I have no idea what it is or how it's supposed to work. I hope a solution can be found soon >.< |
 |
More topics from this board
» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPENShishio-kun - Nov 18 |
2 |
by Shishio-kun
»»
Nov 18, 5:01 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
29 |
by floral_sacrifice
»»
Nov 15, 10:24 AM |
|
» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 )Valerio_Lyndon - Aug 1, 2022 |
94 |
by ddaruu
»»
Nov 13, 9:18 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
55 |
by _cjessop19_
»»
Nov 12, 4:45 AM |
|
» Load all entries at once in modern style?tirafesi - Nov 3 |
1 |
by Shishio-kun
»»
Nov 7, 1:44 AM |