Shishio-kun said: I want the tags to show up. Also don't know how to fix the bold anime titles.VilkaTheWolf said: It seems to be working now. However now all the anime titles in my list are bold like the headers and my tags aren't showing up in the boxes (they were before). Thanks :) you're a big help. It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). |
VilkaTheWolf said: Shishio-kun said: I want the tags to show up. Also don't know how to fix the bold anime titles.It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title |
Shishio-kun said: Everything works! Thank you! btw, is having the anime's english title show up in the hover possible? i looked up the tutorial stuff about having the titles in it but its only the original names.VilkaTheWolf said: I want the tags to show up. Also don't know how to fix the bold anime titles. then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title |
VilkaTheWolf said: Shishio-kun said: Everything works! Thank you! btw, is having the anime's english title show up in the hover possible? i looked up the tutorial stuff about having the titles in it but its only the original names.then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title Automatically in the hover? I never looked into that so I don't know. |
| Thanks for the tutorial it worked really well, but I have one question. Is there a way to make the box in which the tags are written scale with the text? Basically can the box get bigger the more text there is so it can all fit? |
 |
Kano said: Thanks for the tutorial it worked really well, but I have one question. Is there a way to make the box in which the tags are written scale with the text? Basically can the box get bigger the more text there is so it can all fit? You can remove height and width and just use padding codes to space the box around the text. Example: /* MINI REVIEW (HOVER TAG) */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 542px; left: 1232px; background-color: rgba(255, 255, 255, 1) !important; border-color: black; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 1px; font-size: 14px; padding: 5px 5px 5px 5px; color: white !important; z-index: 1; } |
| Thank you so much, I'm gonna try and test this out and see how much I like it. Keep up the good work :D. |
|
| This works well for the most part for my anime list, but it does not work at all for my manga list. I have checked that I am doing the right code for my manga list, but 90% of the time the covers don't show up, and when they do they are of anime and manga that do not correlate. My other problem is: My anime list also has covers that are not filled in, and I tried MalCat on both manga and anime lists but nothing happened. Am I doing something wrong? |
 |
