Forum Settings
Forums
New
Reply Disabled for Non-Club Members
Pages (157) « First ... « 142 143 [144] 145 146 » ... Last »
Sep 5, 2021 9:46 AM

Offline
Feb 2010
11294
zau said:
Hey, is there any way I could add a small search icon in the corner of my list or smthg?


Yeah, it was removed, but you can add a cute little search box back with this

#mal_cs_powered
{display: block !important;
position: fixed !important;

background-color: transparent !important;
top: 0 !important;;
right: 0 !important;}

#mal_cs_powered #search{
background-color: transparent !important;
}

.lazyloaded{
display: none;
}

#mal_control_strip td{
border: none !important;
}

#mal_cs_powered #search #searchBox{
background: white 110px 40%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);

}
Sep 5, 2021 12:02 PM

Offline
Mar 2021
25
Shishio-kun said:
zau said:
Hey, is there any way I could add a small search icon in the corner of my list or smthg?


Yeah, it was removed, but you can add a cute little search box back with this

#mal_cs_powered
{display: block !important;
position: fixed !important;

background-color: transparent !important;
top: 0 !important;;
right: 0 !important;}

#mal_cs_powered #search{
background-color: transparent !important;
}

.lazyloaded{
display: none;
}

#mal_control_strip td{
border: none !important;
}

#mal_cs_powered #search #searchBox{
background: white 110px 40%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);

}


Works great for my Anime list but for some reason I can't click it on my "manga" list. Is it because of the different list that I have on there?
Sep 5, 2021 1:47 PM

Offline
Feb 2010
11294
zau said:
Shishio-kun said:


Yeah, it was removed, but you can add a cute little search box back with this

#mal_cs_powered
{display: block !important;
position: fixed !important;

background-color: transparent !important;
top: 0 !important;;
right: 0 !important;}

#mal_cs_powered #search{
background-color: transparent !important;
}

.lazyloaded{
display: none;
}

#mal_control_strip td{
border: none !important;
}

#mal_cs_powered #search #searchBox{
background: white 110px 40%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);

}


Works great for my Anime list but for some reason I can't click it on my "manga" list. Is it because of the different list that I have on there?


Yes they are two different layouts so the codes interact differently

Add

#mal_cs_powered{
top: 40px !important;;}
Sep 5, 2021 2:13 PM

Offline
Mar 2021
25
Shishio-kun said:
zau said:


Works great for my Anime list but for some reason I can't click it on my "manga" list. Is it because of the different list that I have on there?


Yes they are two different layouts so the codes interact differently

Add

#mal_cs_powered{
top: 40px !important;;}


Worked really well, thank you.
Sep 5, 2021 8:18 PM

Offline
Sep 2019
133
Is there any way I can change the size of .list-table-data for only anime on plan to watch on the ALL anime page?
And also add a section for Plan to watch only, like on MAL CAT

/*-S-T-A-R-T--------------------*\
| Horizontal Tags R0.3-PTW-Status:6|
\*------------------------------*/

.list-table-data {padding-bottom:11px}
.data.plantowatch ~ .data.tags,
.data.plantoread ~ .data.tags{position:absolute;left:0;top:0;display:flex !important;width:0;height:100%;padding:0!important;align-items:flex-end;}
.data.plantowatch ~ .data.tags div,
.data.plantoread ~ .data.tags div{max-width:980px!important;margin:0 0 4px 76px!important;font-size:0!important;white-space:nowrap!important}
.data.plantowatch ~ .data.tags span,
.data.plantoread ~ .data.tags span{display:inline-block!important;padding:0}
.data.plantowatch ~ .data.tags span a,
.data.plantoread ~ .data.tags span a
{padding:1px 8px!important;margin:0 4px 0 0;white-space:nowrap}
[data-query*='status":6']
.data.tags span a[href*="=Favo"]{padding:0!important}

.data.plantowatch ~ .data.tags a.edit,
.data.plantoread ~ .data.tags a.edit{right:-1052px!important}

.data.plantowatch ~ .data.tags textarea,.data.plantoread ~ .data.tags textarea{right:-1060px!important}

.data.plantowatch ~ .data.tags a:not(.edit),
.data.plantoread ~ .data.tags a:not(.edit) {
border-radius: 8.5px;
/*color: var(--text)!important;*/
font-size: 10px!important;
line-height: 15px;
}


I was using this before but just wanted to try something new
/*-S-T-A-R-T--------------------*\
| Horizontal Tags R0.2-PTW-Status:6|
\*------------------------------*/

[data-query*='status":6']
.list-table-data{padding-bottom:11px}
[data-query*='status":6']
.data.tags{position:absolute;left:0;top:0;display:flex !important;width:0;height:100%;padding:0!important;align-items:flex-end;}
[data-query*='status":6']
.data.tags div{max-width:980px!important;margin:0 0 4px 76px!important;font-size:0!important;white-space:nowrap!important}
[data-query*='status":6']
.data.tags span{display:inline-block!important;padding:0}
[data-query*='status":6']
.data.tags span a{padding:1px 8px!important;margin:0 4px 0 0;white-space:nowrap}
[data-query*='status":6']
.data.tags span a[href*="=Favo"]{padding:0!important}
[data-query*='status":6']
.data.tags a.edit{right:-1052px!important}
[data-query*='status":6']
.data.tags textarea{right:-1060px!important}
[data-query*='status":6'].data.tags a:not(.edit) {
    border-radius: 8.5px;
    color: var(--text)!important;
    font-size: 10px!important;
    line-height: 15px;
}

/*------------------------E-N-D-*/


Sep 5, 2021 10:28 PM

Offline
Aug 2019
316
Hey just wondering when i was watching this video of this https://youtu.be/cA0g4HkNLic about the separate layout for the manga can i use the images i used for the animelist for the manga list?
Sep 6, 2021 9:00 AM

Offline
Feb 2010
11294
ShadowOnyx01 said:
Hey just wondering when i was watching this video of this https://youtu.be/cA0g4HkNLic about the separate layout for the manga can i use the images i used for the animelist for the manga list?


You can use w/e images you want on the mangalist
Sep 8, 2021 6:45 AM
Offline
Aug 2021
6
my anime list
been pulling my hairs out as margin-bottom doesn't work on the table as a whole. i want the lines spaced, what do i do?
(as i want to customize the border too i am avoiding border: px transparent solid)
Sep 8, 2021 9:41 AM

Offline
Feb 2010
11294
Lightningreed said:
my anime list
been pulling my hairs out as margin-bottom doesn't work on the table as a whole. i want the lines spaced, what do i do?


I don't understand what you want to do at all. There's too many ways to interpret your post.

Can you do a visual example or more clear explanation of how the list will look when its "fixed"?

Also look into editing your list with Inspect Element to do it yourself
https://myanimelist.net/forum/?topicid=1499059#msg63378307


If you mean you want spacing between each anime row, then you can make list item a block then use margin bottom (is that what you were trying to add margin bottom to?) and manually space it, then reposition everything with the specific codes from here
https://myanimelist.net/forum/?topicid=1929120

.list-item {
	display: block;
	margin-bottom: 20px;
} 



The Kure layout does something like this and has some codes for this you should look at

.list-item {
	display: block;
	background: hsla(var(--content), 80%) !important;
	border-radius: 4px;
	margin-bottom: 30px;
	transition: background-color var(--transition-button);
	/*unused
	animation: slide-up 1.5s cubic-bezier(.16,.74,.59,1) 0s; */
}

.list-table-data,
.more-info[style*="block"] {
	position: relative;
	display: block !important;
	padding: 5px 15px 10px;
	border: none;
	align-items: center;
} .list-table-data {
	display: flex !important;
	min-height: 40px;
	padding: 0 80px 0 5px;
}

.list-table .list-table-data .data {
	display: block;
	padding: 0;
	margin-left: 10px;
	border: none;
	flex: 0 0 auto;
}




If you are trying to add margin bottom to the bottom of the entire list table as a whole to space it from the bottom stuff, then it looks like you can add margin to the loading space between the footer and list table
.list-unit .loading-space {
    margin: 32px;
}


If you mean spacing within the rows themselves increasing padding on data
.list-table .list-table-data .data {
    padding: 32px 0;
}




(as i want to customize the border too i am avoiding border: px transparent solid)


Not sure what you mean by this but W3schools has all the ways you can customize a border
Shishio-kunSep 8, 2021 10:15 AM
Sep 8, 2021 11:23 AM
Offline
Aug 2021
6
Can you do a visual example or more clear explanation of how the list will look when its "fixed"?

quite like this

If you mean you want spacing between each anime row, then you can make list item a block then use margin bottom (is that what you were trying to add margin bottom to?) and manually space it, then reposition everything with the specific codes from here

I did look into display:block, but i had no idea how to do the spacing. thought i spent a whole hour on w3s to read about display and stuff. also yeah this was the thing i was trying to do

Not sure what you mean by this but W3schools has all the ways you can customize a border
never mind this part, i didn't do thorough testing, that trick doesn't work very well.
Sep 8, 2021 3:56 PM

Offline
Feb 2010
11294
Lightningreed said:
Can you do a visual example or more clear explanation of how the list will look when its "fixed"?

quite like this

If you mean you want spacing between each anime row, then you can make list item a block then use margin bottom (is that what you were trying to add margin bottom to?) and manually space it, then reposition everything with the specific codes from here

I did look into display:block, but i had no idea how to do the spacing. thought i spent a whole hour on w3s to read about display and stuff. also yeah this was the thing i was trying to do

Not sure what you mean by this but W3schools has all the ways you can customize a border
never mind this part, i didn't do thorough testing, that trick doesn't work very well.


OK, then it sounds like you're all set for now :D
Sep 9, 2021 7:18 AM
Offline
Aug 2021
6
OK, then it sounds like you're all set for now :D

well this didn't even last long lol, after successfully spacing the table, i tried to tweak the border:
 .list-item {border: 1px transparent solid} 

guess what? the page's framerate drops like by a half. any idea how to improve this?
(edit: still has some performance drop but for whatever the heck reason it got better, tell me if you have any framerate issues at all, if not then i take it that it's my weak gpu, thanks)
also i tried to change bg color based on category:
 .list-item .data.watching {background-color: blue !important;} 

doesn't work. i wonder what am i doing wrong?
LightningreedSep 9, 2021 7:26 AM
Sep 9, 2021 9:34 AM

Offline
Feb 2010
11294
Lightningreed said:
OK, then it sounds like you're all set for now :D

well this didn't even last long lol, after successfully spacing the table, i tried to tweak the border:
 .list-item {border: 1px transparent solid} 

guess what? the page's framerate drops like by a half. any idea how to improve this?
(edit: still has some performance drop but for whatever the heck reason it got better, tell me if you have any framerate issues at all, if not then i take it that it's my weak gpu, thanks)
also i tried to change bg color based on category:
 .list-item .data.watching {background-color: blue !important;} 

doesn't work. i wonder what am i doing wrong?


It seems perfectly fine to me- try padding or another way, maybe you can try another browser, or maybe disable/enable hardware acceleration in your browser


Did you use the codes from my background per category tutorial?
https://myanimelist.net/forum/?topicid=1499059#msg62570713
Sep 9, 2021 10:01 AM
Offline
Aug 2021
6
It seems perfectly fine to me- try padding or another way, maybe you can try another browser, or maybe disable/enable hardware acceleration in your browser

ah nice, i can put the blame on my gpu then

Did you use the codes from my background per category tutorial?

ahh it's not what i meant, i wanted to color list text based on category! from which i copied the code from this, well it doesn't work pretty well using
.list-item .data.watching {background-color: blue !important;} 

i never tried copying the full code from "Category-coloured list text." into my own css to test it out though, so i might be missing something.
also what does the tide do in that block of code
Sep 9, 2021 10:21 AM

Offline
Feb 2010
11294
Lightningreed said:
It seems perfectly fine to me- try padding or another way, maybe you can try another browser, or maybe disable/enable hardware acceleration in your browser

ah nice, i can put the blame on my gpu then

Did you use the codes from my background per category tutorial?

ahh it's not what i meant, i wanted to color list text based on category! from which i copied the code from this, well it doesn't work pretty well using
.list-item .data.watching {background-color: blue !important;} 

i never tried copying the full code from "Category-coloured list text." into my own css to test it out though, so i might be missing something.
also what does the tide do in that block of code


use something like this instead

[data-query*='"status":7'] .list-item {background-color: blue !important;}

status # is the list page (1 is current, 2 is complete, etc, 7 is all)
Sep 9, 2021 7:23 PM
Offline
Aug 2021
6
use something like this instead

[data-query*='"status":7'] .list-item {background-color: blue !important;}

status # is the list page (1 is current, 2 is complete, etc, 7 is all)


with 7

basically any other number on the list
tdlr only 7 works, the others dont
Sep 10, 2021 9:19 AM

Offline
Feb 2010
11294
Lightningreed said:
use something like this instead

[data-query*='"status":7'] .list-item {background-color: blue !important;}

status # is the list page (1 is current, 2 is complete, etc, 7 is all)


with 7

basically any other number on the list
tdlr only 7 works, the others dont


You don't seem to have the codes on your list, so I can't repair or confirm what's wrong. Please leave the codes up if there's a problem

Try this at the bottom of the CSS and leave it up, it seems to work in preview on your anime list.

[data-query*='"status":7'] .list-item {background-color: blue !important;}

[data-query*='"status":1'] .list-item {background-color: red !important;}

[data-query*='"status":2'] .list-item {background-color: yellow !important;}

[data-query*='"status":3'] .list-item {background-color: green !important;}

[data-query*='"status":4'] .list-item {background-color: orange !important;}

[data-query*='"status":6'] .list-item {background-color: black !important;}

Sep 10, 2021 10:26 AM
Offline
Aug 2021
6
Shishio-kun said:
Lightningreed said:


with 7

basically any other number on the list
tdlr only 7 works, the others dont


You don't seem to have the codes on your list, so I can't repair or confirm what's wrong. Please leave the codes up if there's a problem

Try this at the bottom of the CSS and leave it up, it seems to work in preview on your anime list.

[data-query*='"status":7'] .list-item {background-color: blue !important;}

[data-query*='"status":1'] .list-item {background-color: red !important;}

[data-query*='"status":2'] .list-item {background-color: yellow !important;}

[data-query*='"status":3'] .list-item {background-color: green !important;}

[data-query*='"status":4'] .list-item {background-color: orange !important;}

[data-query*='"status":6'] .list-item {background-color: black !important;}



i added those lines into the code and removed my gradients background so that nothing interferes, but well, outlook not so good. also saved it for you for analysis, thanks!
Sep 10, 2021 10:43 AM

Offline
Feb 2010
11294
Lightningreed said:
Shishio-kun said:


You don't seem to have the codes on your list, so I can't repair or confirm what's wrong. Please leave the codes up if there's a problem

Try this at the bottom of the CSS and leave it up, it seems to work in preview on your anime list.

[data-query*='"status":7'] .list-item {background-color: blue !important;}

[data-query*='"status":1'] .list-item {background-color: red !important;}

[data-query*='"status":2'] .list-item {background-color: yellow !important;}

[data-query*='"status":3'] .list-item {background-color: green !important;}

[data-query*='"status":4'] .list-item {background-color: orange !important;}

[data-query*='"status":6'] .list-item {background-color: black !important;}



i added those lines into the code and removed my gradients background so that nothing interferes, but well, outlook not so good. also saved it for you for analysis, thanks!


They are working from what I see. You're missing the code for the All page:

[data-query*='"status":7'] .list-item {background-color: blue !important;}

but other than that the tables on the other pages are changing color. Current list table is red, completed list table is yellow, etc. I used your CSS on my list too, and it was working fine as well. Maybe there is something wrong with your device or browser.
Sep 11, 2021 10:25 AM

Offline
Sep 2016
13
Hi, I am having and issue with perspective transforms in a list i am creating, and i don't know what's the problem. I made the list entries into cards that flip around when clicked, in firefox everything works fine but for some reason on chrome the flip motion on the back face won't work properly, it shows the back face of the card only after the animation is finished.
Here are some gifs of the problem :

I have already tried using -webkit- and -moz- on all of the transforms, add and remove transforms and other stuff, but nothing seems to work ...
Anyone has any idea of what the problem is ? :/
Also here is part of the CSS with all of the transforms :

I have also put this list style on my active anime list style if anyone wants to check the problem with the inspect tool.

Thank you in advance for checking my post.
Sep 11, 2021 11:39 AM

Offline
Feb 2010
11294
Rafaeleh said:
Hi, I am having and issue with perspective transforms in a list i am creating, and i don't know what's the problem. I made the list entries into cards that flip around when clicked, in firefox everything works fine but for some reason on chrome the flip motion on the back face won't work properly, it shows the back face of the card only after the animation is finished.
Here are some gifs of the problem :

I have already tried using -webkit- and -moz- on all of the transforms, add and remove transforms and other stuff, but nothing seems to work ...
Anyone has any idea of what the problem is ? :/
Also here is part of the CSS with all of the transforms :

I have also put this list style on my active anime list style if anyone wants to check the problem with the inspect tool.

Thank you in advance for checking my post.


I dont see card flips at all, even in Firefox and with the codes you posted.
Sep 11, 2021 12:31 PM

Offline
Sep 2016
13
Shishio-kun said:
Rafaeleh said:
Hi, I am having and issue with perspective transforms in a list i am creating, and i don't know what's the problem. I made the list entries into cards that flip around when clicked, in firefox everything works fine but for some reason on chrome the flip motion on the back face won't work properly, it shows the back face of the card only after the animation is finished.
Here are some gifs of the problem :

I have already tried using -webkit- and -moz- on all of the transforms, add and remove transforms and other stuff, but nothing seems to work ...
Anyone has any idea of what the problem is ? :/
Also here is part of the CSS with all of the transforms :

I have also put this list style on my active anime list style if anyone wants to check the problem with the inspect tool.

Thank you in advance for checking my post.


I dont see card flips at all, even in Firefox and with the codes you posted.


I think that's my bad I said they flip by clicking but it's by holding the mouse button over the card. They should flip if hold :/
Sep 11, 2021 12:45 PM

Offline
Feb 2010
11294
Rafaeleh said:
Shishio-kun said:


I dont see card flips at all, even in Firefox and with the codes you posted.


I think that's my bad I said they flip by clicking but it's by holding the mouse button over the card. They should flip if hold :/


OK I see it now. Well I don't know why it doesn't work right in Chrome, but a few things I would try:

1. can you add the back-image to the :active element via an animation code, then have it come in just as the card turns in Chrome? (hard to explain)

2. remove all the codes except what's absolutely necessary to create the card flip effect, to see if any codes removed were interfering with the animation

3. dont use :active for the flip trick, use hover, show the back for a second, then flip back to normal. Then it will still look cool and people will get the idea

Sep 11, 2021 12:50 PM

Offline
Sep 2016
13
Shishio-kun said:
Rafaeleh said:


I think that's my bad I said they flip by clicking but it's by holding the mouse button over the card. They should flip if hold :/


OK I see it now. Well I don't know why it doesn't work right in Chrome, but a few things I would try:

1. can you add the back-image to the :active element via an animation code, then have it come in just as the card turns in Chrome? (hard to explain)

2. remove all the codes except what's absolutely necessary to create the card flip effect, to see if any codes removed were interfering with the animation

3. dont use :active for the flip trick, use hover, show the back for a second, then flip back to normal. Then it will still look cool and people will get the idea



Ok thanks for the suggestions :D ! I will try that tomorrow and post how it went
Sep 12, 2021 6:58 AM

Offline
Sep 2021
3
Hello, I've been trying to find a way to make a sliding sidebar similar to the one that Valerio_Lyndon has but I can't understand how it works. Could anyone explain how to do this? I'd like to make it a toggle-able thing as well if that's possible.

I was also wondering (assuming I'm not stretching the abilities of CSS) if it's possible to create a list that can switch between "light" and "dark" themes when you click on a specific button within the list itself. I can't dismiss this as a possibility with my limited knowledge of CSS.

Thanks!

https://myanimelist.net/animelist/Leouria
LeouriaSep 12, 2021 7:18 AM
SIGNATURE TEXT HERE
Sep 12, 2021 7:11 AM

Offline
Sep 2016
13
Shishio-kun said:
Rafaeleh said:


I think that's my bad I said they flip by clicking but it's by holding the mouse button over the card. They should flip if hold :/


OK I see it now. Well I don't know why it doesn't work right in Chrome, but a few things I would try:

1. can you add the back-image to the :active element via an animation code, then have it come in just as the card turns in Chrome? (hard to explain)

2. remove all the codes except what's absolutely necessary to create the card flip effect, to see if any codes removed were interfering with the animation

3. dont use :active for the flip trick, use hover, show the back for a second, then flip back to normal. Then it will still look cool and people will get the idea



I have figured out what the problem is ...

So ... i have an element as the card and made the ' :after ' of that element the back of the card and attached the ' backface-visibility: hidden; ' to both. The problem is that when the main element has the back face hidden, that invisible back face overlaps with the ' :after ' element that is behind covering it and making it disappear, kind of like an invisibility cloak :) (the back face is only able to overwrite that when the animation ends).

I can fix it by simply removing the ' backface-visibility ' from both elements, so the "invisibility cloak" doesn't overlap one of the faces, and apply that only to the "more/edit" element that is on the side of the card so it stays hidden when the card is flipped.

Cool, now i just need to fix the front face corners so they don't appear on the back of the card, as it is currently happening.



But now i realized one other problem that i am not sure how to fix ...

When you click the ' more ' on the side of the card and it brings the ' more-content ' to the top of the card, how can i make it so the card doesn't flip when it is there ? --or the flip motion doesn't overlap with that element and stays on the back ? (I've tried moving the z-index but doesn't work with perspective)-- (i remembered that for this i can just translate the element for example 10000px in the Z axis, but still not sure about how to make the card not flip)

Also right now the animation is jumping to the beginning on mouse over leave, instead of animating back to the initial position, but that i am not too concerned about at the moment.

Sep 12, 2021 7:35 AM

Offline
Sep 2016
13
Leouria said:
Hello, I've been trying to find a way to make a sliding sidebar similar to the one that Valerio_Lyndon has but I can't understand how it works. Could anyone explain how to do this? I'd like to make it a toggle-able thing as well if that's possible.

I was also wondering (assuming I'm not stretching the abilities of CSS) if it's possible to create a list that can switch between "light" and "dark" themes when you click on a specific button within the list itself. I can't dismiss this as a possibility with my limited knowledge of CSS.

Thanks!

https://myanimelist.net/animelist/Leouria


I am not sure about what you mean by sliding sidebar but if you are talking about the scroll bar you can style it pretty easily by using this selector :
body::-webkit-scrollbar {
  (Your properties here ...)
}

There are other selectors for different parts of the scrollbar like :


You can see some documentation of this here and here.

As for the light and dark themes it might be possible with a checkbox (provided that there is one we can use on the html code :/), but i am not sure as i have thought of doing that but haven't tried yet.
If it is possible should be a matter of just styling different variable colors when a checkbox is checked.
Sep 12, 2021 10:19 AM

Offline
Feb 2010
11294
Rafaeleh said:
Shishio-kun said:


OK I see it now. Well I don't know why it doesn't work right in Chrome, but a few things I would try:

1. can you add the back-image to the :active element via an animation code, then have it come in just as the card turns in Chrome? (hard to explain)

2. remove all the codes except what's absolutely necessary to create the card flip effect, to see if any codes removed were interfering with the animation

3. dont use :active for the flip trick, use hover, show the back for a second, then flip back to normal. Then it will still look cool and people will get the idea



I have figured out what the problem is ...

So ... i have an element as the card and made the ' :after ' of that element the back of the card and attached the ' backface-visibility: hidden; ' to both. The problem is that when the main element has the back face hidden, that invisible back face overlaps with the ' :after ' element that is behind covering it and making it disappear, kind of like an invisibility cloak :) (the back face is only able to overwrite that when the animation ends).

I can fix it by simply removing the ' backface-visibility ' from both elements, so the "invisibility cloak" doesn't overlap one of the faces, and apply that only to the "more/edit" element that is on the side of the card so it stays hidden when the card is flipped.

Cool, now i just need to fix the front face corners so they don't appear on the back of the card, as it is currently happening.



But now i realized one other problem that i am not sure how to fix ...

When you click the ' more ' on the side of the card and it brings the ' more-content ' to the top of the card, how can i make it so the card doesn't flip when it is there ? --or the flip motion doesn't overlap with that element and stays on the back ? (I've tried moving the z-index but doesn't work with perspective)-- (i remembered that for this i can just translate the element for example 10000px in the Z axis, but still not sure about how to make the card not flip)

Also right now the animation is jumping to the beginning on mouse over leave, instead of animating back to the initial position, but that i am not too concerned about at the moment.



It would take a lot of time to fix it how it is now, but what I would do is try this instead:

use the

tbody.list-item .list-table-data:hover

to animate each section individually on hover, kinda like this (add these to a empty CSS to see)

tbody.list-item .list-table-data:hover .image{
display: none;
}

tbody.list-item .list-table-data:hover .add-edit-more{
background: red;
}

Then I would create some separate animation for the more when its hovered


.add-edit-more:hover{
background: blue !important;
}


Shishio-kunSep 12, 2021 10:35 AM
Sep 12, 2021 10:33 AM

Offline
Feb 2010
11294
Leouria said:
Hello, I've been trying to find a way to make a sliding sidebar similar to the one that Valerio_Lyndon has but I can't understand how it works. Could anyone explain how to do this? I'd like to make it a toggle-able thing as well if that's possible.

I was also wondering (assuming I'm not stretching the abilities of CSS) if it's possible to create a list that can switch between "light" and "dark" themes when you click on a specific button within the list itself. I can't dismiss this as a possibility with my limited knowledge of CSS.

Thanks!

https://myanimelist.net/animelist/Leouria


Install the uncompressed Brink to your layout
https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/Brink.css

Open it in Firefox, log in, and use Inspect Element on the list with the uncompressed CSS, go to Style Editor and find the style sheet for Brink (will say it at top like in the example).
https://imgur.com/xA73pWl

Then start cutting out all the codes until only the sidebar is left. Then you'll have the codes for the sidebar, which you can learn from and edit how you want.


You could toggle a new menu with an anime's more button. I've done this before, its very complicated, and you need links made with BBcode within the more ahead of time, that need to be styled with CSS. This tutorial has a way you can edit an individual more button, you'd have to style the links with Inspect Element
https://myanimelist.net/forum/?topicid=1923093
If you aren't using Inspect Element at this point you'd have to (many videos on this)


I can think of some ways to toggle a dark mode- if all your backgrounds and tables were dependent on an anime's more button, then you could toggle the more button to toggle the backgrounds/tables thus changing the lighting. That'd be extremely complicated and I'd have to do it to explain it best. You'd have to outline your fonts so they show up on either light and dark.

Also, with PHP and tags, you could toggle a dark mode but I haven't done something like that in almost ten years. You'd have to find a PHP/CSS person (and a place to host the PHP file)

It's also possible to change body based on the tag as in this tutorial, so if you changed MANY codes based on a tag then you could switch between light and dark mode with a tag. This is probably the easiest way
https://myanimelist.net/forum/?topicid=1911634
Shishio-kunSep 12, 2021 10:40 AM
Sep 12, 2021 11:46 AM

Offline
Sep 2016
13
Shishio-kun said:


It would take a lot of time to fix it how it is now, but what I would do is try this instead:

use the

tbody.list-item .list-table-data:hover

to animate each section individually on hover, kinda like this (add these to a empty CSS to see)

tbody.list-item .list-table-data:hover .image{
display: none;
}

tbody.list-item .list-table-data:hover .add-edit-more{
background: red;
}

Then I would create some separate animation for the more when its hovered


.add-edit-more:hover{
background: blue !important;
}




Ok, i will try doing that. Thanks a lot for the help ! :D
Sep 15, 2021 2:54 AM

Online
Apr 2014
3182
Hello, I'm trying to use the customized Line style layout from this thread.
I've been trying to find a way to change the font, font color, and change the list's width(widen it). How and where I could change all of them at one time.
何それ?意味分かんない
Sep 15, 2021 10:42 AM

Offline
Feb 2010
11294
AkeZZZ said:
Hello, I'm trying to use the customized Line style layout from this thread.
I've been trying to find a way to change the font, font color, and change the list's width(widen it). How and where I could change all of them at one time.



For the fonts did you try these tutorials yet?
https://myanimelist.net/forum/?topicid=1499059#msg63378290
Sep 15, 2021 11:58 AM

Online
Apr 2014
3182
Shishio-kun said:
AkeZZZ said:
Hello, I'm trying to use the customized Line style layout from this thread.
I've been trying to find a way to change the font, font color, and change the list's width(widen it). How and where I could change all of them at one time.



For the fonts did you try these tutorials yet?
https://myanimelist.net/forum/?topicid=1499059#msg63378290


Thank you so much
Anyway, is there any way to get rid of the MAL watching icon?
the monitor one.
何それ?意味分かんない
Sep 15, 2021 12:06 PM

Offline
May 2021
24
Hi, I tried to download a customized list style but every time I add it it doesn’t work. It only shows the background of that design, and the names of the anime that are in my list are all over the place. I can’t see the pictures of those either and the menu isn’t there as well. It’s just the background and some random names and ratings of the anime in my list. It is a bit hard to explain but I’ve tried everything I could and did everything it showed in the Youtube tutorials but it still doesn’t work. I used some other designs as well but the same thing happened. I am not really good with those type of things so I hope someone can help me with fixing it.
Sep 15, 2021 12:53 PM

Offline
Feb 2010
11294
Arddaa52 said:
Hi, I tried to download a customized list style but every time I add it it doesn’t work. It only shows the background of that design, and the names of the anime that are in my list are all over the place. I can’t see the pictures of those either and the menu isn’t there as well. It’s just the background and some random names and ratings of the anime in my list. It is a bit hard to explain but I’ve tried everything I could and did everything it showed in the Youtube tutorials but it still doesn’t work. I used some other designs as well but the same thing happened. I am not really good with those type of things so I hope someone can help me with fixing it.



Your list is set to Classic and you're trying to use a modern layout, Modern layouts won't work on Classic

See Part A, 2 and 3
https://myanimelist.net/forum/?topicid=439897
refer to this topic when a layout is broken first


Add modern layouts (layouts made in 2016 or later) to the modern theme pages as I do in the video, or add classic layouts to the classic theme pages as I do in the video
https://myanimelist.net/forum/?topicid=1499059#msg45620833
Sep 15, 2021 12:57 PM

Offline
Feb 2010
11294
AkeZZZ said:
Shishio-kun said:



For the fonts did you try these tutorials yet?
https://myanimelist.net/forum/?topicid=1499059#msg63378290


Thank you so much
Anyway, is there any way to get rid of the MAL watching icon?
the monitor one.


I think its

.icon-watch, .icon-watch-pv {
display: none !important;}
Sep 15, 2021 1:15 PM

Offline
May 2021
24
Shishio-kun said:
Arddaa52 said:
Hi, I tried to download a customized list style but every time I add it it doesn’t work. It only shows the background of that design, and the names of the anime that are in my list are all over the place. I can’t see the pictures of those either and the menu isn’t there as well. It’s just the background and some random names and ratings of the anime in my list. It is a bit hard to explain but I’ve tried everything I could and did everything it showed in the Youtube tutorials but it still doesn’t work. I used some other designs as well but the same thing happened. I am not really good with those type of things so I hope someone can help me with fixing it.



Your list is set to Classic and you're trying to use a modern layout, Modern layouts won't work on Classic

See Part A, 2 and 3
https://myanimelist.net/forum/?topicid=439897
refer to this topic when a layout is broken first


Add modern layouts (layouts made in 2016 or later) to the modern theme pages as I do in the video, or add classic layouts to the classic theme pages as I do in the video
https://myanimelist.net/forum/?topicid=1499059#msg45620833

Thank you very much for the help. :)
Sep 15, 2021 10:36 PM

Online
Apr 2014
3182
Shishio-kun said:


I think its

.icon-watch, .icon-watch-pv {
display: none !important;}


Problem solved, thank you.
何それ?意味分かんない
Sep 22, 2021 2:03 PM

Offline
Mar 2021
25
Hey so I figured out how to put text besides my score with your help but I kind of want it hidden unless I hover over the respective title. Does that make sense? I hope it's possible, thank you in advance!
Sep 25, 2021 2:53 PM

Offline
Jul 2021
2
Hi!
Is it possible to change the color of the tiny icons/bullet points (inside the red rectangle on the image) of the lists? If yes, how can I do that? Thanks in advance :)
Sep 25, 2021 4:26 PM

Offline
May 2010
997
espurrit0 said:
Hi!
Is it possible to change the color of the tiny icons/bullet points (inside the red rectangle on the image) of the lists? If yes, how can I do that? Thanks in advance :)

Find the code below and add color: COLOUR; like so
.list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {
    background-color: #2db039;
    color: #2db039;
}

.list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {
    background-color: #c3c3c3;
    color: #c3c3c3;
}

.list-table .list-table-data .data.status.completed {
    background-color: #26448f;
    color: #26448f;
}

.list-table .list-table-data .data.status.onhold {
    background-color: #f1c83e;
    color: #f1c83e;
}

.list-table .list-table-data .data.status.dropped {
    background-color: #a12f31;
    color: #a12f31;
}


also you can add this code to the top of your CSS to fix your cover images
@\import "https://malscraper.azurewebsites.net/covers/anime/espurrit0/presets/datatitlebefore";
or remove the /* and */ from the one your using and add the escape \ for @\import
ShaggyZESep 25, 2021 4:42 PM
Sep 25, 2021 6:15 PM

Offline
Jul 2021
2
Got it, thank you so much for your help ShaggyZE!
Sep 30, 2021 2:41 PM

Offline
Mar 2021
25
Hey I would like to have the exact same anime/manga list as Is it possible? I tried getting it from her website but it isn't the exact same one.
Shishio-kunOct 1, 2021 12:21 PM
Sep 30, 2021 3:17 PM
Offline
Sep 2021
1
please is there a way to download this view:https://anilist.co/search/anime/trending
in my list??
and is there is a way to add one more "list" in "myanimelist"?
Sep 30, 2021 3:22 PM

Offline
May 2010
997
KIODAI said:
please is there a way to download this view:https://anilist.co/search/anime/trending
in my list??
and is there is a way to add one more "list" in "myanimelist"?
no, you can not just download html/css from a whole other site and magically have the same CSS code that MAL uses for it's themes, it would need to be designed from scratch, or you can pick one of the premade grid style custom layouts Fully-Customized Layouts
you can make mini lists using tags when you go to edit details of an anime or manga and enable tags in List Preferences
ShaggyZESep 30, 2021 3:29 PM
Oct 1, 2021 3:52 AM

Offline
Mar 2021
25
zau said:
Hey I would like to have the exact same anime/manga list as. Is it possible? I tried getting it from her website but it isn't the exact same one.


I've tried using the "View Page Source" method to see the list but it still doesn't work, the list just becomes so scrambled.
Shishio-kunOct 1, 2021 12:21 PM
Oct 1, 2021 8:51 AM

Offline
Feb 2010
11294
zau said:
zau said:
Hey I would like to have the exact same anime/manga list as . Is it possible? I tried getting it from her website but it isn't the exact same one.


I've tried using the "View Page Source" method to see the list but it still doesn't work, the list just becomes so scrambled.


You should be able to copy the layout CSS with Inspect Element, it will be on one of the style sheets in Firefox, see the video on my channel in my signature
Shishio-kunOct 1, 2021 12:21 PM
Oct 1, 2021 9:33 AM

Offline
Mar 2021
25
Shishio-kun said:
zau said:


I've tried using the "View Page Source" method to see the list but it still doesn't work, the list just becomes so scrambled.


You should be able to copy the layout CSS with Inspect Element, it will be on one of the style sheets in Firefox, see the video on my channel in my signature


Thank you! Though, Is it possible to request a custom made layout based on that specific list? I want my list to look like that but a little bit tweaked. Unfortunately I don't have the time right now to customize it so I was gonna ask if it's possible to pay you for this request? If you're interested let's talk in PM's or just send me your discord or lmk another way we can discuss privately. Thank youu!!
Shishio-kunOct 1, 2021 12:21 PM
Oct 1, 2021 9:39 AM

Offline
Feb 2010
11294
zau said:
Shishio-kun said:


You should be able to copy the layout CSS with Inspect Element, it will be on one of the style sheets in Firefox, see the video on my channel in my signature


Thank you! Though, Is it possible to request a custom made layout based on that specific list? I want my list to look like that but a little bit tweaked. Unfortunately I don't have the time right now to customize it so I was gonna ask if it's possible to pay you for this request? If you're interested let's talk in PM's or just send me your discord or lmk another way we can discuss privately. Thank youu!!


I don't open up my private info

I hate doing requests since I put so much effort into tutorials, but I'd do it for $300 up front and that's all you'd have to pay in total, is that fine?

Shishio-kunOct 1, 2021 12:21 PM
Oct 1, 2021 10:15 AM

Offline
Mar 2021
25
Shishio-kun said:
zau said:


Thank you! Though, Is it possible to request a custom made layout based on that specific list? I want my list to look like that but a little bit tweaked. Unfortunately I don't have the time right now to customize it so I was gonna ask if it's possible to pay you for this request? If you're interested let's talk in PM's or just send me your discord or lmk another way we can discuss privately. Thank youu!!


I don't open up my private info

I hate doing requests since I put so much effort into tutorials, but I'd do it for $300 up front and that's all you'd have to pay in total, is that fine?



Ah that's a shame, that's too much for me, especially for only 3-4 changes that I wanted added to that list.
Shishio-kunOct 1, 2021 12:21 PM
Reply Disabled for Non-Club Members
Pages (157) « First ... « 142 143 [144] 145 146 » ... Last »

More topics from this board

» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )

Shishio-kun - Sep 4, 2020

121 by Pokitaru »»
Apr 21, 3:25 AM

» [CSS-MODERN] Change list text/font colors on any list layout

Shishio-kun - May 4, 2021

3 by hideso »»
Apr 20, 4:33 PM

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

Shishio-kun - Jul 15, 2019

17 by hideso »»
Apr 20, 4:03 PM

» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )

Cateinya - Aug 18, 2016

309 by hideso »»
Apr 20, 3:56 PM

» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by Hahaido

Shishio-kun - Dec 27, 2015

9 by tsyndi »»
Apr 18, 9:23 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login