[CSS - MODERN] ⭐️ Moving and customizing all individual text and sections on the layout

Offline

Feb 2010

11294

ArbiterofWhim said:
Is it possible to use something like "order:" to rearrange headers/columns within the list table, instead of trying to hard-code left/right positional values?

Stuff on order can be found here

https://www.w3schools.com/cssref/css3_pr_order.php
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_order

If I add the flex code to the header (forces all the headers to have that property) and then add order to the number and title selectors, I can move rotate their order, so I imagine you can re-order all the headers with these codes

.list-table .list-table-header {
display: flex !important;}

.list-table .list-table-header .header-title.number {
background-color: teal!important;
displaY: flex !important;
order: 2 !important;;
}

.list-table .list-table-header .header-title.title {
background-color: cyan!important;
displaY: flex !important;
order: 1 !important;;
}

the columns are similar so you could do the same with them, I would think. You can always try and let us know what happened or what codes you used; we might be able to continue on what you started or suggest something to make it work.

Jul 22, 2023 9:38 AM

ArbiterofWhim

Offline

Apr 2013

115

@Shishio-kun
I went ahead and used flex/order, but unfortunately flex seems to remove the default width/fill settings. All the values started clumping together and overlapping a bit, so I had to manually adjust the widths as well.

/* give the columns flex positioning so they can be ordered */
.list-table .list-table-header,
.list-table .list-table-data{
display: flex !important;
}
.list-table .list-table-header .header-title.number,
.list-table .list-table-data .data.number{
order: 1 !important;
width: 20px !important;
}
.list-table .list-table-header .header-title.image{
order: 2 !important;
}
.list-table .list-table-header .header-title.title,
.list-table .list-table-data .data.title{
order: 3 !important;
width: 60% !important;
}
.list-table .list-table-header .header-title.score,
.list-table .list-table-data .data.score{
order: 4 !important;
width: 50px !important;
}
.list-table .list-table-header .header-title.type,
.list-table .list-table-data .data.type{
order: 5 !important;
width: 55px !important;
}
.list-table .list-table-header .header-title.progress,
.list-table .list-table-data .data.progress{
order: 6 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.tags,
.list-table .list-table-data .data.tags{
order: 100 !important;
width: 80px !important;
}
.list-table .list-table-header .header-title.started,
.list-table .list-table-data .data.started{
order: 7 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.finished,
.list-table .list-table-data .data.finished{
order: 8 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.studio,
.list-table .list-table-data .data.studio{
order: 9 !important;
width: 100px !important;
}
.list-table .list-table-header .header-title.priority,
.list-table .list-table-data .data.priority{
order: 10 !important;
width: 95px !important;
}

and here's what it looks like (with some added borders and ad hoc padding to make the header and data cell right-side borders line up)

The code definitely isn't super pretty lol.

Jul 22, 2023 1:08 PM

Offline

Feb 2010

11294

ArbiterofWhim said:
@Shishio-kun
I went ahead and used flex/order, but unfortunately flex seems to remove the default width/fill settings. All the values started clumping together and overlapping a bit, so I had to manually adjust the widths as well.

/* give the columns flex positioning so they can be ordered */
.list-table .list-table-header,
.list-table .list-table-data{
display: flex !important;
}
.list-table .list-table-header .header-title.number,
.list-table .list-table-data .data.number{
order: 1 !important;
width: 20px !important;
}
.list-table .list-table-header .header-title.image{
order: 2 !important;
}
.list-table .list-table-header .header-title.title,
.list-table .list-table-data .data.title{
order: 3 !important;
width: 60% !important;
}
.list-table .list-table-header .header-title.score,
.list-table .list-table-data .data.score{
order: 4 !important;
width: 50px !important;
}
.list-table .list-table-header .header-title.type,
.list-table .list-table-data .data.type{
order: 5 !important;
width: 55px !important;
}
.list-table .list-table-header .header-title.progress,
.list-table .list-table-data .data.progress{
order: 6 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.tags,
.list-table .list-table-data .data.tags{
order: 100 !important;
width: 80px !important;
}
.list-table .list-table-header .header-title.started,
.list-table .list-table-data .data.started{
order: 7 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.finished,
.list-table .list-table-data .data.finished{
order: 8 !important;
width: 70px !important;
}
.list-table .list-table-header .header-title.studio,
.list-table .list-table-data .data.studio{
order: 9 !important;
width: 100px !important;
}
.list-table .list-table-header .header-title.priority,
.list-table .list-table-data .data.priority{
order: 10 !important;
width: 95px !important;
}

and here's what it looks like (with some added borders and ad hoc padding to make the header and data cell right-side borders line up)

The code definitely isn't super pretty lol.

I think it's turning out well, everything seems to be adjustable you can also give some width to the tables so they accommodate better

.list-unit {
  width: 1424px;
}

.list-container {
  width: 1458px;
}

I think there's one more table code but they look better with those imo. I would just go from here reordering every table by category until everything looks right for you. In a worse case scenario you can use the category page specific selectors to override the order with another order @_@

Jul 22, 2023 1:20 PM

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2197

@ArbiterofWhim If you need any help using Flex box here's the guide I constantly referenced when I was still figuring it out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I've found css-tricks guides are quite good for getting a more complete grasp of any topic the first time 'round.

Sep 15, 2023 8:00 AM

Offline

Apr 2023

Is there any way I can change the text of Column headers

I tried this guide and also tried to do trial and error using https://myanimelist.net/forum/?topicid=1930157 this post as well
However I couldnt have any results

(i was originally trying to change my tags column title to "Genres" because I happen to put genres in the tags so its easier to check my list

sarv_gSep 15, 2023 8:34 AM

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Sep 15, 2023 7:01 PM

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2197

Reply to sarv_g

@sarv_g It should be very similar to the thread you linked. Basically once you've got the correct selector you set the "font-size" to 0 and add a ::before or an ::after selector with a non-zero "font-size" and the "content" property with the new text. For instance, for the tag header column:

.header-title.tags {
	font-size: 0;
}
.header-title.tags::before {
	content: "Genres :)";
	font-size: 11px;
}

This uses a shortened version of the selector from this thread and the method from the thread you linked to change the text.

Sep 15, 2023 7:06 PM

Offline

Apr 2023

Reply to Valerio_Lyndon

.header-title.tags {
	font-size: 0;
}
.header-title.tags::before {
	content: "Genres :)";
	font-size: 11px;
}

This uses a shortened version of the selector from this thread and the method from the thread you linked to change the text.

@Valerio_Lyndon
Oohhh wow that is so smart

I did try using the

.header-title.tags:before

selector
however the "tags" portion was still left after the "Genres" text

but by reducing the Font Size to 0, that "Tags" wont show anymore as its font is reduced
This is very smart! Thanks so much for this

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Sep 16, 2023 12:21 PM

#10

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2197

Reply to sarv_g

@Valerio_Lyndon
Oohhh wow that is so smart

I did try using the

.header-title.tags:before

@sarv_g It's a pretty neat trick. :) A lot of CSS, especially here where we have no control over the page HTML, is finding methods to work around the limitations of being only a styling langauge. I've always found this to be a fun puzzle, maybe you will to! If you're ever Googling a CSS problem, Stackoverflow (user Q&A website) and CSS-Tricks (blog/article website) are places I have found to have useful guides or answers. Some of the language definitely flew over my head early on but they still proved very handy while learning how to center a div.

Sep 16, 2023 1:36 PM

#11

Offline

Apr 2023

Reply to Valerio_Lyndon

@Valerio_Lyndon
hahaha yeah
I have never really worked with CSS before but I have been trying to understand everything. There are a lot of limitations but I guess if we think smartly, many of them can also be solved pretty neatly
I am gonna be making a completely new design of my own soon next (because I wanna try it once atleast), so maybe all this knowledge will come handy then at once

Thanks again btw!

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Sep 16, 2023 2:47 PM

#12

Offline

Apr 2023

ah im back here again because I ran into more issues

Basically this is on a different layout (Clarity layout)
on clarity layout, I customized the seasons to look as a block as well and trying to color it
However when I did that, the block started overlapping with the tags column next to it
I tried to move the progress and score section to the right so that I could make space for section, however it did not work

the code I was using was this

There are so many issues with it
firstly when I shift the score column, the black circle and score itself gets disoriented
secondly, when I shift progress column, the "progress" doesnt move and in the "currently watching" section, it even disorients as well
and lastly, when I move one column, I am unable to move the 2nd one as well. Like lets say I move both seasons and progress, then only the column which was designated to move firstly, moves but the other doesnt.

I think it might be bcos im using clarity, that this issue is arising. I am not sure at all

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Nov 11, 2023 10:00 PM

#13

Offline

Jun 2021

2313

Reply to sarv_g

the code I was using was this

@sarv_g What you did for the seasons with the custom colors and emojis are pretty cool.

So this code is for the season (from the guide above):

/* SEASON */
.list-table .list-table-data .data.season a{
color: grey !important;
background-color: orange !important;
position: relative !important;
top: 0px !important;
left: 0px !important;
}

but how can I make it like in the shared photo above?

Hmm... Is that possible for the Modern List Design's Default Theme? 😅 I wanna try that on my list too.

📺&📖 A/M | 🎧 | Rec A/M

Nov 12, 2023 1:07 AM

#14

Offline

Feb 2010

11294

@IridescentJaune youd have to add the code they posted to Clarity, or possibly their Clarity edits. When I do this with current Clarity, it is fine, it works as expected and moves the tags a bit + would require the other sections moved with manual codes- if you moved tags too much to the left or right

https://pastebin.com/raw/gjsYvvrY
(tags I made red)

They arent using Clarity now, so I guess they dont want to use it anymore, or it was an issue that was fixed in the past 6 weeks

@sarv_g if you have your Clarity edit you can post it here for us to look at but the code works normally with Clarity, as far as I can see now

(I really like the background pic too O_O)

Nov 12, 2023 4:25 AM

#15

Offline

Jun 2021

2313

Reply to Shishio-kun

@Shishio-kun Yeah, I was gonna inspect their code to learn how to implement the custom colors and emojis on the seasons or "Premiered" column but sadly they're now using a different layout. 😅 I tried looking for comments regarding that in the Clarity thread before but I haven't seen any (or just missed). Although, I've seen some lists way before with the same effect.

If I use

/* SEASON */
.list-table .list-table-data .data.season a{
color: grey !important;
background-color: orange !important;
position: relative !important;
top: 0px !important;
left: 0px !important;
}

all the seasons just turn into whatever color I implement. I want to assign a specific color and emoji per season in my list like in the photo shared above.

📺&📖 A/M | 🎧 | Rec A/M

Nov 12, 2023 5:32 AM

#16

Offline

Feb 2010

11294

Reply to IridescentJaune

/* SEASON */
.list-table .list-table-data .data.season a{
color: grey !important;
background-color: orange !important;
position: relative !important;
top: 0px !important;
left: 0px !important;
}

all the seasons just turn into whatever color I implement. I want to assign a specific color and emoji per season in my list like in the photo shared above.

@IridescentJaune

Try this? For 2023 spring color control

td.data.season > span > a[href*="/anime/season/2023/spring"]

{
color: red !important;
}

For the emoji?

td.data.season > span > a[href*="/anime/season/2023/spring"]:after

{
content: "🥰️";
}

Nov 12, 2023 7:06 AM

#17

Offline

Jun 2021

2313

Reply to Shishio-kun

@Shishio-kun It worked. But will I have to manually do that for ALL seasons? 😭😂 It's fine to do it manually for the 4 seasons but there are years too and not just Winter, Spring, Summer, Fall. I could already imagine the lines of code. 😅 I checked Clarity's source code on GitHub but I've difficulty finding the selectors they used for seasons or "Premiered".

📺&📖 A/M | 🎧 | Rec A/M

Nov 12, 2023 7:12 AM

#18

Offline

Feb 2010

11294

Reply to IridescentJaune

@IridescentJaune

Maybe do a big list with copy/paste and edit the years like this?

td.data.season > span > a[href*="/anime/season/2023/spring"],
td.data.season > span > a[href*="/anime/season/2022/spring"],
td.data.season > span > a[href*="/anime/season/2021/spring"],
td.data.season > span > a[href*="/anime/season/2020/spring"],
td.data.season > span > a[href*="/anime/season/2019/spring"],
td.data.season > span > a[href*="/anime/season/2018/spring"],
td.data.season > span > a[href*="/anime/season/2017/spring"],
td.data.season > span > a[href*="/anime/season/2016/spring"],
td.data.season > span > a[href*="/anime/season/2015/spring"],
td.data.season > span > a[href*="/anime/season/2014/spring"],
td.data.season > span > a[href*="/anime/season/2013/spring"]
{
color: red !important;
}

remember last css code in the list shouldnt have a comma at the end like spring 2013 in that list. VL with Clarity prob found a way to shorten the URLs to just spring and make it work with one selector line of code, I'm not good with that kinda thing my education was in networking not web design 😭

We used to have to give each individual anime on our lists its own individual cover code before cover code generators.... 😭😭😭

each one manually edited.. took forever 🥺️

Shishio-kunNov 12, 2023 7:16 AM

Nov 12, 2023 9:34 AM

#19

hideso

Offline

Nov 2010

Alternatively, you can use Color-Coded Tags trick to change all links that end with 'spring'.

td.data.season > span > a[href$="spring"] {
     color: red !important;
     }

Nov 12, 2023 9:51 AM

#20

Offline

Jun 2021

2313

Reply to Shishio-kun

@Shishio-kun I don't think I could do 1917-present (as I already gave up when I reached the 90s). That's just way too many plus x4 since there are 4 seasons. That's gonna be 400+ lines. 😭😂 I guess I'll just implement that for 2023 or the current season/s (even though I seldom watch seasonals) and then change the year later on.

I don't think they did it like that for Clarity. LOL.

OMG!

📺&📖 A/M | 🎧 | Rec A/M

Nov 12, 2023 10:07 AM

#21

Offline

Jun 2021

2313

Reply to hideso

Alternatively, you can use Color-Coded Tags trick to change all links that end with 'spring'.

td.data.season > span > a[href$="spring"] {
     color: red !important;
     }

@hideso Oh, that worked and with the emoji code provided earlier too! 🤗 Yay!!! Thanks, y'all!

📺&📖 A/M | 🎧 | Rec A/M

Nov 12, 2023 6:11 PM

#22

Offline

Feb 2010

11294

Reply to hideso

Alternatively, you can use Color-Coded Tags trick to change all links that end with 'spring'.

td.data.season > span > a[href$="spring"] {
     color: red !important;
     }

@hideso Oh that's perfect I'll think of a way to add this later, thanks!

Nov 13, 2023 5:30 AM

#23

Offline

Jun 2021

2313

Here are some codes. Just change the emojis and colors (HEX color codes) to your liking. Tweak the codes if you want.

Legend:
💙 - Winter (blue)
💖 - Spring (pink)
💚 - Summer (green)
🧡 - Fall (orange)
*I just used color coded heart emojis and default colors...

———————————————————————————————————————————————————————————————————————————————

If you want to to apply the effect to a certain season. Codes below are for 2023. Just change the year 2023 to whichever year.

Emojis before the season:

/*===========================================*\
|        Seasons or "Premiered" Column        |
\* ---- - --- - --- - --- - --- - --- - ---- */

/*Winter*/
td.data.season > span > a[href*="/anime/season/2023/winter"]:before {
    content: "💙";
}
td.data.season > span > a[href*="/anime/season/2023/winter"] {
    color: blue !important;
}

/*Spring*/
td.data.season > span > a[href*="/anime/season/2023/spring"]:before {
    content: "💖";
}
td.data.season > span > a[href*="/anime/season/2023/spring"] {
    color: pink !important;
}

/*Summer*/
td.data.season > span > a[href*="/anime/season/2023/summer"]:before {
    content: "💚";
}
td.data.season > span > a[href*="/anime/season/2023/summer"] {
    color: green !important;
}

/*Fall*/
td.data.season > span > a[href*="/anime/season/2023/fall"]:before {
    content: "🧡️";
}
td.data.season > span > a[href*="/anime/season/2023/fall"] {
    color: orange !important;
}
/*------------------------E-N-D-*/

Emojis after the season:

/*===========================================*\
|        Seasons or "Premiered" Column        |
\* ---- - --- - --- - --- - --- - --- - ---- */

/*Winter*/
td.data.season > span > a[href*="/anime/season/2023/winter"]:after {
    content: "💙";
}
td.data.season > span > a[href*="/anime/season/2023/winter"] {
    color: blue !important;
}

/*Spring*/
td.data.season > span > a[href*="/anime/season/2023/spring"]:after {
    content: "💖";
}
td.data.season > span > a[href*="/anime/season/2023/spring"] {
    color: pink !important;
}

/*Summer*/
td.data.season > span > a[href*="/anime/season/2023/summer"]:after {
    content: "💚";
}
td.data.season > span > a[href*="/anime/season/2023/summer"] {
    color: green !important;
}

/*Fall*/
td.data.season > span > a[href*="/anime/season/2023/fall"]:after {
    content: "🧡️";
}
td.data.season > span > a[href*="/anime/season/2023/fall"] {
    color: orange !important;
}
/*------------------------E-N-D-*/

———————————————————————————————————————————————————————————————————————————————

For ALL Seasons (1917-Present)

Emojis before the season:

/*===========================================*\
|      All Seasons or "Premiered" Column      |
\* ---- - --- - --- - --- - --- - --- - ---- */

/*Winter*/
td.data.season > span > a[href$="winter"]:before {
    content: "💙";
  }
  
  td.data.season > span > a[href$="winter"] {
    color: blue !important;
  }
  
  /*Spring*/
  td.data.season > span > a[href$="spring"]:before {
    content: "💖";
  }
  
  td.data.season > span > a[href$="spring"] {
    color: pink !important;
  }
  
  /*Summer*/
  td.data.season > span > a[href$="summer"]:before {
    content: "💚";
  }
  
  td.data.season > span > a[href$="summer"] {
    color: green !important;
  }
  
  /*Fall*/
  td.data.season > span > a[href$="fall"]:before {
    content: "🧡️";
  }
  
  td.data.season > span > a[href$="fall"] {
    color: orange !important;
  }
  /*------------------------E-N-D-*/

Emojis after the season:

/*===========================================*\
|      All Seasons or "Premiered" Column      |
\* ---- - --- - --- - --- - --- - --- - ---- */

/*Winter*/
td.data.season > span > a[href$="winter"]:after {
    content: "💙";
  }
  
  td.data.season > span > a[href$="winter"] {
    color: blue !important;
  }
  
  /*Spring*/
  td.data.season > span > a[href$="spring"]:after {
    content: "💖";
  }
  
  td.data.season > span > a[href$="spring"] {
    color: pink !important;
  }
  
  /*Summer*/
  td.data.season > span > a[href$="summer"]:after {
    content: "💚";
  }
  
  td.data.season > span > a[href$="summer"] {
    color: green !important;
  }
  
  /*Fall*/
  td.data.season > span > a[href$="fall"]:after {
    content: "🧡️";
  }
  
  td.data.season > span > a[href$="fall"] {
    color: orange !important;
  }
  /*------------------------E-N-D-*/

---

P.S. I might add some images later on. LOL.

---

If you just want to add emojis and not change the font colors, then you can use this code from VL's Clarity theme:

/* ==============
Seasonal emojis*/
.data.season span a[href*="season"]::before {
	content: var(--gicon)
}
/* Winter */
a[href$="/winter"]::before {
	--gicon: "❄️"
}
/* Spring */
a[href$="/spring"]::before {
	--gicon: "🌸"
}
/* Summer */
a[href$="/summer"]::before {
	--gicon: "☀️"
}
/* Fall */
a[href$="/fall"]::before {
	--gicon: "🍂"
}

Just change 'before' to 'after' if you want emojis after the text.

IridescentJauneFeb 2, 4:19 PM

📺&📖 A/M | 🎧 | Rec A/M

Nov 13, 2023 12:16 PM

#24

Offline

Apr 2023

Reply to Shishio-kun

@Shishio-kun haha I actually still happen to have clarity edit of mine and I still love it. The reason I don't have it equiped is because I was working on adding a music player in my clarity edit but I had exams come up so I decided to leave the Css.

I'll post my clarity Edit later and see what code u are using because I actually couldn't figure that issue out myself either when I posted it here. I disabled that modification until I could find more but they just kept overlapping

the code i was using was

sarv_gNov 13, 2023 12:38 PM

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Nov 13, 2023 12:59 PM

#25

Offline

Apr 2023

Reply to sarv_g

@sarv_g https://pastebin.com/B9vZiPmV here is my entire clarity edit lol
the thing at the bottom of the code is what im having issue with. What I originally wanted was

so u this pic

i wanted to remove the whole "Premiered" writing at top and then make space between the tags (which are currently genres lol) and seasons
but when i do this in my CSS, they overlap. Plus im not even able to remove the whole "premiered" heading on top anymore either

the part that's doing this is at the bottom, its starting from where i wrote the whole

/* colors on seasons with changing the appearance of season as well */

since my code has the whole synopsis and the score styling as well. when i try to shift the other columns, something from the code always break lol

sarv_gNov 13, 2023 1:02 PM

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Nov 16, 2023 1:57 AM

#26

hideso

Offline

Nov 2010

@sarv_g

It's not easy to help you accomplish your goal or identify the code causing the issue without the modified layout in use. Perhaps temporarily switching to the problematic layout would make it more accessible for others to investigate the CSS code, test it, and provide assistance in resolving the issue.

Nov 16, 2023 12:50 PM

#27

Offline

Apr 2023

Reply to hideso

@hideso oh but I left the pastebin link above with the whole code of the modified layout. I'll switch to clarity on mal again too I suppose lol. I wasn't using it cos the whole overlapping issue is still not fixed

HEYYY HEYYY HEYYYYYYY

I hope you're having a good day!
Add me as friend on discord if u wanna talk about anime some time!
Username: Knight Rider#2763

Nov 16, 2023 1:38 PM

#28

hideso

Offline

Nov 2010

sarv_g said:
i wanted to remove the whole "Premiered" writing at top and then make space between the tags (which are currently genres lol) and seasons
but when i do this in my CSS, they overlap. Plus im not even able to remove the whole "premiered" heading on top anymore either

Add the following codes at the bottom, and feel free to adjust the column width (152px) to your preference:

/* Increase "Season" column width from 92px to 152px */
.data.season {
	width: 152px;
	}

/* Remove the word "Premiered" */
.data.season:before {
	content: "";
	}

Dec 20, 2023 3:50 PM

#29

Offline

Jun 2021

2313

Reply to Valerio_Lyndon

.header-title.tags {
	font-size: 0;
}
.header-title.tags::before {
	content: "Genres :)";
	font-size: 11px;
}

This uses a shortened version of the selector from this thread and the method from the thread you linked to change the text.

@Valerio_Lyndon Oh, so that's how you could change the header title for the column headers... Hmm, can I add a link to the "content" instead of changing the header name?

I want the 'Genre' header to link to one of my blog posts about genres (or to here https://myanimelist.net/anime.php for my anime list and here https://myanimelist.net/manga.php for my manga list). Is that possible?

I tried this

but I only got a broken ? image and it's not even clickable.

📺&📖 A/M | 🎧 | Rec A/M

Dec 21, 2023 10:47 PM

#30

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2197

Reply to IridescentJaune

but I only got a broken ? image and it's not even clickable.

@IridescentJaune CSS struggles with functional changes since it's a styling language. It can wrap up a present real nice, but it can't change the contents. The url() function is used for loading images, so it's trying to read that blog link as an image file.

The only way I know of to add new links would be to use the "Notes" section on an anime or manga you don't mind cluttering up the notes of. The main issue with this is having to keep some "dummy" anime/manga in each list category so that the link works on every page.

I think I'll write up a basic guide on this tomorrow.

Dec 22, 2023 7:50 PM

#31

Offline

Jun 2021

2313

Reply to Valerio_Lyndon

@Valerio_Lyndon That's a bummer. 😔 Wish we could add links to column headers easily.

📺&📖 A/M | 🎧 | Rec A/M

Dec 22, 2023 9:53 PM

#32

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2197

Reply to IridescentJaune

@Valerio_Lyndon That's a bummer. 😔 Wish we could add links to column headers easily.

@IridescentJaune Later than I intended I have published the guide. You can find it here: https://myanimelist.net/forum/?topicid=2136893

Note that this isn't tailored to your specific need but is a general resource. If the guide is understandable and you want to go down that route then I can help you tailor it to your need. I'm pretty sure you could position a custom link over top of the genre header in your list.