Reply to claymorwan
Is it normal that the Divided Categories on All Anime does this Instead of seperating them like on the screenshot ? I did added the code and change the "USERNAME" to mine
| @claymorwan i believe that requires a script to work. LINK --- also, for the cover imports, change SpaceCowboy and DateYutaka to your username. |
Reply to karmashizzle
@claymorwan i believe that requires a script to work. LINK
---
also, for the cover imports, change SpaceCowboy and DateYutaka to your username.
---
also, for the cover imports, change SpaceCowboy and DateYutaka to your username.
| @karmashizzle O I didn't know there's a script to install, I don't it's said in the post. But it's working now ty :3 |
| Hi, I'm using the "Water and Sun Breathing Layout" (more specifically the default version with a background) and I have some question: Is there any way to remove the decimals? I tried searching through the code, removing the "#Decimal Scores" and "#Decimal Scores Settings" parts, but it didn't work. Also, I couldn't find any part to change the color of the tag with the anime genres and start/finish dates and, for some reason, the tag with the score isn't working properly on animes marked as Plan to Watch. |
on 
Reply to CLModerno
Hi, I'm using the "Water and Sun Breathing Layout" (more specifically the default version with a background) and I have some question: Is there any way to remove the decimals? I tried searching through the code, removing the "#Decimal Scores" and "#Decimal Scores Settings" parts, but it didn't work. Also, I couldn't find any part to change the color of the tag with the anime genres and start/finish dates and, for some reason, the tag with the score isn't working properly on animes marked as Plan to Watch.
@CLModerno /* remove decimal */
.list-table .list-table-data .data.score .link:after {
content: "";
}
/* reposition score */
.list-table .list-table-data .data.score .link {
margin-right: 20px;
}.list-table .list-table-data:hover .data.genre, .list-table .list-table-data:hover .data.season, .list-table .list-table-data:hover .data.airing-started, .list-table .list-table-data:hover .data.airing-finished, .list-table .list-table-data:hover .data.started, .list-table .list-table-data:hover .data.finished { background: aqua; } |
karmashizzleMay 4, 2024 10:45 PM
Reply to karmashizzle
@CLModerno
.list-table .list-table-data:hover .data.genre,
.list-table .list-table-data:hover .data.season,
.list-table .list-table-data:hover .data.airing-started,
.list-table .list-table-data:hover .data.airing-finished,
.list-table .list-table-data:hover .data.started,
.list-table .list-table-data:hover .data.finished {
background: aqua;
}
/* remove decimal */
.list-table .list-table-data .data.score .link:after {
content: "";
}
/* reposition score */
.list-table .list-table-data .data.score .link {
margin-right: 20px;
}.list-table .list-table-data:hover .data.genre,
.list-table .list-table-data:hover .data.season,
.list-table .list-table-data:hover .data.airing-started,
.list-table .list-table-data:hover .data.airing-finished,
.list-table .list-table-data:hover .data.started,
.list-table .list-table-data:hover .data.finished {
background: aqua;
}
| @karmashizzle thank you! The only problem now is the score not showing for plan to watch animes, I mean, none of them are scored but they don't show the box with the score. |
CLModernoMay 4, 2024 9:18 PM
Reply to CLModerno
@karmashizzle thank you! The only problem now is the score not showing for plan to watch animes, I mean, none of them are scored but they don't show the box with the score.
@CLModerno try this/* enable score for PTW */
.list-table .list-table-data .data.status.plantowatch ~ .data.score {
display: block;
}
.list-table .list-table-data .data.status.plantowatch ~ .data.score .link,
.status.plantowatch ~ .title .add-edit-more::before {
background: whitesmoke;
} |
karmashizzleMay 4, 2024 10:02 PM
Reply to karmashizzle
@CLModerno try this
/* enable score for PTW */
.list-table .list-table-data .data.status.plantowatch ~ .data.score {
display: block;
}
.list-table .list-table-data .data.status.plantowatch ~ .data.score .link,
.status.plantowatch ~ .title .add-edit-more::before {
background: whitesmoke;
}| @karmashizzle thank you! It worked well! |
| Sorry for bothering again, but I noticed that the button to add an episode to the counter isn't working, I have to manually change it by clicking on the number itself |
Reply to CLModerno
Sorry for bothering again, but I noticed that the button to add an episode to the counter isn't working, I have to manually change it by clicking on the number itself
@CLModerno try [class^="icon-add-"] {
position: relative;
} |
Reply to karmashizzle
@CLModerno try
[class^="icon-add-"] {
position: relative;
}| @karmashizzle it worked! ty once again and sorry for bothering you |
| Can anyone help me im using Takana Grid Style 5 for my anime list and just noticed today that in my anime list all 6 Banner Buttons (All Anime, Currently Watching, Completed, On Hold, Dropped and Plan to watch), they don't have anymore the little space between them and also another thing is that when scrolling through my list ive seen that some animes from my list either its new ones or old ones the key visuals are black. |
 |
