Forum Settings
Forums
New
Reply Disabled for Non-Club Members
Pages (157) « First ... « 140 141 [142] 143 144 » ... Last »
Jul 17, 2021 9:21 PM
平沢唯

Offline
Dec 2016
2197
hacker09 said:
$('tr:contains("DROP")').css('background-color', 'rgba(144, 144, 144, 0.3')[0]

This JQuery helps, but I would like much more to do that using a single JavaScript line, not a single JQquery line, I also do prefer to use "a single" css line instead of js or jquery...

I think the only chance of a one-liner is jQuery. Vanilla JavaScript is naturally more verbose, it just comes with the territory. But that said, anything you can do with jQuery you can do with JS as it's the same language. So you could do something similar like this, which I imagine might be able to be shortened to 2 or 3 lines if you know any easier ways to write a loop.
rows = document.querySelectorAll('.ranking-list');

for(i = 0; i < rows.length; i++) {
	if(rows[i].textContent.includes('Completed')) {
		rows[i].style.cssText = 'background: blue !important;';
	}
}

Although in this specific case, as I said before, the background is not on the <tr> but each individual <td>. So the code would need a couple more lines:
rows = document.querySelectorAll('.ranking-list');

for(i = 0; i < rows.length; i++) {
	if(rows[i].textContent.includes('Completed')) {
		td = rows[i].getElementsByTagName('td');
		for(j = 0; j < td.length; j++) {
			td[j].style.cssText = 'background: blue !important;';
		}
	}
}

I would still personally use the code I wrote in the earlier reply though as there it doesn't have to loop through every single row. Instead, it only loops through the ones that are completed or dropped.

hacker09 said:
Yeah, I knew it was possible to mix both, but my main point is actually to avoid the 50-100 lines of JS and do it in CSS.

But from what I searched CSS sucks and is impossible to do it using only css.

It's not so much that CSS sucks but that it was never and probably will never be built to do this. CSS is a styling language and reads the DOM top to bottom for optimization reasons. It wasn't meant to have any logic functions. Assuming someone builds their own website, they have no need for CSS to be able to look-back as you can add any info that might be needed into the DOM yourself via PHP, React, or whatever else you're running the website on.

Unless you're doing some extremely complex 'contains' logic, I would bet that any JavaScript you have to write will still be: easier to maintain, more compatible, and probably fewer lines than the CSS equivalent. Especially if the JS is repeatable enough that you can turn it into a function.

To show you, here is a working example of the the minimum CSS. Even with selectors optimizations (to remove repeating properties) it's around 10 statements/42 lines with my formatting. Not including comments, for obvious reasons. I only included the comments to justify why each line was there.
tr {
	/* add relative positioning and z-index so the new background will be placed correctly */
	position: relative;
	z-index: 1;
	/* change from table display so that relative positioning will work */
	display: flex;
	align-items: stretch;
	/* add background to <tr> since we're going to remove it from <td> */
	background: #fff;
} tr:nth-of-type(2n+1) {
	background: #f6f6f6;
}

.ranking-list td {
	/* recenter table values since the display is no longer table */
	display: flex;
	justify-content: center;
	align-items: center;
	/* remove default background since it would hide the new one */
	background: none !important;
}

/* maintain widths as they were before the display change */
td:not(.title) {
	flex: 0 0 auto;
} td.rank {
	width: 75px;
} td.title {
	width: 100%;
	flex-shrink: 1;
} td.score {
	width: 97px;
} td.your-score {
	width: 97px;
} td.status {
	width: 115px;
}

/* add new element for background */
.btn-addEdit-large:is(.dropped,.completed)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: blue;
}

This is not very pretty, but it is the only way to do it with CSS. A big downside here in comparison to JS is if the user has any custom CSS for MyAnimeList this will likely break their custom theme on this page. Not to mention, any change MAL makes to their ranking list will probably mean rewriting this code. Admittedly, that would probably be true of the Javascript too, but it's easier to change which element you're applying a class to as compared with relearning how the entire page style works.
Valerio_LyndonJul 17, 2021 9:26 PM
Jul 17, 2021 9:56 PM
Offline
Apr 2021
1
I was wondering how to cahnge the text color from your code in gridstyle 5 since
body{ color:black;} does not work. this is the link for your code https://pastebin.com/raw/v6eZPMdM
Jul 18, 2021 7:10 AM

Offline
Dec 2019
3354
It's not so much that CSS sucks but that it was never and probably will never be built to do this. CSS is a styling language and reads the DOM top to bottom for optimization reasons. It wasn't meant to have any logic functions. Assuming someone builds their own website, they have no need for CSS to be able to look-back as you can add any info that might be needed into the DOM yourself via PHP, React, or whatever else you're running the website on.

Yeah, that makes sense, webmasters wouldn't need to "loop" or something complex like that since they are already the webmaster and can change the html and classes by hand.

That 42 lines of code are huge, seems to be needless and don't really seem to do what I want like this line does
$('tr:contains("DROP")').css('background-color', 'rgba(144, 144, 144, 0.3')[0]

I might be wrong and the 42 lines of code you wrote actually may do the same thing as that line, but since it's 42 lines it's better to stick with the jquery one line option, seems to much work to test the 42 lines of code, testing the 1 line code of jquery was much easier too, but thank you.
I just dislike jquery because it has (and/or) causes a lot of compatibility issues.

it's easier to change which element you're applying a class to as compared with relearning how the entire page style works.

True.
Click here to see My Tampermonkey Scripts For MAL

If you like my work, please consider supporting it!
https://www.patreon.com/hacker09


Jul 21, 2021 3:54 PM

Offline
Apr 2021
146
is there a way to automatically highlight my top rated anime/manga?

for example all my 9-10 rated entries are automatically highlighted in some manner
Jul 24, 2021 2:57 PM

Offline
Jul 2016
441
o/ yo long time no see
ive been out of the game for a while

i want to make a Key or Legend of sorts, with some hyperlinks and text
https://i.imgur.com/f33IsRV.png

so take some element, :before or :after it, make a box of some dimensions and content=something or somesuch

what i dont know is - how do i make it "stick" to the screen, and not scroll with the page "beneath" it?


Jul 24, 2021 7:01 PM

Offline
Feb 2010
11294
EhmelgyXD said:
I was wondering how to cahnge the text color from your code in gridstyle 5 since
body{ color:black;} does not work. this is the link for your code https://pastebin.com/raw/v6eZPMdM



Search the extensions at the end of the post for font color codes
https://myanimelist.net/forum/?topicid=1640096

Or try the color codes in the font color tutorial
https://myanimelist.net/forum/?topicid=1499059#msg63378290
Jul 25, 2021 1:46 PM

Offline
May 2010
997
mutsurhea said:
o/ yo long time no see
ive been out of the game for a while

i want to make a Key or Legend of sorts, with some hyperlinks and text
https://i.imgur.com/f33IsRV.png

so take some element, :before or :after it, make a box of some dimensions and content=something or somesuch

what i dont know is - how do i make it "stick" to the screen, and not scroll with the page "beneath" it?

to make it stick you make the position relative or absolute and then give it a left: right: top: or bottom: in pixels ie left: 400px; or percentages then do your styling like border or border-color.

{
display: block !important;
content: "text";
position: absolute !important;
height: 400px !important;
width: 215px !important;
right: calc(100% - 245px) !important;
top: 560px !important;;
opacity: 1 !important;
z-index: 1 !important;
pointer-events: visible !important;
}

https://www.w3schools.com/css/css_positioning.asp
ShaggyZEJul 25, 2021 2:31 PM
Jul 25, 2021 7:53 PM
平沢唯

Offline
Dec 2016
2197
hrxshi said:
is there a way to automatically highlight my top rated anime/manga?

for example all my 9-10 rated entries are automatically highlighted in some manner

Responded in the Clarity forum thread since the answer to this question will depend greatly depending on the theme you're using.
https://myanimelist.net/forum/?topicid=1723114&show=850#msg63940834
Jul 27, 2021 2:33 AM
Offline
Oct 2015
6
Hello, everyone!

I'm having an issue here with my mordern list, my profile picture is missing it's just white where it should be!
here's a screenshot: https://imgur.com/dQs1MAS

Thanks for the attention!
Jul 28, 2021 12:06 AM
平沢唯

Offline
Dec 2016
2197
RiqueALopes said:
Hello, everyone!

I'm having an issue here with my mordern list, my profile picture is missing it's just white where it should be!
here's a screenshot: https://imgur.com/dQs1MAS

Thanks for the attention!

Some of your code is broken which is affecting the avatar code. In addition, you need to add an image URL to the avatar code.

To fix this, replace the code that is missing a parenthesis and a curly bracket around line ~38-40 with this replacement code. Broken code:

Replace it with this:
body[data-query*='"status":7'] {
   background-image: url("http://i.imgur.com/9UKrxRw.jpg");
}


And then you can add the image URL to the avatar section:

If you want your current MAL avatar you should use this URL. I got this URL by going to your profile, right clicking your avatar, and selecting "copy image link" (or similar).
https://cdn.myanimelist.net/images/userimages/4948758.jpg?t=1627426200


If you want to adjust the sizing you can also add a "background-size" property, that I would recommend setting to "cover". You could even add a "background-position" property if you want to move it around a bit. Just make sure the new properties are inside the curly brackets {}. Here's a GIF of how to add them if you desire:
Jul 28, 2021 5:21 AM
Nostalgia Addict

Offline
Feb 2018
234
https://myanimelist.net/forum/?topicid=1470713
So about this:
Centering the spoiler not the text inside

It seems @Shishio-kun solution didn't work, or maybe I just didn't understand, can anyone explain?
Jul 28, 2021 9:45 AM

Offline
Feb 2010
11294
WIIXAnd said:
https://myanimelist.net/forum/?topicid=1470713
So about this:
Centering the spoiler not the text inside

It seems @Shishio-kun solution didn't work, or maybe I just didn't understand, can anyone explain?


Already answered here, please don't notify other people twice for the same thing.
https://myanimelist.net/forum/?topicid=1470713#msg63965879
Jul 28, 2021 10:30 AM
Nostalgia Addict

Offline
Feb 2018
234
Shishio-kun said:
WIIXAnd said:
https://myanimelist.net/forum/?topicid=1470713
So about this:

It seems @Shishio-kun solution didn't work, or maybe I just didn't understand, can anyone explain?


Already answered here, please don't notify other people twice for the same thing.
https://myanimelist.net/forum/?topicid=1470713#msg63965879


Sorry, but I read that your notifications are off...
Jul 28, 2021 10:57 AM

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


Already answered here, please don't notify other people twice for the same thing.
https://myanimelist.net/forum/?topicid=1470713#msg63965879


Sorry, but I read that your notifications are off...


That's why I said don't do it to other people....

It's annoying and I seen stuff like that drive away designers and volunteers from the site. And then people like me turn off the notifications because of stuff like this and now fewer people can contact us. You only need to notify people once lol it's a small but easy courtesy.

Jul 28, 2021 8:35 PM
Offline
Oct 2015
6
Valerio_Lyndon said:
RiqueALopes said:
Hello, everyone!

I'm having an issue here with my mordern list, my profile picture is missing it's just white where it should be!
here's a screenshot: https://imgur.com/dQs1MAS

Thanks for the attention!

Some of your code is broken which is affecting the avatar code. In addition, you need to add an image URL to the avatar code.

To fix this, replace the code that is missing a parenthesis and a curly bracket around line ~38-40 with this replacement code. Broken code:

Replace it with this:
body[data-query*='"status":7'] {
   background-image: url("http://i.imgur.com/9UKrxRw.jpg");
}


And then you can add the image URL to the avatar section:

If you want your current MAL avatar you should use this URL. I got this URL by going to your profile, right clicking your avatar, and selecting "copy image link" (or similar).
https://cdn.myanimelist.net/images/userimages/4948758.jpg?t=1627426200


If you want to adjust the sizing you can also add a "background-size" property, that I would recommend setting to "cover". You could even add a "background-position" property if you want to move it around a bit. Just make sure the new properties are inside the curly brackets {}. Here's a GIF of how to add them if you desire:


Thank you so much! it Worked!
Jul 30, 2021 3:37 AM

Offline
Apr 2021
10
Hello, So I wanted to add tags to my clarity theme. But even after adding codes on the top and the end won't make it work. I have read the forum post for it as well, but something keeps getting wrong.

Here is my current css code:
https://pastebin.com/5Tzw0gdR

sorry for my English,
Pingu_the_weebJul 31, 2021 12:09 AM
Jul 31, 2021 10:18 PM
平沢唯

Offline
Dec 2016
2197
Pingu_the_weeb said:
Hello, So I wanted to add tags to my clarity theme. But even after adding codes on the top and the end won't make it work. I have read the forum post for it as well, but something keeps getting wrong.

Here is my current css code:
https://pastebin.com/5Tzw0gdR

sorry for my English,

You don't have any tags on your items except for one tag on "Monster":


To add tags to an item you need to either open the "Edit" menu and add tags there, or cllick on the pencil icon to the right of any item and edit them there.
Aug 1, 2021 2:20 AM

Offline
Apr 2021
10
oh right.
But actually, I was talking about those things
rated, premiered,start-end dates
Aug 1, 2021 10:05 AM

Offline
Feb 2010
11294
Pingu_the_weeb said:
oh right.
But actually, I was talking about those things
rated, premiered,start-end dates


You add those things here by checking the boxes for them and saving
https://myanimelist.net/editprofile.php?go=listpreferences

Some are automatically done on your list based on MAL's database, and others you have to edit after adding them with the link above. You click the edit button on your anime to edit what features can be edited.
Aug 1, 2021 9:55 PM

Offline
Apr 2021
10
thanks
Aug 9, 2021 12:34 PM

Offline
Sep 2015
88
This might be a strange question, but is there a maximum length allowed for the custom CSS you can use for the list style?
I combined a few standard themes to make one I'm fully happy with and have 1938 lines with almost 70k characters in total.
When I try to copy it into the preview box it works well, but once I click "save" it cuts off about 100 lines of code! I couldn't find anything on it, so I thought I'd try asking here.

Aug 10, 2021 6:26 AM

Offline
Jan 2020
7247
Can anyone share me the link to the header outline tweak? I can't seem to find it.
Aug 11, 2021 12:27 AM

Offline
May 2010
997
Crystaldragon36 said:
This might be a strange question, but is there a maximum length allowed for the custom CSS you can use for the list style?
I combined a few standard themes to make one I'm fully happy with and have 1938 lines with almost 70k characters in total.
When I try to copy it into the preview box it works well, but once I click "save" it cuts off about 100 lines of code! I couldn't find anything on it, so I thought I'd try asking here.
yes there is a limit and it's mentioned often but I forget how many characters it is, but that's why most host their CSS on dropbox, you can also download its windows app and simply editing the file on your pc will update your anime/manga lists.

https://myanimelist.net/forum/?topicid=1499059#msg63378306
ShaggyZEAug 11, 2021 12:32 AM
Aug 11, 2021 1:52 AM

Offline
Sep 2015
88
ShaggyZE said:
Crystaldragon36 said:
This might be a strange question, but is there a maximum length allowed for the custom CSS you can use for the list style?
I combined a few standard themes to make one I'm fully happy with and have 1938 lines with almost 70k characters in total.
When I try to copy it into the preview box it works well, but once I click "save" it cuts off about 100 lines of code! I couldn't find anything on it, so I thought I'd try asking here.
yes there is a limit and it's mentioned often but I forget how many characters it is, but that's why most host their CSS on dropbox, you can also download its windows app and simply editing the file on your pc will update your anime/manga lists.

https://myanimelist.net/forum/?topicid=1499059#msg63378306


Thanks a lot for the reply! I did some experimenting too and the max seems to be 65,204 characters fyi. I somehow must have missed that there was a limkt... hehe. I will definitely try the method you mentioned, so thanks again for the link. ^-^

Aug 11, 2021 4:55 AM
Offline
Dec 2020
15
How do I change the css code of one of one anime only. For exapmle I want One Piece to look different from all the other anime but all the animes have the same class .list-item.
Aug 11, 2021 5:01 AM

Offline
Jul 2016
441
ShaggyZE said:
mutsurhea said:
o/ yo long time no see
ive been out of the game for a while

i want to make a Key or Legend of sorts, with some hyperlinks and text
https://i.imgur.com/f33IsRV.png

so take some element, :before or :after it, make a box of some dimensions and content=something or somesuch

what i dont know is - how do i make it "stick" to the screen, and not scroll with the page "beneath" it?

to make it stick you make the position relative or absolute and then give it a left: right: top: or bottom: in pixels ie left: 400px; or percentages then do your styling like border or border-color.

{
display: block !important;
content: "text";
position: absolute !important;
height: 400px !important;
width: 215px !important;
right: calc(100% - 245px) !important;
top: 560px !important;;
opacity: 1 !important;
z-index: 1 !important;
pointer-events: visible !important;
}

https://www.w3schools.com/css/css_positioning.asp
Thx mate.

Also, am I still using the best import for the job re: posters?
@\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css";
Asking as I'm getting white unloaded [timed out] posters on some, and because it's been over a year since I updated it I think.


Aug 11, 2021 5:15 AM

Offline
May 2010
997
mutsurhea said:
ShaggyZE said:

to make it stick you make the position relative or absolute and then give it a left: right: top: or bottom: in pixels ie left: 400px; or percentages then do your styling like border or border-color.

{
display: block !important;
content: "text";
position: absolute !important;
height: 400px !important;
width: 215px !important;
right: calc(100% - 245px) !important;
top: 560px !important;;
opacity: 1 !important;
z-index: 1 !important;
pointer-events: visible !important;
}

https://www.w3schools.com/css/css_positioning.asp
Thx mate.

Also, am I still using the best import for the job re: posters?
@\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css";
Asking as I'm getting white unloaded [timed out] posters on some, and because it's been over a year since I updated it I think.

If I was you I would use this for your anime list
@\import "https://malscraper.azurewebsites.net/covers/anime/mutsurhea/presets/dataimagelinkbefore";
and this for manga list
@\import "https://malscraper.azurewebsites.net/covers/manga/mutsurhea/presets/dataimagelinkbefore";
there are auto presets you can use, sometimes it takes a bit of time to generate newly added, but doing it this way will keep the list small and you can always goto the URL and save it to overwrite your animelist_dataimagelinkbefore.css if you want to have a backup in case malscraper goes down.

https://malscraper.azurewebsites.net/covers
ShaggyZEAug 11, 2021 5:23 AM
Aug 11, 2021 5:21 AM

Offline
Jul 2016
441
ShaggyZE said:
> it takes a bit of time to generate the first time.


Does it take a bit of time the first time for each individual trying to access my mal for their first time, as its generated for each accessing user?
  • and therefor anyone else who goes to my page for the first time experiences slow times?

or it takes a bit of time the first time Me, I, Myself accessing it, as its generated then becomes static?
  • and therefor anyone else who goes to my page for the first time experiences quick times?
mtsRheaAug 11, 2021 5:25 AM


Aug 11, 2021 5:29 AM

Offline
May 2010
997
mutsurhea said:

Does it take a bit of time the first time for each individual trying to access my mal for their first time, as its generated for each accessing user?
  • and therefor anyone else who goes to my page for the first time experiences slow times?

or it takes a bit of time the first time Me, I, Myself accessing it, as its generated then becomes static?
  • and therefor anyone else who goes to my page for the first time experiences quick times?

looking at it, it looks like it returns a list of all covers the first time until it builds your list, then it probably rebuilds your list every 24 hours whoever loads it, you or someone else viewing it first, and it won't appear to be slow ever since it uses a complete list or you're prior generated one, but I'm just speculating as it could generate faster than 24 hour and using some cronjob for all I know.
ShaggyZEAug 11, 2021 5:34 AM
Aug 11, 2021 8:38 AM

Offline
Jul 2016
441
ShaggyZE said:

looking at it, it looks like it returns a list of all covers the first time until it builds your list, then it probably rebuilds your list every 24 hours whoever loads it, you or someone else viewing it first, and it won't appear to be slow ever since it uses a complete list or you're prior generated one, but I'm just speculating as it could generate faster than 24 hour and using some cronjob for all I know.
Doesn't this mean its only worth it if I view my list multiple times per day?
If I only view it once a week or so [which is the case], won't it be slower?
mtsRheaAug 11, 2021 8:43 AM


Aug 11, 2021 8:50 AM

Offline
May 2010
997
mutsurhea said:
ShaggyZE said:

looking at it, it looks like it returns a list of all covers the first time until it builds your list, then it probably rebuilds your list every 24 hours whoever loads it, you or someone else viewing it first, and it won't appear to be slow ever since it uses a complete list or you're prior generated one, but I'm just speculating as it could generate faster than 24 hour and using some cronjob for all I know.
Doesn't this mean its only worth it if I view my list multiple times per day?
If I only view it once a week or so, won't it be slower?
no, as I said it will use your previously generated css it made and it will only build a new one once every 24 hours so that it's not generating lists for thousands of users putting too much load on their servers who are refreshing their lists constantly, and it's never slow when i said "a bit of time to generate newly added" that had nothing to do with speed.
when you or someone else visits your list next then it will queue a new css to be built or update the new anime covers of your recently added anime/manga if any so you will only see a few blank covers that will appear in usually a few hours to a day depending on if it's built one already for that day from what I've noticed.

I wouldn't put so much thought into as it isn't that complicated, it's simply going to keep generating it as you add more to your list and your list gets visited, that's it.
ShaggyZEAug 11, 2021 9:08 AM
Aug 11, 2021 3:36 PM

Offline
May 2010
997
SAOLover69k said:
How do I change the css code of one of one anime only. For exapmle I want One Piece to look different from all the other anime but all the animes have the same class .list-item.
it depends on what your trying to select/change and whether you want to edit it, before it or after it, but some examples are
.list-item .list-table-data .data.studio a[href="/anime/producer/21"]::before
.list-table #more-21.more-info
.link[href^="/anime/21/"]
#tags-21:after
td.data.title.clearfix a.link.sort[href*="One_Piece"]:after
.data.image a[href^="/anime/21/"]:before
ShaggyZEAug 11, 2021 3:45 PM
Aug 12, 2021 8:25 AM

Offline
Jul 2016
441
[quote=ShaggyZE message=64095625]
mutsurhea said:
no, as I said it will use your previously generated css it made and it will only build a new one once every 24 hours so that it's not generating lists for thousands of users putting too much load on their servers who are refreshing their lists constantly, and it's never slow when i said "a bit of time to generate newly added" that had nothing to do with speed.
when you or someone else visits your list next then it will queue a new css to be built or update the new anime covers of your recently added anime/manga if any so you will only see a few blank covers that will appear in usually a few hours to a day depending on if it's built one already for that day from what I've noticed.

I wouldn't put so much thought into as it isn't that complicated, it's simply going to keep generating it as you add more to your list and your list gets visited, that's it.
Thx mate. it's much appreciated.


Aug 13, 2021 5:42 AM

Offline
Dec 2019
126
Hey I want to know how can I resize these from my manga list.




Aug 13, 2021 12:24 PM

Offline
Jan 2020
7247
IrrelevantGuy said:
Can anyone share me the link to the header outline tweak? I can't seem to find it.

Bump
Aug 13, 2021 1:46 PM

Offline
Feb 2010
11294
IrrelevantGuy said:
IrrelevantGuy said:
Can anyone share me the link to the header outline tweak? I can't seem to find it.

Bump


https://myanimelist.net/forum/?topicid=1723114
It's under Further Modification

Aug 13, 2021 7:05 PM

Offline
May 2010
997
JohnnyNumbuh28 said:
Hey I want to know how can I resize these from my manga list.
you will probably want to watch the inspect tutorial https://www.youtube.com/watch?v=cTGbVutdqfc since you can target each element seperately all at once to be more precise although i'm not going to list them all, but here is a majority of them taken from your css
.list-table .list-table-data .data.chapter, .list-table .list-table-data .data.chapter a, .list-table .list-table-data .data.licensor a, .list-table .list-table-data .data.magazine a, .list-table .list-table-data .data.progress, .list-table .list-table-data .data.progress a, .list-table .list-table-data .data.score:before, .list-table .list-table-data .data.score a, .list-table .list-table-data .data.season a, .list-table .list-table-data .data.volume, .list-table .list-table-data .data.volume a {
  font-size: 9px !important;
}
to change the font-size or you can try a more broader approach like
body {
    font-size: 9px !important;
}
Aug 13, 2021 10:13 PM

Offline
Jan 2020
7247
Shishio-kun said:
IrrelevantGuy said:

Bump


https://myanimelist.net/forum/?topicid=1723114
It's under Further Modification


Thanks a lot!
Aug 14, 2021 7:40 AM

Offline
Mar 2021
25
Hey, was wondering if you can help me with my classic list. So I figured how to widen the "tags" section but as you can see, the text from the tags become really close to each other and I wanted to know if there is a possibility to enlarge the section between the titles so the text doesn't seem so close to the other.

I'm also curious to know if it's possible for the (tags) text to be centered, or to be more exact, to start from the center and not from the left. ( I hope that makes sense )
Aug 14, 2021 8:04 AM

Offline
May 2010
997
zau said:
Hey, was wondering if you can help me with my classic list. So I figured how to widen the "tags" section but as you can see, the text from the tags become really close to each other and I wanted to know if there is a possibility to enlarge the section between the titles so the text doesn't seem so close to the other.

I'm also curious to know if it's possible for the (tags) text to be centered, or to be more exact, to start from the center and not from the left. ( I hope that makes sense )

not sure I know what you mean about the text being so close together unless you mean the line height, but centering the text should be easy enough try
td[class^="td"] {
    line-height: 12pt !important;
    text-align: center !important;
}
ShaggyZEAug 14, 2021 8:08 AM
Aug 14, 2021 8:12 AM

Offline
Mar 2021
25
ShaggyZE said:
zau said:
Hey, was wondering if you can help me with my classic list. So I figured how to widen the "tags" section but as you can see, the text from the tags become really close to each other and I wanted to know if there is a possibility to enlarge the section between the titles so the text doesn't seem so close to the other.

I'm also curious to know if it's possible for the (tags) text to be centered, or to be more exact, to start from the center and not from the left. ( I hope that makes sense )

not sure I know what you mean about the text being so close together unless you mean the line height, but centering the text should be easy enough try
td[class^="td"] {
    line-height: 15pt !important;
    text-align: center !important;
}


Centering worked! Thanks.

~about the first problem, what I mean is that the tags texts are too close to each other. If you look in my list for example, "Another" and "Boku no hero Academia" both have something written in tags but it's hard to distinguish where the text both starts and ends. I just want some space in between both shows so you can clearly see what's written for both.
Aug 14, 2021 8:19 AM

Offline
May 2010
997
zau said:
ShaggyZE said:

not sure I know what you mean about the text being so close together unless you mean the line height, but centering the text should be easy enough try
td[class^="td"] {
    line-height: 15pt !important;
    text-align: center !important;
}


Centering worked! Thanks.

~about the first problem, what I mean is that the tags texts are too close to each other. If you look in my list for example, "Another" and "Boku no hero Academia" both have something written in tags but it's hard to distinguish where the text both starts and ends. I just want some space in between both shows so you can clearly see what's written for both.

okay you can probably just use
tr {
    height: 30px !important;
}
for that also I think the line-height 15 is too much I'd change it to 12 or delete it.
Aug 14, 2021 8:30 AM

Offline
Mar 2021
25
ShaggyZE said:
zau said:


Centering worked! Thanks.

~about the first problem, what I mean is that the tags texts are too close to each other. If you look in my list for example, "Another" and "Boku no hero Academia" both have something written in tags but it's hard to distinguish where the text both starts and ends. I just want some space in between both shows so you can clearly see what's written for both.

okay you can probably just use
tr {
    height: 30px !important;
}
for that also I think the line-height 15 is too much I'd change it to 12 or delete it.


Works really well, thanks.

One more thing, as you can see, the "centering" code also centered the title's and I don't want that. Is there a way you can center just the tags?
Aug 14, 2021 9:09 AM

Offline
Mar 2021
25
zau said:
ShaggyZE said:

okay you can probably just use
tr {
    height: 30px !important;
}
for that also I think the line-height 15 is too much I'd change it to 12 or delete it.


Works really well, thanks.

One more thing, as you can see, the "centering" code also centered the title's and I don't want that. Is there a way you can center just the tags?


Nvm I figured it out. Though, the height code doesn't seem to work. It makes space between the titles but it hardly makes any differences between the tags text. You can look at my list for instance.
Aug 14, 2021 9:17 AM

Offline
May 2010
997
zau said:
zau said:


Works really well, thanks.

One more thing, as you can see, the "centering" code also centered the title's and I don't want that. Is there a way you can center just the tags?


Nvm I figured it out. Though, the height code doesn't seem to work. It makes space between the titles but it hardly makes any differences between the tags text. You can look at my list for instance.

okay, you can try something like
.td1:nth-of-type(6), .td2:nth-of-type(6) {
    width: 230px;
    line-height: 14pt !important;
    text-align: center !important;
    padding-block: 5px;
}
also there is padding-top or padding-bottom amongst others
ShaggyZEAug 14, 2021 9:23 AM
Aug 14, 2021 9:19 AM

Offline
Mar 2021
25
ShaggyZE said:
zau said:


Nvm I figured it out. Though, the height code doesn't seem to work. It makes space between the titles but it hardly makes any differences between the tags text. You can look at my list for instance.

okay, you can try something like padding-block: 5px;


Holy shit that worked. You're a champ dude. Thanks so much!!!
Aug 14, 2021 10:02 AM

Offline
Mar 2021
25
ShaggyZE said:
zau said:


Nvm I figured it out. Though, the height code doesn't seem to work. It makes space between the titles but it hardly makes any differences between the tags text. You can look at my list for instance.

okay, you can try something like
.td1:nth-of-type(6), .td2:nth-of-type(6) {
    width: 230px;
    line-height: 14pt !important;
    text-align: center !important;
    padding-block: 5px;
}
also there is padding-top or padding-bottom amongst others


Lmao sorry for asking again, but is there a way to move the "Score Type Prograss Tab" bar more to the left so it fits with what is displayed. It's kind of scrabbled right now.
Aug 14, 2021 10:31 AM

Offline
May 2010
997
zau said:
ShaggyZE said:

okay, you can try something like
.td1:nth-of-type(6), .td2:nth-of-type(6) {
    width: 230px;
    line-height: 14pt !important;
    text-align: center !important;
    padding-block: 5px;
}
also there is padding-top or padding-bottom amongst others


Lmao sorry for asking again, but is there a way to move the "Score Type Prograss Tab" bar more to the left so it fits with what is displayed. It's kind of scrabbled right now.

you might need to change the width of each table_header individually or you can get it close with just changing the width of the header anime title
.table_header:nth-of-type(2) {
    width: 125px;
}
you can get even more control by using left:, right: but think that might overcomplicate things.
Aug 14, 2021 10:32 AM

Offline
Mar 2021
25
ShaggyZE said:
zau said:


Lmao sorry for asking again, but is there a way to move the "Score Type Prograss Tab" bar more to the left so it fits with what is displayed. It's kind of scrabbled right now.

you might need to change the width of each table_header individually or you can get it close with just changing the width of the header anime title
.table_header:nth-of-type(2) {
    width: 125px;
}


Alright, thanks a lot man.
Aug 17, 2021 6:25 AM

Offline
Dec 2019
126
ShaggyZE said:
JohnnyNumbuh28 said:
Hey I want to know how can I resize these from my manga list.
you will probably want to watch the inspect tutorial https://www.youtube.com/watch?v=cTGbVutdqfc since you can target each element seperately all at once to be more precise although i'm not going to list them all, but here is a majority of them taken from your css
.list-table .list-table-data .data.chapter, .list-table .list-table-data .data.chapter a, .list-table .list-table-data .data.licensor a, .list-table .list-table-data .data.magazine a, .list-table .list-table-data .data.progress, .list-table .list-table-data .data.progress a, .list-table .list-table-data .data.score:before, .list-table .list-table-data .data.score a, .list-table .list-table-data .data.season a, .list-table .list-table-data .data.volume, .list-table .list-table-data .data.volume a {
  font-size: 9px !important;
}
to change the font-size or you can try a more broader approach like
body {
    font-size: 9px !important;
}

The thing is ive tried those 2 and it affects the anime list too and I want it to affect only the manga list.




Reply Disabled for Non-Club Members
Pages (157) « First ... « 140 141 [142] 143 144 » ... 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