❓ Ask for help here + See Frequently Asked Questions

Shishio-kun said:

The only ways I can think of are complicated as hell. You could move whole rows with CSS, I guess, but its not simple at all

SamPolus22 said:

If you have a couple of years of free time, then I guess you can do it XD

tirafesi said:
Posted this 2 days ago but still no answer...
Shishio-Senpai pls help me *.*

Can you please tell me how to fix the sub-headers (score, episodes, etc)?
They are not aligned with the list

Klassical said:
Hello
i have a problem in my list layout , at the top left there seem to be "Profile" and on it there is also "Logout" , so when i click on profile it logs out of the site. it is distorted so you can see it , i have checked some things to fix it but i couldn't find a solution

maybe someone here can help me with this ?

Shishio-kun said:


So what did you want to do- move a link, remove it..?

I would suggest to remove the logout link with this

form a{
display: none;
}

Shishio-kun said:


Remove

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 300px;
}

That's misaligning your list

Shishio-kun said:


Again:

Aoi_Yui said:


The how to make a gif one you made under the graphic design section Make a high-quality GIF from any video! for the format factory and the How to make an Animated GIF from any Video without reencoding for the "script error: there is no function named "ffvideosource"" complaint.

Shishio-kun said:


I'm not sure where you want to move it so add this:

a.List_LightBox{
position: relative;
top: 1px;
left: 1px;
}

Then move the link into place by adjusting amounts after the top and left codes

Sutocamp said:


Thanks, but what I want to do is to make it vertically-centered both for rows that are a single line high and for rows that are two lines high. Setting an absolute offset wouldn't work for that, would it?

Edit: After some more experimentation, I managed to approximate the vertical centering with the following:

td[class^="td"]:nth-of-type(2) {
position: relative;
}
td[class^="td"]:nth-of-type(2) div[style*="float"] {
bottom: 50%;
display: block;
position: absolute;
right: 0;
}
td[class^="td"]:nth-of-type(2) div[style*="float"] .List_LightBox {
display: inline-block;
position: relative;
top: 8px;
}

The problem is that it's colliding with the anime title. Is there a way to prevent that? And surely there's a simpler way to do the same thing?

Shishio-kun said:


It doesn't look to be colliding with the anime title to me atm? Which title?

Cielak44 said:
I would first like to thank you for doing "malstyle"
I dont know nothing about this and would like to ask whether it is possible to remove the black squares where powinien be the image of the anime?

Sorry for mistakes j use translator :P

Coolidger said:
I asked this question on the forum, and was redirected here. I ended up using Shishio-kuns guide to help customize the background among other features into my list. I'm not that good with code but it made it easy enough to add what I wanted to the list. There is one issue i'm having with text though, so i'll link my list to explain.

http://myanimelist.net/animelist/Coolidger

The problem i'm having is when you scroll over a series, my miniviews pop up. I haven't written any yet, other then for Acchi Kochi (first on my completed list). If you scroll over that, you'll see that my text for the tags is black (which I changed it to), but for whatever reasons the commas come up white still, and I can't figure out how to fix that. Any ideas? I can link my full CSS if necessary.

SamPolus22 said:

Replace your TAG TEXT COLOR code with this one:
tr:hover td[class^='td']:nth-of-type(6) a, tr:hover td[class^='td']:nth-of-type(6) span{
color: black !important;
}
you can also add the second part of the code instead of replacing the whole code :)

Asectic said:
Hi, I have a question regarding the interactions within the #list_surround element. If you're using a standard category list - like the ones where they appear at the above of the page and right below is the MAL tables & list area, is there any way to make the category list fixed in position or unable to move - but the MAL list still does?

And also, I know that everything about the MAL list - from headers to td1 & td2 - they're all included in the #list_surround, but is there essentially any way for it itself to have its own "overflow-y: auto;" ?

My manga list is using the current form, where category list is a premade mod. Thanks!

SamPolus22 said:
You can make you category list fixed by adding "position: fixed !important;" to ".status_not_selected a, .status_selected a"
You have to re-position the buttons because it changes their position.
I don't really get your second question. Do you want to make an element inside the #list_surround scroll-able just like your table?

hatomike said:
Hi everyone.

I'm making a custom css style on my own but i'm stuck on something.

i'm using a "Default MAL style layouts" to start with but I want the final product to look more like a "Square-styled layouts"

Ths problem is: I don't know how to change entries from line to block. Everything I've tried fail.

Any advice ?

SamPolus22 said:

I would recommend you to look into other pre-made square layout codes like these two
http://myanimelist.net/forum/?topicid=459189
http://myanimelist.net/forum/?topicid=393503&show=40#msg18655159
Try understanding them then apply it to your list. You can also copy these layouts and just change the colors and images since they're "donated" and can be used by anyone on MAL. If you use the copy method and the layout has some form of signature of the creator on it, don't remove because that's rude XD

#list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide {
    float: left;
    height: 200px;
    margin: 10px;
    width: 200px;
}

hatomike said:
Hi everyone
Ths problem is: I don't know how to change entries from line to block. Everything I've tried fail.

Any advice ?

hatomike said:
From memory, can you tell me where to look ? This can save me some time.I don't froce you tho.

Shishio-kun said:


I had this problem like 3 years ago, trying to create my own block-styled layout from scratch (which became the Poster Style layout). I had to get the codes to "square" titles from a private list that was never donated and the maker sort of retired from MAL soon after. Maybe that layout was where U531355 got some his cover idea and inspiration from too (not sure).

Anyways these are the steps to getting those codes I wanted:
1. rip the entire layout where the "block" style comes from. if its imported, you will have to import it

2. remove any codes like "display: none", "visibility:hidden", "opacity: 0". ctrl+f makes them easy to find.

3. color-code every code so its easy to see whats going on the list, similar to how I did this. Carefully remove background images, then save. You can also remove stuff related to the top bar as well, if you know what those codes look like, but you'll do this later anyways.

4. with that saved on your list, go to your list (firefox) and inspect element. go to Style Editor for the source edit and start removing whole blocks of code one by one (selectors and the stuff in the brackets after them). if something seems to take away the block style in any way, add it back and move on to the next set of codes. When you go thru the entire layout, you should have only the base stuff for the block-style, and they should be color coded for easy identification.

This is how you break down a seemingly complicated list to get the cool tricks easily, and it is one of the ways to break out of novice skill. There's a tutorial on using inspect element btw
http://myanimelist.net/forum/?topicid=1329419

Shishio-kun said:


The blocking on the original square layout comes from this CSS. it needs to be imported, won't work in MAL CSS edit box:
https://dl.dropboxusercontent.com/u/49469857/MAL/premade/square/style.css
But you should probably break it down from one of these lists
http://myanimelist.net/forum/?topicid=1198609
since they don't need to be imported. also iirc its several codes that made the blocking of titles, not just one. I think you need to have a wide list surround for example. and firefox inspect element atm is conflicting with Ad Block. You'd have to temporary disable that to use it if you use my method above

hatomike said:

Also, can I know why you need to import some css to work ? Mal are blocking some things ?

Shishio-kun said:

Yes, while importing is merely for convenience a lot of times, its necessary because certain codes and characters will not save in the CSS editor, and need to be imported or hacked in a way (not always possible) so they pass by. If they are not, they disappear or scramble thus they invalidate the selectors they're a part of, rendering them useless.

Asectic said:


The downside to reading pre-made codes is that one needs time to understand something that isn't theirs, especially with the pixel positioning *-* But I guess that's the only way to go about it. thanks~

Basically yes. I only want the table scrolling to apply to everything below the category list bar - with the banner fixed as well. For right now the way I have scroll setup it makes the awkward thing of just scrolling past the banner & category list.

.table {
overflow-y: auto;
}

I tried adding in following to the table element, since that's what seemed to control most of everything under category list. But no luck on that either. :P

CynicalWarner said:
How can I fix the positioning of the "score," "type," "progress," and "tags"

Its a layout I found on here and added my own wallpaper and a few other codes at the bottom.

Thanks for any help, and sorry If I did this wrong, It's my first time posting

Heres the code

SamPolus22 said:

Add this to the bottom of your CSS:
.table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) {
position: relative !important;
right: 75px;
}

CynicalWarner said:


Awesome, thank you so much.

Maritos said:
The standard order is Currently Watching, Completed, On-Hold, Dropped and Plan to Watch. I would like this order to be different.

Maritos said:
Hello, I have a question.

Is there a way to change the order of the headers on your list page?

The standard order is Currently Watching, Completed, On-Hold, Dropped and Plan to Watch. I would like this order to be different.

I saw many CSS tutorials but none covered this, so I wonder if this can be changed somehow.

SamPolus22 said:
Correct me if I'm wrong, you want to rearrange the order of the list, like putting on-hold first when you press all anime?

Serhiyko said:
How exactly do you want to change the order?

SamPolus22 said:

Correct me if I'm wrong, you want to rearrange the order of the list, like putting on-hold first when you press all anime?
If that's what you want then I don't think there's a way to do that because each category doesn't have its own code. They all are put under one code which controls them (#list_surround).

Maritos said:




Yes, something like that.

Instead of the default order (Currently Reading, Completed, On-Hold, Dropped and Plan to Read), I wanted it on a different order (namely Currently Reading, On-Hold, Plan to Read, Dropped and Completed).

So is it not possible? Thanks in advance.

SamPolus22 said:

Do you know how to use CSS advanced list design?

nymphiae said:
to make the list scrollable you should put the overflow-y under #list_surround. everything else that is inside #list_surround - such as category buttons should have position set so it doesn't scroll with the rest.

Maritos said:


No idea. In fact, I was expecting that someone had already done this previously to their own list.

SamPolus22 said:

Yes it's possible. Just give me the order and I will do it for you

Sparteh said:
I don't remember which post this code is originally from so I will ask here. Could someone help me to do a few adjustments to this?



I want to do the fallowing:
1- Move entire thing to right.
2- Reduce number of anime in row from 5 to 4. Aka reduce width of entire thing.

I want to add different render + background for each page, but they won't be visible enough unless I do this.
I tried messing with numbers but saw no visible result

Sparteh said:
I don't remember which post this code is originally from so I will ask here. Could someone help me to do a few adjustments to this?



I want to do the fallowing:
1- Move entire thing to right.
2- Reduce number of anime in row from 5 to 4. Aka reduce width of entire thing.

I want to add different render + background for each page, but they won't be visible enough unless I do this.
I tried messing with numbers but saw no visible result

Maritos said:


Wow, thanks a lot bro!

I would like the new order to be Currently Reading, On-Hold, Plan to Read, Dropped and Completed. Only for the manga list, since I don't use the anime list at all.

Thanks again!

SamPolus22 said:

Okay, since you know absolutely nothing about CSS, you'll have to follow this tutorial but paste the code bellow instead of the one given on the tutorial. Tell me if the positioning of the buttons are messed up.

Maritos said:


Hm, but this only changed the sequence of the buttons at the top bar, not the sequence at the list itself, look:
http://myanimelist.net/mangalist/Maritos

So is it not possible?

SamPolus22 said:

I'm afraid that's not possible

SamPolus22 said:

First, to move the list to the right
I don't know a lot about renders so I didn't touch that part. I did my best to make your list on the right (you need to move everything that's why it's kind of hard). Now just replace your whole code with this one:

Sparteh said:


Thanks. I think I will be able to fix images and backgrounds now.
About moving top bad mod and type buttons. Which parts I should edit in order to move it?