Valerio_Lyndon said: if you add this code to the bottom of your CSS, it will hide the tag column on all entries except Plan to Watch items, as you requested.
/* Hide tags on all entries. Also hides genre column as a byproduct */
[width="125"] {
display: none;
}
/* Add tags back to planned entries
also adds back the genre column which was affected by the earlier selector */
[width="125"] ~ [width="125"], /*genre header & cells*/
.header_ptw [width="125"], /*tag header*/
.header_ptw ~ table [width="125"] /*tag cells*/
{
display: table-cell;
}
OMG thank u so much!!! only one quick thing, would you know a way to fix how the hover looks with this too? https://i.imgur.com/EqVyeQ1.png
Ah I didn't notice that. Looks like some other code is interfering with the "display" property, so this can be fixed by applying an "!important" statement. Here's what the code looks like with that added:
/* Hide tags on all entries. Also hides genre column as a byproduct */
[width="125"] {
display: none !important;
}
/* Add tags back to planned entries
also adds back the genre column which was affected by the earlier selector */
[width="125"] ~ [width="125"], /*genre header & cells*/
.header_ptw [width="125"], /*tag header*/
.header_ptw ~ table [width="125"] /*tag cells*/
{
display: table-cell !important;
}
I'm ''BlastBuddyJay'' for my anime list i keep having this random grey bar with the numbers (Watching/completed/...etc) right below it, barely readable
So I tried to remove the privacy widget because it suddenly popped up on my list again. I removed it a long time ago already but now it's there again. I put in the code that was available from the FAQ but the code will disappear again once I save and reload.
Could it be that there is only a maximum number of code space available? I customized a few cover images for some anime so maybe that's the reason why there is no space left?
If there is a solution (preferably one where I can keep the customized cover images) please let me know.
Hello guys, I'm posting here for help regarding a theme/style I believe I found posted or referred to on Reddit YEARS ago. Recently something broke, and the CSS referred me to this group. :)
List is myanimelist.net/animelist/Tvingman , and the full code would be this:
/* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */
/* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */
/* LIST WIDTH Use this to increase the width of your list! */
list_surround {
width:950px; }
/* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below.
You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */
body{ background-position: center 43%;}
/*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */
text-align: center; margin:0 auto; } /* Will round the headers */ .header_title{ border-radius: 25px 25px 0px 0px; }
list_surround {
position: absolute !important; right: 350px !important;} /* CURRENTLY WATCHING/READING LINK AREA */ .status_selected a, .status_not_selected a { display: none; } body { background-size: cover; }
As you see, the background for the shows themselves is now a solid blue, hiding the background image, whereas they used to be alternating lines of shades of gray with high degree of transparency.
I'm too clueless to figure out what to change/repair so I figured I'd post here for advice!
There was a theme I used a couplpe months back but I stopped using it because the info like score/progress etc. wasn't aligned correctly...
I wonder how to fix this
Positioning can generally be fixed with either "margin" rules or various other positioning rules (top, left, right, bottom). These would have to be applied to the correct section of the CSS. If you have a link to the theme or the theme CSS I could probably provide a fix here.
Tvingman said: Hello guys, I'm posting here for help regarding a theme/style I believe I found posted or referred to on Reddit YEARS ago. Recently something broke, and the CSS referred me to this group. :)
As you see, the background for the shows themselves is now a solid blue, hiding the background image, whereas they used to be alternating lines of shades of gray with high degree of transparency.
I'm too clueless to figure out what to change/repair so I figured I'd post here for advice!
I don't have much time so I'm kind of slap-dashing this post but it's been a few days so I just want to respond either way. If it's a matter of row backgrounds, that should be a relatively easy fix. The only trouble is getting it to match what you had before. I looked through the club (not extensively though) and didn't see the exact theme so I can't be sure of how it looked before, but you could get it close since you remember how it was.
Here's some CSS which you could add to the bottom of what you already have. Code for the backgrounds:
I don't have much time so I'm kind of slap-dashing this post but it's been a few days so I just want to respond either way. If it's a matter of row backgrounds, that should be a relatively easy fix. The only trouble is getting it to match what you had before. I looked through the club (not extensively though) and didn't see the exact theme so I can't be sure of how it looked before, but you could get it close since you remember how it was.
Here's some CSS which you could add to the bottom of what you already have. Code for the backgrounds:
For the colour, use a color picker:
And replace the "rgba()" sections with the new colour you've acquired from the color picker.
And just in case, here is what I am seeing on your list. Just to make sure we're talking about the same theme.
Now I'm not sure how to follow up, it must be something with my browser. What you posted is exactly how it used to be, and for a moment now that's how it appeared to me, too. Did it unscrew itself? No, I closed and re-opened the page 10 seconds later and now I get this:
In whatever case, I suppose it rules out the code, so I thank you for the reply.
Now I'm not sure how to follow up, it must be something with my browser. What you posted is exactly how it used to be, and for a moment now that's how it appeared to me, too. Did it unscrew itself? No, I closed and re-opened the page 10 seconds later and now I get this: https://i.imgur.com/HCV8Y21.png
In whatever case, I suppose it rules out the code, so I thank you for the reply.
Hmm, interesting. Perhaps it was caused by the ImageShack image I can't get to display. After messing with the code for a few minutes my table turned blue as well, but it was the first time it's done that!
You can try deleting it. Be sure to only delete the code I've displayed here and not any surrounding text, or else some other visuals might change. That should hopefully fix it for good. You can still use the table colour codes I posted if you want, but if this works then you shouldn't need them.
Valerio_Lyndon said: Hmm, interesting. Perhaps it was caused by the ImageShack image I can't get to display. After messing with the code for a few minutes my table turned blue as well, but it was the first time it's done that!
You can try deleting it. Be sure to only delete the code I've displayed here and not any surrounding text, or else some other visuals might change. That should hopefully fix it for good. You can still use the table colour codes I posted if you want, but if this works then you shouldn't need them.
That seems to have been it! Phew! Thank you a lot for taking your time and helping me with this issue. A lifesaver you are.
You know how on normal mal lists there is like a bar on the left of the list, next to the number and image for each anime going all the way down which shows different colours for if you're watching, completed, dropped etc... what code can get rid of this bar?
LewisOHH said: You know how on normal mal lists there is like a bar on the left of the list, next to the number and image for each anime going all the way down which shows different colours for if you're watching, completed, dropped etc... what code can get rid of this bar?
ive been trying to add a custom background to my anime list but whenever i add it it always ends up really zoomed in, how do i make it so its not zoomed in?
Anyone know a 100% certain way to convert SVG files to PSD? it HAS to include the layers after conversion, otherwise it's of no use. Online tips and converters don't seem to actually work for my situation. I have SVG files I'd like to make editable by everyone so they need to be converted to PSD
Also can anyone tell me how Adobe Illustrator compares to Photoshop? It says SVG can be edited in that.. maybe I can save the SVG in AI and convert to PSD there
Hi, I´m finishing my custom anime and manga list, but in the AnimeList I want to put in it a cursor and I haven´t the .cur file. It´s true that I have the .png file but I need the other too , because I´m trying to leave for me the cursor with .cur and for the rest of people who look at my list the cursor with .png. In fact, I have the .cur file because I converted the .png in .cur file but it isn´t sumbit to the internet. And I need to know a web file hosting that allows upload .cur files and copy its link. Could you tell me one site for this?
@ShaggyZE thank you so much!
I already did it and worked.
I´m going to end for custom my anime and manga list soon and I will send it to the forum for see it if anyone want.
Heya! I'm just curious with how MyAnimeList cache the image.
How much days/week for MAL to refresh and cache (or download on their server temporary) image? I have an idea to make some sort of interactive dynamic profile, but this caching thing is something that held me off 👀
nattadasu said: Heya! I'm just curious with how MyAnimeList cache the image.
How much days/week for MAL to refresh and cache (or download on their server temporary) image? I have an idea to make some sort of interactive dynamic profile, but this caching thing is something that held me off 👀
I haven't tested it in a while, but it seemed to be 2 weeks on average.
Is there a site beside Userstyles.org where I can post my CSS scripts and users can quickly just install them with one or two clicks when they have the Stylish or Stylus scripts? And with no limits. These sites and extensions have been fucked up in recent years.
I apologize in advance for my bad English, I'm French and I'm learning the language ^^
I'm new here and I need your help! Indeed, I managed to customize my anime roster the way I wanted (I took the base from the 5cm grid template I customized with the anime "Children of the Whales").
I'm happy with the result, it's what I wanted.
However, I noticed that it was not responsive, on phone the appearance remains as it is by default. On a tablet, I don't know, I haven't checked. So I wanted to know how to do it, if there was a setting to make, additional css to add to make it responsive or if it's complicated with the basic model I took.
I send you the link of my anime list as well as the code used to make it clearer for you!
And here is the CSS code i used to to get this result :
{IMPORTANT:
Change "SpaceCowboy" and
"DateYutaka" to your MyAnimeList username in the next two imports under this section. That will personalize HD preview pics and you should get a faster/smoother load time. The two imports begin with
@/import and are at lines 10 and 12 below.
/*WALLPAPERS
To change background images: delete what's in the parenthesis. Upload
the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.*/
body, body.ownlist
{
background-image: url(https://i.imgur.com/d1cTCqQ.jpg);
}
/*PREVIEW PICS/COVERS
See the help at the top of this layout code if you have problems
with blurry or missing preview pics.
If you want to customize a preview pic, use the code below but change the number after "anime" to the anime's number. Get the number from the address bar on its page on MAL. For example if you go to Code Geass's page the number in the address bar is 1575.
Change "anime" to "manga" to customize manga previews. This code customizes the Code Geass preview (anime #1575) if you change the background image link.
Copy and paste the code to customize more preview pics, just change the number.*/
/*BANNER AVATAR
Change the first "center" to "left" or "right" to move the picture position. Change "cover" to "contain" or remove it to change how the image fills the avatar.*/
/*BANNER QUOTE*/
.cover-block::before {
content: "All people live in a fantasy in which they are the main character." ;
font-family: 'Courgette', cursive !important;
}
/*BANNER BACKGROUND AND HEIGHT
If the image doesn't fit, increase the height and/or change "cover" to "contain". You may want to lower cover pics after (scroll down).*/
.list-unit.watching .list-status-title:after,
.list-unit.reading .list-status-title:after,
.list-unit.completed .list-status-title:after,
.list-unit.onhold .list-status-title:after,
.list-unit.dropped .list-status-title:after,
.list-unit.plantowatch .list-status-title:after,
.list-unit.plantoread .list-status-title:after,
.list-unit.all_anime .list-status-title:after {
background-image: url(https://i.imgur.com/BBAc4qn.png);
background-size: cover !important;
height: 500px !important;
}
/*MOVE COVER PICS UP OR DOWN
Increase 0px to a higher amount like 100px to move the anime preview pics and header (Completed, etc) down. -480px brings them up to the banner buttons.*/
.list-unit .list-status-title .text,.list-item{
top: 0px;
}
/*BANNER BUTTON BACKGROUNDS
The first image link in parenthesis is the still black and white image, the second image link is the animated image (a GIF).*/
/*SIDE RENDERS (left and right)
To move the renders, adjust the percentage after "left" or "right". You can use negatives. To resize the renders, adjust the percentage after "width". 0% will remove the render.*/
footer:before {
left: -3%;
width: 25% !important;
background-size: contain !important;
background-image: url();
background-position: left bottom !important;
}
footer:after {
position:relative;
right: 0%;
width: 30% !important;
background-size: contain !important;;
background-image: url(https://www.seekpng.com/png/full/169-1699211_chakuro-children-of-whales-characters.png);
background-position: right bottom !important;
}
/*ANIME/MANGA CONTAINER SETTINGS
(TABLE COLORS)
You can change the color with rbga colors. Generate RGBA colors here so you can replace the codes below: https://www.hexcolortool.com/
First set of colors= entire table. Second = banner. Third = default container behind an anime. Fourth = container when you point to it. Fifth = upper left menu. Sixth = top. You can set the last digit to zero to make it completely transparent.*/
.list-unit {
background-color: rgba(0,0,0,.6) ;
}
.status-menu-container {
background-color: rgba(0,0,0,.4) ;
}
.list-table .list-table-data {
background-color: rgba(0,0,0,.2) !important;
}
.list-table .list-table-data:hover {
background-color: rgba(0,0,0,.4) !important;
}
.list-menu-float .icon-menu{
background-color: rgba(0,0,0,.4) !important;
}
.header {
background: linear-gradient(rgba(0,0,0,.4),transparent) !important;
}
/*GREYSCALE FOR CUSTOM CATEGORY BUTTONS
Delete this to remove grey from custom buttons.*/
.status-button.watching,.status-button.reading,.status-button.completed,.status-button.onhold,.status-button.dropped,.status-button.plantowatch,.status-button.plantoread,.status-button.all_anime{
filter: grayscale(100%);
text-shadow: black 0.1em 0.1em 0.2em;
Shishio-kun said: Is there a site beside Userstyles.org where I can post my CSS scripts and users can quickly just install them with one or two clicks when they have the Stylish or Stylus scripts? And with no limits. These sites and extensions have been fucked up in recent years.
I use https://userstyles.world , stylus actually lets you publish straight from it to userstyles.world
however you can host it anywhere like github or dropbox if you name it whatever.user.css stylus will install it, and check for updates.
which I personally haven't tried since I just use the userstyles.world api
Is there anyway to lock the status menu bar? Everytime I scroll down it just goes to the top of the screen but I want it to stay on the bottom. The position is fixed but even then scrolling still moves it. Thanks
Kingasian said: Is there anyway to lock the status menu bar? Everytime I scroll down it just goes to the top of the screen but I want it to stay on the bottom. The position is fixed but even then scrolling still moves it. Thanks
you have duplicate selectors in your code, this isn't the only one I saw, so not only are they canceling each other out, the status menu has top code that literally tells it to move up, change these two
from:
Thank you man! Another question I have is: Is it possible to change the cover image on hover? I know how to do it with Html and Css, but I'm not sure if it's even possible to get it to change on hover using CSS only since the cover image uses a <img> tag. Thank you again.
Kingasian said: Thank you man! Another question I have is: Is it possible to change the cover image on hover? I know how to do it with Html and Css, but I'm not sure if it's even possible to get it to change on hover using CSS only since the cover image uses a <img> tag. Thank you again.
you'll have to wait for someone better than me to answer as it's probably going to require some trickery like
After checking the modern themes and doubting cards vs. table I ended up just using the default, but with bigger images and combining start/finish dates in one column to simplify it a bit.
However, when there's no start date or both cells are empty, the layout goes wonky and I'm not sure how to bonk it back into place. No dates can be observe in the PTW (or All Anime beyond 300-ish).
After checking the modern themes and doubting cards vs. table I ended up just using the default, but with bigger images and combining start/finish dates in one column to simplify it a bit.
However, when there's no start date or both cells are empty, the layout goes wonky and I'm not sure how to bonk it back into place. No dates can be observe in the PTW (or All Anime beyond 300-ish).
Mixing tables with other displays (e.g "display: flex") is a recipe for jank behaviours, I try to avoid it as much as possible.
Anyway I figured since the problem only happens with empty cells, I'd fill them with some content to see if it fixed it. While it didn't immediately fix the problem, it did help and it's required for the later fixes to work so you'll need to add this code that adds text to empty cells:
I then figured out the second problem which is the "justify-content: end". No idea why it offsets the airing columns like that, but, well, jank. Anyway I didn't see any of the same issues while using "margin" so I would recommend replacing this:
Mixing tables with other displays (e.g "display: flex") is a recipe for jank behaviours, I try to avoid it as much as possible.
…
With these two fixes it was no longer a problem in my testing.
You're very right about the hackiness of the code. I figured as long as it works for now, it might not need to work if they ever introduce decent themes/customisation or someone fashions up a custom theme that conquers my heart like how you just helped conquer that table. Thanks a bunch!
[classic layout] anyone know what can be done to edit the text from the new "Anime List Notes" update MAL added yesterday? like changing the text size/color only for the notes but nothing else on the list
Badonkers said: There's a recent update where List Notes are added. I tried enabling the notes but it doesn't show up in the list. Any fix to this?
The column is not supported by default due to some problems implementing it with the default design. To support the notes in their default location, the anime/manga titles and the anime/manga type have to be top-aligned at all times. Here's the code for that, you can add it to the bottom of your CSS to try it out:
There are other ways to implement the Notes that wouldn't cause the top-aligned titles, but so far I can only think of alternatives with other downsides such as a constant, fixed padding to all entries and a forced scroll on the notes Column. Or perhaps it could be implemented on the far right of the list items?.. The point is, if you can think of somewhere else you want the Notes I may be able to help but it's likely to have caveats.
wkteo said: [classic layout] anyone know what can be done to edit the text from the new "Anime List Notes" update MAL added yesterday? like changing the text size/color only for the notes but nothing else on the list
The notes on the classic list can be styled with the selector [id^="noteLinks"]. The text size, colour, and other properties can be changed as per any other element with regular CSS for instance "color", "font-size", and so-forth. Here's an example with a text colour, font size, a background, and some padding.