| Can change the "tags section" for make reviews for the "comment section?"? |
Sokuno said: Can change the "tags section" for make reviews for the "comment section?"? You mean the comments when you click More, right? It's something we used to wonder about but from what I remember no one found a way because the comments are contained in the more section which requires you to click the button first. I can't recall exactly, but I think in one of @Nymphiae layouts she had a thing where they drew the text from the anime synopsis page to display on an anime list (which is very uncommon and amazing). Maybe there's a way to link to the comment section, if they are drawing text from the synopsis. Comments can contain BBcode, I believe you can display URL links written in the comments without clicking the more button. |
Shishio-kun said: Sokuno said: Can change the "tags section" for make reviews for the "comment section?"? You mean the comments when you click More, right? It's something we used to wonder about but from what I remember no one found a way because the comments are contained in the more section which requires you to click the button first. I can't recall exactly, but I think in one of @Nymphiae layouts she had a thing where they drew the text from the anime synopsis page to display on an anime list (which is very uncommon and amazing). Maybe there's a way to link to the comment section, if they are drawing text from the synopsis. Comments can contain BBcode, I believe you can display URL links written in the comments without clicking the more button. True, it was done manually with BurntJelly's generator, and displayed synopses as :before or :after elements. I don't know anything detailed about it, but I don't think it would be possible to retrieve the data from comments section. Maybe @Doomcat55 would know better cause he can actually code and knows about stuff like this. Though, again, I think BurntJelly's generator works with the anime information, and this would be user information. Btw, I believe @Cateinya's endless summer layout used the same synopses trick as my layout. Afaik, the best way to write mini reviews that can be displayed on a list is either in the tags section, thought the character limit is 255 and you might want to use the tag section for something else, or to do it manually like I did with the synopses, as :before or :after elements. |
Enseihar said: Sorry for the disturbances I really need some help regarding Layout design There is no guide for Cover+Tag with Zoom on your guide https://myanimelist.net/forum/?topicid=419405 Which why I'm having trouble to make it work. However, I managed to work Zoom+cover picture but the cover picture starts at the center which made me feel dizzy while browsing on my layout page so I had removed it whilst the tag, I had no idea how to make it work only the cover picture+zoom. I want to imitate your sample where the zoom out starts near the number  But I wish the tag borders is also included with the cover picture while zooming out. I'm really sorry for the trouble I just had no idea on how to fix this issue. Animelist layout codes Mangalist Layout Codes Thanks in advance! So in short what you want is: When you move the cursor over the thumbnail preview, the tags zoom out of nowhere too, alongside the cover pic. If not let me know exactly. |
Enseihar said: Ummmm... yes something like that but my design layout has no thumbnail preview, only the anime titles I still don't understand. So what you want is: 1. to use the layout you have now 2. when you point to an animetitle, you want the cover pic and tags (mini-review) to zoom out from the animetitle? |
Enseihar said: Shishio-kun said: I still don't understand. So what you want is: 1. to use the layout you have now 2. when you point to an animetitle, you want the cover pic and tags (mini-review) to zoom out from the animetitle? Yup is that possible or nah? Well, I would write this for you, but I've noticed you are taking credit for the list design on the copyright section, when you didn't design 99% of your list (well, in a sense, none of it). Based on the "fuck you"attitude and the fact many of these layouts have the designer on it, I'll presume you removed whoever was on there previously as well. Anyways, bye and please leave our community alone |
| I've been using this for quite some time and it works perfectly, but I've been wondering, is there a way to make it so that during hover, the text shown will not be the 'tags' but the 'comments'? I still want the 'tags' section in the list and the more button to be invisible, just that the text during hover will be what I write in the 'comments' section of the anime info. Can you help me with that? |
Did2009 said: I've been using this for quite some time and it works perfectly, but I've been wondering, is there a way to make it so that during hover, the text shown will not be the 'tags' but the 'comments'? I still want the 'tags' section in the list and the more button to be invisible, just that the text during hover will be what I write in the 'comments' section of the anime info. Can you help me with that? I don't think anyone found a way to do this. 2023 update: comments are different today and can be targeted in classic with something like
td div:nth-child(3){
background-color: red !important;
} |
Shishio-kunJul 16, 2023 5:54 PM
| Is there a way to pull from the 'notes' section for the mini-reviews? I've been trying to figure out how to grab that value, but with no success. With notes enabled in list settings the value of notes is right there underneath the anime title, so I'd imagine it shouldn't be that difficult to reference. It would be a huge improvement over using tags, since it doesn't cap out at 255 characters. Or is 'notes' synonymous with 'comments', which we haven't found a way to reference? |
 |
ArbiterofWhim said: Is there a way to pull from the 'notes' section for the mini-reviews? I've been trying to figure out how to grab that value, but with no success. With notes enabled in list settings the value of notes is right there underneath the anime title, so I'd imagine it shouldn't be that difficult to reference. It would be a huge improvement over using tags, since it doesn't cap out at 255 characters. Or is 'notes' synonymous with 'comments', which we haven't found a way to reference? It's not an ideal solution but if you want to target the notes on your list I think you can just use these td div:nth-child(3){
background-color: red !important;
}or this div:nth-child(3){
background-color: red !important;
}and then they need the selectors for hover only in the front same as the reviews tr:hover div:nth-child(3){
background-color: red !important;
display: block !important;
}
tr div:nth-child(3){
display: none;
}
|
| Thanks, that works. I should be able to mess with positional values and whatnot to get it to match how tags currently looks. One thing I'm curious about is the random number that shows up in addition to the content of notes. I took a pair of screenshots (one without positional settings for the td div:nth-child(3) block, and one with top:10px;left:10px;) to illustrate how it moves around. The value doesn't seem to be tied to anything specific in the anime details, which you can see if you mouse over some of the other anime in my Currently Watching. https://imgur.com/a/MDZzhXy Also, is there any way to hide the "( Add notes)" bit by default, or is it just a limitation that there has to be something in the notes field before it can be hidden? Some of the anime that don't have anything in the notes field are hiding it by default, but most aren't. Not seeing a pattern. |
|
ArbiterofWhim said: Thanks, that works. I should be able to mess with positional values and whatnot to get it to match how tags currently looks. One thing I'm curious about is the random number that shows up in addition to the content of notes. I took a pair of screenshots (one without positional settings for the td div:nth-child(3) block, and one with top:10px;left:10px;) to illustrate how it moves around. The value doesn't seem to be tied to anything specific in the anime details, which you can see if you mouse over some of the other anime in my Currently Watching. https://imgur.com/a/MDZzhXy Also, is there any way to hide the "( Add notes)" bit by default, or is it just a limitation that there has to be something in the notes field before it can be hidden? Some of the anime that don't have anything in the notes field are hiding it by default, but most aren't. Not seeing a pattern. OK so that code is also targeting the progress section -that's what I meant by not perfect, its very general but I thought nothing else would have that selector- so it won't work for what you need. Maybe this will work better, can't find the random number you're referring to and the list lags a lot on All so I can't confirm tbody tr td.td1 div div{ background: orange; } or td div div or both td.td1 div div{ color: red !important; } td.td2 div div{ color: red !important; } hard to say since only one line has notes #noteLinks54398 would be the exact selector but you need a more general one that isn't too general (every anime with notes has something like that) I'd have to map the list out a bit as its classic and find the true note selector for classic, but I can't really look into something like this much until late August since I'm really pressed for time until then To find selectors you'd have to learn to use Inspect Element (bottom 2 videos) https://myanimelist.net/forum/?topicid=2077862&msgid=68651728#msg68651728 The other thing you asked I dont follow but I'm sure it can be hidden it might have been done in modern. There's probably a code for the modern version of notes which may be the same thing you should look in those same tutorials for that I might have mapped it before. |
Shishio-kunJul 16, 2023 8:13 PM
Shishio-kun said: Maybe this will work better, can't find the random number you're referring to and the list lags a lot on All so I can't confirm Here's a better look at the random number thing I'm talking about. I took screencaps with different entries hovered over and cobbled them into one image.  Did an inspect on one of them:  And then I noticed that the number is always exactly 1 more than the current episode progress number. So if it's at 1/12, the number will be 2 and so on. Not sure how that's getting caught up in the note field reference though. Oh also I viewed my list while not logged in and these weird numbers weren't visible. Seems to only be visible to the list owner. Shishio-kun said: Here's a more descriptive image of what I'm talking about regarding the notes section not being hidden, albeit inconsistently. Green and Orange are the behavior we want to see, Red is the weird behavior.The other thing you asked I dont follow but I'm sure it can be hidden it might have been done in modern. There's probably a code for the modern version of notes which may be the same thing you should look in those same tutorials for that I might have mapped it before. https://i.imgur.com/LWS9WXN.png EDIT: I think I found the cause. There's a code snippet in my CSS that adds parenthesis around small text stuff like "currently airing", which seems to also apply to the "Add notes" text that would otherwise be hidden. These forced parenthesis are causing some wonky override of the hide. A fix would require a way to differentiate small texts so that the parenthesis aren't applied to "Add notes" but are applied to "currently airing"/"Not yet aired"/etc. /* Brackets for small text like 'rewatching' or 'airing' */
.td1 small:before, .td2 small:before{
content:'(';
}
.td1 small:after, .td2 small:after{
content:')';
}Shishio-kun said: Of course, I'm already very grateful that you've helped point me in the right direction. If you can get around to looking into it a bit more when you have time that would be hugely appreciated, but this is definitely a low-priority thing. In the meantime, I'll try to figure out what I can on my own. And if Modern has the capability to replicate what my list currently looks like, then I might try to remake this style in modern. It'd be a lot easier to just let it go and find a new style among the premades but, since I've used this list style for a decade or so, I'm a bit too fond of it to change it without a fight lol.I'd have to map the list out a bit as its classic and find the true note selector for classic, but I can't really look into something like this much until late August since I'm really pressed for time until then |
ArbiterofWhimJul 17, 2023 5:32 PM
|
A bit more information about the weird number (henceforth referred to as "WN"). I went ahead and added some positional and border settings to the notes block so the CSS now looks like this:td div:nth-child(3){
position: fixed;
top: 442px;
left: 10px;
background-color: rgba(20, 30, 255, 0.85) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
font-size: 12px;
padding: 10px 10px 0px 24px;
z-index: 3;
}
tr:hover div:nth-child(3){
background-color: red !important;
display: block !important;
}
tr div:nth-child(3){
display: none;
}This combined with a higher z-index essentially puts it on top of my existing tag-based mini-review. I learned something interesting through this.  The WN, which is only visible to the list owner and seems to come from the progress counter updater stuff, is treated as a separate element from the contents of Notes. Manually deleting the "1" inside Inspect doesn't actually get rid of the bordered bubble, since the element still exists just empty. Also, by adding height/width that matches what my tag element is using: height: 145px; width: 312px; we get some more weird behavior. The width/height applies correctly to the WN, but doesn't seem to correctly apply the width to the Notes element.  |
|
| Classic lists are tough. xD I really think that your idea of recreating its style on mordern setup is a way better solution than actually trying to edit it. So, i read the topic and if i understood correctly, the problem right now is that 'random' number that is related to the episodes count. If you check up the inspect element, you will see that it's already set with 'display:none' property on its own HTML. But, the problem is that with the general hover code 'tr:hover div:nth-child(3)', it's setting it to reappears when hovered. Thankfully it has an id with a pattern, so you can add this code to your CSS to prevent it from showing when hovered: tr:hover div[id*="holdDynamicEpNum"] {
display:none!important;
}Other solution would be to remove the '!important' declaration from the 'display:block!important' on your previous hover code 'tr:hover div:nth-child(3)'. I've checked and, having it, doesn't seem to matter too much. About the WN being the only one to receive the properties, this happens because the used selector 'tr:hover nth-child(3)' matches for both the notes and the WN, so both of them are getting styled. Also, there is another element inside the notes div that is getting styled too. This one is related to the possibility to edit the notes text by just clicking on it. That's why i said classic lists are tough and, damn, it's my first time working with them. Brave warriors were the ones who started to style them. xD So, this problem is partially solved by whether adding the code i suggested or removing the '!important' declaration from the hover selector. By doing this, another red and white bordered square will appear in front of the notes text. This one, as i said before, is related to the edit tags text. The solution now depends on what you want to do. If you want to keep editing notes by also clicking the text, i would have to take a deeper look. If you want to simply remove it, you can add the code below to your CSS. The first one will remove the div and the second one will deabilitate clicking events. div[id*="noteRowEdit"] {
display:none!important;
}
div[id*="noteLinks"] {
pointer-events:none!important;
}Also, for the notes width case, you should add an '!important' declaration after the value you want because, similarly to the WN case, the div of notes already have an width set within its HTML. So, if you want to overrule it, you need to add this declaration. width:200px!important; Don't know if i answered this correctly, so if you can, update me with your doubts. And, sorry for any english mistakes. It's not my native language. |
getNortedJul 19, 2023 7:22 AM
| @ArbiterofWhim So did you get rid of the "add notes" with that? If not, I could probably look for the add notes selector in classic later Did you try the other codes to avoid the random numbers tbody tr td.td1 div div{ background: orange; } or td div div or both td.td1 div div{ color: red !important; } td.td2 div div{ color: red !important; } If not, can you give me the CSS that makes the random numbers and I will put it on my list and see if I can find them and a way to remove them Unfortunately all the other stuff is very confusing for me to read through, but notes and tags are different sections so tags width wont affect notes width notes need their own width. Could you maybe just do a mockup blueprint of what you want to do and I will look into it later. Like put an X over stuff you don't want and outline other stuff you do want |
| @ArbiterofWhim After installing your layout, this is the code I would use to make notes hover I think as you want; I don't see the progress glitch number this way and I don't see any stretched out boxes. I'm using different codes from some that you're using, including the ones I suggested
/* Notes hover - START */
td.td1 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 100px;
}
tr:hover td.td1 div div{
background-color: red !important;
display: block !important;
opacity: 1;
}
td.td2 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 100px;
}
tr:hover td.td2 div div{
background-color: purple !important;
display: block !important;
opacity: 1;
}
Remove "add notes", I think getnorted's would work too they seem more precise td.td1 div small:nth-child(2) {display: none !important;}
td.td2 div small:nth-child(2) {display: none !important;}hover tags td[class^='td']:nth-of-type(6) {
background-color: green !important;
height: 0 !important;
padding:0 !important;
top: 82px;
left: 320px;
width: 100px !important;
opacity: 0;
position: fixed;
border: none !important;
}
/* Tag hover */
tr:hover td[class^='td']:nth-of-type(6){
background-color: green !important;
opacity: 1;
padding:0 !important;
}
/* Tag edit */
td:nth-of-type(6) small {
display: none !important;
}Layout CSS: https://pastebin.com/raw/BN7W4Kcm This is how it looks testing on my own list, tags on the right of the cover when I have any and notes on the bottom. You could color both sections still I just didnt here, and the covers are off since they arent synced for this list If there's any width not working, you can try to use !important before the semicolon to force it in. Otherwise you might have to try/edit another selector which is overriding the one you're adding width to. https://www.youtube.com/watch?v=hPEXHvnCpxk |
Shishio-kunJul 18, 2023 4:11 PM
Shishio-kun said: This eliminated the progress number, so yeah it was probably just a quirk of the previous method of referencing the value. The alternating colors (red/purple) is an interesting behavior, but fortunately not an issue since I can just set both to have the desired color (or just remove their background color).@ArbiterofWhim After installing your layout, this is the code I would use to make notes hover I think as you want; I don't see the progress glitch number this way and I don't see any stretched out boxes. I'm using different codes from some that you're using, including the ones I suggested /* Notes hover - START */
td.td1 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 100px;
}
tr:hover td.td1 div div{
background-color: red !important;
display: block !important;
opacity: 1;
}
td.td2 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 100px;
}
tr:hover td.td2 div div{
background-color: purple !important;
display: block !important;
opacity: 1;
}
I also added in GetNorted's second set of code, which made it so the mini-reviews can't accidentally be edited by clicking on them. getNorted said: The explanation of how !important functions is also appreciated, didn't realize it was for overriding defaults.So, this problem is partially solved by whether adding the code i suggested or removing the '!important' declaration from the hover selector. By doing this, another red and white bordered square will appear in front of the notes text. This one, as i said before, is related to the edit tags text. The solution now depends on what you want to do. If you want to keep editing notes by also clicking the text, i would have to take a deeper look. If you want to simply remove it, you can add the code below to your CSS. The first one will remove the div and the second one will deabilitate clicking events. div[id*="noteRowEdit"] {
display:none!important;
}
div[id*="noteLinks"] {
pointer-events:none!important;
}Also, for the notes width case, you should add an '!important' declaration after the value you want because, similarly to the WN case, the div of notes already have an width set within its HTML. So, if you want to overrule it, you need to add this declaration. width:200px!important; I can figure out the positioning changes I'm planning, but I am running into another issue. There doesn't seem to be an easy way to apply the same bordered review box, as adding the parameters from the old Tags mini-review block produces a wonky looking (and very tight) review box that's directly tied to the size of the notes text field. Here's an example of what I tried and the result: tr:hover td.td1 div div{
background-color: red !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: block !important;
opacity: 1;
} I definitely want the box to have the same behavior as the original (fixed size independent of text). Is there maybe a way to just create a purely visual element that's just a rounded box, which I could then layer underneath where I want the review text to be via positionals? Obviously it would also need to be invisible until an anime row is hovered over.  |
|
| @ArbiterofWhim Are you switching to modern and not needing help with this anymore? But for this question, you're just trying to give your hover notes a colored/bordered box that fits them dynamically, right? Or is it a separate box from the notes set behind the notes with a preset size/shape? |
| @Shishio-kun It would be a separate box from the notes set behind the notes with a fixed size/shape. The box should be present even if the notes field is empty and should always be the same size regardless of the length of the notes text (I'll manually be making sure that it doesn't overflow). |
|
ArbiterofWhim said: @Shishio-kun It would be a separate box from the notes set behind the notes with a fixed size/shape. The box should be present even if the notes field is empty and should always be the same size regardless of the length of the notes text (I'll manually be making sure that it doesn't overflow). You can add this to the bottom and there will be a fixed box on row hover for the notes section. td.td1 div div:after, td.td2 div div:after { content: ""; display: block; background-color: purple !important; width: 200px !important; height: 100px; border: 1px solid white; z-index: -1 !important; position: fixed; top: 440px; left: 80px; } btw the td1 refers to all odd numbered rows, and td2 even numbered. So these selectors can be combined like I did there in one section and separated with a comma in between if you want them to have the same properties, so with the selector codes I gave earlier you could combine them like this to save space and make it a bit more manageable (I should have posted them like this earlier) td.td1 div div, td.td2 div div tr:hover td.td1 div div, tr:hover td.td2 div div |
Shishio-kunJul 19, 2023 10:42 PM
@Shishio-kun That worked to create the box, but for some reason it's layering it on top of the Notes text. I've tried adding/adjusting z-index values, swapping between :after and :before, and re-arranging the order of the blocks among other things, but haven't figured out a way to put the box behind the text. Here is the current state of the notes-related code./* Notes hover - START */
td.td1 div div,
td.td2 div div
{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 445px;
left: 80px;
opacity: 0;
width: 200px !important;
z-index: 5 !important;
font-weight: bold;
}
tr:hover td.td1 div div,
tr:hover td.td2 div div
{
background-color: red !important;
display: block !important;
opacity: 1;
z-index: 5 !important;
}
/* Make Notes mini-review non-interactable */
td.td1 div small:nth-child(2) {display: none !important;}
td.td2 div small:nth-child(2) {display: none !important;}
div[id*="noteRowEdit"] {
display:none!important;
}
div[id*="noteLinks"] {
pointer-events:none!important;
}
/* Floating rounded box behind Notes text*/
td.td1 div div:after,
td.td2 div div:after
{
content: "";
display: block;
background-color: purple !important;
width: 200px !important;
height: 100px;
border: 1px solid white;
border-radius: 25px 25px 25px 25px;
z-index: -1 !important;
position: fixed;
top: 440px;
left: 80px;
}Here's what it looks like in action:  |
|
| @ArbiterofWhim OK it's because the notes look differently for you than for other users, since when viewing your list it seems fine. imo the layout REALLY needs to be mapped out to find the right codes for the notes (this is a newly added section added long after the old days where I mapped this once). starting the whole thing over with a proper mapping, needs some time (base code here for my own reference) |
Shishio-kunJul 20, 2023 2:36 PM
| @ArbiterofWhim This is a properly mapped code for those two parts. I also used one of GetNorted's it was very helpful and saved some time, thanks to them! You can see it temporarily on my list, and also there's an option to add a overlay box to tags too if you want. The boxes look to be working correctly in logged in and logged out view https://myanimelist.net/animelist/Shishio-kun You can probably just add what I added to the bottom here: /* Note and Note text */
div[id*="noteLinks"] {
position: fixed;
color: white !important;
font-size: 14px;
top: 450px;
left: 95px;
width: 180px !important;
height: 100px;
opacity: 0;
}
/* Note hover */
tr:hover div[id*="noteLinks"] {
opacity: 1;
}
/* Note hover box */
tr:hover div[id*="noteLinks"]:before {
content: "";
display: block;
width: 200px !important;
height: 300px;
background-color: purple !important;
border: 1px solid white;
border-radius: 25px 25px 25px 25px;
z-index: -1 !important;
position: fixed;
top: 440px;
left: 80px;
}
/* Tags */
td[class^='td']:nth-of-type(6) {
position: fixed;
top: 100px;
left: 305px;
background-color: transparent !important;
border: none !important;
width: 180px !important;
height: 100px;
opacity: 0;
}
/* Tag text */
tr:hover td[class^='td']:nth-of-type(6) a{
color: white !important;
font-size: 12px;
font-weight: normal;
}
/* Tag hover */
tr:hover td[class^='td']:nth-of-type(6){
opacity: 1;
}
/* Tag box hover*/
tr:hover td[class^='td']:nth-of-type(6):before {
content: "";
display: block;
width: 200px !important;
height: 100px;
background-color: transparent !important;
border: 1px solid transparent;
border-radius: 25px 25px 25px 25px;
z-index: -1 !important;
position: fixed;
top: 100px;
left: 300px;
}
/* Notes/Tag edit removal */
td.td1 div small:nth-child(2) {
display: none !important;
}
td.td2 div small:nth-child(2) {
display: none !important;
}
td:nth-of-type(6) small {
display: none !important;
}... but there was conflicting tags codes near the top in your CSS layout which was causing problems so in this version I took those out and the bottom codes now control the tags Fixed layout: https://pastebin.com/raw/SG75uuKH |
Shishio-kunJul 20, 2023 1:56 PM
| @ArbiterofWhim I left out, you can also add this back to remove that tags header /* REMOVE TABLE HEADER Deletes the table header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } |
| @Shishio-kun yeah I noticed that while I was fiddling with the positionals and added it back in lol. I think everything is fully complete, and I'm super happy with how much longer I can make the reviews now. As a test I trimmed down my BOFURI review and fit over 700 characters in 11pt bold font. Now I just need to transfer all the tags to notes for like 1000 anime (and probs do a bunch of partial rewatches to flesh out my old reviews). Thanks a ton for all your help! my finalized css (that hides tags completely) https://pastebin.com/KyGgdcVb |
ArbiterofWhimJul 20, 2023 4:16 PM
|
ArbiterofWhim said: @Shishio-kun yeah I noticed that while I was fiddling with the positionals and added it back in lol. I think everything is fully complete, and I'm super happy with how much longer I can make the reviews now. As a test I trimmed down my BOFURI review and fit over 700 characters in 11pt bold font. Now I just need to transfer all the tags to notes for like 1000 anime (and probs do a bunch of partial rewatches to flesh out my old reviews). Thanks a ton for all your help! my finalized css (that hides tags completely) https://pastebin.com/KyGgdcVb Awesome! 😊🙏 There was supposed to be an update that let you transfer your tags to notes, but I guess it never went through. There might be a userscript that does it but I would export the list first to be safe in case it deletes something. |
More topics from this board
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and TemplatesShishio-kun - Feb 16, 2023 |
37 |
by leuscius
»»
May 17, 8:33 AM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
May 12, 12:00 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
3 |
by gwynsyl
»»
May 5, 1:41 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7819 |
by Nunphell
»»
May 5, 12:35 PM |