New
Dec 18, 2023 5:20 AM
#7751
Reply to Valerio_Lyndon
@Aly_VeeVee There are a few reasons it is loading slower. The theme code shouldn't be adding much weight (about 60kb at most), but the variation you installed has extra addons and install methods which are adding a lot more weight. Without over-explaining, I believe the mangalist is probably your issue as it seems to be falling back on the full database since you have no mangalist entries. On my end it's loading 8MB of extra data for code alone.

You don't have any mangalist entries and shouldn't need this, so just remove it. The line of code is right at the top of your CSS and looks like this:
Don't remove the anime one or your anime covers will be blank.
If it's still slow there are other things we can do but that should help a lot already.
You don't have any mangalist entries and shouldn't need this, so just remove it. The line of code is right at the top of your CSS and looks like this:
@\import "https://malscraper.azurewebsites.net/covers/manga/Aly_VeeVee/presets/dataimagelinkbefore";
Don't remove the anime one or your anime covers will be blank.
If it's still slow there are other things we can do but that should help a lot already.
@Valerio_Lyndon Oh wow, it worked. Thank you so much! But I do plan on adding titles to my manga list somewhere down the line though So... Should I just pick a new modern list design and do the same But remomve the anime import instead of manga? |
Dec 18, 2023 6:00 AM
#7752
@Valerio_Lyndon thanks for helping them out! |
Dec 19, 2023 10:42 AM
#7753
I'm experiencing an issue with an image link on my CSS. When logged out, one of my images (PNG file) doesn't display correctly. The image is a ring around the score button. Its original link is here: MAL-DAL-quan4-55px.png However, MAL seems to be converting it to: image.myanimelist.net/ui/.. If I replace MAL's link with my original link, the hover effect works as intended. My full CSS code is here. The image link is at line#1412 and line#1413. And, here's the relevant part of my CSS code: .data.score .score-label::after { content: ""; display: block; width: 55px; height: 55px; background: conic-gradient(from -45deg, var(--_glow) 25%, var(--_shadow) 75%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: all 0.8s linear; text-shadow: none; -webkit-mask-image: url(https://i.postimg.cc/mkVJyBPk/MAL-DAL-quan4-55px.png); mask-image: url(https://i.postimg.cc/mkVJyBPk/MAL-DAL-quan4-55px.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 55px; mask-size: 55px; } Has anyone encountered a similar issue or knows how to fix this? Your help would be greatly appreciated, thanks! |
Dec 21, 2023 12:56 AM
#7754
Reply to hideso
I'm experiencing an issue with an image link on my CSS. When logged out, one of my images (PNG file) doesn't display correctly.
The image is a ring around the score button. Its original link is here:
MAL-DAL-quan4-55px.png
However, MAL seems to be converting it to:
image.myanimelist.net/ui/..
If I replace MAL's link with my original link, the hover effect works as intended.
My full CSS code is here. The image link is at line#1412 and line#1413.
And, here's the relevant part of my CSS code:
Has anyone encountered a similar issue or knows how to fix this? Your help would be greatly appreciated, thanks!
The image is a ring around the score button. Its original link is here:
MAL-DAL-quan4-55px.png
However, MAL seems to be converting it to:
image.myanimelist.net/ui/..
If I replace MAL's link with my original link, the hover effect works as intended.
My full CSS code is here. The image link is at line#1412 and line#1413.
And, here's the relevant part of my CSS code:
.data.score .score-label::after { content: ""; display: block; width: 55px; height: 55px; background: conic-gradient(from -45deg, var(--_glow) 25%, var(--_shadow) 75%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: all 0.8s linear; text-shadow: none; -webkit-mask-image: url(https://i.postimg.cc/mkVJyBPk/MAL-DAL-quan4-55px.png); mask-image: url(https://i.postimg.cc/mkVJyBPk/MAL-DAL-quan4-55px.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 55px; mask-size: 55px; }
Has anyone encountered a similar issue or knows how to fix this? Your help would be greatly appreciated, thanks!
@hideso I encountered these issues a while back when making my Pokemon theme. MAL doesn't seem to recognise image links inside the "mask" properties and manages to kill them. Using the same URL in a different property, such as the background-image, should work just fine. It's frustrating, but the best way I've found around it is to @\import any "mask" images, as this bypasses MAL's image processing garbage. For my case I just imported the entire theme, but there's no reason you couldn't put that specific image aside in an import instead. Could probably throw it in a variable to make it a bit easier to re-use in multiple spots. If anyone has a better fix that would be brilliant. What would be nice is if we could escape URLs the same way we do @\import lines, but I've not managed it despite playing around a bit. |
Valerio_LyndonDec 21, 2023 1:06 AM
Dec 21, 2023 5:22 PM
#7755
Reply to Valerio_Lyndon
@hideso I encountered these issues a while back when making my Pokemon theme. MAL doesn't seem to recognise image links inside the "mask" properties and manages to kill them. Using the same URL in a different property, such as the background-image, should work just fine. It's frustrating, but the best way I've found around it is to @\import any "mask" images, as this bypasses MAL's image processing garbage. For my case I just imported the entire theme, but there's no reason you couldn't put that specific image aside in an import instead. Could probably throw it in a variable to make it a bit easier to re-use in multiple spots.
If anyone has a better fix that would be brilliant. What would be nice is if we could escape URLs the same way we do @\import lines, but I've not managed it despite playing around a bit.
If anyone has a better fix that would be brilliant. What would be nice is if we could escape URLs the same way we do @\import lines, but I've not managed it despite playing around a bit.
@Valerio_Lyndon Thank you for the insight. I've decided to remove the masked image and revert to a basic background. I've encountered a similar issue before when using SVG icons linked from a website. After spending hours fitting them into my list, I logged out only to find that the images weren't visible. Your mention of the 'mask' properties reminded me of those SVG that utilized clipping masks. It's quite possible that was the underlying issue. |
Dec 23, 2023 10:10 PM
#7756
I'm just wondering if we could apply the current Christmas theme on the MAL logo (Christmas lights and tree) and menu (snow / "christmas js-color-pc-constant") to the MAL logo (or header-title), status menu container or status header background in our lists? I kinda want those Christmas lights on the MAL logo to appear in my list too. 😅 |
Dec 24, 2023 12:39 AM
#7757
Reply to IridescentJaune
I'm just wondering if we could apply the current Christmas theme on the MAL logo (Christmas lights and tree) and menu (snow / "christmas js-color-pc-constant") to the MAL logo (or header-title), status menu container or status header background in our lists? I kinda want those Christmas lights on the MAL logo to appear in my list too. 😅
@IridescentJaune I think you could just download the GIF backgrounds via Inspect Element and then put them in the codes you want as background images, the codes for headers and stuff are in the CSS tutorial topic about all selectors |
Dec 26, 2023 8:55 AM
#7758
Reply to Shishio-kun
@IridescentJaune I think you could just download the GIF backgrounds via Inspect Element and then put them in the codes you want as background images, the codes for headers and stuff are in the CSS tutorial topic about all selectors
@Shishio-kun Thanks for the suggestion. I used https://extract.pics since I was having a hard time finding the GIF links with inspect element. 😅 I've managed to add the images I want in my list... They're not noticeable since I added them on hover. |
Dec 26, 2023 9:47 AM
#7759
Reply to IridescentJaune
@Shishio-kun Thanks for the suggestion. I used https://extract.pics since I was having a hard time finding the GIF links with inspect element. 😅 I've managed to add the images I want in my list... They're not noticeable since I added them on hover.
@IridescentJaune https://chromewebstore.google.com/detail/search-by-image/cnojnbdhbhnkbcieeekonklommdnndci this can also right click and open a lot of images that arent downloadable or are difficult to find, works well for sites like Instagram on PC or are in weird formats you want the JPG for; it works to extract the snow background too |
Dec 30, 2023 11:24 PM
#7760
Happy New Year everyone! Are there any codes use for adjusting the width of each column in the list? As I want to increase the width of 'Type' and decrease the width of 'Progress'. Thank you |
真姫ちゃん! 何が好き? トマト よりも あ・な・た♡ |
Dec 31, 2023 1:18 AM
#7761
Reply to AkeZZZ
Happy New Year everyone!
Are there any codes use for adjusting the width of each column in the list? As I want to increase the width of 'Type' and decrease the width of 'Progress'.

Thank you
Are there any codes use for adjusting the width of each column in the list? As I want to increase the width of 'Type' and decrease the width of 'Progress'.
Thank you
@AkeZZZ .header-title.type { width: 80px !important; } .header-title.progress { width: 80px !important; } .header-title.progress a { font-size: 0 !important; } .header-title.progress a::before { content: "Prog"; font-size: 18px; } change the widths to your liking. the content "Prog" isnt necessary but it doesnt allow you to decrease the width any lower than the length of "Progress" text. im sure you could but im a novice with css so.. ¯\_(ツ)_/¯ change it to "EP" or whatever if this doesnt work ignore me :) |
karmashizzleDec 31, 2023 1:24 AM
Dec 31, 2023 1:47 AM
#7762
Reply to AkeZZZ
Happy New Year everyone!
Are there any codes use for adjusting the width of each column in the list? As I want to increase the width of 'Type' and decrease the width of 'Progress'.

Thank you
Are there any codes use for adjusting the width of each column in the list? As I want to increase the width of 'Type' and decrease the width of 'Progress'.
Thank you
@AkeZZZ Happy New Year~ If you notice the icon missing above the 'Progress' column in your current layout, you can append the following code to restore it: /* Restore Filter/Sort icon */ .list-unit .list-status-title .stats .fa-solid::before { font-family: fontawesome; line-height: 38px; margin-left: 4px; } |
Dec 31, 2023 3:27 AM
#7763
Reply to karmashizzle
@AkeZZZ
change the widths to your liking.
the content "Prog" isnt necessary but it doesnt allow you to decrease the width any lower than the length of "Progress" text. im sure you could but im a novice with css so.. ¯\_(ツ)_/¯
change it to "EP" or whatever
if this doesnt work ignore me :)
.header-title.type { width: 80px !important; } .header-title.progress { width: 80px !important; } .header-title.progress a { font-size: 0 !important; } .header-title.progress a::before { content: "Prog"; font-size: 18px; }
change the widths to your liking.
the content "Prog" isnt necessary but it doesnt allow you to decrease the width any lower than the length of "Progress" text. im sure you could but im a novice with css so.. ¯\_(ツ)_/¯
change it to "EP" or whatever
if this doesnt work ignore me :)
@karmashizzle Thanks a lot. Your codes worked and I can do what I really wanted to do with my list. @hideso Thank you. The icons were missing for a very long time. And, finally, they were fixed. |
真姫ちゃん! 何が好き? トマト よりも あ・な・た♡ |
Jan 1, 2024 1:53 AM
#7764
Hi! Is there a quality drop when uploading a profile picture? I work on the same size (225x350) when designing but every time I upload, it seems to be blurred |
Jan 1, 2024 5:51 PM
#7765
Currently is there any way to upload an animated format other than GIF to MAL BBcode posts? Not possible to say, upload a non-GIF animated format to another part of the forum and then use the MAL link for that file wherever you want? |
Shishio-kunJan 1, 2024 5:55 PM
Jan 1, 2024 6:28 PM
#7766
Jan 1, 2024 6:35 PM
#7767
Reply to karmashizzle
apng uploaded directly here (drag and drop) -->

the MAL link seems to work elsewhere
@karmashizzle We can use APNG now D: I tried using these like ten years ago for old layouts, I dont even think the lists could use them had to convert them all to GIFs NO WAY! Thanks! |
Jan 5, 2024 10:06 PM
#7768
Hi I would like to add falling snow to my list: https://myanimelist.net/animelist/Zhuwx1 but it doesn't seem to be working. Here is the code I was using: /* Theme Customiser Settings https://github.com/ValerioLyndon/Theme-Customiser ^TC{"data":"https://valeriolyndon.github.io/MAL-Public-List-Designs/Agile Theme/agile.json","options":{"background":"https://images.wallpaperpass.com/1684340161_kk7yjmr23g9.jpg?width=800&quality=80","cover":"https://images.wallpaperpass.com/1684340161_5ayz2fe6h0b.jpg?width=800&quality=80","avatar":"https://avatarfiles.alphacoders.com/347/347124.jpg"},"theme":"Agile"}TC$*/ /* "Agile" by Valerio Lyndon v1.0.2 */ /* Variables */ html { /* Colours */ --c-background: #651517; --c-header-background: #0b0208aa; --c-text: #f7f7f7; --c-text-hover: #a980af; --c-subtext: #a39fab; --c-search-background: #1f161f; --c-search-border: var(--c-content-border); --c-content-border: #503b4a; --c-row-border: #603b3a; --c-shadow: #0b0208; --g-opaque: linear-gradient(160deg, #302b3a, #211d23, #1f141e); --g-transparent: linear-gradient(160deg, #302b3abc, #211d23bc, #1f141ebc); /* Images */ --i-background: url(https://images.wallpaperpass.com/1684340161_kk7yjmr23g9.jpg?width=800&quality=80); --i-cover: url(https://images.wallpaperpass.com/1684340161_5ayz2fe6h0b.jpg?width=800&quality=80); --i-avatar: url(https://avatarfiles.alphacoders.com/347/347124.jpg); /* Sizes */ --s-width: 1030rem; --s-banner-height: calc(200rem + 15vw); /* Regular Styling */ font: 1px Tahoma, FontAwesome, Arial, Helvetica, sans-serif; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* Theme Code */ #grand_totals,.category_totals,.grecaptcha-badge,#list_surround > br,#mal_cs_pic a,#mal_cs_links div:first-of-type,a[href="/forum/"],#searchListButton,[data-owner=""] #mal_cs_listinfo a,[data-work="anime"][data-owner="1"] #mal_cs_links a[href^="/animelist/"],[data-work="manga"][data-owner="1"] #mal_cs_links a[href^="/mangalist/"],[data-work="manga"][data-owner=""] #mal_cs_links a[href^="/animelist/"],[data-work="anime"][data-owner=""] #mal_cs_links a[href^="/mangalist/"],[data-work="anime"] #mal_cs_otherlinks a[href^="/animelist/"],[data-work="manga"] #mal_cs_otherlinks a[href^="/mangalist/"],a[href="/forum/?board=515949"],a[href="/"] img,td input[value="Go"]{display:none!important;}@media (max-width: 780px){html{font-size:0.8px;}}@media (max-width: 1060px){html{--s-width:760rem;}}@media (min-width: 1420px){html{font-size:1.1px;}}@media (min-width: 2040px){html{font-size:1.5px;}}@media (min-width: 3300px){html{font-size:2px;}}body{background:var(--i-background) no-repeat center / cover fixed var(--c-background)!important;color:var(--c-text);font-size:13rem;}a{color:var(--c-text);text-decoration:none;}a:hover{color:var(--c-text-hover);text-decoration:underline;}table#mal_control_strip{display:block;height:35rem;background:none;margin-top:-35rem;text-shadow:0 .5rem 2rem var(--c-shadow);font:inherit;position:relative;z-index:1;}#mal_control_strip tbody{position:relative;display:block;width:var(--s-width);height:100%;padding-left:100rem;margin:0 auto;}#mal_control_strip tr{display:flex;}body:before{content:"";display:block;width:100%;height:var(--s-banner-height);background:var(--i-cover) center / cover no-repeat #020202;}html{--s-header-l-width:330rem;--s-header-r-width:76rem;}[data-owner=""]{--s-header-l-width:410rem;--s-header-r-width:146rem;}#mal_cs_listinfo div:last-of-type,#mal_control_strip #mal_cs_pic{position:absolute;top:-36rem;left:calc(50% - var(--s-width) * 0.5);z-index:-2;width:var(--s-width);height:62rem;-webkit-mask-image:radial-gradient(circle at 50rem 16rem,transparent 43rem,black 0%);mask-image:radial-gradient(circle at 50rem 16rem,transparent 43rem,black 0%);font-size:0;}#mal_cs_listinfo div:last-of-type:before,#mal_cs_listinfo div:last-of-type:after,#mal_cs_pic:before,#mal_cs_pic:after{content:"";position:absolute;background:var(--c-header-background);border-radius:6rem;box-shadow:inset 0 0 2px var(--c-subtext);}#mal_cs_listinfo div:last-of-type:before,#mal_cs_pic:before{top:-1rem;left:50rem;width:var(--s-header-l-width);height:62rem;}#mal_cs_pic:before{--s-header-l-width:260rem;}#mal_cs_listinfo div:last-of-type:after,#mal_cs_pic:after{top:27rem;right:0;width:var(--s-header-r-width);height:34rem;background:var(--c-header-background);border-radius:6rem;box-shadow:inset 0 0 2px var(--c-subtext);}#mal_cs_pic:after{--s-header-r-width:76rem;}table#mal_control_strip td{display:block;width:auto;height:auto;padding:0;border:none;color:inherit;font:inherit;white-space:nowrap;}table#mal_control_strip td div{margin:0;font:inherit;}table#mal_control_strip a{color:var(--c-text);text-decoration:none;font:inherit;}table#mal_control_strip a:hover{text-decoration:underline;}#mal_cs_otherlinks{margin-left:88rem;}#mal_cs_pic~#mal_cs_otherlinks{margin:0;}#mal_cs_otherlinks div:first-of-type{font-size:0;}#mal_cs_otherlinks:before,[data-owner=""] #mal_cs_links a:after,a[href="/register.php"]:before,a[href="/panel.php?go=export"]:after{content:"";width:1rem;height:20rem;background:var(--c-subtext);box-shadow:0 1rem 3rem var(--c-shadow);margin-top:-1rem;}#mal_cs_otherlinks:before{float:left;margin-right:10rem;}[data-owner=""] #mal_cs_links a:after{position:absolute;right:-11rem;}a[href="/register.php"]:before,a[href="/panel.php?go=export"]:after{position:absolute;left:-11rem;}#mal_cs_pic~#mal_cs_otherlinks:before{content:none;}#mal_control_strip a[href^="/profile/"]{position:absolute;bottom:10rem;left:10rem;width:90rem;height:100rem;padding:45rem 0 0 90rem;background:var(--i-avatar) no-repeat 0 5rem / 100% auto;border-radius:0 0 50% 50%;font-size:20rem;line-height:20rem;text-shadow:0 1rem 3rem var(--c-shadow);text-indent:6rem;}#mal_control_strip a[href^="/profile/"]:before,#mal_control_strip a[href^="/profile/"]:after{content:"";position:absolute;top:11rem;left:-3rem;width:88rem;height:88rem;border:2rem solid var(--c-text);border-radius:50%;transform:rotate(45deg);}#mal_control_strip a[href^="/profile/"]:before{background:linear-gradient(-35deg,rgba(0,0,0,1),transparent 40%);z-index:-1;box-shadow:inset 1rem 1rem 3rem var(--c-shadow),1rem 1rem 3rem var(--c-shadow);}#mal_control_strip a[href^="/profile/"]:after{border-left-color:transparent;border-top-color:transparent;}a[href="/register.php"]{position:relative;margin-left:20rem;}[data-owner="1"] #mal_cs_links a,#mal_cs_otherlinks a[href*="list/"]{position:absolute;top:0;left:100rem;}[data-owner="1"] #mal_cs_links a[href^="/mangalist/"]:before,#mal_cs_otherlinks a[href^="/mangalist/"]:before{content:"\e0c0 ";font-weight:600;}[data-owner="1"] #mal_cs_links a[href^="/animelist/"]:before,#mal_cs_otherlinks a[href^="/animelist/"]:before{content:"\f04b ";margin-left:4rem;font-weight:600;}[data-owner=""] #mal_cs_links a{position:absolute;right:80rem;top:0;font-size:0;}[data-owner=""] #mal_cs_links a:before{content:"\f02e My List";font-size:13rem;}a[href^="/history/"]:before{content:"\f1da ";font-weight:600;}a[href="/panel.php?go=export"]{position:relative;margin-left:18rem;}a[href="/panel.php?go=export"]:before{content:"\f019 ";font-weight:600;}#mal_cs_powered{margin:0 12px 0 auto;}a[href="/"]{visibility:visible;}a[href="/"]:before{content:"\f015 ";font-weight:600;}a[href="/"]:after{content:"Home";}td#mal_cs_powered{position:static;visibility:hidden;}#search{position:absolute;bottom:-46rem;right:calc(50% - var(--s-width) * 0.5);padding:0!important;visibility:visible;}#searchBox{width:150rem!important;height:30rem;background:none;background:var(--c-search-background);border:2rem solid var(--c-search-border);border-radius:3rem;color:var(--c-text);font:inherit !important;text-align:center;}#list_surround>table:first-of-type{position:relative;height:62rem;background:var(--g-opaque);border:none;box-shadow:0 1rem 5rem var(--c-shadow);}#list_surround>table:first-of-type tbody{height:inherit;}#list_surround>table:first-of-type tr{display:flex;width:var(--s-width);height:inherit;margin:0 auto;}[class^="status_"]{position:relative;display:flex;width:auto;height:100%;margin-right:13rem;justify-content:center;align-items:center;font-size:15rem;}[class^="status_"]+[class^="status_"]:before{content:"";position:absolute;left:-7rem;width:1rem;height:30rem;background:var(--c-subtext);margin-right:10rem;opacity:0.3;}[class^="status_"] a{padding:0 6rem 2rem;flex-flow:column nowrap;}[class^="status_"] a:after{content:attr(title);display:block;font-size:10rem;text-transform:none;color:var(--c-subtext);transition:inherit;}table[class^="header_"]{width:100%;margin:20rem 0 10rem;cursor:default;}table[class^="header_"]~table[class^="header_"]{margin-top:0;}[class^="header_"] tbody{position:relative;display:block;width:var(--s-width);margin:0 auto;}[class^="header_"] span{display:inline-block;background:linear-gradient(160deg,var(--c-text),var(--c-subtext));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:2rem;font-size:32rem;font-weight:bold;}[class^="header_"] tbody:before{float:right;position:absolute;z-index:-1;top:-5px;right:10px;width:300px;height:300px;line-height:300px;font-size:250px;border-radius:50%;border:5px solid var(--c-content-border);color:var(--c-subtext);text-align:center;-webkit-mask-image:linear-gradient(200deg,black 35%,transparent 94%);mask-image:linear-gradient(200deg,black 35%,transparent 94%);transform:rotate(5deg);box-shadow:inset 1rem 1rem 8rem var(--c-shadow),1rem 1rem 8rem var(--c-shadow);text-shadow:1rem 1rem 8rem var(--c-shadow);}.header_cw tbody:before{content:"\f06e";font-size:200px;}.header_completed tbody:before{content:"\f00c";}.header_onhold tbody:before{content:"\f04c";}.header_dropped tbody:before{content:"\f00d";}.header_ptw tbody:before{content:"\f141";}table[class^="header_"]+table{border:none!important;border-radius:6rem 6rem 0 0;}table[class^="header_"]+table tr{display:flex;padding:6rem 0 6rem;}.table_header{height:20rem;font-size:11rem;line-height:20rem;overflow:hidden;flex:0 0 auto;}table~table:not([class]){width:var(--s-width);padding:0 4rem;background:var(--g-transparent) fixed;border-top:2rem dotted var(--c-row-border);box-shadow:0 1rem 3rem -1rem var(--c-shadow);margin:0 auto;}table~table:not([class]) tbody{position:relative;z-index:0;}table~table:not([class]) tr{display:flex;align-items:center;}[class^="td"]{display:flex;padding:4rem 2rem;flex:0 0 auto;justify-content:center;}table[class^="header_"]~table[class^="header_"]:before,#copyright:before{content:"";display:block;width:var(--s-width);height:32px;background:var(--g-transparent) fixed;border-radius:0 0 6rem 6rem;box-shadow:0 1rem 3rem -1rem var(--c-shadow);margin:0 auto 20rem;}#copyright:before{margin-bottom:36rem;}td input[type="text"],textarea{width:100%;height:26rem;background:var(--g-opaque);border:2rem solid var(--c-content-border);border-radius:3rem;margin-top:3rem;color:var(--c-text);font:inherit;}.table_header[width="30"]{display:none;}[class^="td"][width="30"]{position:absolute;right:calc(100% + 6rem);z-index:-1;opacity:0.3;pointer-events:none;}.table_header:not([width]){flex:1 1 auto;padding-left:2rem;}[class^="td"]:not([width]){display:block;flex:1 1 auto;width:-moz-fit-content;width:fit-content;}.animetitle{font-size:15rem;}[class^="td"]:not([width])>small{display:inline-block;padding:1rem 3rem;border:2rem solid var(--c-content-border);border-radius:3rem;margin-left:4rem;}[id^="noteLinks"]{color:var(--c-subtext);}div[style="float: right;"]{position:absolute;left:-34rem;top:0;bottom:0;right:-34rem;z-index:-1;font-size:0;opacity:0;}table:hover div[style="float: right;"]{opacity:1;}div[style="float: right;"] a{position:absolute;top:calc(50% - 11rem);width:22rem;height:22rem;border-radius:3rem;background:var(--g-opaque);line-height:22rem;text-align:center;}div[style="float: right;"] a:after{font-size:13rem;}div[style="float: right;"] .List_LightBox{left:0;}div[style="float: right;"] .List_LightBox:after{content:"\f040 ";}[data-owner=""] div[style="float: right;"] .List_LightBox:after{content:"+";font-family:FontAwesome;}div[style="float: right;"] [onclick^="getExpand"]{right:0;}div[style="float: right;"] [onclick^="getExpand"]:after{content:"\f142 ";font-size:18px;}.table_header[width="45"]:not([nowrap]){width:70rem;order:-2;justify-content:left;}[class^="td"][width="45"]:not([nowrap]){position:relative;width:70rem;flex-wrap:wrap;order:-1;justify-content:left;}.score-label{font-size:0;}.score-label:before,.score-label:after{color:var(--c-subtext);font-size:10rem;letter-spacing:0.1em;}.score-label:before{font-weight:600;}.score-label:after{color:var(--c-subtext);-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0.5),black 70rem);mask-image:linear-gradient(to left,rgba(0,0,0,0.5),black 70rem);opacity:0.6;}.score-na:after{content:"\f006 \f006 \f006 \f006 \f006 ";}.score-1:before{content:"\f5c0 ";}.score-2:before{content:"\f005 ";}.score-3:before{content:"\f005 \f5c0 ";}.score-4:before{content:"\f005 \f005 ";}.score-5:before{content:"\f005 \f005 \f5c0 ";}.score-6:before{content:"\f005 \f005 \f005 ";}.score-7:before{content:"\f005 \f005 \f005 \f5c0 ";}.score-8:before{content:"\f005 \f005 \f005 \f005 ";}.score-9:before{content:"\f005 \f005 \f005 \f005 \f5c0 ";}.score-10:before{content:"\f005 \f005 \f005 \f005 \f005 ";}.score-1:after{content:"\f006 \f006 \f006 \f006 ";}.score-2:after{content:"\f006 \f006 \f006 \f006 ";}.score-3:after{content:"\f006 \f006 \f006 ";}.score-4:after{content:"\f006 \f006 \f006 ";}.score-5:after{content:"\f006 \f006 ";}.score-6:after{content:"\f006 \f006 ";}.score-7:after{content:"\f006 ";}.score-8:after{content:"\f006 ";}[id^="scorediv"]{width:100%;}.table_header[width="70"]{order:5;}[class^="td"][width="70"]{position:relative;flex-wrap:wrap;order:5;}[class^="header_"]+table .table_header[width="70"],[class^="header_"] ~ table [class^="td"][width="70"],table.header_onhold + table .table_header[width="70"],table.header_onhold ~ table [class^="td"][width="70"]{width:96rem;}.header_completed+table .table_header[width="70"],.header_completed ~ table [class^="td"][width="70"]{width:60rem;}[id^="epText"]{font-weight:normal!important;}[id^="epText"] span{margin-right:3rem;font-weight:bold;}[onclick^="updateEp"]{margin-left:4rem;text-decoration:none!important;}span[style="font-weight: normal;"]~form{display:none!important;}form{width:100%;}.header_cw~table .table_header[width="125"],.header_cw ~ table [class^="td"][width="125"]{display:none;}[class^="header_"]:not(.header_cw)~table .table_header[width="125"],[class^="header_"]:not(.header_cw) ~ table [class^="td"][width="125"]{display:flex;}.table_header[width="125"]{width:50rem;padding-right:6rem;justify-content:right;}[class^="td"][width="125"]{width:-moz-fit-content;width:fit-content;padding:2rem;flex-wrap:wrap;justify-content:right;font-size:0;flex:1 1 auto;}[class^="td"][width="125"] a{padding:1rem 2rem;border:2rem solid var(--c-content-border);border-radius:3rem;margin:2rem;font-size:11rem;white-space:nowrap;}[class^="td"][width="125"] a:before{filter:grayscale(.5);font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;}a[href$="&genre=1"]:before{content:"⚔️ "}a[href$="&genre=2"]:before{content:"📌"}a[href$="&genre=5"]:before{content:"🎨 "}a[href$="&genre=46"]:before{content:"🏆 "}a[href$="&genre=28"]:before{content:"🍆 "}a[href$="&genre=4"]:before{content:"😆 "}a[href$="&genre=8"]:before{content:"💢 "}a[href$="&genre=9"]:before,a[href$="&genre=49"]:before{content:"💦"}a[href$="&genre=10"]:before{content:"🌈 "}a[href$="&genre=26"]:before{content:"🍑"}a[href$="&genre=47"]:before{content:"🍤"}a[href$="&genre=12"]:before{content:"💋 "}a[href$="&genre=14"]:before{content:"😱 "}a[href$="&genre=7"]:before{content:"❔ "}a[href$="&genre=22"]:before{content:"💙 "}a[href$="&genre=24"]:before{content:"🚀 "}a[href$="&genre=36"]:before{content:"🍕"}a[href$="&genre=30"]:before{content:"⚽"}a[href$="&genre=37"]:before{content:"👻 ";}a[href$="&genre=41"]:before{content:"⏸"}a[href$="&genre=48"]:before{content:"💼"}.table_header[width="90"]{width:54rem;order:5;}.table_header[width="90"]+[width="90"]{text-align:right;}[class^="td"][width="90"]{width:50rem;justify-content:right;font-size:11rem;white-space:nowrap;order:5;}[class^="td"][width="90"]+[width="90"]{width:58rem;justify-content:left;}[class^="td"][width="90"]+[width="90"]:before{content:"-";margin-right:4rem;color:var(--c-subtext);}.header_ptw~table .table_header[width="45"][nowrap],.header_ptw ~ table [class^="td"][width="45"][nowrap]{display:none;}.table_header[width="45"][nowrap],[class^="td"][width="45"][nowrap]{width:40rem;justify-content:left;font-size:11rem;white-space:nowrap;order:5;}[class^="td"][width="45"][nowrap]:before{content:"(";margin-right:1rem;margin-left:2rem;color:var(--c-subtext);}[class^="td"][width="45"][nowrap]:after{content:")";margin-left:1rem;color:var(--c-subtext);}.table_header[width="80"],[class^="td"][width="80"]{display:none;width:70px;order:7;}.header_ptw~table .table_header[width="80"],.header_ptw ~ table [class^="td"][width="80"]{display:block;}.table_header[width="90"][nowrap],[class^="td"][width="90"][align="left"]{width:50rem;order:8;justify-content:center;flex-flow:row wrap;}.table_header[width="50"],[class^="td"][width="50"]{width:50rem;order:9;}.table_header[width="75"],[class^="td"][width="75"],.table_header[width="60"],[class^="td"][width="60"]{order:15;}[id^="more"]{width:var(--s-width);padding:0 72rem;background:linear-gradient(160deg,#302b3abc,#211d23bc,#1f141ebc) fixed;border-top:2rem dotted var(--c-row-border);box-shadow:0 1rem 3rem -1rem var(--c-shadow);margin:0 auto;}#copyright{margin-top:0!important;}#copyright:after{content:'"Agile" list design by Valerio Lyndon.';}#recaptcha-terms{margin-bottom:50rem;}#copyright,#recaptcha-terms{text-align:center;cursor:default;}#fancybox-wrap{box-sizing:content-box;} /* Mods */ /* FALLING SNOW */ .list-container:after { position: fixed; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-image: url(https://i.imgur.com/uVN2Nk8.png), url(https://i.imgur.com/3d7VHiA.png), url(https://i.imgur.com/s0pY1pb.png); animation: SNOW 20s linear infinite; z-index: 10000; pointer-events: none !important; } @keyframes SNOW { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } I greatly appreciate any help! |
Zhuwx1Jan 5, 2024 11:48 PM
Jan 5, 2024 10:51 PM
#7769
@Zhuwx1 Zhuwx1 said: /* FALLING SNOW */ .list-container:after { position: fixed; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-image: url(https://i.imgur.com/uVN2Nk8.png), url(https://i.imgur.com/3d7VHiA.png), url(https://i.imgur.com/s0pY1pb.png); animation: SNOW 20s linear infinite; z-index: 10000; pointer-events: none !important; } @keyframes SNOW { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } Your snow effect looks great!! You can fix it by changing this line of code: .list-container:after { body:after { ps. Could you please edit your post and enclose the code within [ spoiler ] tags for better readability? |
Jan 11, 2024 11:51 AM
#7770
Hi, i went on mal today and this layout Takana Grid Style 5(Other also doesn't work) (From this link: https://myanimelist.net/forum/?topicid=1640096) doesn't work. I tried to fix it with the guide but nothing worked |
Jan 11, 2024 5:33 PM
#7771
Reply to Czerifoo
Hi, i went on mal today and this layout Takana Grid Style 5(Other also doesn't work) (From this link: https://myanimelist.net/forum/?topicid=1640096) doesn't work. I tried to fix it with the guide but nothing worked
@Czerifoo Your list layouts work fine for me, just load slow. What are the problems you're seeing? |
Jan 11, 2024 10:18 PM
#7772
Reply to Shishio-kun
@Czerifoo Your list layouts work fine for me, just load slow. What are the problems you're seeing?
@Shishio-kun oh, it actually works now. Before, something went wrong for a while |
Jan 24, 2024 4:30 AM
#7773
Jan 24, 2024 6:36 AM
#7774
Reply to Wyn
Is there a theme out that has a modern and classic version? Like to check out the css differences, been using classic forever.
@Wyn I considered doing this once, but never did because the time to return didn't feel worth it. I don't think anyone else has been crazy enough to do it either. The differences are enough that any sufficiently advanced theme will probably look quite different on modern vs classic. |
Valerio_LyndonJan 24, 2024 6:39 AM
Jan 24, 2024 7:07 AM
#7775
Reply to Wyn
Is there a theme out that has a modern and classic version? Like to check out the css differences, been using classic forever.
@Wyn Classic = load all list titles at once, missing some columns and statistical features (anime info) https://myanimelist.net/editprofile.php?go=listpreferences Modern = more columns and features, more support if there's problems. Layouts will be more stable due to modern being newer. Can direct upload backgrounds better than classic, with additional banner upload. The default layout templates have more options for basic color changing and background positioning. MAL actually let me choose some of the different color templates for Modern long ago (Dark Blue, Dark Green, etc) and I based them on what color templates were popular at the time. imo the Classic differences only benefit hardcore anime or manga watchers with many list titles- who may want to use Classic instead of loading Modern over and over. Most users probably want to use Modern for all the features and support. Designers have advantages and disadvantages in both. |
Shishio-kunJan 24, 2024 7:17 AM
Jan 24, 2024 3:36 PM
#7776
Reply to Shishio-kun
@Wyn
Classic = load all list titles at once, missing some columns and statistical features (anime info)
https://myanimelist.net/editprofile.php?go=listpreferences
Modern = more columns and features, more support if there's problems. Layouts will be more stable due to modern being newer. Can direct upload backgrounds better than classic, with additional banner upload. The default layout templates have more options for basic color changing and background positioning. MAL actually let me choose some of the different color templates for Modern long ago (Dark Blue, Dark Green, etc) and I based them on what color templates were popular at the time.
imo the Classic differences only benefit hardcore anime or manga watchers with many list titles- who may want to use Classic instead of loading Modern over and over. Most users probably want to use Modern for all the features and support. Designers have advantages and disadvantages in both.
Classic = load all list titles at once, missing some columns and statistical features (anime info)
https://myanimelist.net/editprofile.php?go=listpreferences
Modern = more columns and features, more support if there's problems. Layouts will be more stable due to modern being newer. Can direct upload backgrounds better than classic, with additional banner upload. The default layout templates have more options for basic color changing and background positioning. MAL actually let me choose some of the different color templates for Modern long ago (Dark Blue, Dark Green, etc) and I based them on what color templates were popular at the time.
imo the Classic differences only benefit hardcore anime or manga watchers with many list titles- who may want to use Classic instead of loading Modern over and over. Most users probably want to use Modern for all the features and support. Designers have advantages and disadvantages in both.
@Shishio-kun @Valerio_Lyndon Oh I see, don't have an interest in the extra features and rather keep it simple. Guess keeping it the way it is is fine in the long run. Thanks for the info |
Jan 31, 2024 9:56 AM
#7777
on my Profile i want to have a line of text > string1 ................. string2 where string1 is Aligned Left, and string2 is Alighted Right can you do that? in google docs i can do that using Tab Stops i right click on the ruler above the page, and i get a slider thingy that my text will Align too if i press tab [left]string1[/left][right]string2[/right] it puts it on 2 separate lines [table] might do it if i make like 8 empty cells between my 2 strings |
Jan 31, 2024 1:24 PM
#7778
Reply to mtsRhea
on my Profile
i want to have a line of text
> string1 ................. string2
where string1 is Aligned Left, and string2 is Alighted Right
can you do that?
in google docs i can do that using Tab Stops
i right click on the ruler above the page,
and i get a slider thingy
that my text will Align too if i press tab
[left]string1[/left][right]string2[/right]
it puts it on 2 separate lines
[table] might do it if i make like 8 empty cells between my 2 strings
@mtsRhea I think you could probably do that with invisible spaces aligning them for you and some combination of image align or the general align codes |
Feb 6, 2024 9:10 AM
#7779
Reply to Shishio-kun
@mtsRhea
I think you could probably do that with invisible spaces aligning them for you and some combination of image align or the general align codes
I think you could probably do that with invisible spaces aligning them for you and some combination of image align or the general align codes
Shishio-kun said: I think you could probably do that with invisible spaces aligning them for you and some combination of image align or the general align codes what do you mean by invisible spaces? when i input string1 string2 1111111[img]https://i.imgur.com/7pxUrkc.png[/img]2222222[img]https://i.imgur.com/7pxUrkc.png[/img]3333333 1111111[img align=left]https://i.imgur.com/7pxUrkc.png[/img]222222222[img align=right]https://i.imgur.com/7pxUrkc.png[/img]333333333 so when you use align on images it overrides where in the line it's been typed when you string multiple spaces, they're deleted i made spacer-images of 50 pixels wide i find that the profile is 800 pixels wide before wrapping so i made a transparent rectangle 446x7 space between my strings but if i do that, will it display the same on all devices? is there a way to check what something looks like on other devices in a simulation? i hope theres a website i can do that on |
mtsRheaFeb 6, 2024 9:49 AM
Feb 6, 2024 10:43 AM
#7780
i typoed some formatting somewhere while testing and ive discovered that doing so has allowed me to render text on top of an image this seems like it could be a useful tool if understood and reproduced intentionally i dont have the time to analyise it right now, but will do so later copypaste of the current code: [color=#927ae0][size=130][url=https://twitter.com/MKSupdates][img]https://i.imgur.com/9YwOQUc.jpg[/img][/url][right][spoiler="short version"][quote]40-100% are for ranking [url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url] 10-39% for likes 01-09% for dislikes [previously these were 8-10, 5-7, and 1-4[/quote][spoiler="long version"][quote]scoring changed after 2019[/quote][quote] my ratings are just how much i enjoyed something most of my scale is used for ordering things I like having a wider range for likes gives you more expression where it matters i first rate on a % scale then convert to 1-10 for MAL[table] [tr] [td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td] [td]40-100%[/td] [td]4-10[/td] [td]++[/td] [/tr][tr] [td]likes[/td] [td]10-39%[/td] [td]2-3[/td] [td]+[/td] [/tr][tr] [td]dislikes[/td] [td]01-09%[/td] [td]1[/td] [td]-[/td] [/tr][/table] [tr] [td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td] [td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]New [i]fav[/i]s are tagged[/color][/url] most of my MAL comes from before 2019 ratings given before then have 8-10 as favourites, 5-7 are likes, 1-4 are dislikes[/quote] [img]https://i.imgur.com/ESJrdvm.png[/img][/spoiler][/spoiler][/right]recommendations welcome[img]https://i.imgur.com/OGq2Bdd.png[/img][url=https://docs.google.com/spreadsheets/d/10lKM4LZVKbIvn1DSvLc0t_AQOVmocdLWLm2cNy74Yns][color=#d1a4ff][media spreadsheets][/color][/url][/size][/color] |
Feb 6, 2024 11:36 AM
#7781
[table]... it's not respecting the [size=130] i usually have over my whole profile i tried putting [size] in various places in the table it only seems to work if i apply it to an individual cell [size=200][table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table][/size] [size=50][table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table][/size] [table][tr][td][size=200][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [table][tr][size=200][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][/size][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [table][size=200][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][/size][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [size=200][/size] [table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] am i doing something wrong? its even picky about this [td][size=200]cell1_works[/size][/td] vs [size=200][td]cell1_doesnt_work[/td][/size] also ive only been able to get it to [right] if it's inside a [spoiler] is [table] just bugged...? edit: actually [right] itself behaving bloody strangely when combined with [quote] and [spoiler] in different orders... [spoiler][quote][right]test[/right][/quote][/spoiler] [spoiler][right][quote]test[/quote][/right][/spoiler] [quote][spoiler][right]test[/right][/spoiler][/quote] [right][spoiler][quote]test[/quote][/spoiler][/right] [quote][right][spoiler]test[/spoiler][/right][/quote] [right][quote][spoiler]test[/spoiler][/quote][/right] substituting my [table] with `test`, the alignment is the same that 4th test is the behavior im after and you cant do that without the spoiler [the quote is 800 pixels wide, instead of only being as wide as the content] |
mtsRheaFeb 6, 2024 12:15 PM
Feb 6, 2024 12:12 PM
#7782
Reply to mtsRhea
[table]...
it's not respecting the [size=130] i usually have over my whole profile
i tried putting [size] in various places in the table
it only seems to work if i apply it to an individual cell

am i doing something wrong?
its even picky about this
also
ive only been able to get it to [right] if it's inside a [spoiler]
is [table] just bugged...?
edit: actually [right] itself behaving bloody strangely when combined with [quote] and [spoiler] in different orders...

substituting my [table] with `test`, the alignment is the same
that 4th test is the behavior im after
and you cant do that without the spoiler [the quote is 800 pixels wide, instead of only being as wide as the content]
it's not respecting the [size=130] i usually have over my whole profile
i tried putting [size] in various places in the table
it only seems to work if i apply it to an individual cell
[size=200][table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table][/size] [size=50][table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table][/size] [table][tr][td][size=200][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [table][tr][size=200][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][/size][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [table][size=200][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][/size][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table] [size=200][/size] [table][tr][td][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/td][td]40-100%[/td][td]4-10[/td][td]++[/td][/tr][tr][td]likes[/td][td]10-39%[/td][td]2-3[/td][td]+[/td][/tr][tr][td]dislikes[/td][td]01-09%[/td][td]1[/td][td]-[/td][/tr][/table]
am i doing something wrong?
its even picky about this
[td][size=200]cell1_works[/size][/td] vs [size=200][td]cell1_doesnt_work[/td][/size]
also
ive only been able to get it to [right] if it's inside a [spoiler]
is [table] just bugged...?
edit: actually [right] itself behaving bloody strangely when combined with [quote] and [spoiler] in different orders...
[spoiler][quote][right]test[/right][/quote][/spoiler] [spoiler][right][quote]test[/quote][/right][/spoiler] [quote][spoiler][right]test[/right][/spoiler][/quote] [right][spoiler][quote]test[/quote][/spoiler][/right] [quote][right][spoiler]test[/spoiler][/right][/quote] [right][quote][spoiler]test[/spoiler][/quote][/right]
substituting my [table] with `test`, the alignment is the same
that 4th test is the behavior im after
and you cant do that without the spoiler [the quote is 800 pixels wide, instead of only being as wide as the content]
@mtsRhea I dont follow this at all, could you make a Paint or Photoshop template of how you want it to look, and link what page it will be on, and also give me the code of what you have now? So your question is how to "make this into this" which I can understand As for multiple devices I dont know, you have to get them and see, or google a site which shows multiple resolutions. Screenfly used to do this but was broken last few times I checked. Usually just zooming in and out on a page will show more resolutions and Inspect Element has some device previews iirc Transparent images are invisible spaces, I use them in the BBCode sticky with many of the templates so you should check those out |
Feb 6, 2024 12:34 PM
#7783
Reply to Shishio-kun
@mtsRhea
I dont follow this at all, could you make a Paint or Photoshop template of how you want it to look, and link what page it will be on, and also give me the code of what you have now? So your question is how to "make this into this" which I can understand
As for multiple devices I dont know, you have to get them and see, or google a site which shows multiple resolutions. Screenfly used to do this but was broken last few times I checked. Usually just zooming in and out on a page will show more resolutions and Inspect Element has some device previews iirc
Transparent images are invisible spaces, I use them in the BBCode sticky with many of the templates so you should check those out
I dont follow this at all, could you make a Paint or Photoshop template of how you want it to look, and link what page it will be on, and also give me the code of what you have now? So your question is how to "make this into this" which I can understand
As for multiple devices I dont know, you have to get them and see, or google a site which shows multiple resolutions. Screenfly used to do this but was broken last few times I checked. Usually just zooming in and out on a page will show more resolutions and Inspect Element has some device previews iirc
Transparent images are invisible spaces, I use them in the BBCode sticky with many of the templates so you should check those out
Shishio-kun said: So your question is how to "make this into this" which I can understand sorry, i was venting aloud sharing my frustration with [right] and [table] interacting instead of asking for help specifically i think there is no true solution 1] can i [size] a whole table? ive only been able to do it putting [size] in every cell 2] i want a right-aligned table i can sorta achieve this [color=#927ae0][size=130][url=https://twitter.com/MKSupdates][img]https://i.imgur.com/9YwOQUc.jpg[/img][/url] [right][spoiler][quote][table][tr] [td][size=130][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td] [td][size=130]40-100%[/size][/td] [td][size=130]4-10[/size][/td] [td][size=130]++[/size][/td][/tr][tr] [td][size=130]likes[/size][/td] [td][size=130]10-39%[/size][/td] [td][size=130]2-3[/size][/td] [td][size=130]+[/size][/td][/tr][tr] [td][size=130]dislikes[/size][/td] [td][size=130]01-09%[/size][/td] [td][size=130]1[/size][/td] [td][size=130]-[/size][/td][/tr][/table][/quote][/spoiler][/right] [table][tr] [td][size=130][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td] [td][size=130]40-100%[/size][/td] [td][size=130]4-10[/size][/td] [td][size=130]++[/size][/td][/tr][tr] [td][size=130]likes[/size][/td] [td][size=130]10-39%[/size][/td] [td][size=130]2-3[/size][/td] [td][size=130]+[/size][/td][/tr][tr] [td][size=130]dislikes[/size][/td] [td][size=130]01-09%[/size][/td] [td][size=130]1[/size][/td] [td][size=130]-[/size][/td][/tr][/table] recommendations welcome[img]https://i.imgur.com/OGq2Bdd.png[/img][url=https://docs.google.com/spreadsheets/d/10lKM4LZVKbIvn1DSvLc0t_AQOVmocdLWLm2cNy74Yns][color=#d1a4ff][media spreadsheets][/color][/url][/size][/color] but the table is inside a [spoiler] box i have to click to open i want it right-aligned without a spoiler photoshopped: when i take the code, and remove that [spoiler] tag it no longer right-aligns, it does this: having been messing around a lot, i dont think you can |
mtsRheaFeb 6, 2024 12:37 PM
Feb 6, 2024 2:10 PM
#7784
Reply to mtsRhea
Shishio-kun said:
So your question is how to "make this into this" which I can understand
So your question is how to "make this into this" which I can understand
sorry, i was venting aloud
sharing my frustration with [right] and [table] interacting
instead of asking for help specifically
i think there is no true solution
1] can i [size] a whole table?
ive only been able to do it putting [size] in every cell
2] i want a right-aligned table
i can sorta achieve this
[color=#927ae0][size=130][url=https://twitter.com/MKSupdates][img]https://i.imgur.com/9YwOQUc.jpg[/img][/url] [right][spoiler][quote][table][tr] [td][size=130][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td] [td][size=130]40-100%[/size][/td] [td][size=130]4-10[/size][/td] [td][size=130]++[/size][/td][/tr][tr] [td][size=130]likes[/size][/td] [td][size=130]10-39%[/size][/td] [td][size=130]2-3[/size][/td] [td][size=130]+[/size][/td][/tr][tr] [td][size=130]dislikes[/size][/td] [td][size=130]01-09%[/size][/td] [td][size=130]1[/size][/td] [td][size=130]-[/size][/td][/tr][/table][/quote][/spoiler][/right] [table][tr] [td][size=130][url=https://myanimelist.net/animelist/mtsRhea?status=7&tag=fav&order=4&order2=0][color=#d1a4ff]favourites[/color][/url][/size][/td] [td][size=130]40-100%[/size][/td] [td][size=130]4-10[/size][/td] [td][size=130]++[/size][/td][/tr][tr] [td][size=130]likes[/size][/td] [td][size=130]10-39%[/size][/td] [td][size=130]2-3[/size][/td] [td][size=130]+[/size][/td][/tr][tr] [td][size=130]dislikes[/size][/td] [td][size=130]01-09%[/size][/td] [td][size=130]1[/size][/td] [td][size=130]-[/size][/td][/tr][/table] recommendations welcome[img]https://i.imgur.com/OGq2Bdd.png[/img][url=https://docs.google.com/spreadsheets/d/10lKM4LZVKbIvn1DSvLc0t_AQOVmocdLWLm2cNy74Yns][color=#d1a4ff][media spreadsheets][/color][/url][/size][/color]
but the table is inside a [spoiler] box i have to click to open
i want it right-aligned without a spoiler
photoshopped:
when i take the code, and remove that [spoiler] tag
it no longer right-aligns, it does this:
having been messing around a lot, i dont think you can
https://myanimelist.net/forum/?goto=post&topicid=2077105&id=68619995 Did you try the invisible spaces from the sticky I mentioned? This forcefully right aligns a table:
[img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img][table][tr][th]Header 1[/th][th]Header 2[/th][th]Header 3[/th][/tr] [tr][td]text 1A[/td][td]text 2A[/td][td]text 3A[/td][/tr] [tr][td]text 1B[/td][td]text 2C[/td][td]text 3B[/td][/tr][/table] mtsRhea said: 1] can i [size] a whole table? Doesnt look like it, you have to size the cells individually |
Feb 6, 2024 2:55 PM
#7785
Reply to Shishio-kun
https://myanimelist.net/forum/?goto=post&topicid=2077105&id=68619995
Did you try the invisible spaces from the sticky I mentioned? This forcefully right aligns a table:
Header 1 | Header 2 | Header 3 |
---|---|---|
text 1A | text 2A | text 3A |
text 1B | text 2C | text 3B |
[img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img] [img align=left]https://i.imgur.com/6PnoqO0.png[/img][table][tr][th]Header 1[/th][th]Header 2[/th][th]Header 3[/th][/tr] [tr][td]text 1A[/td][td]text 2A[/td][td]text 3A[/td][/tr] [tr][td]text 1B[/td][td]text 2C[/td][td]text 3B[/td][/tr][/table]
mtsRhea said:
1] can i [size] a whole table?
1] can i [size] a whole table?
Doesnt look like it, you have to size the cells individually
@Shishio-kun wow! very cool, i'll read that whole page. tyvm |
Feb 11, 2024 6:28 PM
#7786
hi! i haven't touched my anime list css in a long ass time but i noticed that half of my cover pics don't show up when hovering over the anime titles. (tends to be the newer anime that do not show up) i've tried going through the classic guides and re-doing the code multiple times but nothing seems to fix it. :,) is the code mayhaps outdated or am i just doing something wrong LOL@\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css"; //* -------------------------------------------------------------------------------- ___ _ _ ___ ___ ___ _ _ ___ _ ___ ___ _____ _ _ ___ __ __ ___ ___ / __| || |_ _| _ \/ _ \| | | / __| /_\ / __|_ _| |_ _| || | __| \/ | __/ __| \__ \ __ || || / (_) | |_| \__ \/ _ \ (_ || | | | | __ | _|| |\/| | _|\__ \ |___/_||_|___|_|_\\___/ \___/|___/_/ \_\___|___| |_| |_||_|___|_| |_|___|___/ - ☂ LAYOUT NO.7 : ENDLESS RIVER;. ---------------------------------------------- -- ☂ DESIGN AND CODING BY NYMPHIAE (SHIROUSAGITHEMES). ------------------------- --- ☂ FONTS: RALEWAY, ARIMO. --------------------------------------------------- ---- ☂ ART: TOFUVI@TUMBLR. ----------------------------------------------------- -------------------------------------------------------------------------------- */ @import url(https://fonts.googleapis.com/css?family=Raleway:400,300|Arimo:400,400italic,700,700italic); body {background: #f5f5f5; color: #404040; font-family: "Arimo", sans-serif; font-size: 10pt; cursor: url(https://dl.dropboxusercontent.com/s/big6d40vggyaab4/er-arrow.png), auto;} body:before {content: ""; display: block; height: 100%; width: 1px; background: #d4d4d4; position: fixed; top: 0; left: 383px;} a {cursor: url(https://dl.dropboxusercontent.com/s/8dxfn8dp10igyd6/er-hand.png), auto;} a, strong, b {color: #404040; text-decoration: none;} #mal_control_strip a, #mal_control_strip strong, #mal_control_strip b {text-decoration: none !important; font-weight: normal !important;} #list_surround {width: 650px; padding: 25px; left: 384px; position: relative; top: 75px; bottom: 0;} #list_surround br, #mal_cs_pic img {display: none;} #list_surround table[align="center"]:first-of-type {position: fixed; display: block; height: 75px; width: 959px; top: 0px; left: 125px; background: #f5f5f5; border-bottom: 1px solid #d4d4d4; box-sizing: border-box; padding: 0 0 0 258px; z-index: 10;} td[class^="status_"] {text-align: left; width: auto; padding: 41px 25px 0 0; height: 75px; vertical-align: top; box-sizing: border-box;} td[class^="status_"]:first-of-type {padding: 41px 25px 0 26px; border-left: 1px solid #d4d4d4;} td[class^="status_"] a {text-transform: uppercase; font-size: 7pt; letter-spacing: 0.15em; transition: .75s; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} td[class^="status_"] a:hover {color: #1cc6c6;} .status_selected {font-weight: 700 !important;} .header_title {font-size: 12pt; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-family: "Raleway", sans-serif; color: #00aaaa; border-width: 1px 1px 0 1px; border-style: solid; border-color: #d4d4d4; padding-top: 2px; background: #f0f0f0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} .category_totals {display: block; border-width: 0 1px 1px 1px; border-style: solid; border-color: #d4d4d4; margin-bottom: 25px; text-transform: uppercase; font-size: 7pt; letter-spacing: 0.075em; text-align: center; padding: 5px 0; background: #f0f0f0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} #grand_totals {font-size: 7pt; color: #00aaaa; font-weight: 700; text-transform: uppercase; font-style: italic; border: 1px solid #d4d4d4; background: #f0f0f0; text-align: center; height: 25px; line-height: 25px; margin-bottom: 25px;} td[class^="td"] {line-height: 11pt;} td[class^="td"], .table_header {background: #f0f0f0;} td[class^="td"]:first-of-type, .table_header:first-of-type {border-left: 1px solid #d4d4d4;} td[class^="td"]:last-of-type, .table_header:last-of-type {border-right: 1px solid #d4d4d4;} tr:hover td[class^="td"], tr:hover td[class^="td"] a {color: #00aaaa; transition: .75s;} a[onclick*="update"] {opacity: 0; position: absolute; padding-left: 2px;} tr:hover a[onclick*="update"] {opacity: 1; transition: .75s;} .table_headerLink, .table_headerLink strong, .table_header strong {line-height: 10pt; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.075em; font-weight: normal;} .animetitle {padding-left: 0;} tr:hover .animetitle {padding-left: 4px;} #list_surround small {line-height: 7pt; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.15em;} .animetitle + small {position: relative; top: -1px;} .animetitle + small:before {content: "[";} .animetitle + small:after {content: "]";} div[style="float: right;"] {float: left !important; padding: 3px 0 0 0; font-size: 0 !important; color: transparent !important; text-transform: uppercase; height: 15px; width: 0px !important; overflow: hidden !important; opacity: 0; transition: .75s; box-sizing: border-box; text-align: center;} div[style="float: right;"] small a:first-of-type {font-size: 7pt !important; color: #404040 !important; padding-left: 4px;} div[style="float: right;"] small a:last-of-type {display: none;} tr:hover div[style="float: right;"] {width: 34px !important; opacity: 1;} #mal_control_strip {position: fixed; width: 208px !important; top: 328px; left: 150px !important; background: none !important; border: 1px solid #d4d4d4; text-align: center;} #mal_control_strip * {font-family: "Arimo", sans-serif !important; text-shadow: 1px 1px 0px #FFF; font-size: 7pt !important; text-transform: uppercase !important; color: #404040 !important;} #mal_control_strip a, #mal_control_strip a strong {color: #00aaaa !important; letter-spacing: 0; transition: .5s;} #mal_control_strip a:hover, #mal_control_strip a strong:hover {letter-spacing: 0.15em;} #mal_control_strip td {display: block; height: auto !important; box-sizing: border-box; padding: 0 !important; width: 206px; border-style: solid; border-color: #fff; border-width: 0 3px 0 3px; background-color: #ebebeb;} #mal_control_strip td:first-of-type {border-top-width: 3px;} #mal_cs_otherlinks {border-bottom-width: 3px !important;} #mal_control_strip td div {margin: 0 !important;} #mal_cs_otherlinks div:last-of-type, #mal_cs_otherlinks div:last-of-type span, #mal_cs_links div {font-size: 0 !important;} #mal_cs_otherlinks div:last-of-type a, #mal_cs_links div a {display: block;} #mal_cs_otherlinks div:first-of-type strong {font-size: 0 !important;} #mal_cs_otherlinks div:first-of-type strong a:after {content: "'s profile"} #mal_cs_otherlinks div:first-of-type strong a {text-decoration: } #mal_cs_powered, #mal_cs_pic img {display: none !important;} #copyright:after {display: block; position: fixed; width: 208px; left: 150px; top: 34px; content: "menu"; font-size: 12pt; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-family: "Raleway", sans-serif; color: #00aaaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); z-index: 20;} #mal_control_strip:after {display: block; content: ""; box-sizing: border-box; position: fixed; top: 297px; left: 247px; width: 13px; height: 13px; transform: rotate(-45deg); border-width: 0 0 1px 1px; border-style: solid; border-color: #00aaaa; background-color: #f5f5f5;} #mal_cs_otherlinks:before {display: block; content: ""; box-sizing: border-box; position: fixed; top: 101px; left: 151px; width: 206px; height: 186px; border: 3px solid #fff; background-color: #ffffff; z-index: 5; /* background-image: url(https://dl.dropboxusercontent.com/s/kk8500o8jinyxxj/endless-river.png); */ background-position: center; background-repeat: no-repeat; transition: .75s; background-size: cover;} #mal_cs_otherlinks:after {display: block; content: ""; box-sizing: border-box; position: fixed; top: 100px; left: 150px; width: 208px; height: 188px; border: 1px solid #d4d4d4; background-color: transparent;} #copyright {font-size: 7pt; text-transform: uppercase; margin-top: 0 !important;} #copyright:before {display: block; box-sizing: content-box; position: fixed; top: 104px; left: 154px; width: 200px; height: 60px; padding: 60px 0; white-space: pre; content: "layout no.7 : endless river, \a courtesy of shirousagi themes. \a design and coding by nymphiae. \a art by tofuvi@tumblr. \a for code and more information \a visit shirousagi.god.jp"; font-size: 7pt; text-transform: uppercase; font-weight: 700; background: rgba(255,255,255,.65); z-index: 50; transform: rotateY(180deg); opacity: 0; transition: .75s;} #copyright:hover:before {opacity: 1; transform: rotateY(0deg);} ::-webkit-scrollbar {height: 9px; width: 9px; background-color: #d4d4d4; border: 4px solid #f5f5f5;} ::-webkit-scrollbar-thumb {border: 4px solid transparent; background-clip: padding-box; background-color: #38c6c6;} ::-moz-selection {color: #fff; background: #38c6c6; text-shadow: none;} ::selection {color: #fff; background: #38c6c6; text-shadow: none;} .style-by-shirousagithemes {visiblity: visible;} /* --------------------------------------------------------------------------- */ /* ---------- IF YOU WANT TO CHANGE THE IMAGE, CHANGE THE URL BELOW ---------- */ #mal_cs_otherlinks:before {background-image: url("http://i.imgur.com/hO7bfCN.png");} /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1100px; top: 160px; height: 220px; width: 220px; padding-bottom: 0px; border-style: solid; border-color: #d4d4d4; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 0px 0px 0px 0px; background-color: rgba(205, 237, 235, 1); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: ""; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } |
Feb 11, 2024 10:48 PM
#7787
Reply to Rainbow
hi! i haven't touched my anime list css in a long ass time but i noticed that half of my cover pics don't show up when hovering over the anime titles. (tends to be the newer anime that do not show up) i've tried going through the classic guides and re-doing the code multiple times but nothing seems to fix it. :,) is the code mayhaps outdated or am i just doing something wrong LOL
@\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css"; //* -------------------------------------------------------------------------------- ___ _ _ ___ ___ ___ _ _ ___ _ ___ ___ _____ _ _ ___ __ __ ___ ___ / __| || |_ _| _ \/ _ \| | | / __| /_\ / __|_ _| |_ _| || | __| \/ | __/ __| \__ \ __ || || / (_) | |_| \__ \/ _ \ (_ || | | | | __ | _|| |\/| | _|\__ \ |___/_||_|___|_|_\\___/ \___/|___/_/ \_\___|___| |_| |_||_|___|_| |_|___|___/ - ☂ LAYOUT NO.7 : ENDLESS RIVER;. ---------------------------------------------- -- ☂ DESIGN AND CODING BY NYMPHIAE (SHIROUSAGITHEMES). ------------------------- --- ☂ FONTS: RALEWAY, ARIMO. --------------------------------------------------- ---- ☂ ART: TOFUVI@TUMBLR. ----------------------------------------------------- -------------------------------------------------------------------------------- */ @import url(https://fonts.googleapis.com/css?family=Raleway:400,300|Arimo:400,400italic,700,700italic); body {background: #f5f5f5; color: #404040; font-family: "Arimo", sans-serif; font-size: 10pt; cursor: url(https://dl.dropboxusercontent.com/s/big6d40vggyaab4/er-arrow.png), auto;} body:before {content: ""; display: block; height: 100%; width: 1px; background: #d4d4d4; position: fixed; top: 0; left: 383px;} a {cursor: url(https://dl.dropboxusercontent.com/s/8dxfn8dp10igyd6/er-hand.png), auto;} a, strong, b {color: #404040; text-decoration: none;} #mal_control_strip a, #mal_control_strip strong, #mal_control_strip b {text-decoration: none !important; font-weight: normal !important;} #list_surround {width: 650px; padding: 25px; left: 384px; position: relative; top: 75px; bottom: 0;} #list_surround br, #mal_cs_pic img {display: none;} #list_surround table[align="center"]:first-of-type {position: fixed; display: block; height: 75px; width: 959px; top: 0px; left: 125px; background: #f5f5f5; border-bottom: 1px solid #d4d4d4; box-sizing: border-box; padding: 0 0 0 258px; z-index: 10;} td[class^="status_"] {text-align: left; width: auto; padding: 41px 25px 0 0; height: 75px; vertical-align: top; box-sizing: border-box;} td[class^="status_"]:first-of-type {padding: 41px 25px 0 26px; border-left: 1px solid #d4d4d4;} td[class^="status_"] a {text-transform: uppercase; font-size: 7pt; letter-spacing: 0.15em; transition: .75s; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} td[class^="status_"] a:hover {color: #1cc6c6;} .status_selected {font-weight: 700 !important;} .header_title {font-size: 12pt; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-family: "Raleway", sans-serif; color: #00aaaa; border-width: 1px 1px 0 1px; border-style: solid; border-color: #d4d4d4; padding-top: 2px; background: #f0f0f0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} .category_totals {display: block; border-width: 0 1px 1px 1px; border-style: solid; border-color: #d4d4d4; margin-bottom: 25px; text-transform: uppercase; font-size: 7pt; letter-spacing: 0.075em; text-align: center; padding: 5px 0; background: #f0f0f0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);} #grand_totals {font-size: 7pt; color: #00aaaa; font-weight: 700; text-transform: uppercase; font-style: italic; border: 1px solid #d4d4d4; background: #f0f0f0; text-align: center; height: 25px; line-height: 25px; margin-bottom: 25px;} td[class^="td"] {line-height: 11pt;} td[class^="td"], .table_header {background: #f0f0f0;} td[class^="td"]:first-of-type, .table_header:first-of-type {border-left: 1px solid #d4d4d4;} td[class^="td"]:last-of-type, .table_header:last-of-type {border-right: 1px solid #d4d4d4;} tr:hover td[class^="td"], tr:hover td[class^="td"] a {color: #00aaaa; transition: .75s;} a[onclick*="update"] {opacity: 0; position: absolute; padding-left: 2px;} tr:hover a[onclick*="update"] {opacity: 1; transition: .75s;} .table_headerLink, .table_headerLink strong, .table_header strong {line-height: 10pt; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.075em; font-weight: normal;} .animetitle {padding-left: 0;} tr:hover .animetitle {padding-left: 4px;} #list_surround small {line-height: 7pt; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.15em;} .animetitle + small {position: relative; top: -1px;} .animetitle + small:before {content: "[";} .animetitle + small:after {content: "]";} div[style="float: right;"] {float: left !important; padding: 3px 0 0 0; font-size: 0 !important; color: transparent !important; text-transform: uppercase; height: 15px; width: 0px !important; overflow: hidden !important; opacity: 0; transition: .75s; box-sizing: border-box; text-align: center;} div[style="float: right;"] small a:first-of-type {font-size: 7pt !important; color: #404040 !important; padding-left: 4px;} div[style="float: right;"] small a:last-of-type {display: none;} tr:hover div[style="float: right;"] {width: 34px !important; opacity: 1;} #mal_control_strip {position: fixed; width: 208px !important; top: 328px; left: 150px !important; background: none !important; border: 1px solid #d4d4d4; text-align: center;} #mal_control_strip * {font-family: "Arimo", sans-serif !important; text-shadow: 1px 1px 0px #FFF; font-size: 7pt !important; text-transform: uppercase !important; color: #404040 !important;} #mal_control_strip a, #mal_control_strip a strong {color: #00aaaa !important; letter-spacing: 0; transition: .5s;} #mal_control_strip a:hover, #mal_control_strip a strong:hover {letter-spacing: 0.15em;} #mal_control_strip td {display: block; height: auto !important; box-sizing: border-box; padding: 0 !important; width: 206px; border-style: solid; border-color: #fff; border-width: 0 3px 0 3px; background-color: #ebebeb;} #mal_control_strip td:first-of-type {border-top-width: 3px;} #mal_cs_otherlinks {border-bottom-width: 3px !important;} #mal_control_strip td div {margin: 0 !important;} #mal_cs_otherlinks div:last-of-type, #mal_cs_otherlinks div:last-of-type span, #mal_cs_links div {font-size: 0 !important;} #mal_cs_otherlinks div:last-of-type a, #mal_cs_links div a {display: block;} #mal_cs_otherlinks div:first-of-type strong {font-size: 0 !important;} #mal_cs_otherlinks div:first-of-type strong a:after {content: "'s profile"} #mal_cs_otherlinks div:first-of-type strong a {text-decoration: } #mal_cs_powered, #mal_cs_pic img {display: none !important;} #copyright:after {display: block; position: fixed; width: 208px; left: 150px; top: 34px; content: "menu"; font-size: 12pt; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-family: "Raleway", sans-serif; color: #00aaaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); z-index: 20;} #mal_control_strip:after {display: block; content: ""; box-sizing: border-box; position: fixed; top: 297px; left: 247px; width: 13px; height: 13px; transform: rotate(-45deg); border-width: 0 0 1px 1px; border-style: solid; border-color: #00aaaa; background-color: #f5f5f5;} #mal_cs_otherlinks:before {display: block; content: ""; box-sizing: border-box; position: fixed; top: 101px; left: 151px; width: 206px; height: 186px; border: 3px solid #fff; background-color: #ffffff; z-index: 5; /* background-image: url(https://dl.dropboxusercontent.com/s/kk8500o8jinyxxj/endless-river.png); */ background-position: center; background-repeat: no-repeat; transition: .75s; background-size: cover;} #mal_cs_otherlinks:after {display: block; content: ""; box-sizing: border-box; position: fixed; top: 100px; left: 150px; width: 208px; height: 188px; border: 1px solid #d4d4d4; background-color: transparent;} #copyright {font-size: 7pt; text-transform: uppercase; margin-top: 0 !important;} #copyright:before {display: block; box-sizing: content-box; position: fixed; top: 104px; left: 154px; width: 200px; height: 60px; padding: 60px 0; white-space: pre; content: "layout no.7 : endless river, \a courtesy of shirousagi themes. \a design and coding by nymphiae. \a art by tofuvi@tumblr. \a for code and more information \a visit shirousagi.god.jp"; font-size: 7pt; text-transform: uppercase; font-weight: 700; background: rgba(255,255,255,.65); z-index: 50; transform: rotateY(180deg); opacity: 0; transition: .75s;} #copyright:hover:before {opacity: 1; transform: rotateY(0deg);} ::-webkit-scrollbar {height: 9px; width: 9px; background-color: #d4d4d4; border: 4px solid #f5f5f5;} ::-webkit-scrollbar-thumb {border: 4px solid transparent; background-clip: padding-box; background-color: #38c6c6;} ::-moz-selection {color: #fff; background: #38c6c6; text-shadow: none;} ::selection {color: #fff; background: #38c6c6; text-shadow: none;} .style-by-shirousagithemes {visiblity: visible;} /* --------------------------------------------------------------------------- */ /* ---------- IF YOU WANT TO CHANGE THE IMAGE, CHANGE THE URL BELOW ---------- */ #mal_cs_otherlinks:before {background-image: url("http://i.imgur.com/hO7bfCN.png");} /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1100px; top: 160px; height: 220px; width: 220px; padding-bottom: 0px; border-style: solid; border-color: #d4d4d4; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 0px 0px 0px 0px; background-color: rgba(205, 237, 235, 1); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: ""; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; }
@Rainbow I am pretty sure the fixes in the pinned repair thread should do the job. The short of it is you should replace the current dropbox link in your code...@\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css"; ... with this updated malscraper link that is specific to your list (it uses your MAL username in the URL). @\import "https://malscraper.azurewebsites.net/covers/anime/Rainbow/presets/more"; This will make your list load faster and hopefully fix the missing images. |
Feb 12, 2024 10:51 AM
#7788
Reply to Valerio_Lyndon
@Rainbow I am pretty sure the fixes in the pinned repair thread should do the job. The short of it is you should replace the current dropbox link in your code...
... with this updated malscraper link that is specific to your list (it uses your MAL username in the URL).
This will make your list load faster and hopefully fix the missing images.
@\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css";
... with this updated malscraper link that is specific to your list (it uses your MAL username in the URL).
@\import "https://malscraper.azurewebsites.net/covers/anime/Rainbow/presets/more";
This will make your list load faster and hopefully fix the missing images.
@Valerio_Lyndon aaa it worked tysm !! TwT |
Feb 12, 2024 8:47 PM
#7789
Reply to Rainbow
@Valerio_Lyndon aaa it worked tysm !! TwT
@Rainbow Awesome! :D |
Feb 26, 2024 11:28 PM
#7790
All of a sudden I'm missing a border and my covers are on the opposite side of the list and not sure what's changed regarding classic css. Could someone take a quick long at my css and tell me whats wrong? (And fix if given the chance) Thanks @\import "https://fonts.googleapis.com/css2?family=Exo+2"; @\import "https://malscraper.azurewebsites.net/covers/anime/Wyn/presets/more"; #inlineContent { background-position: center; background-size: cover; box-shadow: 3px 3px 2px 0.3px rgba(0, 0, 0, 0.3); height: 200px; width: 200px; border-radius: 100px; display: flex !important; position: absolute; top: 184px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #inlineContent::after { font-family: 'Exo 2'; position: absolute; display: block; color: white; border-style: solid; border-color: rgba(255, 255, 255, 0.2); padding-top: 3px; padding-bottom: 4px; border-width: 1px; border-radius: 5px; margin-top: 220px; color: rgba(255, 255, 255, 0.7); font-size: 25px; width: 197px; text-align: center; background-color: rgba(255, 255, 255, 0.08); content:"MyAnimeList"; } #inlineContent:hover::after { background-color: rgba(255, 255, 255, 0.2); } body:before { content: ""; display: block; position: relative; height: 380px; background-image: url("https://i.imgur.com/r7njNzA.png"),url("https://i.imgur.com/JEHjxLb.png"),radial-gradient(circle, rgba(101,22,11,0.5928572112438726) 4%, rgba(29,29,29,1) 33%, rgba(17,17,17,1) 73%, rgba(3,101,160,0.3967787798713235) 100%); } BODY { margin: 0; color: whitesmoke; font-size: 14.00px; font-family: 'Exo 2', Verdana, Arial; background-repeat: no-repeat; background-color: #222222; font-weight: lighter; } * { text-decoration: none !important; } /* // Determines the positioning of your list */ #list_surround { margin: auto; width: 940px; margin-bottom: 25px; } #list_surround .animetitle+small { border-style: solid; border-width: 1px; border-color: #5675B9; background-color: #5675B9 !important; margin-left: 8px; padding: 5px; color: whitesmoke; border-radius: 5px; opacity: 1 !important; } #list_surround > table tr > .td1:nth-child(3), #list_surround > table tr > .td2:nth-child(3) { width: 66px } /* // All links on your list */ a { color: whitesmoke; text-decoration: underline; } a:visited { color: whitesmoke; text-decoration: underline; } a:hover { color: whitesmoke; text-decoration: none; } /* // Alternating row color 1 */ .td1 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Alternating row color 2 */ .td2 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Table hover color */ tr:hover .td2, tr:hover .td1 { background-color: #0365a0 !important; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: whitesmoke; border-color: #ddd; background-color: #2E333D; padding: 2px; border-style: solid; border-width: 0px 0px 1px 0px !important; line-height: 25px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: whitesmoke; } .table_headerLink:Visited { color: whitesmoke; } .table_headerLink:Hover { color: whitesmoke; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: 'Exo 2', Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #2E333D; border-color: #0365a0; border-style: solid; border-width: 1px; } .status_not_selected:hover { background-color: #2E333D; } .status_selected a, .status_not_selected a { display: block; padding: 10px; } .status_not_selected:first-of-type, .status_selected:first-of-type { border-radius: 5px 0px 0px 5px; } .status_not_selected:last-of-type, .status_selected:last-of-type { border-radius: 0px 5px 5px 0px; } .status_not_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #171717; border-color: #0365a0; border-style: solid; border-width: 1px; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { color: #159957; } .header_completed { color: #337ab7; } .header_onhold { color: #f0ad4e; } .header_dropped { color: #d9534f; } .header_ptw { color: whitesmoke; } .header_title { padding-bottom: 4px; font-size: 30px; font-family: 'Exo 2', "Helvetica Neue", Helvetica, Arial, sans-serif; } .category_totals { padding: 0px; background-color: #171717; font-size: 0 !important; } #grand_totals { display: none; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: normal; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links {} /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: normal; } #copyright { padding: 15px; text-align: center; margin: 0 auto; border-color: #5675B9 !important; border-style: solid; border-width: 1px; border-radius: 5px; color: whitesmoke; background-color: #5675B9; } #copyright::After { white-space: pre !important; content: "\A Layout design by iSayChris, edited by Wyn"; margin-bottom: 20px; } #mal\_control\_strip { background-image: url("") !important; background-color: #222222 !important; width: 100%; height: 50px; padding: 0; margin: 0; left: 0; background-repeat: repeat-x; color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; text-transform: none; position: fixed; top: 0px; z-index: 5; } #mal\_control\_strip a { color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; background: transparent; text-transform: none; } #mal\_control\_strip img { background: transparent none repeat scroll 0%; border: 0 none; margin: 0; padding: 0; } #mal\_control\_strip table { width: auto; height: 40px; } #mal\_control\_strip td { height: 40px; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; text-transform: none; } #mal\_control\_strip td div { margin: 3px 0; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; } #mal_cs_pic { width: 80px; padding-right: 8px; padding: 0 1em; } #mal_cs_listinfo { width: 75px; padding: 0 1em; } #mal_cs_links { width: 150px; padding: 0 1em; display: none !important; } #mal_cs_otherlinks { padding: 0 1em; } #mal_cs_powered a { display: none; } #mal_cs_powered { position: absolute; top: 0px; right: 0px; } #mal_cs_powered #search {} #mal_cs_powered #search #searchBox { border-radius: 3px; padding: 8px; font-size: 15px !important; color: #8A8C8F; text-align: center; background-color: #171717; border-style: none; top: 0px !important; } #searchListButton { display: none; } #searchListButton:hover { cursor: pointer; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 1px solid #7e7e7e; } .hide { display: none; } .borderRBL { border-width: 0 1px 1px 1px; } /* Back to Mobile site */ #btn-back_to_mobile { position: absolute; top: 4px; right: 170px; background-image: url('/images/back_to_mobile_site02.png?v=2'); background-size: 142px 20px; background-position: 4px 4px; background-repeat: no-repeat; display: block; width: 142px!important; height: 20px!important; background-color: #F0F3FA; border: #2E51A2 2px solid; border-radius: 4px; padding: 4px; z-index: 10; text-indent: -9999px; } #mal_control_strip #btn-back_to_mobile { top: 4px; left: 470px; } /* Top */ .table_header { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px !important; } /* Top sides */ td.table_header:first-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px 1px !important; border-radius: 5px 0 0 0; } td.table_header:last-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 1px 1px 0 !important; border-radius: 0 5px 0 0; } /* Sides of list table (anime/manga entries) */ .td1:first-of-type, .td2:first-of-type { border-color: #0365a0; border-style: solid; border-width: 0 0 0px 1px !important; } .td1:last-of-type, .td2:last-of-type { border-color: #0365a0; border-style: solid; border-width: 0 1px 0px 0 !important; } /* Bottom and bottom sides */ .category_totals { border-color: #0365a0; border-style: solid; border-width: 0 1px 1px !important; border-radius: 0 0 5px 5px; } /* Other tables at bottom */ #grand_totals, #copyright { border-color: #0365a0; border-style: solid; border-width: 1px !important; } .td1 small, .td2 small { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; } /* COVERS MOD */ .hide { background-color: rgba(0, 0, 0, 0); background-position: center; background-repeat: no-repeat no-repeat; background-size: cover; filter: grayscale(20%); border-radius: 1px; border-width: 1px; border-style: solid; border-color: #0365a0; display: inline-block !important; height: 23px; margin-left: 39px; margin-top: -30px; position: absolute; width: 35px; } .hide:hover { background-color: #2E333D; background-size: cover; margin-left: -203px; margin-top: -320px; padding-right: 150px; padding-top: 290px !important; position: absolute; z-index: 1; } .hide:hover::after { content: " "; background-color: #2E333D; border-radius: 5px; height: 23px; left: 241px; position: absolute; top: 290px; width: 37px; z-index: 20; } td.td1:nth-of-type(1), td.td2:nth-of-type(1), .table_header:nth-of-type(2) a { padding-right: 54px !important; } .table_header:nth-of-type(2) a { margin-left: 53px; } .table_header:nth-child(3) { width: 70px } /* Avatar */ #inlineContent { background-image: url('https://i.imgur.com/PefaqQm.jpg'); } /* User tag */ #inlineContent:after { content: "Wyn"; } #recaptcha-terms { display: none; } .grecaptcha-badge { visibility: hidden; } |
Feb 27, 2024 6:41 AM
#7791
Reply to Wyn
All of a sudden I'm missing a border and my covers are on the opposite side of the list and not sure what's changed regarding classic css.
Could someone take a quick long at my css and tell me whats wrong? (And fix if given the chance)
Thanks

Could someone take a quick long at my css and tell me whats wrong? (And fix if given the chance)
Thanks
@\import "https://fonts.googleapis.com/css2?family=Exo+2"; @\import "https://malscraper.azurewebsites.net/covers/anime/Wyn/presets/more"; #inlineContent { background-position: center; background-size: cover; box-shadow: 3px 3px 2px 0.3px rgba(0, 0, 0, 0.3); height: 200px; width: 200px; border-radius: 100px; display: flex !important; position: absolute; top: 184px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #inlineContent::after { font-family: 'Exo 2'; position: absolute; display: block; color: white; border-style: solid; border-color: rgba(255, 255, 255, 0.2); padding-top: 3px; padding-bottom: 4px; border-width: 1px; border-radius: 5px; margin-top: 220px; color: rgba(255, 255, 255, 0.7); font-size: 25px; width: 197px; text-align: center; background-color: rgba(255, 255, 255, 0.08); content:"MyAnimeList"; } #inlineContent:hover::after { background-color: rgba(255, 255, 255, 0.2); } body:before { content: ""; display: block; position: relative; height: 380px; background-image: url("https://i.imgur.com/r7njNzA.png"),url("https://i.imgur.com/JEHjxLb.png"),radial-gradient(circle, rgba(101,22,11,0.5928572112438726) 4%, rgba(29,29,29,1) 33%, rgba(17,17,17,1) 73%, rgba(3,101,160,0.3967787798713235) 100%); } BODY { margin: 0; color: whitesmoke; font-size: 14.00px; font-family: 'Exo 2', Verdana, Arial; background-repeat: no-repeat; background-color: #222222; font-weight: lighter; } * { text-decoration: none !important; } /* // Determines the positioning of your list */ #list_surround { margin: auto; width: 940px; margin-bottom: 25px; } #list_surround .animetitle+small { border-style: solid; border-width: 1px; border-color: #5675B9; background-color: #5675B9 !important; margin-left: 8px; padding: 5px; color: whitesmoke; border-radius: 5px; opacity: 1 !important; } #list_surround > table tr > .td1:nth-child(3), #list_surround > table tr > .td2:nth-child(3) { width: 66px } /* // All links on your list */ a { color: whitesmoke; text-decoration: underline; } a:visited { color: whitesmoke; text-decoration: underline; } a:hover { color: whitesmoke; text-decoration: none; } /* // Alternating row color 1 */ .td1 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Alternating row color 2 */ .td2 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Table hover color */ tr:hover .td2, tr:hover .td1 { background-color: #0365a0 !important; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: whitesmoke; border-color: #ddd; background-color: #2E333D; padding: 2px; border-style: solid; border-width: 0px 0px 1px 0px !important; line-height: 25px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: whitesmoke; } .table_headerLink:Visited { color: whitesmoke; } .table_headerLink:Hover { color: whitesmoke; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: 'Exo 2', Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #2E333D; border-color: #0365a0; border-style: solid; border-width: 1px; } .status_not_selected:hover { background-color: #2E333D; } .status_selected a, .status_not_selected a { display: block; padding: 10px; } .status_not_selected:first-of-type, .status_selected:first-of-type { border-radius: 5px 0px 0px 5px; } .status_not_selected:last-of-type, .status_selected:last-of-type { border-radius: 0px 5px 5px 0px; } .status_not_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #171717; border-color: #0365a0; border-style: solid; border-width: 1px; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { color: #159957; } .header_completed { color: #337ab7; } .header_onhold { color: #f0ad4e; } .header_dropped { color: #d9534f; } .header_ptw { color: whitesmoke; } .header_title { padding-bottom: 4px; font-size: 30px; font-family: 'Exo 2', "Helvetica Neue", Helvetica, Arial, sans-serif; } .category_totals { padding: 0px; background-color: #171717; font-size: 0 !important; } #grand_totals { display: none; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: normal; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links {} /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: normal; } #copyright { padding: 15px; text-align: center; margin: 0 auto; border-color: #5675B9 !important; border-style: solid; border-width: 1px; border-radius: 5px; color: whitesmoke; background-color: #5675B9; } #copyright::After { white-space: pre !important; content: "\A Layout design by iSayChris, edited by Wyn"; margin-bottom: 20px; } #mal\_control\_strip { background-image: url("") !important; background-color: #222222 !important; width: 100%; height: 50px; padding: 0; margin: 0; left: 0; background-repeat: repeat-x; color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; text-transform: none; position: fixed; top: 0px; z-index: 5; } #mal\_control\_strip a { color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; background: transparent; text-transform: none; } #mal\_control\_strip img { background: transparent none repeat scroll 0%; border: 0 none; margin: 0; padding: 0; } #mal\_control\_strip table { width: auto; height: 40px; } #mal\_control\_strip td { height: 40px; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; text-transform: none; } #mal\_control\_strip td div { margin: 3px 0; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; } #mal_cs_pic { width: 80px; padding-right: 8px; padding: 0 1em; } #mal_cs_listinfo { width: 75px; padding: 0 1em; } #mal_cs_links { width: 150px; padding: 0 1em; display: none !important; } #mal_cs_otherlinks { padding: 0 1em; } #mal_cs_powered a { display: none; } #mal_cs_powered { position: absolute; top: 0px; right: 0px; } #mal_cs_powered #search {} #mal_cs_powered #search #searchBox { border-radius: 3px; padding: 8px; font-size: 15px !important; color: #8A8C8F; text-align: center; background-color: #171717; border-style: none; top: 0px !important; } #searchListButton { display: none; } #searchListButton:hover { cursor: pointer; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 1px solid #7e7e7e; } .hide { display: none; } .borderRBL { border-width: 0 1px 1px 1px; } /* Back to Mobile site */ #btn-back_to_mobile { position: absolute; top: 4px; right: 170px; background-image: url('/images/back_to_mobile_site02.png?v=2'); background-size: 142px 20px; background-position: 4px 4px; background-repeat: no-repeat; display: block; width: 142px!important; height: 20px!important; background-color: #F0F3FA; border: #2E51A2 2px solid; border-radius: 4px; padding: 4px; z-index: 10; text-indent: -9999px; } #mal_control_strip #btn-back_to_mobile { top: 4px; left: 470px; } /* Top */ .table_header { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px !important; } /* Top sides */ td.table_header:first-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px 1px !important; border-radius: 5px 0 0 0; } td.table_header:last-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 1px 1px 0 !important; border-radius: 0 5px 0 0; } /* Sides of list table (anime/manga entries) */ .td1:first-of-type, .td2:first-of-type { border-color: #0365a0; border-style: solid; border-width: 0 0 0px 1px !important; } .td1:last-of-type, .td2:last-of-type { border-color: #0365a0; border-style: solid; border-width: 0 1px 0px 0 !important; } /* Bottom and bottom sides */ .category_totals { border-color: #0365a0; border-style: solid; border-width: 0 1px 1px !important; border-radius: 0 0 5px 5px; } /* Other tables at bottom */ #grand_totals, #copyright { border-color: #0365a0; border-style: solid; border-width: 1px !important; } .td1 small, .td2 small { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; } /* COVERS MOD */ .hide { background-color: rgba(0, 0, 0, 0); background-position: center; background-repeat: no-repeat no-repeat; background-size: cover; filter: grayscale(20%); border-radius: 1px; border-width: 1px; border-style: solid; border-color: #0365a0; display: inline-block !important; height: 23px; margin-left: 39px; margin-top: -30px; position: absolute; width: 35px; } .hide:hover { background-color: #2E333D; background-size: cover; margin-left: -203px; margin-top: -320px; padding-right: 150px; padding-top: 290px !important; position: absolute; z-index: 1; } .hide:hover::after { content: " "; background-color: #2E333D; border-radius: 5px; height: 23px; left: 241px; position: absolute; top: 290px; width: 37px; z-index: 20; } td.td1:nth-of-type(1), td.td2:nth-of-type(1), .table_header:nth-of-type(2) a { padding-right: 54px !important; } .table_header:nth-of-type(2) a { margin-left: 53px; } .table_header:nth-child(3) { width: 70px } /* Avatar */ #inlineContent { background-image: url('https://i.imgur.com/PefaqQm.jpg'); } /* User tag */ #inlineContent:after { content: "Wyn"; } #recaptcha-terms { display: none; } .grecaptcha-badge { visibility: hidden; }
@Wyn I got the same thing on mine today too so it might be a more general issue atm Also on the manga list version said covers are also super distorted fsr |
Feb 27, 2024 9:24 AM
#7792
Reply to HaXXspetten
@Wyn I got the same thing on mine today too so it might be a more general issue atm
Also on the manga list version said covers are also super distorted fsr
Also on the manga list version said covers are also super distorted fsr
@HaXXspetten Manga list also has distorted images for me as well, guess It's a waiting game but quite annoying to look at. |
Feb 27, 2024 2:02 PM
#7793
Reply to Wyn
All of a sudden I'm missing a border and my covers are on the opposite side of the list and not sure what's changed regarding classic css.
Could someone take a quick long at my css and tell me whats wrong? (And fix if given the chance)
Thanks

Could someone take a quick long at my css and tell me whats wrong? (And fix if given the chance)
Thanks
@\import "https://fonts.googleapis.com/css2?family=Exo+2"; @\import "https://malscraper.azurewebsites.net/covers/anime/Wyn/presets/more"; #inlineContent { background-position: center; background-size: cover; box-shadow: 3px 3px 2px 0.3px rgba(0, 0, 0, 0.3); height: 200px; width: 200px; border-radius: 100px; display: flex !important; position: absolute; top: 184px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #inlineContent::after { font-family: 'Exo 2'; position: absolute; display: block; color: white; border-style: solid; border-color: rgba(255, 255, 255, 0.2); padding-top: 3px; padding-bottom: 4px; border-width: 1px; border-radius: 5px; margin-top: 220px; color: rgba(255, 255, 255, 0.7); font-size: 25px; width: 197px; text-align: center; background-color: rgba(255, 255, 255, 0.08); content:"MyAnimeList"; } #inlineContent:hover::after { background-color: rgba(255, 255, 255, 0.2); } body:before { content: ""; display: block; position: relative; height: 380px; background-image: url("https://i.imgur.com/r7njNzA.png"),url("https://i.imgur.com/JEHjxLb.png"),radial-gradient(circle, rgba(101,22,11,0.5928572112438726) 4%, rgba(29,29,29,1) 33%, rgba(17,17,17,1) 73%, rgba(3,101,160,0.3967787798713235) 100%); } BODY { margin: 0; color: whitesmoke; font-size: 14.00px; font-family: 'Exo 2', Verdana, Arial; background-repeat: no-repeat; background-color: #222222; font-weight: lighter; } * { text-decoration: none !important; } /* // Determines the positioning of your list */ #list_surround { margin: auto; width: 940px; margin-bottom: 25px; } #list_surround .animetitle+small { border-style: solid; border-width: 1px; border-color: #5675B9; background-color: #5675B9 !important; margin-left: 8px; padding: 5px; color: whitesmoke; border-radius: 5px; opacity: 1 !important; } #list_surround > table tr > .td1:nth-child(3), #list_surround > table tr > .td2:nth-child(3) { width: 66px } /* // All links on your list */ a { color: whitesmoke; text-decoration: underline; } a:visited { color: whitesmoke; text-decoration: underline; } a:hover { color: whitesmoke; text-decoration: none; } /* // Alternating row color 1 */ .td1 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Alternating row color 2 */ .td2 { color: whitesmoke; border-color: #ABABAB; padding: 3px; background-color: #171717; line-height: 30px; } /* // Table hover color */ tr:hover .td2, tr:hover .td1 { background-color: #0365a0 !important; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: whitesmoke; border-color: #ddd; background-color: #2E333D; padding: 2px; border-style: solid; border-width: 0px 0px 1px 0px !important; line-height: 25px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: whitesmoke; } .table_headerLink:Visited { color: whitesmoke; } .table_headerLink:Hover { color: whitesmoke; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: 'Exo 2', Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #2E333D; border-color: #0365a0; border-style: solid; border-width: 1px; } .status_not_selected:hover { background-color: #2E333D; } .status_selected a, .status_not_selected a { display: block; padding: 10px; } .status_not_selected:first-of-type, .status_selected:first-of-type { border-radius: 5px 0px 0px 5px; } .status_not_selected:last-of-type, .status_selected:last-of-type { border-radius: 0px 5px 5px 0px; } .status_not_selected { color: #000000; border-color: #ABABAB; padding: 2px; background-color: #171717; border-color: #0365a0; border-style: solid; border-width: 1px; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { color: #159957; } .header_completed { color: #337ab7; } .header_onhold { color: #f0ad4e; } .header_dropped { color: #d9534f; } .header_ptw { color: whitesmoke; } .header_title { padding-bottom: 4px; font-size: 30px; font-family: 'Exo 2', "Helvetica Neue", Helvetica, Arial, sans-serif; } .category_totals { padding: 0px; background-color: #171717; font-size: 0 !important; } #grand_totals { display: none; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: normal; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links {} /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: normal; } #copyright { padding: 15px; text-align: center; margin: 0 auto; border-color: #5675B9 !important; border-style: solid; border-width: 1px; border-radius: 5px; color: whitesmoke; background-color: #5675B9; } #copyright::After { white-space: pre !important; content: "\A Layout design by iSayChris, edited by Wyn"; margin-bottom: 20px; } #mal\_control\_strip { background-image: url("") !important; background-color: #222222 !important; width: 100%; height: 50px; padding: 0; margin: 0; left: 0; background-repeat: repeat-x; color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; text-transform: none; position: fixed; top: 0px; z-index: 5; } #mal\_control\_strip a { color: #ffffff; font-family: 'Exo 2'; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; background: transparent; text-transform: none; } #mal\_control\_strip img { background: transparent none repeat scroll 0%; border: 0 none; margin: 0; padding: 0; } #mal\_control\_strip table { width: auto; height: 40px; } #mal\_control\_strip td { height: 40px; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; text-transform: none; } #mal\_control\_strip td div { margin: 3px 0; color: #ffffff; font-family: 'Exo 2', Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-variant: normal; } #mal_cs_pic { width: 80px; padding-right: 8px; padding: 0 1em; } #mal_cs_listinfo { width: 75px; padding: 0 1em; } #mal_cs_links { width: 150px; padding: 0 1em; display: none !important; } #mal_cs_otherlinks { padding: 0 1em; } #mal_cs_powered a { display: none; } #mal_cs_powered { position: absolute; top: 0px; right: 0px; } #mal_cs_powered #search {} #mal_cs_powered #search #searchBox { border-radius: 3px; padding: 8px; font-size: 15px !important; color: #8A8C8F; text-align: center; background-color: #171717; border-style: none; top: 0px !important; } #searchListButton { display: none; } #searchListButton:hover { cursor: pointer; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 1px solid #7e7e7e; } .hide { display: none; } .borderRBL { border-width: 0 1px 1px 1px; } /* Back to Mobile site */ #btn-back_to_mobile { position: absolute; top: 4px; right: 170px; background-image: url('/images/back_to_mobile_site02.png?v=2'); background-size: 142px 20px; background-position: 4px 4px; background-repeat: no-repeat; display: block; width: 142px!important; height: 20px!important; background-color: #F0F3FA; border: #2E51A2 2px solid; border-radius: 4px; padding: 4px; z-index: 10; text-indent: -9999px; } #mal_control_strip #btn-back_to_mobile { top: 4px; left: 470px; } /* Top */ .table_header { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px !important; } /* Top sides */ td.table_header:first-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 0 1px 1px !important; border-radius: 5px 0 0 0; } td.table_header:last-of-type { border-color: #0365a0; border-style: solid; border-width: 1px 1px 1px 0 !important; border-radius: 0 5px 0 0; } /* Sides of list table (anime/manga entries) */ .td1:first-of-type, .td2:first-of-type { border-color: #0365a0; border-style: solid; border-width: 0 0 0px 1px !important; } .td1:last-of-type, .td2:last-of-type { border-color: #0365a0; border-style: solid; border-width: 0 1px 0px 0 !important; } /* Bottom and bottom sides */ .category_totals { border-color: #0365a0; border-style: solid; border-width: 0 1px 1px !important; border-radius: 0 0 5px 5px; } /* Other tables at bottom */ #grand_totals, #copyright { border-color: #0365a0; border-style: solid; border-width: 1px !important; } .td1 small, .td2 small { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; } /* COVERS MOD */ .hide { background-color: rgba(0, 0, 0, 0); background-position: center; background-repeat: no-repeat no-repeat; background-size: cover; filter: grayscale(20%); border-radius: 1px; border-width: 1px; border-style: solid; border-color: #0365a0; display: inline-block !important; height: 23px; margin-left: 39px; margin-top: -30px; position: absolute; width: 35px; } .hide:hover { background-color: #2E333D; background-size: cover; margin-left: -203px; margin-top: -320px; padding-right: 150px; padding-top: 290px !important; position: absolute; z-index: 1; } .hide:hover::after { content: " "; background-color: #2E333D; border-radius: 5px; height: 23px; left: 241px; position: absolute; top: 290px; width: 37px; z-index: 20; } td.td1:nth-of-type(1), td.td2:nth-of-type(1), .table_header:nth-of-type(2) a { padding-right: 54px !important; } .table_header:nth-of-type(2) a { margin-left: 53px; } .table_header:nth-child(3) { width: 70px } /* Avatar */ #inlineContent { background-image: url('https://i.imgur.com/PefaqQm.jpg'); } /* User tag */ #inlineContent:after { content: "Wyn"; } #recaptcha-terms { display: none; } .grecaptcha-badge { visibility: hidden; }
@Wyn It's fixable with something like this, so worse case scenario it can be repaired.. might have to be a case-by-case fix .hide { margin-left: -900px; margin-top: -10px; } .hide:hover { margin-left: -1200px; margin-top: -10px; } .hide:hover::after { margin-left: -00px; margin-top: -290px; position: absolute; width: 100%; background: transparent; } Only thing is they revert the change that broke the list in the first place, then the fix will end up breaking the list lol and have to removed It's been reported here, I'll tag Kina and Cyrus they tend to reply and forward this to the dev https://myanimelist.net/forum/?topicid=2147856 |
Feb 27, 2024 2:23 PM
#7794
Reply to Shishio-kun
@Wyn It's fixable with something like this, so worse case scenario it can be repaired.. might have to be a case-by-case fix
Only thing is they revert the change that broke the list in the first place, then the fix will end up breaking the list lol and have to removed
It's been reported here, I'll tag Kina and Cyrus they tend to reply and forward this to the dev
https://myanimelist.net/forum/?topicid=2147856
.hide { margin-left: -900px; margin-top: -10px; } .hide:hover { margin-left: -1200px; margin-top: -10px; } .hide:hover::after { margin-left: -00px; margin-top: -290px; position: absolute; width: 100%; background: transparent; }
Only thing is they revert the change that broke the list in the first place, then the fix will end up breaking the list lol and have to removed
It's been reported here, I'll tag Kina and Cyrus they tend to reply and forward this to the dev
https://myanimelist.net/forum/?topicid=2147856
@Shishio-kun Thanks for the fix, spent some extra time and figured out .td1:last-of-type,.td2:last-of-type |
WynFeb 27, 2024 2:27 PM
Feb 27, 2024 11:48 PM
#7796
Feb 29, 2024 12:09 AM
#7797
It's seemingly broken again? was broken day before yesterday, fixed yesterday, and now it's broken again |
Feb 29, 2024 8:59 PM
#7798
thenonamezzz said: It's seemingly broken again? was broken day before yesterday, fixed yesterday, and now it's broken again Got a screenshot of whats supposed to be showing? |
Feb 29, 2024 10:43 PM
#7799
Reply to Wyn
thenonamezzz said:
It's seemingly broken again? was broken day before yesterday, fixed yesterday, and now it's broken again
It's seemingly broken again? was broken day before yesterday, fixed yesterday, and now it's broken again
Got a screenshot of whats supposed to be showing?
@Wyn i do, it's the spice and wolf layout back from 2015 (albeit i've done very minor personal changes) https://myanimelist.net/forum/?topicid=1337115 |
Mar 24, 2024 8:40 AM
#7800
Probably answered before, but is there code to hide the "started date" column but not the "finished date" column? I don't use the "started date" column at all. Thanks in advance! (https://myanimelist.net/animelist/Gippy?status=2&order=2&tag=) |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |