I0me0 said: Thanks. Everything is right but just having a problem with my avatar banner. After selecting a picture it only covered half of the banner (avatar slot) If u have any solution please let me know. It will be appreciated. If i was not able to explain please view my mal. You will understand what i mean't. Thanks If I follow you, then try adding one of these to the bottom of your CSS. They should both force the avatar to fill the space, although with slightly different methods. .list-table .list-table-header::after {
background-size: cover;
}.list-table .list-table-header::after {
background-size: 100% 100%;
}Or, if those don't to what you wanted because you meant the large banner above the list, then use one of these instead: #list-container .list-status-title::after {
background-size: cover;
}#list-container .list-status-title::after {
background-size: 100% 100%;
} |
kaylyn said: I'm currently using this theme: https://myanimelist.net/forum/?topicid=1863392 How do I add the menu buttons (quick add, anime list, manga list)? And would I be able to position the buttons above my name? This code should do that. Just add it to the bottom of your CSS. It will look like this:  |
HollowYears said: Is it possible to change the direction link of the regular anime and manga buttons on a profile?  For example for my profile, I would like it to lead to this link, in stead of the regular link that works in general. It would be nice if it could show the scores from 10-1 right away. Only for yourself, not for other people. If you want people to be directed to that link, I'd recommend putting a big in-your-face image about it on your profile. You can see the BBcode tutorials in this club if you need help doing that. |
-Zephyr- said: So I'm working on a graphic for my profile (not list layout) and it's gonna be 1 graphic with everything on top of it. On my current profile, I have a list with spoiler buttons for my top 10 favorite anime openings. How, if possible, can I apply such a list on the type of layout I'm working on? Thanks! You can have a spoiler as you do now with graphics inside the spoiler, or you can have it all displayed from the get-go in your graphic (with no spoiler). Unfortunately it's not possible to stylize the spoiler dropdown, if that is what you are asking. |
Valerio_Lyndon said: kaylyn said: I'm currently using this theme: https://myanimelist.net/forum/?topicid=1863392 How do I add the menu buttons (quick add, anime list, manga list)? And would I be able to position the buttons above my name? This code should do that. Just add it to the bottom of your CSS. It will look like this: Thank you! Thats exactly what I wanted. Is there a way I can hide some of the buttons? For example, I don't want the export, list settings, or logout buttons to show. Edit: accidentally quoted twice |
kaylyn said: Thank you! Thats exactly what I wanted. Is there a way I can hide some of the buttons? For example, I don't want the export, list settings, or logout buttons to show. Yep, that's possible. :) Just add this below everything else. .list-menu-float .icon-menu.export,
.list-menu-float .icon-menu.setting,
.list-menu-float form {
display: none;
} |
Thank you so much - this is fantastic! I ended up getting it all in, but there is just one thing. I was thinking for the synopsis part to be more like a button, where you click on it, and a pop-up comes, similar to how the filter works. If this is not possible, that's okay, but I was wondering if it is. If so, is it just the code below that must be changed, or does the loaded css have to be changed? Again, I hope this isn't impossible, and thank you so much! Edit: I edited the positioning and stuff of the synopsis so it's better. If the button and pop-up aren't possible, I think that's okay cuz it looks nicer now. I'd still like to know if it is possible to add extra buttons in. Thanks again. |
Uji_Gintoki_BowlOct 19, 2020 5:26 AM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Valerio_Lyndon said: -Zephyr- said: So I'm working on a graphic for my profile (not list layout) and it's gonna be 1 graphic with everything on top of it. On my current profile, I have a list with spoiler buttons for my top 10 favorite anime openings. How, if possible, can I apply such a list on the type of layout I'm working on? Thanks! You can have a spoiler as you do now with graphics inside the spoiler, or you can have it all displayed from the get-go in your graphic (with no spoiler). Unfortunately it's not possible to stylize the spoiler dropdown, if that is what you are asking. Hey thanks! Yeah I was only asking because I would imagine that if I add a spoiler button on the graphic since it's going to be split up into pieces for buttons/links, when the spoiler button is clicked it may split and distort the graphic a bit. |
Uji_Gintoki_Bowl said: I was thinking for the synopsis part to be more like a button, where you click on it, and a pop-up comes, similar to how the filter works. If this is not possible, that's okay, but I was wondering if it is. If so, is it just the code below that must be changed, or does the loaded css have to be changed? You can make the synopsis only activate when you click on it by adding this new CSS. But, it will still deactivate once you take your mouse off the area, and can't quite emulate the functionality of something like the filter menu.  /* Behavioural Change for Synopsis Button */
.add-edit-more:before {
content: "";
z-index: 2;
position: absolute;
right: -35px;
top: calc(50% + 12.5px);
width: 77.5px;
height: 21.5px;
border-radius: 10%;
transform: translate(50%, -50%);
cursor: pointer;
}
.add-edit-more:active:before,
[class^="re"]:hover ~ .add-edit-more {
pointer-events: none;
} |
CelbreX said: So I decided to try another design, which is similar to the interface of a mmo. Atm I'm trying to put everything in its position. While doing that i encountered a few problems. 1) I'm trying to implement the anime stats graph from my profile into my list. Giving it a height, width, color and a set its position won't work. (Doesn't show up) Could you provide the code that isn't working? Reasons why it may not work are very varied and specific to each case, so it'll be easier to debug what you have instead of listing off 100 ways it might be going wrong. CelbreX said: 2) I want to add condicional statements that show different images based on the ratings. What is the best way to do that since mal only allows the use of css. So you want different styling depending on the score of each item? As in, a score of 7 would have different styling than a score of 8. Am I correct? If so, this is possible, yes. Normally, styling based on the contents of a section isn't possible, but due to a recent addition MAL made to the HTML, there are some classes which the CSS can hook onto. It's not quite the same as conditional or "if" statements, since it's just using what we are provided by the HTML, but it will serve the same purpose here. An example of this code can be found in the spoiler below. All these classes can be found by looking through the HTML using your browsers' Inspect Element tool. If you need any help getting it to display the images you want, you can share what images you wanted to use and describe how they should display and I can most likely help. |
Valerio_Lyndon said: Uji_Gintoki_Bowl said: I was thinking for the synopsis part to be more like a button, where you click on it, and a pop-up comes, similar to how the filter works. If this is not possible, that's okay, but I was wondering if it is. If so, is it just the code below that must be changed, or does the loaded css have to be changed? You can make the synopsis only activate when you click on it by adding this new CSS. But, it will still deactivate once you take your mouse off the area, and can't quite emulate the functionality of something like the filter menu. /* Behavioural Change for Synopsis Button */
.add-edit-more:before {
content: "";
z-index: 2;
position: absolute;
right: -35px;
top: calc(50% + 12.5px);
width: 77.5px;
height: 21.5px;
border-radius: 10%;
transform: translate(50%, -50%);
cursor: pointer;
}
.add-edit-more:active:before,
[class^="re"]:hover ~ .add-edit-more {
pointer-events: none;
}Hmm, I'll keep it in mind. It does make it more obscure for people viewing so I may or may not use it. Is there possibly even a way to make the synopsis text a toggle button, where every time I click it, the blurb switches between being there and not? |
Uji_Gintoki_BowlOct 20, 2020 2:39 PM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Uji_Gintoki_Bowl said: Is there possibly even a way to make the synopsis text a toggle button, where every time I click it, the blurb switches between being there and not? As odd as it may seem, there is not. That would require a change to the HTML (the base layer of the page), which unfortunately we don't have access to. This semi-button is as far as CSS can be pushed in this regard. |
CelbreX said: https://pastebin.pl/view/e0164eb6 Here is my entire code so far. Its pretty messy and probably has some unnecessary stuff in it. You can find it from lines 209-220. Ah, I see. I take it this is the code in question, and you wanted the graph from the profile to display.  .profile .user-statistics .stats-graph.mt8 {
background-color: #f6f6f6;
border-radius: 2px;
display: block;
height: 18px;
margin: 0 auto;
overflow: hidden;
width: 380px;
position:fixed;
top:400px;
left:300px;
z-inedx:10;
}The reason this isn't working is because CSS can only style what is on the page, and can't create new elements. This element (the .stats-graph) only exists on the profile page. There is no such stats-graph on the animelist, so the page ignores this CSS. Each CSS selector (the bit before the curly braces) has to match some HTML on the specific page it is on. I originally thought you meant a graph from Anime+ like this one:  Adding in a custom image-based graph like the one above is possible by adding it as a background-image to an element of our choosing. But, there isn't a way of getting MAL's profile graph onto the animelist. Or at least, not an auto-updating one. You could take a screenshot of your profile and put that on the list, but it'd be a pain to keep it updated. |
Valerio_LyndonOct 22, 2020 1:42 AM
Valerio_Lyndon said: Uji_Gintoki_Bowl said: Is there possibly even a way to make the synopsis text a toggle button, where every time I click it, the blurb switches between being there and not? As odd as it may seem, there is not. That would require a change to the HTML (the base layer of the page), which unfortunately we don't have access to. This semi-button is as far as CSS can be pushed in this regard. Ah, that's okay. Thank you for your help in getting all of these features into my list! I really appreciate it. EDIT: Ah, I've run into a major(ish) problem with the synopsis thing. I have MALSync (browser extension to auto update) downloaded on chrome and it edit's site info to display certain extra things. It also is somehow interfering with the display for the descriptions such that when I hover over the area where a synopsis would be, it pops up, with a hyperlink to a source to watch it (only for shows which I've visited using the extension before). Thsi gives you an idea: https://streamable.com/fq90ws Nvm, I fixed it by disabling certain things on the browser extension. |
Uji_Gintoki_BowlOct 23, 2020 2:08 PM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
mooshyloo said: Hello guys I have a question. I'd like to use spectrojan's anime list CSS Code because it is absolutely amazing and it seems to allow you to make sub-ratings of an anime. How can I get his CSS code? his anime list link is https://myanimelist.net/animelist/spectrojan?status=2&order=4&order2=0 Moving your post here the code is @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css"; body { --avatar: url(https://cdn.myanimelist.net/images/userimages/9740834.jpg?t=1595847000); } body { --name: "Spectrojan"; } body { --character: url(https://i.imgur.com/HmjSNpQ.png) He adds the scores like this with his tags (this is his list without the CSS)  |
| Hello, I'm having trouble customizing this modern list layout. I'm trying to change the color of the anime and manga list icons. I have no issues with the custom color while logged in. Whenever I am logged out, the icons stay their original black color. What can I do to have the custom color show up to other users? Logged in example:   Logged out example:   |
 |
shortypi said: Hello, I'm having trouble customizing this modern list layout. I'm trying to change the color of the anime and manga list icons. I have no issues with the custom color while logged in. Whenever I am logged out, the icons stay their original black color. What can I do to have the custom color show up to other users? Logged in example: Logged out example: What's your CSS code? Maybe .anime #header-menu-button:before and .manga #header-menu-button:before have to have an SVG extension icon for the CSS fill codes to work on them? Could you use pink png icons for those codes instead?   |
Shishio-kun said: shortypi said: Hello, I'm having trouble customizing this modern list layout. I'm trying to change the color of the anime and manga list icons. I have no issues with the custom color while logged in. Whenever I am logged out, the icons stay their original black color. What can I do to have the custom color show up to other users? Logged in example: Logged out example: What's your CSS code? Maybe .anime #header-menu-button:before and .manga #header-menu-button:before have to have an SVG extension icon for the CSS fill codes to work on them? Could you use pink png icons for those codes instead? Thank you so much for your help. Your png images worked like a charm. I have tried fill in any way I could with #header-menu-button:before, but nothing worked. I was worried that the only solution would be to change the png icons, since svg is beyond my knowledge. |
shortypiNov 2, 2020 7:37 PM
|
Valerio_Lyndon said: -Zephyr- said: So I'm working on a graphic for my profile (not list layout) and it's gonna be 1 graphic with everything on top of it. On my current profile, I have a list with spoiler buttons for my top 10 favorite anime openings. How, if possible, can I apply such a list on the type of layout I'm working on? Thanks! You can have a spoiler as you do now with graphics inside the spoiler, or you can have it all displayed from the get-go in your graphic (with no spoiler). Unfortunately it's not possible to stylize the spoiler dropdown, if that is what you are asking. Don't mean to be a bother, but I have a few questions on that spoiler button thing. 1. I should cut out a shape for the spoiler button on the graphic just like YouTube players right? 2. If I did do that and put the spoiler button directly in there like that, would it not split the graphic which I clock the spoiler button to reveal that list? In my mind, I would end up with part of my graphic on top, a white background mess when I click the spoiler button, and then the rest of the graphic on the bottom. Thanks for your time :P |
-Zephyr- said: Valerio_Lyndon said: You can have a spoiler as you do now with graphics inside the spoiler, or you can have it all displayed from the get-go in your graphic (with no spoiler). Unfortunately it's not possible to stylize the spoiler dropdown, if that is what you are asking. Don't mean to be a bother, but I have a few questions on that spoiler button thing. 1. I should cut out a shape for the spoiler button on the graphic just like YouTube players right? 2. If I did do that and put the spoiler button directly in there like that, would it not split the graphic which I clock the spoiler button to reveal that list? In my mind, I would end up with part of my graphic on top, a white background mess when I click the spoiler button, and then the rest of the graphic on the bottom. Thanks for your time :P I don't know how spoilers work when the graphic has a space cut out just for that, tho iirc I don't think it works out. Unfortunately I'm real busy and sick these days and don't have time to test this out by making a graphic around it, slicing it, creating the BBcode, etc- my suggestion would be to test it out and see what happens. If the spoiler button on MAL doesn't fit into your graphic, then you have your answer. But I don't think anyone has put a spoiler button in a graphic because it doesn't work. I don't think you can put images on the sides of it. |
Shishio-kunNov 2, 2020 5:21 PM
shortypi said: Shishio-kun said: What's your CSS code? Maybe .anime #header-menu-button:before and .manga #header-menu-button:before have to have an SVG extension icon for the CSS fill codes to work on them? Could you use pink png icons for those codes instead? Thank you so much for your help. Your png images worked like a charm. I have tried fill in any way I could with #header-menu-button:before, but nothing worked. I was worried that the only solution would be to change the png icons, since svg is beyond my knowledge. Awesome :D |
Shishio-kun said: -Zephyr- said: Don't mean to be a bother, but I have a few questions on that spoiler button thing. 1. I should cut out a shape for the spoiler button on the graphic just like YouTube players right? 2. If I did do that and put the spoiler button directly in there like that, would it not split the graphic which I clock the spoiler button to reveal that list? In my mind, I would end up with part of my graphic on top, a white background mess when I click the spoiler button, and then the rest of the graphic on the bottom. Thanks for your time :P I don't know how spoilers work when the graphic has a space cut out just for that, tho iirc I don't think it works out. Unfortunately I'm real busy and sick these days and don't have time to test this out by making a graphic around it, slicing it, creating the BBcode, etc- my suggestion would be to test it out and see what happens. If the spoiler button on MAL doesn't fit into your graphic, then you have your answer. But I don't think anyone has put a spoiler button in a graphic because it doesn't work. I don't think you can put images on the sides of it. Yeah, you're probably right. I guess I'll have to make a super tall graphic to fit my top 10 openings list in the profile lol. |
| hey I need help for a few things I want my modern list (I got it from he advanced modern premade section) to be dark theme and translucent, but when I add the dark-transparent code at the end of the code fro the modern style, it changes the font to serif and keeps the text black. Also, I'd like to change the text (mainly for Tags) to be sentence-case. Any help would be appreciated, thanks |
 |
BlossomBurst said: hey I need help for a few things I want my modern list (I got it from he advanced modern premade section) to be dark theme and translucent, but when I add the dark-transparent code at the end of the code fro the modern style, it changes the font to serif and keeps the text black. Also, I'd like to change the text (mainly for Tags) to be sentence-case. Any help would be appreciated, thanks This at the bottom should fix the tags .data.tags span, .data.tags span a, .list-table .list-table-data .data.tags, .list-table .list-table-data .data.tags a{ text-transform: none !important; } And for the first thing, you basically want this whole table to be dark and translucent, but with white text?  |
| hey guys, i am doing some about me profiles (i did my own that i am using right now, its actualy my first one) and i really love to do this actually ! I saw a lot of videos about this but is there any other videos more depth into content like making a about me profile with GIFS or better costumization ? i have GIMP but i think photopea is a little better. I do not have the money to pay for month to have photoshop. If someone have tips or some nice videos feel free to talk to me ! have a great day |
 |
SirSantos06 said: hey guys, i am doing some about me profiles (i did my own that i am using right now, its actualy my first one) and i really love to do this actually ! I saw a lot of videos about this but is there any other videos more depth into content like making a about me profile with GIFS or better costumization ? i have GIMP but i think photopea is a little better. I do not have the money to pay for month to have photoshop. If someone have tips or some nice videos feel free to talk to me ! have a great day Is there a profile About Me with an example of what you're trying to do? |
Shishio-kun said: SirSantos06 said: hey guys, i am doing some about me profiles (i did my own that i am using right now, its actualy my first one) and i really love to do this actually ! I saw a lot of videos about this but is there any other videos more depth into content like making a about me profile with GIFS or better costumization ? i have GIMP but i think photopea is a little better. I do not have the money to pay for month to have photoshop. If someone have tips or some nice videos feel free to talk to me ! have a great day Is there a profile About Me with an example of what you're trying to do? i really like this one https://myanimelist.net/profile/AlexandreEsteves even if there may be some personal drawings on it, i thinks its looks pretty cool, and i really want to know how to add those GIFS on the collage, and it looks soo smooth. I am really interested to do something like this even if i am years away of doing something so good and not having a proper program is harder but i dont really mind ! |
|
SirSantos06 said: i really like this one https://myanimelist.net/profile/AlexandreEsteves even if there may be some personal drawings on it, i thinks its looks pretty cool, and i really want to know how to add those GIFS on the collage, and it looks soo smooth. I am really interested to do something like this even if i am years away of doing something so good and not having a proper program is harder but i dont really mind ! This person probably made the graphic first and second they put the GIFs behind the graphic where there were holes in it to see through, or they added the GIF on top of the graphic and added more graphics around and on top of the GIF. Then they split the graphic up. I have a video on making an About Me on Photoshop (this would also work on Photopea), and this is the part where I add GIFs to it. I go over splitting the graphic up too which you'll need to do if you want to add it to MAL https://youtu.be/P6ij9yWjlVQ?t=1855 Same for GIMP including adding a graphic and splitting it up https://youtu.be/7uCkmwi6RYc?t=1755 You should be able to make an About Me and add GIFs you want to it after watching that. If you can't, then just post how far you got and what step you got stuck on. If you want to make a GIF it's best to use a recording ap or JASC Animation Shop, it's too troublesome anywhere else. I have a video on making GIFs too. https://youtu.be/4C2sDMqg8qM All the playlists are here too https://www.youtube.com/channel/UC4wMqp-gSlzfCiyis0PKlYQ You can also add AlexandreEsteves if they'll let you look at their PSD (Photoshop file) so you can learn from it. You would need a little Photoshop experience first tho to understand what to look at in a PSD. |
Shishio-kunNov 8, 2020 1:54 PM
Shishio-kun said: SirSantos06 said: i really like this one https://myanimelist.net/profile/AlexandreEsteves even if there may be some personal drawings on it, i thinks its looks pretty cool, and i really want to know how to add those GIFS on the collage, and it looks soo smooth. I am really interested to do something like this even if i am years away of doing something so good and not having a proper program is harder but i dont really mind ! This person probably made the graphic first and second they put the GIFs behind the graphic where there were holes in it to see through, or they added the GIF on top of the graphic and added more graphics around and on top of the GIF. Then they split the graphic up. I have a video on making an About Me on Photoshop (this would also work on Photopea), and this is the part where I add GIFs to it. I go over splitting the graphic up too which you'll need to do if you want to add it to MAL https://youtu.be/P6ij9yWjlVQ?t=1855 Same for GIMP including adding a graphic and splitting it up https://youtu.be/7uCkmwi6RYc?t=1755 You should be able to make an About Me and add GIFs you want to it after watching that. If you can't, then just post how far you got and what step you got stuck on. If you want to make a GIF it's best to use a recording ap or JASC Animation Shop, it's too troublesome anywhere else. I have a video on making GIFs too. https://youtu.be/4C2sDMqg8qM All the playlists are here too https://www.youtube.com/channel/UC4wMqp-gSlzfCiyis0PKlYQ You can also add AlexandreEsteves if they'll let you look at their PSD (Photoshop file) so you can learn from it. You would need a little Photoshop experience first tho to understand what to look at in a PSD. Wow this really helped me a lot. Thanks for all the help. I probably will try to ask him for the photoshop file and try to learn from that, i have little experience but i know someone who might explain it to me more in depth. Thanks !! |
|
| Hello, so I'm using the grid style 2 code from this post. I absolutely love the format and layout of the six buttons and six banners, but I prefer to go back to the basic listing anime layout since the anime images are smaller and the tags are more easily visible. Is there a way to change that part back? I suck at explaining things, so maybe this image would help explain what I'm trying to ask for: Ok nvm, it's been a while but I figured it out myself. |
.XiaoDec 7, 2020 1:34 PM
  "As promised, all that you seek, all that we desire, is prepared up there. On top of the Tower." |
Shishio-kun said: . And for the first thing, you basically want this whole table to be dark and translucent, but with white text? Yes, exactly. Thanks a bunch, it worked perfectly. |
BlossomBurstNov 9, 2020 8:15 AM
|
AllIsManga said: Hello, so I'm using the grid style 2 code from this post. I absolutely love the format and layout of the six buttons and six banners, but I prefer to go back to the basic listing anime layout since the anime images are smaller and the tags are more easily visible. Is there a way to change that part back? I suck at explaining things, so maybe this image would help explain what I'm trying to ask for: I'm thinking that would require manually removing the codes that convert the table into the grid. The problem is there are thousands of lines of code in that layout so removing them manually to get the layout just right would be very time-consuming. Unless someone wants to manually do that, I think it'd be way easier to add the desired features of the grid style layout to a default list layout. That way you get the table you want with the features of the grid layout you're using now. What features do you want to carry over from grid style to a default layout: 6 banners, 6 buttons, side render, anything else? |
BlossomBurst said: Shishio-kun said: . And for the first thing, you basically want this whole table to be dark and translucent, but with white text? Yes, exactly. Thanks a bunch, it worked perfectly.  OK, it should look like this, you can adjust the font colors by finding lines of code that say color: and after that is the color like white, grey, black, or a number. You can ask if you're trying to change a particular button color or not but they should all be in the code.
/* "Dashboard"
* List design by 5cm
* Modified by Valerio Lyndon
* Original date: 2020-JUL-28
* Revision date: 2020-AUG-09
*/
/* Changelog:
- Fixed entries after 300 not loading when layout viewed on large screens.
- Unified menu button appearance on hover.
- Fixed white pixels above MAL logo.
*/
@\import "https://fonts.googleapis.com/css?family=Source+Sans+Pro";
:root {
--background: url(https://image.myanimelist.net/ui/Ov3S4JIZkeatsSFmyuzDTmfoUMXFV2CvJ80hYf7klGY2nDn8m6XxrUfl9DLF1QRz_I4BNVldFJoJytwlXPupyUWqZK1_JDdV2Y0ZDOoaXfVUSeLsGeGE7o8X6KhZ3iP9aAwFNpqSNqD0Z2G37usdGt13HM-p2PDQXTGN1frJSH2P4ICghvIsuI4iiM5Ad8XB7hUHJJuwk1EFeDXF5_MOxk7MxpHDcowSH_oVEAt-eHpFtb8L636lm2sLQ1qWXcDEoluM6mmaPB8I8_pFM5jnI_rWzAyboZgDGbfAjoVTRCap2cSJijptZDjuiWQd1p86-got9024ffWM0D8L57b4I4we2alI3JTq2zmuwV6n1I2s0lTikKD3QtMwn6V09d-mOZuob6cCpQ49uesmU_m8XQtlKTRuWneK2qETu7yEYlGykT2BxdZnmll8APGk_8Tf1ZIqq9G54JZ6OH8CSYwrMg), fixed center/cover url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRzngptT3fPuBZGi-pCFvR6Hv0bP9iUgk11TEXbxH7SeaBxE)
}
body {
background: var(--background) !important;
width: 1058px; font: 11px Source Sans Pro; letter-spacing: 1px; text-transform: uppercase;
padding: 70px 0 0;
margin: auto;
color: white;
}
body::before,
body::after {
content: "";
position: fixed;
top: 68px;
left: calc(50% - 529px);
width: 1058px;
height: 541px;
border-radius: 10px;
pointer-events: none;
} body::before {
z-index: 60;
background: rgba(5,5,5,.5);
} body::after {
z-index: 110;
box-shadow: 0 8px 20px rgba(0,0,0,.6);
}
a {color: white;}
#header-menu-button .fa, [data-owner=""] .list-menu-float, .cover-block, .list-menu-float .icon-menu.export,
.list-menu-float .icon-menu.setting svg.icon-setting, .list-unit .list-status-title .text, #show-stats-button,
.list-unit:not(.all_anime) .status, .icon-watch.ml4,[data-owner=""] .add-edit-more span, .more,
.list-table .list-table-data .tags .edit, .list-unit:not(.watching) .icon-add-episode {display: none;}
.header {
position: fixed;
top: 0;
height: 68px;
z-index: 100;
background: var(--background);
}
.header .header-title {background: #333 15px 2px/50px no-repeat url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRzngvQqHPDcc6jatqmY_RHEj9-Z8-4goIa5WgKMI8CQvYLg);
width: 160px; height: 50px; top: 68px; z-index: 2; border-radius: 10px 0 0; border-bottom: 1px solid #555;}
.header .header-title:hover {background-color: #222;}
.header .header-menu.other {width: 160px; top: 118px; left: 0; z-index:2;}
[data-owner=""] .header .header-menu .btn-menu, .header .header-menu .header-info {font-size: 0; text-align: left; margin: 0;}
.header .header-menu .header-info {margin-top: 50px;}
#header-menu-button, .anime .list-menu-float .icon-menu.anime-list, .anime .list-menu-float .icon-menu.anime-list svg,
.anime .list-menu-float .icon-menu.anime-list .text, .anime .list-menu-float .icon-menu.anime-list:hover,
.manga .list-menu-float .icon-menu.manga-list, .manga .list-menu-float .icon-menu.manga-list svg,
.manga .list-menu-float .icon-menu.manga-list .text, .manga .list-menu-float .icon-menu.manga-list:hover {
background-color: transparent; color: #333 !important; fill: #333;}
#header-menu-button:before {content: ''; display: inline-block; width: 13px; height: 12px; margin: 0 10px 0 20px;}
.anime #header-menu-button:before {background: left/cover url(https://image.myanimelist.net/ui/psYiTUtmhCM147Lw1c2IfEdpMGgqTXOAV7TUBQQzrxk9HddL_-Sx7EGuKbYvYuAf);}
.manga #header-menu-button:before {background: left/cover url(https://image.myanimelist.net/ui/psYiTUtmhCM147Lw1c2IfEH4MpovaYtG8IwnuF48Imc3YkKXdBZRhkHFhaL-Jc1D);}
.header a, .header .header-menu .list-menu .icon-menu {display: block; width: 160px; height: 50px; transition: none;}
.header .header-menu .list-menu {top: 100px; left: 0; background: none; display: block!important; border: 0; box-shadow: none;}
.header .header-menu .list-menu .icon-menu .text {left: 48px; top: 0; font-size: 11px; color: #999;}
.header-info [href*=shared]:before {font: 14px FontAwesome; content: '\f0ec'; padding: 0 11px 0 20px;}
.fa.fa-history {padding: 0 6px 0 21px; font-size: 16px;}
.header-info [href*=login] {border-top: 1px solid #555;}
.header-info [href*=login]:before {font: 17px FontAwesome; content: '\f090'; padding: 0 12px 0 20px;}
.header-info [href*=register]:before {font: 14px FontAwesome; content: '\f234';padding: 0 12px 0 20px;}
.header-info [href*=register]:after {content: 'Register'; font-size: 11px; letter-spacing: 2px;}
.header a, .header a.username:after, .list-menu-float .icon-menu.profile:after {
content: 'Profile'; font: bold 11px Source Sans Pro; color: #999!important; line-height: 50px; letter-spacing: 2px;}
.header a:not(.header-title):hover,
.header a:not(.header-title):hover::before,
.header a:not(.header-title):hover::after,
.header .header-menu .list-menu .icon-menu:hover, .list-menu-float .icon-menu.profile:hover {
background: #222; color: white !important; text-decoration: none;}
.header a.username, .header-info [href*=register], .list-menu-float .icon-menu.setting .text .link-style-setting {
font-size: 0; letter-spacing: 0;}
.header a.username:before {content: '\f007'; font: 15px FontAwesome; padding: 0 15px 0 20px;}
.header a.username:hover:after,
.header .header-menu .list-menu .icon-menu:hover svg.icon,
.header .header-menu .list-menu .icon-menu:hover .text,
.list-menu-float .icon-menu.setting .text .link-style-setting:hover:before {
fill: white; color: white;}
.header .header-menu .list-menu .icon-menu svg.icon, .list-menu-float .icon-menu svg.icon {
width: 15px; fill: #999; top: 15px!important; left: 20px!important;}
.list-menu-float {
position: fixed;
top: 120px;
left: calc(50% - 529px); width: 160px; border: 0;
z-index: 80;
}
.list-menu-float .icon-menu {background: #333; width: 100%; transition: none;}
.list-menu-float .icon-menu.profile {background-image: none!important;
width: 110px; padding-left: 50px; text-align: left;}
.list-menu-float .icon-menu.profile:before {content: '\f007';
font: 15px FontAwesome; color: #999; position: absolute; top: 17px; left: 22px;}
.list-menu-float .icon-menu .text {font: bold 11px Source Sans Pro; color: #999;
letter-spacing: 2px; width: auto; top: 18px; opacity: 1; transition: none;}
.list-menu-float .icon-menu.setting .text {left: 0; width: 100%; height: auto; text-align: left; opacity: 1;}
.list-menu-float .icon-menu.setting .text .link-list-setting,
.list-menu-float .icon-menu.setting .text .link-style-setting,
.list-menu-float .icon-menu.setting:hover .text,
.list-menu-float .icon-menu.setting:hover .text .link-list-setting,
.list-menu-float .icon-menu.setting:hover .text .link-style-setting {
background: #333; width: 100%; color: #999; line-height: 50px; border: 0; opacity: 1;}
.list-menu-float .icon-menu:not(.profile):hover,
.list-menu-float .icon-menu.setting .text .link-list-setting:hover,
.list-menu-float .icon-menu.setting .text .link-style-setting:hover {
background: #222; width: 100%; color: white;}
.list-menu-float .icon-menu.profile:hover {
background: #222;
color: white;
}
.list-menu-float .icon-menu.profile:hover::before,
.list-menu-float .icon-menu.profile:hover::after {
color: white !important;
}
.list-menu-float .icon-menu.profile:hover:before, .list-menu-float .icon-menu.setting .text .link-list-setting:hover:before,
.list-menu-float .icon-menu.profile:hover:after, .list-menu-float .icon-menu:hover .text {width: auto; color: white;}
.list-menu-float .icon-menu.setting .text .link-list-setting {padding-left: 50px;}
.list-menu-float .icon-menu.setting .text .link-style-setting:after {
content:'List style'; font-size: 11px; letter-spacing: 2px; padding-left: 50px;}
.list-menu-float .icon-menu.setting .text .link-list-setting:before {
content: '\f013'; font: 16px FontAwesome; color: #999; position: absolute; margin:17px 0 0 -29px;}
.list-menu-float .icon-menu.setting .text .link-style-setting:before {
content: '\f1fc'; font: 14px FontAwesome; color: #999; position: absolute; margin: 17px 21px;}
.list-container {
margin-top: -2px;
z-index: 70;
padding-top: 51px;
background: none;
border: 0;}
[data-owner=""] .list-container {margin-top: -2px;}
.list-block, .status-menu-container.fixed + div.list-block {margin: 0; min-height: auto;}
.list-unit {
width: auto;
margin-left: 160px;
padding: 10px 30px calc(100vh - 609px);
background: none; border-radius: 0 0 10px;}
.status-menu-container, .status-menu-container.fixed {
position: fixed;
top: 68px;
left: calc(50% - 369px);
width: 898px;
height: 50px;
border-radius: 0 10px 0 0;
}
.status-menu-container .status-menu {
height: 100%;
margin-left: 0;
border-spacing: 36px 0;
}
.status-menu-container .status-menu .status-button {font: bold 11px Source Sans Pro; letter-spacing: 2px;}
.status-menu-container .status-menu .status-button.on {font-size: 12px; color: black;}
.status-menu-container .status-menu .status-button:after {height: 2px;}
.status-menu-container .status-menu .status-button.all_anime:after {background: #222;}
.status-menu-container .status-menu .status-button.watching:after {background-color: #2db039;}
.status-menu-container .status-menu .status-button.plantowatch:after {background-color: #c3c3c3;}
.status-menu-container .status-menu .status-button.completed:after {background-color: #26448f;}
.status-menu-container .status-menu .status-button.onhold:after {background-color: #f1c83e;}
.status-menu-container .status-menu .status-button.dropped:after {background-color: #a12f31;}
.status-menu-container .search-container #search-box input {font: 11px Source Sans Pro;
color: #999; letter-spacing: 1px; padding: 0 8px; border-radius: 10px; border: 1px solid #ccc;}
.list-unit .list-status-title {width: 100%; height: 20px; background:none;}
.list-unit .list-status-title .stats {height: auto; line-height: 0;}
.list-unit .list-status-title .stats a {color: #999; margin: 0;}
.list-table .list-table-header .header-title, .list-table .list-table-header .header-title .link.sort,
.list-table .list-table-header .header-title .link.sort:hover {color: grey;}
.list-table .list-table-header .header-title.status, .list-table .list-table-data .data.status {width: 2px; padding: 0;background: ;}
.list-table .list-table-data .data.title, .list-table .list-table-data .data.studio {height: 40px; line-height: 1.2em;}
.list-table .list-table-data .data.title .link {font-size: 11px;}
.list-table .list-table-data .data.title .add-edit-more {float: none; display: inline-block;
height: 0; font-size: 0; white-space: nowrap; margin-left: 5px; opacity: 0;}
.list-table .list-table-data .data.title:hover .add-edit-more {opacity: 1;}
.list-table .list-table-data .data.title .content-status {font-size: 9px; font-style: italic;}
.list-table .list-table-data a:not(.edit-disabled):hover {text-decoration: none; background: #444; color: white;}
.add a, .edit a, .list-table .list-table-data .data.tags {font-size: 8px; line-height:1em;}
.list-unit .loading-space {margin: 5px;}
footer {
position: fixed;
top: 609px;
left: 0;
z-index: 100;
width: 100%;
height: calc(100% - 609px);
background: var(--background);
}
#footer-block {background: none; padding: 20px;}
#copyright {font: 9px Source Sans Pro; color: white; text-shadow: 1px 1px 2px #333; padding-top: 15px;}
#copyright:before {content: 'Designed by 5cm.';}
This at the bottom should fix the tags
.data.tags span,
.data.tags span a,
.list-table .list-table-data .data.tags,
.list-table .list-table-data .data.tags a{
text-transform: none !important;
}
#header-menu-button, .anime .list-menu-float .icon-menu.anime-list, .anime .list-menu-float .icon-menu.anime-list svg, .anime .list-menu-float .icon-menu.anime-list .text, .anime .list-menu-float .icon-menu.anime-list:hover, .manga .list-menu-float .icon-menu.manga-list, .manga .list-menu-float .icon-menu.manga-list svg, .manga .list-menu-float .icon-menu.manga-list .text, .manga .list-menu-float .icon-menu.manga-list:hover {
background-color: transparent;}
.status-menu-container {
background-color: #333;}
.status-menu-container {
border-bottom: 0;}
.list-table {
border: 0;
}
.list-table > tbody:nth-of-type(2n+1) {
background-color: transparent;
}
.list-table .list-table-data .data {
border-bottom: 0;
}
.list-table .list-table-header .header-title {
background: rgba(5,5,5,.5);
}
.list-table .list-table-header .header-title, .list-table .list-table-header .header-title .link.sort, .list-table .list-table-header .header-title .link.sort:hover {
color: grey;
}
.list-table .list-table-header .header-title .link {
color: gray;
}
.status-menu-container .status-menu .status-button.on {
color: black;
}
.list-table .list-table-data a.edit-disabled {
color: white;
}
.list-table .list-table-header .header-title {
border-bottom: 0;}
|
Shishio-kun said: AllIsManga said: Hello, so I'm using the grid style 2 code from this post. I absolutely love the format and layout of the six buttons and six banners, but I prefer to go back to the basic listing anime layout since the anime images are smaller and the tags are more easily visible. Is there a way to change that part back? I suck at explaining things, so maybe this image would help explain what I'm trying to ask for: I'm thinking that would require manually removing the codes that convert the table into the grid. The problem is there are thousands of lines of code in that layout so removing them manually to get the layout just right would be very time-consuming. Unless someone wants to manually do that, I think it'd be way easier to add the desired features of the grid style layout to a default list layout. That way you get the table you want with the features of the grid layout you're using now. What features do you want to carry over from grid style to a default layout: 6 banners, 6 buttons, side render, anything else? Oh ok! Yeah, the 6 banners, 6 buttons, side render, wallpaper, sort button, banner avatar, banner quote. |
"As promised, all that you seek, all that we desire, is prepared up there. On top of the Tower." |
| [quote=Shishio-kun message=61116774] Again, thanks a lot |
|
-CHAR- said: Hello! Some time ago I saw your tutorial on List Layouts (https://www.youtube.com/watch?v=cA0g4HkNLic) and thank you! I would like to know where I can remove PG from anime information. Thank you in advance! A picture of what I want to delete: https://i.imgur.com/ULbQ9xs.png Your list is private so I can't look at your list and give you a code to remove it. But you can just uncheck the box for Rating here and that would remove all PG ratings from the list. Don't forget to save (Submit) after https://myanimelist.net/editprofile.php?go=listpreferences |
-CHAR- said: I have another problem: in the boxes of All Anime, Currently Watching, Completed, On Hold, Dropped and Plan to Watch, the font barely stands out and is hard to notice. Is there anything that makes the market more obvious even when the animation is not running? A picture of the problem: https://imgur.com/JpPRagx Now I have the profile visible to everyone and if you want I can give you the code in private. Thank you in advance! Add to the bottom of the CSS .status-menu-container .status-menu .status-button { text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;} |
| Hello! I hope this is the right thread where to ask... if not, sorry! I'm using the old theme but I wanted to change to the new one... but my problem is that the new one load (for example) 100 titles and you have to browse all the page until it load the next titles. Is there a way to load all the titles in the modern theme like in the old one? Thanks! |
 |
yu6 said: Hello! I hope this is the right thread where to ask... if not, sorry! I'm using the old theme but I wanted to change to the new one... but my problem is that the new one load (for example) 100 titles and you have to browse all the page until it load the next titles. Is there a way to load all the titles in the modern theme like in the old one? Thanks! I don't think so, unfortunately I can't remember if anyone ever found a way to load all the titles in modern on page startup, and I don't know where to begin with finding a way to do that. Maybe one of the popular layouts has a way to do it through a script or something? |
Shishio-kun said: yu6 said: Hello! I hope this is the right thread where to ask... if not, sorry! I'm using the old theme but I wanted to change to the new one... but my problem is that the new one load (for example) 100 titles and you have to browse all the page until it load the next titles. Is there a way to load all the titles in the modern theme like in the old one? Thanks! I don't think so, unfortunately I can't remember if anyone ever found a way to load all the titles in modern on page startup, and I don't know where to begin with finding a way to do that. Maybe one of the popular layouts has a way to do it through a script or something? Well... that's sad to know... I'll continue using the old theme for now. Thank you for the reply :) |
| |
yu6 said: Shishio-kun said: I don't think so, unfortunately I can't remember if anyone ever found a way to load all the titles in modern on page startup, and I don't know where to begin with finding a way to do that. Maybe one of the popular layouts has a way to do it through a script or something? Well... that's sad to know... I'll continue using the old theme for now. Thank you for the reply :) I'm sure its possible with a script of some kind, there's probably some code on the page that says "limit 300 anime on startup" and a script could overwrite that and load them all for you personally There's a lot of nice classic CSS designs you can try too https://myanimelist.net/forum/?topicid=318587 |
Shishio-kun said: yu6 said: Well... that's sad to know... I'll continue using the old theme for now. Thank you for the reply :) I'm sure its possible with a script of some kind, there's probably some code on the page that says "limit 300 anime on startup" and a script could overwrite that and load them all for you personally There's a lot of nice classic CSS designs you can try too https://myanimelist.net/forum/?topicid=318587 Thank you! I'll see if there's something that I like :) |
| |
| Hey guys, so I'm using clarity style 1, but I want to invert the colors so that it's on "dark mode" if you catch my drift. I've been trying to change the table colors but I don't see any change. Would you guys mind helping me out on this? Thanks! |
More topics from this board
» 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 |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |