Forums

Introduction

Welcome on the Square Layout information page.
The Square Layout is a premade layout you can use for your anime- and mangalist. Here is how it looks like:


Code for the layout displayed on the preview picture:

As you can see in the spoiler, there is a lot of @imports. Therefore if you want further customization, I recommend you to download the files, edit them, and reupload them on your own dropbox.

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.
All other checked columns won't be displayed, but they won't crash the layout either.
Picture in the spoiler.


Customization

The 6 following steps correspond to the 6 points of the code in the first spoiler.
Most of the time you just need to replace a link by another of your liking.

1) Generated Covers
The CSS file imported here contains the covers links for animes and mangas on your list.

You can use the files that I keep updated with all the animes and mangas on MAL:
- for animelist: http://dl.dropbox.com/u/49469857/MAL/premade/anime.css
- for mangalmist: http://dl.dropbox.com/u/49469857/MAL/premade/manga.css

Or you can generate your own CSS file so it's not too large. To do that, go on this page: http://myanimelist.net/forum/?topicid=436031 and follow the instructions.

2) Base Layout
No customization here, you need to import the following CSS: http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css
But you can always download it and change it to your liking.

3) Top-bar Icons
You can customize the top-bar icons with one of the followings:

4) Layout Themes
You must choose one of the following themes:

5) Addons
Addons are optional. You can import none of them or import them all together.
List of addons:

6) Options
Number of covers on each row
One cover needs 242px in width. Therefore you should change this number to a multiple of 242.
You can't display less than 3 covers, thus the minimum width is 726px.
On a 1920px wide screen, 6 covers is a maximum; which makes 1452px.

Header picture
The header picture is the big fat picture on top of the layout. You can't miss it.
It needs to be 420px high and I recommend it to be at least 1920px wide so it looks good on every resolution.
Make your own or choose one among the followings:

Default picture when no cover is found
This is the picture displayed when there is no cover link for a title in the CSS imported at point 1).
Picture in the spoiler.

It should be 220px wide and 240px high. The topmost 20px aren't displayed.
Make your own or choose one among the followings:

Links color and extra-customization
Themes have a default link color but you can override it.
You can also add all the code you want (backgrounds, additional contents ...) for further customization.

Feel free to share your themes, top-bars, addons, whatever.

Coming one day, maybe: a better theme.

Oh nice, Square Layout is a good name for it. I like the look you have on the Manga List best.

wow really awesome just playing around with the codes now^^

Wow, there are some themes and bars for this theme...

I make my own modification of this theme, but it seem that have some little bugs :(
Anyway, here is it:
http://myanimelist.net/mangalist/al_exs

Wow, it looks really great, gonna try it for my anime list with slight modifications.
Tnx for sharing the code.

Wow looks like people are having an easy time using and editing this! Good job. I added this thread to my featured lists thread, linked from the front page menu. I would really like to make a Guilty Gear or Blaze Blue version. Its easy since all I need to do is switch the icons and background pic!

Thanks for sharing the code, I was trying too make a list like that with this code http://dl.dropbox.com/u/82846412/Fate_Style.css but yours is much more easier too edit. ^^

Wow it's awesome, thanks for sharing and nice job.
Keep it up !

Woah, I fell in love with this list style. I'll be using (and customizing) it, thanks!

Awesome! It's lovely, but I noticed one thing, when I installed the CSS, the background for 'All Anime' was fine, but when I switched to Currently watching, Dropped, etc, the background is a bit messed? Isn't the background suppose to extend all the way down the page?

This is awesome! Thanks! (^__^) I have a question, though. I want to add a picture of Yuno Gasai on both sides of the list instead of Asuka; how do I do that? If anyone could answer that, I would be very happy. :D

Thanks all for the positive comments!


I don't understand? Which background?


Create your own css that you put online on dropbox for instance and change the links of Asuka to Gasai. You can also adapt the margin-left, you will find 2 of them in the css, the negative one is for the left picture and the positive one for the right picture

Damn, this is sick. Nice job! Gonna use it for my manga list with some slight changes. Love it. :D

Hi, I love this layout, but I was wondering if there's a fairly easy way (I'm new to all this) to change the maximum size of everything. I want it to look like the topmost example, or even 'smaller', on every resolution. Unless I zoom out in my browser, it dislays 4 series in a row now. I want it to display 6 or more series in a row on every resolution, making the pictures and other info smaller, if possible.

Thanks for a great layout. :)

@Nickienator
This would require to change everything from px to % in the base layout.
But I don't think this is anywhere near easy.

Too bad, but thanks for replying. I'll refrain from trying to do that untill I know a little bit about what I'm doing then.

How do I change de addons? There are no link or back ground image on this part of the code but Asuka still apears, where can I cange the image?

Thanks a lot for this!

I love the design a lot, but I was wondering if something could be done with the blank anime pictures? I mean, there are some titles that neither the anime picture nor my default picture is showing. Or is this a problem without a solution?