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

Vladislav_Paizis said:
Thank you very much. I have a few questions. Some of them weren't answered by the author of the original Square layout.

1. How can I add the Long Covers addon from the original to the new code?
2. I like to write my thoughts in the Tags box. Is there a way to increase the Tag box's size?
3. Some long titles like "Jojo's Bizarre Adenture: Stardust Crusaders". Is there anything that can be done to adjust title length?

fufoojoe said:
thank you so much for this its amazeing!
can you help me remove the banner from the top?
also is there a way to have multiple backgrounds that switch out each time somone visits my list or chooses one of the images at random?

Vladislav_Paizis said:
Hello. I'm using the Guilty Gear layout and I want some advice on how to fix the banner (top image). It used to show Sol Badguy's face, but now it is fixed on his neck and chest.
It's the same for both anime and manga lists.
http://myanimelist.net/animelist/Vladislav_Paizis

Shishio-kun said:
I've re-added the Vocaloid layout with multiple banner backgrounds for each page, an "uncrashable" version like the others

Symqn said:


What about for this version of square layout?

http://myanimelist.net/forum/?topicid=459189

eImpulse said:
I can't seem to get the Anime Info Text Color to stop overwriting the Title Color any Ideas?
/* ANIME INFO TEXT COLOR */
.td1:first-of-type, .td2:first-of-type, .td1, .td2, .td1 a, .td2 a {
color:red ;
}

/* ANIMETITLE COLOR */
.animetitle{
color:gold ;
}

The_Pyromaani said:
what are the settings for the ocean themed version instead of dark for the Single custom banner and background layout.

stupid question but im a stupid afterall lol XD

OppaiTaisho said:
Can anyone please elucidate this
If you look behind the covers, you'll see a faint table between the covers and main background. This is the background. You can adjust the width of it with the codes under LIST WIDTH. This will also change the number of animes you have on each row. Increase= more per row.

How do we change the number of anime per row?

WordsofSyrup said:
Since the dropbox for updating missing covers is not in a working state, would that mean to update them, I would have to manually update my covers one at a time?

WordsofSyrup said:
Regarding the googledrive import link, how would I go about setting that up, so that I can add more covers, accordingly?

smashdex5 said:
If I'm using the resolution of 1920 x 1080 what would I do to align the Currently Watching and other buttons with the background shadow? Thanks! =)

Vladislav_Paizis said:
I've updated the Guilty Gear layout with non-dropbox links, but I'm having trouble with Anime Title Length and Tag Box Height settings. I wrote different height sizes even up to 800px, but nothing changed.

I3orje said:
The off center "Top buttons" and "cw, completed etc" buttons are killing me, I've spent 3 hours trying to figure out which line of code does what, but I've just managed to break the code a 100 times :( I run on 1920x1080 and the "!Important" fix didnt align the things. So what I want is to have it all centered and maybe remove the gray bars behind the buttons :) helps plx?

Egonor said:
This: http://imgur.com/ZKb7eDG is what your unedited vocaloid layout (http://tny.cz/a107baee) looks like at 1920x1080.

I applaud your efforts as I really love the square layout but this: http://imgur.com/7acWdIX is something closer to my personal ideal:

1) A single background image. A banner is unecessary as well as all that unused space. If someone wants a banner so bad they can photoshop it on top of their custom background. At the very least the whole banner section should be optional. (The white at the top would be filled with backgroud, that's just there from my quick photoshop job.)

2) You don't really need a category selection AND a category title. The selected category can just be bold/more saturated.

Those are my only really big pet peeves, aside from everything being centered. You could easily fit a 6th row at 1920x1080 by default. The category list not meeting the bottom of the banner occurs on my second monitor as well (1440x900).

smashdex5 said:
I love the new holographic square layout! Nice work!

SViper said:
Categories (CW, Completed, OnHold, Dropped, PTW) of my Anime list to much in right, so how to fix it?

Shishio-kun said:


Scroll down deep in your code to

.status_not_selected:nth-of-type(1), .status_selected:nth-of-type(1)

There should be a left: code after that. This is for your CW button. You have to adjust the number amount after it and it moves that button where you want. The following 5 codes with left: after that are for the other 5 buttons.

SViper said:
I couldn't do that for All Anime

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).