Reply to JohnnyNumbuh28
Can anyone help me im using Takana Grid Style 5 for my anime list and just noticed today that in my anime list all 6 Banner Buttons (All Anime, Currently Watching, Completed, On Hold, Dropped and Plan to watch), they don't have anymore the little space between them and also another thing is that when scrolling through my list ive seen that some animes from my list either its new ones or old ones the key visuals are black.
| @JohnnyNumbuh28 Regarding recent problems with this layout, there should be an announcement post here soon via the mass message system. I'll have a lot of fixes there. One of the important links in the layout isn't working anymore (it's the Microsoft storage.live link which worked for 12 years lol). Many users have a backup import which I've activated, but unfortunately you don't have it, maybe since the code is older. The backup import is this, you can copy/paste it to the top of your CSS or replace the storage import near the top of the CSS with this. @\import "https://dl.dropboxusercontent.com/s/4u0rqtodxpjkti4/TakanaGridBackup.css"; Also many of your preview pics are dark because you have so many adds the import doesn't work anymore for you, another thing that broke this year on another site lol, but you can replace the first anime import with your username (@\import "https://malscraper.azurewebsites.net/covers/anime/JohnnyNumbuh28/presets/dataimagelinkbefore";) with this and it should fix the preview pics. @\import "https://shishiohub.github.io/Covers/dataimagelinkbefore.css"; You could also scroll down the code and remove everything between "Original layout" and "Add new codes under here". This is the original layout code which might conflict with some of the updates in the import I've given you. However this isn't necessary to remove. And always save your old codes too, you never know. That should fix most issues if not all for now. Although later there should be a full post announcement with this info in more complete detail and a manga cover fix. I have to overhaul everything to a new but reliable site lol and make a ton of new files 😞 |
Shishio-kunSep 7, 2024 2:34 AM
| @Shishio-kun replaced the two imports with the new ones you shared and it worked and fixed my problems. Thank you. |
|
| Alternate source for Grid Style 1 code |
| Alternate source for Grid Style 5 code |
| Alternate source for Grid Style 2 code |
| Alternate source for Grid Style 3 code |
| Alternate source for Grid Style 4 code |
I have the utmost respect for the work you have done. These layouts are brilliant!!! |
Reply to Thecrot
I have the utmost respect for the work you have done. These layouts are brilliant!!!
| @Thecrot Thank you! It's appreciated to hear |
Reply to Shishio-kun
omoe said:
Made an Akira themed version of this skin just for fun and personal use, if anyone is interested...
Copy the code here
Works even when removing the grayscale code for the images coz I actually made gray thumbnails not knowing at the time that there was code for it.
Know that it does work without the grayscale code, but the code also turns the text on the pictures gray so I left it in as it's nicer with gray text.
The skin is basically exactly the same as the one shown in the video for customizing this skin, the only thing I changed in the end are the pictures including the cursor, the fonts and font sizes, I only have 2 imported fonts added in the above code and even left the old fonts in there, but I removed the fonts in my layout today, it doesn't need to import anything that isn't used, I guess that's cleaner.
I made the bottom right png render myself because I couldn't find a suitable Akira render online, so that took a little time, but I'm very satisfied with the result. However I did upload a render that I found later on that might be interesting as replacement or even as a second one for the left side (https://images2.imgbox.com/2c/b7/Uel3VS9a_o.png), feel free to use it, you might want to resize it, I didn't change the original size as I did with the render I made.
One thing I noticed in your video is that you simply put 2x gifs for each button which differs from the originally provided version in that your changed One Piece version would have continuously animating pictures even when not hovering over the pictures, I actually made grayscale picture of the first frame of the gifs, but I could have just left them in color.
BTW, thanks a lot for sharing this skin and showing how to customize it, I like it a lot.
Made an Akira themed version of this skin just for fun and personal use, if anyone is interested...
Copy the code here
Works even when removing the grayscale code for the images coz I actually made gray thumbnails not knowing at the time that there was code for it.
Know that it does work without the grayscale code, but the code also turns the text on the pictures gray so I left it in as it's nicer with gray text.
The skin is basically exactly the same as the one shown in the video for customizing this skin, the only thing I changed in the end are the pictures including the cursor, the fonts and font sizes, I only have 2 imported fonts added in the above code and even left the old fonts in there, but I removed the fonts in my layout today, it doesn't need to import anything that isn't used, I guess that's cleaner.
I made the bottom right png render myself because I couldn't find a suitable Akira render online, so that took a little time, but I'm very satisfied with the result. However I did upload a render that I found later on that might be interesting as replacement or even as a second one for the left side (https://images2.imgbox.com/2c/b7/Uel3VS9a_o.png), feel free to use it, you might want to resize it, I didn't change the original size as I did with the render I made.
One thing I noticed in your video is that you simply put 2x gifs for each button which differs from the originally provided version in that your changed One Piece version would have continuously animating pictures even when not hovering over the pictures, I actually made grayscale picture of the first frame of the gifs, but I could have just left them in color.
BTW, thanks a lot for sharing this skin and showing how to customize it, I like it a lot.
Thanks for the donated layout and feedback. I am redoing this whole topic and video for it, so I will try to keep that in mind!
| @Shishio-kun Hello!! how can i edit these texts? for example "currently watching", "Completed"... i would love to change fonts and colours, but i dont know how to do that |
iozgregyMar 8, 11:41 AM
Reply to iozgregy
@Shishio-kun Hello!! how can i edit these texts? for example "currently watching", "Completed"... i would love to change fonts and colours, but i dont know how to do that
| @iozgregy Colors here, the buttons not being used are greyed until you point to them by design; you just paste these to the bottom of the CSS and change the color. Although, the layout you're using is a bit outdated /*CATEGORY TEXT*/ .list-unit .list-status-title .text{ color: red !important; } .status-menu-container .status-menu .status-button.all_anime, .status-menu-container .status-menu .status-button.watching, .status-menu-container .status-menu .status-button.reading, .status-menu-container .status-menu .status-button.completed, .status-menu-container .status-menu .status-button.onhold, .status-menu-container .status-menu .status-button.dropped, .status-menu-container .status-menu .status-button.plantowatch, .status-menu-container .status-menu .status-button.plantoread{ color: red !important; } There's more color codes in the bottom for the first post if you want more specific codes to add to the bottom and try For changing the fonts, it's a GIANT pain. I have a section on it linked at the bottom of the first post with a whole other topic. If you don't want to go through all that, you can try a font-family code I think you have already, but you need the font installed on your PC or the webpage to see it .status-menu-container .status-menu .status-button { font-family: 'FontAwesome' !important;} otherwise you'd need to use the font-installing methods to install the font to the page, which are a pain in the ass https://myanimelist.net/forum/?topicid=1792455 For the category buttons text itself there's a section on this at the bottom of the first post, all kinds of customization options are there so check there first in the future please
/*CUSTOMIZE BANNER BUTTONS TEXT*/
.status-menu-container .status-menu .status-button.all_anime,
.status-menu-container .status-menu .status-button.watching,
.status-menu-container .status-menu .status-button.reading,
.status-menu-container .status-menu .status-button.completed,
.status-menu-container .status-menu .status-button.onhold,
.status-menu-container .status-menu .status-button.dropped,
.status-menu-container .status-menu .status-button.plantowatch,
.status-menu-container .status-menu .status-button.plantoread{
font-size: 0;
}
.status-menu-container .status-menu .status-button.all_anime:before,
.status-menu-container .status-menu .status-button.watching:before,
.status-menu-container .status-menu .status-button.reading:before,
.status-menu-container .status-menu .status-button.completed:before,
.status-menu-container .status-menu .status-button.onhold:before,
.status-menu-container .status-menu .status-button.dropped:before,
.status-menu-container .status-menu .status-button.plantowatch:before,
.status-menu-container .status-menu .status-button.plantoread:before
{
top: -45px;
position: relative;
width: 150px;}
.status-menu-container .status-menu .status-button.all_anime:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.watching:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.reading:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.completed:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.onhold:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.dropped:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.plantowatch:before{
content: "text";
font-size: 40px;}
.status-menu-container .status-menu .status-button.plantoread:before{
content: "text";
font-size: 40px;}For customizing the actual banner text, try the topic on it https://myanimelist.net/forum/?topicid=1930157 |
Reply to iozgregy
Hello! How can i take out that "I customized that bike for myself! It's too wild for you to handle." text? i cant find it
| @iozgregy You already changed this. It's in the code near the top under Banner quote. If you leave a question and answer it yourself, please edit or delete your question in the future. |
Reply to iozgregy
@Shishio-kun Sorry, i only noticed later, thank you anyways!!
| @iozgregy No worries and feel free to ask if you can't find something or need more help; good luck with the designing! |
Hi, I'm trying to apply Shinobu Layou to my list, but when I apply the code the layout looks weird, everything is out of order, and I'm copying and pasting exactly the same code, can anyone help me? |
 |
Reply to cosmicskye
Hi, I'm trying to apply Shinobu Layou to my list, but when I apply the code the layout looks weird, everything is out of order, and I'm copying and pasting exactly the same code, can anyone help me?
| @cosmicskye It looks fine on your list when I apply it, so I'd have to see the code on you list to figure out the problem. The image in your post isn't working either. |
Reply to Shishio-kun
@cosmicskye It looks fine on your list when I apply it, so I'd have to see the code on you list to figure out the problem. The image in your post isn't working either.
| @Shishio-kun I managed to solve the problem, apparently it was something on the work computer (lol), sorry to have bothered you, thanks for answering me |
| |
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 |