New
Nov 15, 2018 8:56 PM
#1
This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 Thanks to @takana_no_hana for inspiration and codes I borrowed for this! Move your cursor on a row to pop up the preview pics for it! Add this to any list design. Won't work on some layouts with big preview pics already, since they are structured differently. How to install hovering preview pics Step 1. First of all, Image must be checked on this page: https://myanimelist.net/editprofile.php?go=listpreferences Step 2. Save after. Then you must add this to the top of your CSS. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; Step 3. Finally you must also add this to the bottom of your CSS and save. All done! If the preview pics ever become blurry or missing, consult this topic: https://myanimelist.net/forum/?topicid=439897 /* COVER SIZE */ .data.image a:after{ width: 200px; height: 300px; } /* COVER POSITION */ .data.image a:after{ position: fixed; top: 1%; left: calc(50% - 750px); } /* OTHER CODES */ .data.image a:after {content: ""; display: block !important; background-color: rgba(0,0,0,.3); background-position: center !important; background-repeat: no-repeat !important; background-size: cover; border: 1px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0, 0.7); visibility: hidden; opacity: 0; transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 5;} .list-table .list-table-data:hover .data.image a:after { visibility: visible; opacity: 1; transition: .3s ease-out;} Moving the covers, resizing them They are set to move just to the left of the default list style. However, go to /* COVER POSITION */ and adjust the percentage after top to change the vertical position of the preview pic. Change the 750px value after left to move the the preview pic left or right. For instance, a value of 50% + 750px will move it to the right side. The dimensions of the covers can be increased with the codes under /* COVER SIZE */. After a width of 225px, the covers may start to lose quality. Remove smaller default pics You can add these codes to remove the anime or manga's default preview pic from view when "hovering" with .list-table .list-table-data:hover .data.image .image{ opacity: 0; } Alternatively, to remove all default preview pics from view, you'd have to add these codes (you'd still see the hovering ones). It would look similar to the preview pic below. .data.image .image{ opacity: 0; display: none; } .list-table .list-table-header .header-title.image { font-size: 1px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; opacity: 0; display: none; } How to install hovering Tags too (mini-reviews) First of all, tags must be checked on this page: https://myanimelist.net/editprofile.php?go=listpreferences Secondly, install these codes to bottom of your CSS. Moving and resizing them is similar to the preview pic options above. /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: blue !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 750px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } Add highlights! Combine it with the row hover highlight codes! https://myanimelist.net/forum/?topicid=1567153 |
Shishio-kunMar 25, 2023 9:51 AM
Jan 28, 2023 6:11 AM
#2
what do u mean ' top of your CSS'? where is that? |
Jan 28, 2023 6:13 AM
#3
and why is my profile not appearing here in the chat? |
Jan 28, 2023 6:52 AM
#4
This page: https://myanimelist.net/ownlist/style There's a theme here where you shaded the bubble next to anime and manga, that is the theme you're using currently. You click the theme and on the page it leads you to a page with an add CSS box, normally the CSS codes people copy/paste or edit are in there. You'd place the codes from this topic in that box, and on the top (in front) of any codes in that box already. This is a pic of the box (empty in my example) I think you are using the default theme atm: https://myanimelist.net/ownlist/style/theme/1 |
Jan 31, 2023 1:15 AM
#5
Got it thankyou <3 |
Jan 31, 2023 1:26 AM
#6
it didn't work, i copied like you said why is that, is it because I use default theme? |
Jan 31, 2023 1:28 AM
#7
and how can i attach img file? when I click in 'insert an image' button it ask me url how does it work? and again why is my profile pic not showing? sorry to dumb you all those questions but I have no one to ask |
Jan 31, 2023 10:45 AM
#8
hiro_hikari said: and how can i attach img file? when I click in 'insert an image' button it ask me url how does it work? and again why is my profile pic not showing? sorry to dumb you all those questions but I have no one to ask You have to set the forum pic here, it's different from your profile pic https://myanimelist.net/editprofile.php?go=forumoptions You need BBcode to insert images, this is where you upload a pic to Imgur then post the image link on MAL. It's shown how under Posting Images and GIFs https://myanimelist.net/forum/?topicid=496203 hiro_hikari said: it didn't work, i copied like you said why is that, is it because I use default theme? You have the codes on your list but they aren't working, I think the import line at the very top needs the slash removed (the slash in between @ and import). Then it will look like this: @import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; |
Feb 2, 2023 10:59 PM
#9
i'm trying to change the text color for the hovering tags but it just stays blue, am i doing something wrong? |
Feb 6, 2023 11:26 AM
#10
fleafyz-_- said: i'm trying to change the text color for the hovering tags but it just stays blue, am i doing something wrong? It conflict with another set of codes added: /*==============================*\ | Category-Coloured List Text | \* --- - --- - ---- - --- - --- */ .data a:not(.edit-disabled):hover { text-decoration: underline; } .list-item .data.watching ~ .data a:not(.edit), .list-item .data.reading ~ .data a:not(.edit) { /* Watching */ color: #2db039 !important; } .list-item .data.completed ~ .data a:not(.edit) { /* Completed */ color: #26448f !important; } .list-item .data.onhold ~ .data a:not(.edit) { /* On Hold */ color: #f1c83e !important; } .list-item .data.dropped ~ .data a:not(.edit) { /* Dropped */ color: #a12f31 !important; } .list-item .data.plantowatch ~ .data a:not(.edit), .list-item .data.plantoread ~ .data a:not(.edit) { /* Planned */ color: #c3c3c3 !important; } So you can remove them, or try. That's completed tags only tho .list-item .data.completed ~ .data.tags a{ /* Completed */ color: red !important; } |
Feb 6, 2023 6:50 PM
#11
Shishio-kun said: ohhhh ok thanks for the code, i'll try to figure out the conflict. thanks againfleafyz-_- said: i'm trying to change the text color for the hovering tags but it just stays blue, am i doing something wrong? It conflict with another set of codes added: /*==============================*\ | Category-Coloured List Text | \* --- - --- - ---- - --- - --- */ .data a:not(.edit-disabled):hover { text-decoration: underline; } .list-item .data.watching ~ .data a:not(.edit), .list-item .data.reading ~ .data a:not(.edit) { /* Watching */ color: #2db039 !important; } .list-item .data.completed ~ .data a:not(.edit) { /* Completed */ color: #26448f !important; } .list-item .data.onhold ~ .data a:not(.edit) { /* On Hold */ color: #f1c83e !important; } .list-item .data.dropped ~ .data a:not(.edit) { /* Dropped */ color: #a12f31 !important; } .list-item .data.plantowatch ~ .data a:not(.edit), .list-item .data.plantoread ~ .data a:not(.edit) { /* Planned */ color: #c3c3c3 !important; } So you can remove them, or try. That's completed tags only tho .list-item .data.completed ~ .data.tags a{ /* Completed */ color: red !important; } |
May 31, 2023 7:15 AM
#12
I really like this code. This was what brought me to the club when I first started tweaking my list. But is there a way to have images appear on hover along with the anime/manga information bubble for the Top Anime and Top Manga pages (so we wouldn't have to zoom in and out or squint)? Hmm, that's probably gonna be a separate script... Is there already one? (Related: show image in information bubble when hovering) |
May 31, 2023 11:12 AM
#13
@IridescentJaune Yeah that's actually a pretty simple change I would think due to some ghost updates MAL added in the past few months for the list designers. So I'll see if I can put it in a CSS Stylus theme later :D |
May 31, 2023 12:56 PM
#14
@Shishio-kun I wonder if there's a script like by hacker09 already? But if there was then I would've already learnt about that by now... Anyways, were you talking about the colourful mal theme (now w/ dark mode) by sunnysummerday (I wish there's a video tutorial to accompany the thread.)? Sorry, I'm not so familiar with Stylus and/or Stylish... I haven't tried either. It looks like the information bubbles on the Top Anime and Top Manga pages are still not fixed. (Details not showing when you have the mouse pointer on a series.). |
May 31, 2023 1:30 PM
#15
@IridescentJaune No I don't have anything to do with Colorful. What I meant is I could maybe add a theme later that pops up a bigger image for each anime. I think it could be possible. You'd install the Stylus extension, then click install the theme on its page, and the big pic feature would be added. When it comes to the tooltip/info bubble thingie there's several errors https://myanimelist.net/forum/?topicid=2092934&msgid=69228830#msg69228830 I believe my dark theme linked in the signature fixes all these. And there's a stylus theme for fixing one of the errors but not the one you're referring to. I do want to add more videos! I actually made several but they have all been scrapped since MAL made many changes in the meantime.. so I have been delayed big time with stuff I wanted to do here ":D |
May 31, 2023 2:00 PM
#16
May 31, 2023 2:07 PM
#17
@IridescentJaune Whats the mode you use (light dark?) and whats the exact issue you see? Because if you install Stylus you might be able to install those codes to your browser and fix the issue now, without waiting for a theme- the codes can be pasted into any browser through Stylus I left them there for the devs but they wont use em lol |
May 31, 2023 2:20 PM
#18
Jan 17, 11:16 PM
#19
I've tried changing the cover size, but nothing happens? |
"๐ฎ๐น'๐ธ ๐ณ๐ด๐น ๐ฑ๐ฎ๐ฐ๐ช ๐ฎ ๐จ๐ฆ๐ณ'๐น ๐น๐ฆ๐ฑ๐ฐ ๐น๐ด ๐ต๐ช๐ด๐ต๐ฑ๐ช. ๐ฎ ๐ฏ๐บ๐ธ๐น ๐ฉ๐ด๐ณ'๐น ๐ฎ๐ณ๐ฉ๐บ๐ฑ๐ฌ๐ช ๐ฎ๐ณ ๐ต๐ด๐ฎ๐ณ๐น๐ฑ๐ช๐ธ๐ธ ๐ธ๐ฒ๐ฆ๐ฑ๐ฑ ๐น๐ฆ๐ฑ๐ฐ๐ธ." |
Jan 18, 12:12 AM
#20
Reply to MrAddict
I've tried changing the cover size, but nothing happens?
@MrAddict you're using Clarity's version of the cover mod so the code is different. i've modified the values for you. Or you can change them to your liking: 1- left: -205px 2- width: 190px 3- top: calc(50% - 132px) 4- height: 265px /*-S-T-A-R-T--------------------*\ | Hover Image on Circle R0.3 | \*------------------------------*/ .data.image a { overflow: visible; } .data.image a:before { content: ""; position: absolute; top: 50%; left: -205px; z-index: 50; width: 190px; height: 0; background: var(--bg-dark) no-repeat center / cover; border-radius: 8px; box-shadow: 0 0 2px #000; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .data.image:hover a:before { top: calc(50% - 132px); height: 265px; opacity: 1; } .data.image img, .data.image a:after { border-radius: 50%; } /*------------------------E-N-D-*/ |
Jan 18, 5:46 PM
#21
Reply to karmashizzle
@MrAddict you're using Clarity's version of the cover mod so the code is different.
i've modified the values for you. Or you can change them to your liking:
1- left: -205px
2- width: 190px
3- top: calc(50% - 132px)
4- height: 265px
i've modified the values for you. Or you can change them to your liking:
1- left: -205px
2- width: 190px
3- top: calc(50% - 132px)
4- height: 265px
/*-S-T-A-R-T--------------------*\ | Hover Image on Circle R0.3 | \*------------------------------*/ .data.image a { overflow: visible; } .data.image a:before { content: ""; position: absolute; top: 50%; left: -205px; z-index: 50; width: 190px; height: 0; background: var(--bg-dark) no-repeat center / cover; border-radius: 8px; box-shadow: 0 0 2px #000; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .data.image:hover a:before { top: calc(50% - 132px); height: 265px; opacity: 1; } .data.image img, .data.image a:after { border-radius: 50%; } /*------------------------E-N-D-*/
@karmashizzle THANK YOU IT WORKS! |
"๐ฎ๐น'๐ธ ๐ณ๐ด๐น ๐ฑ๐ฎ๐ฐ๐ช ๐ฎ ๐จ๐ฆ๐ณ'๐น ๐น๐ฆ๐ฑ๐ฐ ๐น๐ด ๐ต๐ช๐ด๐ต๐ฑ๐ช. ๐ฎ ๐ฏ๐บ๐ธ๐น ๐ฉ๐ด๐ณ'๐น ๐ฎ๐ณ๐ฉ๐บ๐ฑ๐ฌ๐ช ๐ฎ๐ณ ๐ต๐ด๐ฎ๐ณ๐น๐ฑ๐ช๐ธ๐ธ ๐ธ๐ฒ๐ฆ๐ฑ๐ฑ ๐น๐ฆ๐ฑ๐ฐ๐ธ." |
Feb 9, 9:01 AM
#22
How do you make these hovering preview pics work for custom preview pics? If it's even possible. For custom previews I use this code: .data.image a[href*="/numberofanime"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(link); background-size: cover; background-position: center top; } |
Feb 9, 11:52 AM
#23
Reply to Myslivir
How do you make these hovering preview pics work for custom preview pics? If it's even possible. For custom previews I use this code:
.data.image a[href*="/numberofanime"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(link);
background-size: cover;
background-position: center top;
}
.data.image a[href*="/numberofanime"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(link);
background-size: cover;
background-position: center top;
}
@Myslivir Its almost certainly possible. Should be something like .data.image a[href*="/1689"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background: red; } .list-table .list-table-data:hover .data.image a:before{ content: ""; position:absolute; display: block; height: 250px; width: 150px; background: blue; top: 100px; left: -200px; } Second set of codes is for hover or .data.image a[href*="/numberofanime"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(link); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before, .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before, .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before { content: ""; position:absolute; display: block; height: 250px; width: 150px; top: 100px; left: -200px; } To make many hover with less codes What is the name of the anime with one of the custom preview pics you're using, and what category is it on? When I see it on your list I can edit and find the exact code for giving it hover |
Feb 10, 12:32 AM
#24
Reply to Shishio-kun
@Myslivir
Its almost certainly possible. Should be something like
Second set of codes is for hover
or
To make many hover with less codes
What is the name of the anime with one of the custom preview pics you're using, and what category is it on? When I see it on your list I can edit and find the exact code for giving it hover
Its almost certainly possible. Should be something like
.data.image a[href*="/1689"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background: red; } .list-table .list-table-data:hover .data.image a:before{ content: ""; position:absolute; display: block; height: 250px; width: 150px; background: blue; top: 100px; left: -200px; }
Second set of codes is for hover
or
.data.image a[href*="/numberofanime"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(link); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before, .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before, .list-table .list-table-data:hover .data.image a[href*="/numberofanime"]:before { content: ""; position:absolute; display: block; height: 250px; width: 150px; top: 100px; left: -200px; }
To make many hover with less codes
What is the name of the anime with one of the custom preview pics you're using, and what category is it on? When I see it on your list I can edit and find the exact code for giving it hover
@Shishio-kun Oh I don't have any specific ones yet. I was just experimenting, so I am testing it on Oshi no ko, since it's at the top. The code you sent works, but so does the other one I use, so they both work at the same time (maybe that's my bad of course). I might as well just write down my whole css code (it's mostly yours anyway). Even though I used to study IT and programming, I have no idea how this stuff works anymore. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; /*FOR DARK LAYOUTS*/ /*CHANGING THE LIST COLORS */ /* BACKGROUND COLOR OF CATEGORY LINKS Find codes below with "rgba" followed by numbers in parenthesis. The first number in the parenthesis is the amount of red (0-255). The second number in the parenthesis is the amount of green (0-255). The third number in the parenthesis is the amount of blue (0-255). The fourth number in the parenthesis is the amount of opacity (.0 to 1). Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. Generate RGBA color codes you can use here http://www.hexcolortool.com/ You can also use color names and color numbers for the background color too. */ .status-menu-container{ background-color: rgba(0,0,0,.8) !important; } /* CATEGORY HEADER BACKGROUND COLOR */ .list-unit .list-status-title { background-color: ; } /* BACKGROUND AND BORDER COLOR OF LIST */ .list-block, .cover-block{ background-color: rgba(0,0,0,.7) !important; } /*BACKGROUND COLOR OF ROWS ON HOVER */ tbody[class*="list-item"]:hover, .list-table tbody:nth-of-type(2n+1):hover { background-color:black !important;} /*BACKGROUND COLOR OF SIDE MENU */ .list-menu-float .icon-menu { background: ; } /*BACKGROUND COLOR OF SIDE MENU WHEN OPENED*/ .list-menu-float .icon-menu:not(.profile):hover, .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting { background:; } /*BORDER COLOR OF SIDE MENU */ .list-menu-float{ border: #EBEBEB 1px solid; } /*FOOTER COLOR */ #footer-block { background-color: #244291; } /*FONT COLORS Change the colors to what you want. Put the color you want for fonts after color: for each code below.*/ /* HEADER TEXT COLORS*/ .header .header-menu *,#header-menu-button,.header .header-menu a{ color: ; } /* CATEGORY BUTTON LINK COLORS*/ .status-menu-container .status-menu .status-button, .status-menu-container .status-menu .status-button.on{ color: ; } /* STATS FILTER COLORS*/ .list-unit .list-status-title .stats *, .list-unit .list-status-title .stats a{ color: ; } /* ANIME STAT COLORS*/ .list-unit .list-stats{ color: ; font-family: arial; } /* CATEGORY HEADER FONT */ .list-unit .list-status-title .text { color: ; font-family: arial; } /* COLLUMN HEADER COLORS */ .list-table .list-table-header .header-title, .list-table .list-table-header .header-title .link.sort, .list-table .list-table-header .header-title.image a{ color: ; font-family: ; } /* LIST LINK FONT */ .list-table .list-table-data .data a{ color: ; font-family: arial; } /* LIST NON-LINK FONT */ .list-table .list-table-data .data{ color: ; font-family: arial; } /* TAGS EDIT FONT */ .list-table .list-table-data .tags .edit{ color: ; font-family: arial; } /* SIDE MENU ICONS */ .list-menu-float .icon-menu svg.icon{ fill: ; } /* SIDE MENU ICONS AND TEXT WHEN OPENED*/ .list-menu-float .icon-menu svg.icon:hover{ fill: white !Important; } /* FOOTER FONT COLORS */ #footer-block *, #footer-block a{ color: ; font-family: arial; } /* LINK COLOR ON HOVER Make sure your color is followed by a space and !important */ a:hover, .list-table .list-table-data .data a:hover{ color: cyan !important; } /* OTHER CODES*/ body{ background-size: cover !important; background-attachment: fixed !important; } .cover-block { padding-left: 17px; padding-right: 17px; } .list-table > tbody:nth-of-type(2n+1), .list-table, .list-container, .list-table .list-table-header .header-title { background-color: transparent !important; border: 0 transparent solid !important; } .list-table .list-table-data .data{ border: 0 transparent solid !important; } /*------------------------------------*/ /* COVER SIZE */ .data.image a:after{ width: 225px; height: 325px; } /* COVER POSITION */ .data.image a:after{ position: fixed; top: 35%; left: calc(50% - 750px); } /* OTHER CODES */ .data.image a:after {content: ""; display: block !important; background-color: rgba(0,0,0,.3); background-position: center !important; background-repeat: no-repeat !important; background-size: cover; border: 1px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0, 0.7); visibility: hidden; opacity: 0; transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 5;} .list-table .list-table-data:hover .data.image a:after { visibility: visible; opacity: 1; transition: .3s ease-out;} /* PREVIEW PIC CHANGE*/ .data.image a[href*="/52034"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(https://i.imgur.com/utuG0AU.png); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/52034"]:before{ content: ""; position:absolute; display: block; height: 250px; width: 150px; background-image:url(https://i.imgur.com/utuG0AU.png); top: 100px; left: -200px; } |
Shishio-kunFeb 10, 1:07 PM
Feb 10, 12:56 PM
#25
@Myslivir I dont see Oshi no ko at the top of any of your categories So I need you to tell me what category its on so I can test the codes compared to other anime on the list- so please tell me what category it is on but only if you customized its cover already. OK I found it at the bottom of completed. I had the wrong idea with the codes, you'll have to use this for custom covers and hover on that layout /* CUSTOM COVER AND HOVER */ .data.image a[href*="/52034"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(https://i.imgur.com/utuG0AU.png); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/52034"]:after { background-image:url(https://i.imgur.com/utuG0AU.png); } So your CSS would look like this, the codes are at the bottom and I took out the closed comments part since that always causes errors, it even has with our best ppl who made many layouts and I dont want it interfering with the codes at the bottom (I highly recommend to take them out and put them on a notepad instead). @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; /*FOR DARK LAYOUTS*/ /*CHANGING THE LIST COLORS */ /* BACKGROUND COLOR OF CATEGORY LINKS Find codes below with "rgba" followed by numbers in parenthesis. The first number in the parenthesis is the amount of red (0-255). The second number in the parenthesis is the amount of green (0-255). The third number in the parenthesis is the amount of blue (0-255). The fourth number in the parenthesis is the amount of opacity (.0 to 1). Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. Generate RGBA color codes you can use here http://www.hexcolortool.com/ You can also use color names and color numbers for the background color too. */ .status-menu-container{ background-color: rgba(0,0,0,.8) !important; } /* CATEGORY HEADER BACKGROUND COLOR */ .list-unit .list-status-title { background-color: ; } /* BACKGROUND AND BORDER COLOR OF LIST */ .list-block, .cover-block{ background-color: rgba(0,0,0,.7) !important; } /*BACKGROUND COLOR OF ROWS ON HOVER */ tbody[class*="list-item"]:hover, .list-table tbody:nth-of-type(2n+1):hover { background-color:black !important;} /*BACKGROUND COLOR OF SIDE MENU */ .list-menu-float .icon-menu { background: ; } /*BACKGROUND COLOR OF SIDE MENU WHEN OPENED*/ .list-menu-float .icon-menu:not(.profile):hover, .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting { background:; } /*BORDER COLOR OF SIDE MENU */ .list-menu-float{ border: #EBEBEB 1px solid; } /*FOOTER COLOR */ #footer-block { background-color: #244291; } /*FONT COLORS Change the colors to what you want. Put the color you want for fonts after color: for each code below.*/ /* HEADER TEXT COLORS*/ .header .header-menu *,#header-menu-button,.header .header-menu a{ color: ; } /* CATEGORY BUTTON LINK COLORS*/ .status-menu-container .status-menu .status-button, .status-menu-container .status-menu .status-button.on{ color: ; } /* STATS FILTER COLORS*/ .list-unit .list-status-title .stats *, .list-unit .list-status-title .stats a{ color: ; } /* ANIME STAT COLORS*/ .list-unit .list-stats{ color: ; font-family: arial; } /* CATEGORY HEADER FONT */ .list-unit .list-status-title .text { color: ; font-family: arial; } /* COLLUMN HEADER COLORS */ .list-table .list-table-header .header-title, .list-table .list-table-header .header-title .link.sort, .list-table .list-table-header .header-title.image a{ color: ; font-family: ; } /* LIST LINK FONT */ .list-table .list-table-data .data a{ color: ; font-family: arial; } /* LIST NON-LINK FONT */ .list-table .list-table-data .data{ color: ; font-family: arial; } /* TAGS EDIT FONT */ .list-table .list-table-data .tags .edit{ color: ; font-family: arial; } /* SIDE MENU ICONS */ .list-menu-float .icon-menu svg.icon{ fill: ; } /* SIDE MENU ICONS AND TEXT WHEN OPENED*/ .list-menu-float .icon-menu svg.icon:hover{ fill: white !Important; } /* FOOTER FONT COLORS */ #footer-block *, #footer-block a{ color: ; font-family: arial; } /* LINK COLOR ON HOVER Make sure your color is followed by a space and !important */ a:hover, .list-table .list-table-data .data a:hover{ color: cyan !important; } /* OTHER CODES*/ body{ background-size: cover !important; background-attachment: fixed !important; } .cover-block { padding-left: 17px; padding-right: 17px; } .list-table > tbody:nth-of-type(2n+1), .list-table, .list-container, .list-table .list-table-header .header-title { background-color: transparent !important; border: 0 transparent solid !important; } .list-table .list-table-data .data{ border: 0 transparent solid !important; } /*------------------------------------*/ /* COVER SIZE */ .data.image a:after{ width: 225px; height: 325px; } /* COVER POSITION */ .data.image a:after{ position: fixed; top: 35%; left: calc(50% - 750px); } /* OTHER CODES */ .data.image a:after {content: ""; display: block !important; background-color: rgba(0,0,0,.3); background-position: center !important; background-repeat: no-repeat !important; background-size: cover; border: 1px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0, 0.7); visibility: hidden; opacity: 0; transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 5;} .list-table .list-table-data:hover .data.image a:after { visibility: visible; opacity: 1; transition: .3s ease-out;} /* CUSTOM COVER AND HOVER */ .data.image a[href*="/52034"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(https://i.imgur.com/utuG0AU.png); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/52034"]:after { background-image:url(https://i.imgur.com/utuG0AU.png); } |
Shishio-kunFeb 10, 1:13 PM
Feb 11, 2:24 AM
#26
Reply to Shishio-kun
@Myslivir I dont see Oshi no ko at the top of any of your categories
So I need you to tell me what category its on so I can test the codes compared to other anime on the list- so please tell me what category it is on but only if you customized its cover already.
OK I found it at the bottom of completed. I had the wrong idea with the codes, you'll have to use this for custom covers and hover on that layout
So your CSS would look like this, the codes are at the bottom and I took out the closed comments part since that always causes errors, it even has with our best ppl who made many layouts and I dont want it interfering with the codes at the bottom (I highly recommend to take them out and put them on a notepad instead).
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
/*FOR DARK LAYOUTS*/
/*CHANGING THE LIST COLORS */
/* BACKGROUND COLOR OF CATEGORY LINKS
Find codes below with "rgba" followed by numbers in parenthesis.
The first number in the parenthesis is the amount of red (0-255).
The second number in the parenthesis is the amount of green (0-255).
The third number in the parenthesis is the amount of blue (0-255).
The fourth number in the parenthesis is the amount of opacity (.0 to 1).
Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency.
Generate RGBA color codes you can use here
http://www.hexcolortool.com/
You can also use color names and color numbers for the background color too.
*/
.status-menu-container{
background-color: rgba(0,0,0,.8) !important;
}
/* CATEGORY HEADER BACKGROUND COLOR */
.list-unit .list-status-title {
background-color: ;
}
/* BACKGROUND AND BORDER COLOR OF LIST
*/
.list-block, .cover-block{
background-color: rgba(0,0,0,.7) !important;
}
/*BACKGROUND COLOR OF ROWS ON HOVER
*/
tbody[class*="list-item"]:hover,
.list-table tbody:nth-of-type(2n+1):hover {
background-color:black !important;}
/*BACKGROUND COLOR OF SIDE MENU */
.list-menu-float .icon-menu {
background: ;
}
/*BACKGROUND COLOR OF SIDE MENU WHEN OPENED*/
.list-menu-float .icon-menu:not(.profile):hover,
.list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
background:;
}
/*BORDER COLOR OF SIDE MENU */
.list-menu-float{
border: #EBEBEB 1px solid;
}
/*FOOTER COLOR */
#footer-block {
background-color: #244291;
}
/*FONT COLORS
Change the colors to what you want.
Put the color you want for fonts after
color:
for each code below.*/
/* HEADER TEXT COLORS*/
.header .header-menu *,#header-menu-button,.header .header-menu a{
color: ;
}
/* CATEGORY BUTTON LINK COLORS*/
.status-menu-container .status-menu .status-button,
.status-menu-container .status-menu .status-button.on{
color: ;
}
/* STATS FILTER COLORS*/
.list-unit .list-status-title .stats *,
.list-unit .list-status-title .stats a{
color: ;
}
/* ANIME STAT COLORS*/
.list-unit .list-stats{
color: ;
font-family: arial;
}
/* CATEGORY HEADER FONT */
.list-unit .list-status-title .text {
color: ;
font-family: arial;
}
/* COLLUMN HEADER COLORS */
.list-table .list-table-header .header-title,
.list-table .list-table-header .header-title .link.sort,
.list-table .list-table-header .header-title.image a{
color: ;
font-family: ;
}
/* LIST LINK FONT */
.list-table .list-table-data .data a{
color: ;
font-family: arial;
}
/* LIST NON-LINK FONT */
.list-table .list-table-data .data{
color: ;
font-family: arial;
}
/* TAGS EDIT FONT */
.list-table .list-table-data .tags .edit{
color: ;
font-family: arial;
}
/* SIDE MENU ICONS */
.list-menu-float .icon-menu svg.icon{
fill: ;
}
/* SIDE MENU ICONS AND TEXT WHEN OPENED*/
.list-menu-float .icon-menu svg.icon:hover{
fill: white !Important;
}
/* FOOTER FONT COLORS */
#footer-block *,
#footer-block a{
color: ;
font-family: arial;
}
/* LINK COLOR ON HOVER
Make sure your color is followed by a space and !important
*/
a:hover,
.list-table .list-table-data .data a:hover{
color: cyan !important;
}
/* OTHER CODES*/
body{
background-size: cover !important;
background-attachment: fixed !important;
}
.cover-block {
padding-left: 17px;
padding-right: 17px;
}
.list-table > tbody:nth-of-type(2n+1),
.list-table, .list-container,
.list-table .list-table-header .header-title {
background-color: transparent !important;
border: 0 transparent solid !important;
}
.list-table .list-table-data .data{
border: 0 transparent solid !important;
}
/*------------------------------------*/
/* COVER SIZE */
.data.image a:after{
width: 225px;
height: 325px;
}
/* COVER POSITION */
.data.image a:after{
position: fixed;
top: 35%;
left: calc(50% - 750px);
}
/* OTHER CODES */
.data.image a:after
{content: "";
display: block !important;
background-color: rgba(0,0,0,.3);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover;
border: 1px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
visibility: hidden;
opacity: 0;
transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
z-index: 5;}
.list-table .list-table-data:hover .data.image a:after {
visibility: visible;
opacity: 1;
transition: .3s ease-out;}
/* CUSTOM COVER AND HOVER */
.data.image a[href*="/52034"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(https://i.imgur.com/utuG0AU.png);
background-size: cover;
background-position: center top;
}
.list-table .list-table-data:hover .data.image a[href*="/52034"]:after
{
background-image:url(https://i.imgur.com/utuG0AU.png);
}
So I need you to tell me what category its on so I can test the codes compared to other anime on the list- so please tell me what category it is on but only if you customized its cover already.
OK I found it at the bottom of completed. I had the wrong idea with the codes, you'll have to use this for custom covers and hover on that layout
/* CUSTOM COVER AND HOVER */ .data.image a[href*="/52034"]:before{ content: ""; position:absolute; display: block; height: 70px; width: 50px; background-image:url(https://i.imgur.com/utuG0AU.png); background-size: cover; background-position: center top; } .list-table .list-table-data:hover .data.image a[href*="/52034"]:after { background-image:url(https://i.imgur.com/utuG0AU.png); }
So your CSS would look like this, the codes are at the bottom and I took out the closed comments part since that always causes errors, it even has with our best ppl who made many layouts and I dont want it interfering with the codes at the bottom (I highly recommend to take them out and put them on a notepad instead).
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
/*FOR DARK LAYOUTS*/
/*CHANGING THE LIST COLORS */
/* BACKGROUND COLOR OF CATEGORY LINKS
Find codes below with "rgba" followed by numbers in parenthesis.
The first number in the parenthesis is the amount of red (0-255).
The second number in the parenthesis is the amount of green (0-255).
The third number in the parenthesis is the amount of blue (0-255).
The fourth number in the parenthesis is the amount of opacity (.0 to 1).
Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency.
Generate RGBA color codes you can use here
http://www.hexcolortool.com/
You can also use color names and color numbers for the background color too.
*/
.status-menu-container{
background-color: rgba(0,0,0,.8) !important;
}
/* CATEGORY HEADER BACKGROUND COLOR */
.list-unit .list-status-title {
background-color: ;
}
/* BACKGROUND AND BORDER COLOR OF LIST
*/
.list-block, .cover-block{
background-color: rgba(0,0,0,.7) !important;
}
/*BACKGROUND COLOR OF ROWS ON HOVER
*/
tbody[class*="list-item"]:hover,
.list-table tbody:nth-of-type(2n+1):hover {
background-color:black !important;}
/*BACKGROUND COLOR OF SIDE MENU */
.list-menu-float .icon-menu {
background: ;
}
/*BACKGROUND COLOR OF SIDE MENU WHEN OPENED*/
.list-menu-float .icon-menu:not(.profile):hover,
.list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
background:;
}
/*BORDER COLOR OF SIDE MENU */
.list-menu-float{
border: #EBEBEB 1px solid;
}
/*FOOTER COLOR */
#footer-block {
background-color: #244291;
}
/*FONT COLORS
Change the colors to what you want.
Put the color you want for fonts after
color:
for each code below.*/
/* HEADER TEXT COLORS*/
.header .header-menu *,#header-menu-button,.header .header-menu a{
color: ;
}
/* CATEGORY BUTTON LINK COLORS*/
.status-menu-container .status-menu .status-button,
.status-menu-container .status-menu .status-button.on{
color: ;
}
/* STATS FILTER COLORS*/
.list-unit .list-status-title .stats *,
.list-unit .list-status-title .stats a{
color: ;
}
/* ANIME STAT COLORS*/
.list-unit .list-stats{
color: ;
font-family: arial;
}
/* CATEGORY HEADER FONT */
.list-unit .list-status-title .text {
color: ;
font-family: arial;
}
/* COLLUMN HEADER COLORS */
.list-table .list-table-header .header-title,
.list-table .list-table-header .header-title .link.sort,
.list-table .list-table-header .header-title.image a{
color: ;
font-family: ;
}
/* LIST LINK FONT */
.list-table .list-table-data .data a{
color: ;
font-family: arial;
}
/* LIST NON-LINK FONT */
.list-table .list-table-data .data{
color: ;
font-family: arial;
}
/* TAGS EDIT FONT */
.list-table .list-table-data .tags .edit{
color: ;
font-family: arial;
}
/* SIDE MENU ICONS */
.list-menu-float .icon-menu svg.icon{
fill: ;
}
/* SIDE MENU ICONS AND TEXT WHEN OPENED*/
.list-menu-float .icon-menu svg.icon:hover{
fill: white !Important;
}
/* FOOTER FONT COLORS */
#footer-block *,
#footer-block a{
color: ;
font-family: arial;
}
/* LINK COLOR ON HOVER
Make sure your color is followed by a space and !important
*/
a:hover,
.list-table .list-table-data .data a:hover{
color: cyan !important;
}
/* OTHER CODES*/
body{
background-size: cover !important;
background-attachment: fixed !important;
}
.cover-block {
padding-left: 17px;
padding-right: 17px;
}
.list-table > tbody:nth-of-type(2n+1),
.list-table, .list-container,
.list-table .list-table-header .header-title {
background-color: transparent !important;
border: 0 transparent solid !important;
}
.list-table .list-table-data .data{
border: 0 transparent solid !important;
}
/*------------------------------------*/
/* COVER SIZE */
.data.image a:after{
width: 225px;
height: 325px;
}
/* COVER POSITION */
.data.image a:after{
position: fixed;
top: 35%;
left: calc(50% - 750px);
}
/* OTHER CODES */
.data.image a:after
{content: "";
display: block !important;
background-color: rgba(0,0,0,.3);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover;
border: 1px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
visibility: hidden;
opacity: 0;
transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
z-index: 5;}
.list-table .list-table-data:hover .data.image a:after {
visibility: visible;
opacity: 1;
transition: .3s ease-out;}
/* CUSTOM COVER AND HOVER */
.data.image a[href*="/52034"]:before{
content: "";
position:absolute;
display: block;
height: 70px;
width: 50px;
background-image:url(https://i.imgur.com/utuG0AU.png);
background-size: cover;
background-position: center top;
}
.list-table .list-table-data:hover .data.image a[href*="/52034"]:after
{
background-image:url(https://i.imgur.com/utuG0AU.png);
}
@Shishio-kun Thank you so much man, it works like I had hoped it would. Maybe you guessed it, but I actually wanted the code for disguising certain "cultural" animes in my list and you were big help, so thanks again |
More topics from this board
Sticky: » ๐ [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
17 |
by Shishio-kun
»»
Today, 9:28 AM |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Sep 23, 12:11 AM |
|
» โ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7863 |
by ShaggyZE
»»
Sep 22, 9:40 AM |
|
» [CSS - Modern] ๐ฐ Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] โญ๏ธSpace Layout by nblur/U531355 โจRESTORED AND UPSCALEDโจShishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |