Valerio_Lyndon said: Uji_Gintoki_Bowl said: How do I make it so that instead of long titles getting a "...", it breaks a line and takes up 2 lines? https://i.imgur.com/mvATtFK.png It's possible to enable the title overflow, but there have to be some changes made to the "type" positioning. This is because it's not possible for it to vertically reposition depending on the title height. So, here's a couple of options. If any of them seem alright, then pick one and add it to the bottom of your CSS. Alright, bet just did it. Thank you again! |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
| Is it possible to add text to the background on both the left and right columns? I personally want to add text regarding the details of the rating system I'm using. Also, how about shifting the character image to the right by a bit or changing the font/colour of the name that pops up? Thanks. |
YoshePlaysOct 19, 2020 10:35 AM
| Cosplayer, Photographer, & Journalist. ========= Discord► Yoshe#7068 Instagram► yoshe_plays Other Social Media Links► YoshePlays  |
YoshePlays said: Is it possible to add text to the background on both the left and right columns? I want to add text regarding the details of the rating system I'm using. You can add text via CSS, but it can be a little limiting. If you want a bit more styling control, you can create an image and add that image via CSS instead. Here's both methods so you can pick and choose. All new code should be placed at the bottom of your CSS. YoshePlays said: Also, how about shifting the character image to the right by a bit? You can use either a percentage amount or a "px" amount to change the positioning. /* Banner Character Position */
#list-container #cover-image-container {
width: 100%;
min-width: 1060px;
/* Change position here \/ */
background-position: 66% center;
}px numbers will often appear very different depending on the browser window size, so I recommend using percentage where possible. Or, you can also get fancy and use a calc (calculate) function to mix percentage and px values, which will make it easier to keep things looking the same across more visitors' screens while maintaining a bit more control. For example: background-position: calc(50% - 300px) center; YoshePlays said: changing the font/colour of the name that pops up? Add to the bottom of your CSS. The colours are the hashtags proceeded with 6 characters. To change the colour, copy and paste any colour from a CSS colour picker. /* ===================
Banner Text Colours */
body {
--banner-text: #f6f5ff ;
--banner-text-shadow: #e4bef4 ;
} |
Valerio_LyndonOct 21, 2020 10:24 PM
| Thanks! Sorry for bothering you again, but 1. How do I make it such that it enlarges when your cursor hovers over it like this? 2. and for the hover image arrow, how do you leave a space between the arrow and the status bar? 3. is it possible to add an extra character image to the left? 4. Valerio_Lyndon said: px numbers will often appear very different depending on the browser window size, so I recommend using percentage where possible. Or, you can also get fancy and use a calc (calculate) function to mix percentage and px values, which will make it easier to keep things looking the same across more visitors' screens while maintaining a bit more control. Exactly because of this, how do I ensure that the name/text on the cover image does not obscure the background image? 5. is it possible to list the total rewatch amount in the row as well, like this? 6. Thanks for dedicating your time to the community! c: |
YoshePlaysOct 22, 2020 3:47 AM
| Cosplayer, Photographer, & Journalist. ========= Discord► Yoshe#7068 Instagram► yoshe_plays Other Social Media Links► YoshePlays |
YoshePlays said: 1. How do I make it such that it enlarges when your cursor hovers over it like this? /* =======================
List Rows Hover Enlarge */
.list-item:hover {
z-index: 1;
transform: scale(1.025);
}YoshePlays said: 2. and for the hover image arrow, how do you leave a space between the arrow and the status bar? This will work. If you want a bit more space then you can adjust the two numbers up and down by the same amount. In other words, if you raise one by 3px, add 3px to the other number too. /* ==============================
Hover Image Reposition & Arrow */
/* change both of these numbers by the same amount to keep the image and arrow in sync with each other */
.data.image::before { left: -16px; }
.data.image a::before { left: -172px; }YoshePlays said: 3. is it possible to add an extra character image to the left? 4. Valerio_Lyndon said: px numbers will often appear very different depending on the browser window size, so I recommend using percentage where possible. Or, you can also get fancy and use a calc (calculate) function to mix percentage and px values, which will make it easier to keep things looking the same across more visitors' screens while maintaining a bit more control. Exactly because of this, how do I ensure that the name/text on the cover image does not obscure the background image? Since we already added some code about the character position and banner text, we'll overwrite that. You can find it at approximately line 343. You can delete what is shown here and replace it with the new code.  For 3, here's some CSS that can display multiple images. It will overwrite the default character image. For each image you can add a new url() to the background-image and a new X/Y pair to the background-position. Just make sure there is a comma between each one. In the code below I have 3 potential images, but that can be changed at any point by adding or removing one of the lines. Just make sure you have a comma after every line that isn't the last one (same as regular comma-separated lists, you don't end with a trailing comma). /* New Banner Characters & Positions */
#list-container #cover-image-container {
width: 100%;
min-width: 1060px;
/* Change images here */
background-image:
url(https://i.imgur.com/gmFUuZu.png),
url(image2),
url(image3)
;
/*
Change position here - each line correlates to the Nth image we've added above (2nd line positions the 2nd image)
Each position is a pair of X and Y positions (horizontal & vertical, in that order). For e.x: left center, 450px bottom
*/
background-position:
calc(50% + 300px) bottom,
calc(50% - 300px) bottom,
50% bottom
;
}And for the banner text, here's the new code. It's pretty much the same, but with added "left", and "top" properties for you to change. /* Banner text properties */
#cover-image-container::after {
/* positioning */
top: 55px;
left: calc(50% - 475px);
/* colouring */
color: #f6f5ff ;
text-shadow: 1px 4px 7px #436baf ;
/* don't change this */
margin-left: 0;
}Not that I know of. It would require a JavaScript tool, but I don't think anyone has made one with that function yet. The closest thing I know of is this: https://myanimelist.net/forum/?topicid=1855693 But I haven't tested it myself. |
| Hi V.L., I have been using your layout for sometime and even added some mods from the thread. There is just one thing, if you could check out my LIST HERE I want to be able to click on the tags that slide out from under the preview image. As of now its just a hover mechanic, as soon as I move my cursor to the preview image, it goes away. |
 I was rushing desperately, trying to reach the light. When I thought I did, I reached a dead end instead. Then I decided I wanted to enter that light. And at the edge of it, I found you. |
ColonelGarbage said: Really like the theme, but what if I don't want Yui(?) on my banner? How do I change it? Furthermore, do you have a version of the cityscape image from dark mode without her in it? This process is described in the main forum post under "Changing theme images." Specifically, you can add this to the bottom of your CSS: body { --character: none; } |
KrisMak1207 said: Hi V.L., I have been using your layout for sometime and even added some mods from the thread. There is just one thing, if you could check out my LIST HERE I want to be able to click on the tags that slide out from under the preview image. As of now its just a hover mechanic, as soon as I move my cursor to the preview image, it goes away. Give this a whirl, should do what you want. Add to the bottom of your CSS. /*-S-T-A-R-T--------------------*\
| Interactable Tags |
\*------------------------------*/
.list-item:hover::after {
content: "";
position: fixed;
right: calc(50% + 530px);
top: 0;
width: 158px;
height: 100%;
}
.data.tags {
z-index: 1;
}
.list-item:hover .data.tags div {
pointer-events: auto;
}
/*------------------------E-N-D-*/ |
Valerio_Lyndon said: KrisMak1207 said: Hi V.L., I have been using your layout for sometime and even added some mods from the thread. There is just one thing, if you could check out my LIST HERE I want to be able to click on the tags that slide out from under the preview image. As of now its just a hover mechanic, as soon as I move my cursor to the preview image, it goes away. Give this a whirl, should do what you want. Add to the bottom of your CSS. /*-S-T-A-R-T--------------------*\
| Interactable Tags |
\*------------------------------*/
.list-item:hover::after {
content: "";
position: fixed;
right: calc(50% + 530px);
top: 0;
width: 158px;
height: 100%;
}
.data.tags {
z-index: 1;
}
.list-item:hover .data.tags div {
pointer-events: auto;
}
/*------------------------E-N-D-*/Thanks a lot, it works! |
I was rushing desperately, trying to reach the light. When I thought I did, I reached a dead end instead. Then I decided I wanted to enter that light. And at the edge of it, I found you. |
| Hello again! 1. I'm currently dedicating a column to MAL score and Synposis, but it appears that titles which are too long go under the buttons instead of cutting off. Is there a way to limit the width of the .data.title? 2a. I currently have added a red dot to display that the show is airing, which was done through disabling the .content-status #text, and placing the dot in .content-status:before and "[ Airing ]" in content-status:after I was planning to do the same thing for the [ Re-watching ] part, but adding a blue dot instead. However, the synopsis button happens to use .rewatch:before and .rewatch:after, which removed the original brackets for the theme, and prevented me from using the same method. Is there a way to directly edit the .rewatch #text, or use another way around this? and is it possible to reinsert the brackets? 2b. Is it possible to reposition the red dot (only) after the title? 3. I wanted to try out the decimal rating css, it works, but it appears that the original score still appears. I tried messing around with the z-index, but it doesn't seem to have worked. |
YoshePlaysOct 27, 2020 3:58 AM
| Cosplayer, Photographer, & Journalist. ========= Discord► Yoshe#7068 Instagram► yoshe_plays Other Social Media Links► YoshePlays |
ColonelGarbage said: Hope I'm not being a bother, but I have more than a few more questions. However, I'll start by saying I realize you have other things to do and answering questions that, let's be honest, you've probably answered at least once before, can't be that fun, so don't worry about getting back to me quickly. I understand it's a pain. Anyway, regarding the image hover, all I get is a grey rectangle. Could you point to what's missing in my CSS? Also, KrisMak, the one you replied to earlier, has genre tags on hover as well. How'd he do that? I saw you told him how to make them clickable but I'm don't know how he got them there in the first place and when I tried to use that snippet of code you gave him it didn't really do anything. Besides that. I have a gap between premier dates and studio names which makes it look less clean that he doesn't. Any idea what's causing it? Some also have the overall MAL rating of a show (1-10, not the age rating, sorry if I was unclear), and the synopsis incorporated into their list. How would I replicate that? And what about a button that switches between anime and manga lists? Once again, sorry for the trouble. Hey man, I'm actually using this tool called MAL Tags Updater, allows you to add tags of any type to your entries. Also, try the code below after setting up the tags, all @import related stuff go at the very top of your code |
I was rushing desperately, trying to reach the light. When I thought I did, I reached a dead end instead. Then I decided I wanted to enter that light. And at the edge of it, I found you. |
| Hey V.L., when sorting through my list using tags, is it possible to get headers for the respective tags? Sort of similar to your code for the category headers.. |
I was rushing desperately, trying to reach the light. When I thought I did, I reached a dead end instead. Then I decided I wanted to enter that light. And at the edge of it, I found you. |
KrisMak1207 said: Hey V.L., when sorting through my list using tags, is it possible to get headers for the respective tags? Sort of similar to your code for the category headers.. There's no way to do that at the moment, no. A janky version could be possible with some custom JavaScript and some dedication, but no one has made that as of yet. Thanks for replying to Colonel! |
Valerio_LyndonOct 28, 2020 11:20 PM
ColonelGarbage said: regarding the image hover, all I get is a grey rectangle. Could you point to what's missing in my CSS? At the moment I see you don't have it installed, but when you do it should generally work as long as you have the two lines pasted near the top, as directed in the installation. If it doesn't work though, it's probably due to your browser (Safari & Brave are known for this) or a privacy extension (adblocker/content blocker) that has restrictions. For a fix, find this line from the default installation: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; Delete it, and instead try this: @\import "https://malscraper.azurewebsites.net/covers/anime/ColonelGarbage/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/ColonelGarbage/presets/dataimagelinkbefore"; And if that doesn't work, delete the two you just inserted and try this (note that these will increase page loading times). @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; ColonelGarbage said: KrisMak, the one you replied to earlier, has genre tags on hover as well. How'd he do that? The genres were added via the tool Kris linked above. If it's not working, you could try using a different extension to install it such as Tampermonkey, Violentmonkey, or Greasemonkey. There also exists a bookmarklet tool that has similar functionality, but I'd have to make a couple of repairs if you're interested as it's semi-broken right now. It would require manually updating it every once in a while too. That's about all I know of for automatic tagging options. As for the visual placement below the cover image, it's some code I wrote on request ages ago, further back in this thread. See here: ColonelGarbage said: I have a gap between premier dates and studio names which makes it look less clean that he doesn't. Any idea what's causing it? If an item has tags, that's where they go. It's empty right now since you haven't given any entries tags. But if you used the code from the previous reply, then the gap should be gone as the tags will have been repositioned. If you didn't use the code from the last reply, then you can always remove or fill in the gap by disabling the Tags column in your list settings or giving some items tags. ColonelGarbage said: Some also have the overall MAL rating of a show (1-10, not the age rating, sorry if I was unclear), and the synopsis incorporated into their list. How would I replicate that? I described the process with Gintoki Bowl in the Help Thread. Here's some links: - Adding the MAL score. - Followup about adding the synpopsis. If you do use any of this code, it may not work perfectly on your list, I haven't tested yet. But we can fix any issues you have if/when that is an issue. ColonelGarbage said: And what about a button that switches between anime and manga lists? There's these two links here. Did you have something else in mind?  |
@Gomiruri Yes, that code would have some issues since it was tailored for Goko's modified list. This redone version of the code should work with just about any mod as of writing this post (hopefully). I tried to cover all the bases, but I may have missed some issues.Valerio_LyndonOct 29, 2020 12:11 AM
YoshePlays said: 1. I'm currently dedicating a column to MAL score and Synposis, but it appears that titles which are too long go under the buttons instead of cutting off. Is there a way to limit the width of the .data.title? Yep. Add this and adjust the "100px" if needed. /* Title Max Width */
.data.title .link.sort {
max-width: calc(100% - 100px);
}YoshePlays said: 2a. I currently have added a red dot to display that the show is airing, which was done through disabling the .content-status #text, and placing the dot in .content-status:before and "[ Airing ]" in content-status:after I was planning to do the same thing for the [ Re-watching ] part, but adding a blue dot instead. However, the synopsis button happens to use .rewatch:before and .rewatch:after, which removed the original brackets for the theme, and prevented me from using the same method. Is there a way to directly edit the .rewatch #text, or use another way around this? Not that you mention it, I think it is possible to use a different selector. This kind of solution is working within so many constraints, I figured I had the best selector on the rewatch. But if you enable the "Storage" list column in your settings, then we can use that as a burner column for the synopsis. You won't be able to see the storage column, the code will hide it. New synopsis code: You'll also have to change the preset you're using on the generator tool to this: /* [TITLE] *[DEL]/ .progress-[ID]:after {content: "MAL - [SCORE]";} #tags-[ID] ~ .storage:after {content: "SYNOPSIS\a\a[DESC]";}If you wish, you can change the CSS you've already generated with some find and replace tools found online or in any advanced text editor. The dot & the "Airing" text could be moved to the end of the title together, but not separately. YoshePlays said: 3. I wanted to try out the decimal rating css, it works, but it appears that the original score still appears. I tried messing around with the z-index, but it doesn't seem to have worked. Just needs a "background" property so that it covers what's behind it. Probably needs a bit of repositioning too. |
| Thanks a lot! That sums up all the problems I have so far (hopefully). EDIT: I lied, I found a problem :c. P.S. Problem 2: I'm pretty sure this is just a browser/device problem, but for some reason when the hover/enlarge animation is activated, the whole row, including cover and text get blurred more progressively the more you scroll down the page. Is there a way to resolve this? I had this problem on my PC with opera, but this doesn't seem to be a thing on my mac which is using chrome. Anyways, another thing I wanted to point out about this template used here is that the first character of the [DESC] will be superscripted / appear as a special character without spacing between the "\a" if the first characters of the synopsis are "a-e". For future reference, if anyone were to use the code or ask about the synopsis function, it should be changed to {content: "SYNOPSIS\a \a [DESC]";} |
YoshePlaysOct 29, 2020 4:03 AM
| Cosplayer, Photographer, & Journalist. ========= Discord► Yoshe#7068 Instagram► yoshe_plays Other Social Media Links► YoshePlays |
YoshePlays said: Thanks a lot! That sums up all the problems I have so far (hopefully). EDIT: I lied, I found a problem :c. Ah, the comma can be removed with this: /* Decimal rating comma fix */
.data.tags a[href$=".5"]::before {
content: none;
}YoshePlays said: P.S. Problem 2: I'm pretty sure this is just a browser/device problem, but for some reason when the hover/enlarge animation is activated, the whole row, including cover and text get blurred more progressively the more you scroll down the page. Is there a way to resolve this? I had this problem on my PC with opera, but this doesn't seem to be a thing on my mac which is using chrome. Hm, I don't see this happening on my versions of Firefox or Chrome. Might just be an Opera bug. Transforms can be weird sometimes, I guess that browser may have some badly implemented optimizations or something. YoshePlays said: For future reference, if anyone were to use the code or ask about the synopsis function, it should be changed to {content: "SYNOPSIS\a \a [DESC]";}Thanks for pointing this out! |
| Hey V.L. could I get this REPOSITIONED TAGS code for image hover preview instead of row hover preview?? Also, would the INTERACTABLE TAGS code work with the changed code?? As of now, when using the image hover preview mod, the tags appear on row hover and then the cover image appears on hovering over the image |
KrisMak1207Oct 30, 2020 8:47 AM
I was rushing desperately, trying to reach the light. When I thought I did, I reached a dead end instead. Then I decided I wanted to enter that light. And at the edge of it, I found you. |
KrisMak1207 said: Hey V.L. could I get this REPOSITIONED TAGS code for image hover preview instead of row hover preview?? Also, would the INTERACTABLE TAGS code work with the changed code?? As of now, when using the image hover preview mod, the tags appear on row hover and then the cover image appears on hovering over the image The repositioned tags code can be made to activate on image hover, but it's a little janky. Primarily, the large image will collapse as soon as you mouse over the tags, leaving only the tags floating. You can give it a go if you wish, here's the CSS: |
| Hi, I'm not very good with coding (the only experience I have is VBA in excel, so CSS scrambles my brain most of the time. I have no experience creating code but I can do very basic things like moving an image left or right, or changing a text font color. For the most part, I try to keep things clean and simple, but do enjoy to have some characterization to my list. I tried reading other people's questions to see if I could find an answer and either it wasn't asked or I missed it. This has two parts: 1. I was wondering if I could have some help with adding a third character on the list. This one would be attached to the footer and would move with it as I scrolled. 2. How do I increase the space between the last item on the list and the top of the footer. (this is just to make room for the character.) I don't need a response right away. I'm perfectly happy with how my list is right now. I just like to fiddle around with it and try to improve it here and there. -P.S. I really love the clarity layout. I'm suprised more people don't use it. Half the time I look at other people's lists they are either the generic, original format or extremely customized (sometimes taking a few seconds longer than I would like to load). --UPDATE-- I figured out how to tweek the spacing between the bottom of the list and the footer. I'm still struggling with adding a third character that would be stuck to the footer. --UPDATE AGAIN-- I figured out how to add an image attached to the footer. It isn't elegant but I made it work. I saw a part of the code that said: #footer-block:before{content:"" I changed it to: #footer-block:before{content:url(https://imgur.com/hnIOGtP.png) then all I had to do was remove a shadow and move the photo up a bit. |
Paper2017Nov 17, 2020 12:22 PM
 It appears that the hover animation causes the heart tag display to overlap the side texts. Any fix would be appreciated, thanks again! |
| Cosplayer, Photographer, & Journalist. ========= Discord► Yoshe#7068 Instagram► yoshe_plays Other Social Media Links► YoshePlays |
YoshePlays said: It appears that the hover animation causes the heart tag display to overlap the side texts. Any fix would be appreciated, thanks again! Add to the bottom .list-block .list-unit::before,
.list-block .list-unit::after {
z-index: 5;
} |
| Hi, i am trying to make a ice image stay on top of the status menu and follow it when i scroll down like this: But this is the closest i have got to it so far: Edit: I managed to make it work, for anyone interested i had to put this after the already existing ".status-menu-container:after" if i put before it won't work
.status-menu-container:after{
top:-25px;
height: 64px;
background: url(https://i.imgur.com/rcDaW21.png);
background-size: cover;
}
|
RafaelehDec 9, 2020 4:07 AM
| Hey, need a bit of help. How can I change the rows with an image, preferably individually changing the list rows if possible, and I want to also be able to change the transparency too. Thanks in advance! |
GilgameshuuDec 17, 2020 4:33 AM
* |
| Hi there! Added larger covers for my list which overwrote my change in the border radius of the cover but then I used the manual install and changed both "border-radius" commands in your compressed code to my values and it seems to work (dont know if it was the best way to do it though). Anyway most importantly I finally could change tags to be in one paragraph thanks to you but I've still got a few questions: as you can see here: https://i.imgur.com/HANLawS.png the commas in tags are white despite the rest of the text being black. Is there a way to change that? Also, is there a way to make tags while editing them more readable in dark mode? As you can see here: https://i.imgur.com/HWUg3c5.png its quite difficult to read while editing. Im fine with darkening the background of the tags bubble but I dont know the exact value I need to change for changing the tags color. My code is: I think its quite messy but atleast my changes work so far. The only thing left right now would be to make the tags more readable while editing them (which may work by changin the background for tags but Im not sure how) I hope Im not a bother. Edit: I was able to change the color of it ( changed "btn-bg" to #90b3bb). If theres a better way to fix it please let me know! Oh and it isnt really necessary but is it possible to change how much the tags box expands once you click on edit? |
alex-vrtrxDec 17, 2020 1:55 PM
  |
How can I display the headings exactly how the profile name is done without it repeating on all pages.#cover-image-container:after {
content: "Currently Watching";}If I was unclear Im talking about this⬆⬆☝ but for each status |
      |
Gilgameshuu said: Individually as in specific anime/manga? That can be a little tricky, but give this a go (add it to the bottom of your CSS). Should do what you want, and hopefully doesn't have (m)any issues.Hey, need a bit of help. How can I change the rows with an image, preferably individually changing the list rows if possible, and I want to also be able to change the transparency too. Thanks in advance! To add a new image background for a specific anime or manga, copy-paste this template .title a[href^="/animeORmanga/ID"]::before {
background: linear-gradient(var(--row-tint),var(--row-tint)), url(IMAGE) no-repeat center / cover scroll;
}Then, fill out the "/animeORmanga/ID" with the relevant info. The anime or manga is simply which type it is between the two. The ID is the anime or manga ID, found when mousing over the link in your list or in the URL bar when visiting the anime/manga page:  Then, fill out the "IMAGE" with a URL to whatever image you wish to use. Here's an example row with everything filled out .title a[href^="/anime/36022"]::before { background: linear-gradient(var(--row-tint),var(--row-tint)), url(https://i.imgur.com/Xh9tnsU.jpg) no-repeat center / cover scroll; } |
alex-vrtrx said: I finally could change tags to be in one paragraph thanks to you but I've still got a few questions: as you can see here: https://i.imgur.com/HANLawS.png the commas in tags are white despite the rest of the text being black. Is there a way to change that? With your current code, the easier way would be to add this to the bottom of your CSS: .list-table .list-table-data .data.tags span {
color: black !important;
}alex-vrtrx said: Also, is there a way to make tags while editing them more readable in dark mode? As you can see here: https://i.imgur.com/HWUg3c5.png its quite difficult to read while editing. … Oh and it isnt really necessary but is it possible to change how much the tags box expands once you click on edit? Use this. .data.tags textarea {
width: 524px !important;
color: black;
}The width won't change immediately, as I left it as it is now for your reference. To change the size, increase or decrease the "524px" (but keep the 'px' at the end of the number). |
Leospars said: How can I display the headings exactly how the profile name is done without it repeating on all pages. #cover-image-container:after {
content: "Currently Watching";}If I was unclear Im talking about this⬆⬆☝ but for each status Try adding this to the bottom of your CSS, should work. |
| @Valerio_Lyndon Thanks, it worked. Is it also possible to change the transparency of the image? Also another question, how can I make short reviews? It seems possible by just using tag desc, but it would take far too much time to make a different tag for every show in my list. Another question, can I use tagdesc on the favorite tag? I'm sorry for bombarding you with requests and questions. |
* |
The width won't change immediately, as I left it as it is now for your reference. To change the size, increase or decrease the "524px" (but keep the 'px' at the end of the number). Thanks for your help! Everything works now! |
|
Gilgameshuu said: Thanks, it worked. Is it also possible to change the transparency of the image? Ah yes, I forgot you asked about the transparency. To change transparency on any of the images, add an "opacity" property during the usage of the template. Set the property to a decimal value between 0 and 1. For instance, half transparency: .title a[href^="/anime/36022"]::before {
background: linear-gradient(var(--row-tint),var(--row-tint)), url(https://i.imgur.com/Xh9tnsU.jpg) no-repeat center / cover scroll;
opacity: 0.5;
}Gilgameshuu said: Also another question, how can I make short reviews? It seems possible by just using tag desc, but it would take far too much time to make a different tag for every show in my list. Will try and whip something up tomorrow. Where were you thinking of positioning these reviews if they're added? On the right of each row, or in a pop-out similar to tag descriptions? Gilgameshuu said: Another question, can I use tagdesc on the favorite tag? Do you want it to work with the Favourite Tag modification or just tags labelled favourite? To make it work with generic tags labelled favourite, you can replace your current version of the Tag Desc Basis with this new one: I haven't tested with the favourite tag modification, but I believe there would need to be some further changes made if that's what you're intending. |
Valerio_Lyndon said: Leospars said: How can I display the headings exactly how the profile name is done without it repeating on all pages. #cover-image-container:after {
content: "Currently Watching";}If I was unclear Im talking about this⬆⬆☝ but for each status Try adding this to the bottom of your CSS, should work. Valerio_Lyndon said: Leospars said: How can I display the headings exactly how the profile name is done without it repeating on all pages. #cover-image-container:after {
content: "Currently Watching";}If I was unclear Im talking about this⬆⬆☝ but for each status Try adding this to the bottom of your CSS, should work. Thanks it worked though I'm noticing a problem with the easing It moves slowly then rushes to a place in the header something similar is happening for the others as well.  |
LeosparsDec 19, 2020 2:20 AM
|
| @Valerio_Lyndon This is what I'm thinking off |
* |
| Also how can I get the list background to be set from the top of the image and it crops out the bottom only. In other words Instead of the image being center, centered,(I think) removing any extra top and bottom of the image outside the background/banner width, can I have it fixed to the top instead removing the bottom |
|
Leospars said: I'm noticing a problem with the easing It moves slowly then rushes to a place in the header something similar is happening for the others as well. https://i.imgur.com/nYyQahA.gif My mistake, this new version should fix that. Overwrite what you pasted in last time with the new version: Leospars said: Also how can I get the list background to be set from the top of the image and it crops out the bottom only. In other words Instead of the image being center, centered,(I think) removing any extra top and bottom of the image outside the background/banner width, can I have it fixed to the top instead removing the bottom Sure! I believe this is what you intended here, try it out. /* Reposition body background */
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
background-position: center top !important;
} |
Valerio_Lyndon said: Leospars said: I'm noticing a problem with the easing It moves slowly then rushes to a place in the header something similar is happening for the others as well. https://i.imgur.com/nYyQahA.gif My mistake, this new version should fix that. Overwrite what you pasted in last time with the new version: Leospars said: Also how can I get the list background to be set from the top of the image and it crops out the bottom only. In other words Instead of the image being center, centered,(I think) removing any extra top and bottom of the image outside the background/banner width, can I have it fixed to the top instead removing the bottom Sure! I believe this is what you intended here, try it out. /* Reposition body background */
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
background-position: center top !important;
}SO MANY THANKS Cropping the pictures took time and thanks for the transition fix too ><  |
LeosparsDec 19, 2020 9:06 PM
|
Gilgameshuu said: https://i.imgur.com/xe1FEcA.png Something like this. Instead of the heart icon with favorite, it'll be something like a review tag with a paper icon, and when I hover over it, it shows the text/review. Try this out, should hopefully do what you want. First, I'll need you to go into your list settings and enable the "Storage" column on your animelist and/or "Retail" on your mangalist. The new code we enter will remove this column visually, so it won't change how anything looks. It just gives the code something to hook onto and use for the new reviews. Next, add this to the bottom of your code Then, you'll need to add and modify a template code for each review, similar to the background images. You'll need to replace the "ID" and "REVIEW" texts with the relevant info (anime/manga ID, your review). Here's an example of the template after it's filled out: #tags-41930 ~ .storage::before {
display: block;
} #tags-41930 ~ .storage::after {
content: "An enjoyable anime! Really like that one part and also the other part. Definitely earns its 7.";
}While using the template, you should know:
Gilgameshuu said: I also want them to share the same tag but different descriptions Not quite sure I follow you here. You want a single tag to have two descriptions? This might be possible depending on what your goal here is, and there are also potentially some ways to fake having the same tag by making it appear to be the same tag. What is your intention behind this change? Are you wishing to have two anime both say, for example, "Adventure", but have different descriptions? Or have two of the same tag on the same anime? The CSS solution would really depend on how you are using the tags. Gilgameshuu said: if possible I would also like to add the descriptions directly in the edit tag section, Unfortunately not possible without using the tags themselves as mini reviews. To add full-size CSS reviews, it has to be modified in the CSS. |
Valerio_LyndonDec 19, 2020 9:59 PM
| @Valerio_Lyndon Thank you very much for your help! You can disregard what I said about same tags different descriptions thing. |
* |
| Hello! I was looking into older posts from this thread and tried using the decimal rating CSS. But I can't seem to not make a comma appear in my tags. Am I putting the comma in the wrong place? I tried doing "TEXT, X.5" and "X.5, TEXT", I know nothing of CSS, so I might've misunderstand the entire thing lol. Also, if it only has a comma and nothing else, the comma disappears like it should... This is how my CSS is looking like in case I messed up something. |
PunchStuff said: Hello! I was looking into older posts from this thread and tried using the decimal rating CSS. But I can't seem to not make a comma appear in my tags. Am I putting the comma in the wrong place? I tried doing "TEXT, X.5" and "X.5, TEXT", I know nothing of CSS, so I might've misunderstand the entire thing lol. Also, if it only has a comma and nothing else, the comma disappears like it should... This is how my CSS is looking like in case I messed up something. The original decimal rating code was probably made for someone using another modification that changed some of the functionality. To fix it, try adding this below your other code. /* Decimal Ratings Comma Fix 2 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span + span a::before {
content: ", ";
white-space: pre-wrap;
}Then, place all your decimal scores as the last tag in their tag section (after all other commas). |
Valerio_Lyndon said: PunchStuff said: Hello! I was looking into older posts from this thread and tried using the decimal rating CSS. But I can't seem to not make a comma appear in my tags. Am I putting the comma in the wrong place? I tried doing "TEXT, X.5" and "X.5, TEXT", I know nothing of CSS, so I might've misunderstand the entire thing lol. Also, if it only has a comma and nothing else, the comma disappears like it should... This is how my CSS is looking like in case I messed up something. The original decimal rating code was probably made for someone using another modification that changed some of the functionality. To fix it, try adding this below your other code. /* Decimal Ratings Comma Fix 2 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span + span a::before {
content: ", ";
white-space: pre-wrap;
}Then, place all your decimal scores as the last tag in their tag section (after all other commas). Now I get a comma before the score (just like the other guy post), my extended tags also stop working (from this topic last reply https://myanimelist.net/forum/?topicid=1862826 ) |
PunchStuff said: Valerio_Lyndon said: The original decimal rating code was probably made for someone using another modification that changed some of the functionality. To fix it, try adding this below your other code. /* Decimal Ratings Comma Fix 2 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span + span a::before {
content: ", ";
white-space: pre-wrap;
}Then, place all your decimal scores as the last tag in their tag section (after all other commas). Now I get a comma before the score (just like the other guy post), my extended tags also stop working (from this topic last reply https://myanimelist.net/forum/?topicid=1862826 ) Hm, I see. I didn't realize you were using code to extend tags. Also didn't account for the .8 etc codes that don't have their respective fixes applied from the original post. This new version should leave the reviews intact and apply the proper comma fix. Hopefully. /* Decimal Ratings Comma Fix 2 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span + span a::before {
content: ", ";
white-space: pre-wrap;
}
.data.tags span::after {
font-size: 11px;
}
.data.tags a[href$=".0"]::before,
.data.tags a[href$=".1"]::before,
.data.tags a[href$=".2"]::before,
.data.tags a[href$=".3"]::before,
.data.tags a[href$=".4"]::before,
.data.tags a[href$=".5"]::before,
.data.tags a[href$=".6"]::before,
.data.tags a[href$=".7"]::before,
.data.tags a[href$=".8"]::before,
.data.tags a[href$=".9"]::before {
content: none;
} |
| Now it's working perfectly, thanks! Your work is amazing 👍 ( Just had to change the $ to a *, not sure why, but as long as it works lol) |
| Hello, I have a problem with my list, large covers won't load when I switch from my manga list to my anime list or vice versa. If I enter from my profile they load both, but if I do it from the buttons on the list they only work in the first one that I have entered. I don't know if I have explained myself very well. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [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 |
|
» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!Shishio-kun - Feb 6, 2012 |
37 |
by sunnysummerday
»»
Jun 11, 7:44 PM |