[CSS - CLASSIC] Original and new Square layouts - made for easy editing

SViper said:
Could you later on update Manga covers as well?

FauxAzn said:
How do I remove/hide the Numbers and Type fields, and replace the Episodes field with Tags?

YukiUzumaki said:
I can not get this picture to go behind everything as the pic I see behind the Anime On the list
http://imgur.com/hipDvD9

http://myanimelist.net/animelist/YukiUzumaki&status=1&order=0

any suggestions??

/* BANNERS */
.header_cw:before {
background-image: url(http://imgur.com/R8Zc6eq.jpg);
background-attachment: scroll !important;
background-position: center 30%;
background-repeat: no-repeat;
background-size: cover;
}
.header_completed:before {
background-image: url("http://i.imgur.com/el6PlIa.jpg");
background-attachment: scroll !important;
background-position: center 30%;
background-repeat: no-repeat;
background-size: cover;
}

.header_onhold:before {
background-image: url(http://i.imgur.com/DWMmfr0.jpg);
background-attachment: scroll !important;
background-position: center 30%;
background-repeat: no-repeat;
background-size: cover;
}

.header_dropped:before {
background-image: url(http://i.imgur.com/Sa98uiw.jpg);
background-attachment: scroll !important;
background-position: center 20%;
background-repeat: no-repeat;
background-size: cover;
}

.header_ptw:before {
background-image: url("http://i.imgur.com/QQ7KzDG.jpg");
background-position: right 1%;
background-attachment: scroll !important;
background-repeat: no-repeat;
background-size: cover;
}

.status_selected:nth-of-type(6) a:before {
background-image: url("http://i.imgur.com/o6tSHgM.jpg");
background-attachment: scroll !important;
background-position: center 23%;
background-repeat: no-repeat;
background-size: cover;
}


/* MAIN BACKGROUND (BEHIND EVERYTHING) */

body{
background-image: url(http://i.imgur.com/hipDvD9.jpg);
background-size: cover;
background-attachment: fixed;
}


/* EXTRA BACKGROUND IN FRONT OF BANNER (OPTIONAL) */
#inlineContent {
background-image: url();
}

/* EXTRA BACKGROUND BEHIND LIST (OPTIONAL)*/
#list_surround{
background-image: url();
}

Shishio-kun said:
You're repeating the mistake I told you not to do in my previous post. In the third and forth line of your CSS you posted, you have:

background-image: url(http://i.imgur.com/hipDvD9
)

but it needs a .jpg or .png at the end like I said earlier. And you only replace the url in parenthesis, you don't take out the semicolon or move the parenthesis to the next line. It should look like:

background-image: url(http://i.imgur.com/hipDvD9.png);

and thats all. And that link should actually be the http://imgur.com/R8Zc6eq one since its going to be the banner. You haven't put this code under any of the banners. You need to put that in the parenthesis for any of the 6 banners you want to change. For both things your code should look like:



Try to look for the mistakes I've pointed out to you before asking further questions- you might be able to solve it on your own that way. Also you're using the 6-banner version. So that only changes the banner for the Currently Watching page. You have to change the url in parenthesis under
.status_selected:nth-of-type(6) a:before {
to change the banner on the All Anime page.

If you only want the same banner for all categories don't use the Vocaloid version- use one of the single banner and background versions and change the images in that (Guilty Gear, Umineko, etc).

Shishio-kun said:


try to go here and check/uncheck them
http://myanimelist.net/editprofile.php?go=listpreferences

u531355 said:
Some list settings are needed for this layout.
For both anime- and manglist, you have to check the first four columns.
The Tags column can be checked too but is optional.

FauxAzn said:

Yeah I tried that, but the layout gets messed up when you uncheck Numbers and Type. The original Square Layout thread mentions:
But I was still wondering if there was a way to modify the code so that Numbers and Type are removed/hidden, and if I could move the currently on-hover Tags field to be permanently visible at the bottom-right corner instead of Episodes.

Arakura said:
Is there a way to use the old Square Layout icons at the top? I know you replaced u531355's dropbox import with links to images, but I was hoping that the images he used originally were out there somewhere for me or anyone to use. They were so elegant and pretty. Thanks for any help!

Shishio-kun said:


Which icons? I reuploaded most of the icons from the original Square layout for these. I don't have the special Star Wars or Japan-style icons if thats what you mean. You have to save those when his Dropbox comes back online. It'd be too much trouble for me to upload all those and fit them into separate bars.

SViper said:
So when Manga covers will be updated?

Hahaido said:
Why not? It takes some time but it possible to make code for all covers

Shishio-kun said:
SViper: Oh the manga covers were updated like last summer I think, so I'll try to remember to update those soon tho. Feel free to remind me here if you don't see them updated soon. btw, recently, the anime covers were all updated as long as you have the correct import (there is a Google covers import floating around with the old covers, but its not the one I'm hosting anymore)

Lolicon said:
I've looked every where and couldn't find this answer: How can I get rid of the top-bar thing? I tried replacing it with another one from a different topic but that threw the new bar into disarray. I tried doing it line by line from a CSS editor in Chrome and Firefox and that became too time consuming.

Tw1tcHy said:

My only complaint is I can't find any source code to move the bar to the right or center the headers

Preytoor said:
Hello there,could you please help me with a problem I am having?You see,I copied the code for the hatsune miku style and the natured theme but for both of them,the icon for every anime is mostly covered by a black square that says volumes:.Is there a way to change that?

Shishio-kun said:
Yes that can almost certainly be done in a few ways.

I think you could use the tags hover effect by itself from this topic but change the number for the column:
http://myanimelist.net/forum/?topicid=563993

MisaoKusakabe said:
Hello and thanks for all of this~!
But how do I add new pictures for the animes that just came out? For example I don't have a picture for kiseijuu because the anime is new.
I know all of the url are in here
but i don't know how they work

xBuneZ said:
The Hatsune Miku one is not working :/ (the covers don't show)

firejet said:
One of the layouts look really weird and some buttons are off (http://myanimelist.net/animelist/firejet&status=7&order=0). Buttons are off center and sometimes overlap with the anime image panels. Imessed around with the "beginner/easy" code and haven't been able to fix it. Haven't tried the "advance/know what you're doing," part of the code yet because I'm new to this :/

Shishio-kun said:


Problems seems to be the codes under the "advance" part have been changed and are missing parts which are causing this problem. But its a fault of the edit box removing those parts, not a change you made

You would have to go back to the original layout and add your changes over again, but I did that for you since its easy thanks to online tools, try this layout:
http://pasted.co/dd38400b
Just to give you a heads up, if the error comes back it'd be easiest I think just to delete everything in your CSS edit box code below "advanced" and then copy everything under advanced in the link above back under there. Basically, you can always just go copy that back in again and keep the changes above advance. That should be fine

SViper said:
Covers no more works even if I use my own ones from dropbox.

Shishio-kun said:



Use the latest versions of the layout from the original post

SViper said:

As I said even malcat-gen covers is not working.
PS: looks like works on Microsoft Edge, but not my main browser Opera Developer. If I would been tested this months ago, I wouldn't been barging now.

SViper said:

As I said even malcat-gen covers is not working.
PS: looks like works on Microsoft Edge, but not my main browser Opera Developer. If I would been tested this months ago, I wouldn't been barging now.

Shishio-kun said:


I'm using the latest Chrome and Opera and see your covers- maybe you need to change to one of those and check your extensions and stuff sometimes they block covers

SViper said:

Change what? Atm I don't have any extensions installed, because I have clean Windows installation at June 17th.

Shishio-kun said:
Yes, find COLOR OF LIST and change the background color to this:

/* COLOR OF LIST*/
#list_surround{
background-color: rgba(1, 149, 195, .4);}


You can make it more or less translucent by changing the number ".4" to ".1" or ".7", etc.