MyAnimeList.net

Forums

Recent Posts | My Watched Topics | My Ignored Topics | Search

Square Layout
MyAnimeList.net Forum »» Club Discussion »» Shishio's Custom Lists & Profiles (with layouts, tutorials, and more!) AUGUEST CARD FESTIVAL! PERSONALIZED TCG CARDS ARE BACK! »» Square Layout

Must be a Club Member to Reply
Pages (11) [1] 2 3 » ... Last »
#1
07-03-12, 2:47 AM

Offline
Joined: Apr 2009
Posts: 144
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design works on both anime and manga lists. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587


10 April 2014
Everybody should update his code changing point 6
from body {max-width: 1452px;}
to #mal\_control\_strip, #list_surround {max-width: 1452px;}
More infos: http://myanimelist.net/forum/?topicid=459189&show=140#msg29908023


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 mangalist: 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.
Modified by u531355, 05-19-14, 2:18 AM
 
#2
07-03-12, 2:47 AM

Offline
Joined: Apr 2009
Posts: 144
Feel free to share your themes, top-bars, addons, whatever.

Coming one day, maybe: a better theme.
Modified by u531355, 10-31-12, 6:42 AM
 
#3
07-03-12, 3:33 AM

Offline
Joined: Feb 2010
Posts: 2293
u531355 said:
Coming today, see my anime/manga -list for a preview, it'll offer a lot of customization.

Oh nice, Square Layout is a good name for it. I like the look you have on the Manga List best.
 
#4
07-03-12, 2:20 PM

Offline
Joined: Jun 2009
Posts: 32
wow really awesome just playing around with the codes now^^



..............................................................
I'll do things just like you Yakuza!
 
#5
07-05-12, 9:50 PM

Offline
Joined: Apr 2012
Posts: 165
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
 
#6
07-07-12, 10:29 PM

Offline
Joined: Aug 2009
Posts: 3364
Wow, it looks really great, gonna try it for my anime list with slight modifications.
Tnx for sharing the code.
“With the invention of the internet, any subliterate cretin can be Michiko Kakutani.”
 
#7
07-13-12, 10:21 PM

Offline
Joined: Feb 2010
Posts: 2293
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!
 
#8
07-15-12, 1:20 PM

Offline
Joined: Sep 2011
Posts: 162
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. ^^
 
#9
07-22-12, 8:21 PM

Offline
Joined: Mar 2012
Posts: 97
Wow it's awesome, thanks for sharing and nice job.
Keep it up !
 
07-22-12, 8:36 PM

Offline
Joined: Apr 2012
Posts: 777
Woah, I fell in love with this list style. I'll be using (and customizing) it, thanks!
 
07-27-12, 5:13 PM

Offline
Joined: Jan 2011
Posts: 37
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?
 
08-02-12, 9:53 AM

Offline
Joined: Mar 2012
Posts: 164
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
"Try to remember that word that I loved; that 'happiness' is such a curious feeling, so when tomorrow comes, I hope you love it, too."
 
08-04-12, 4:40 AM

Offline
Joined: Apr 2009
Posts: 144
Thanks all for the positive comments!

Meira said:
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?

I don't understand? Which background?

FMA-Xorcist said:
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

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
 
08-09-12, 2:44 PM

Offline
Joined: Aug 2009
Posts: 275
Damn, this is sick. Nice job! Gonna use it for my manga list with some slight changes. Love it. :D
 
08-16-12, 3:22 PM

Offline
Joined: Jul 2008
Posts: 270
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. :)


 
08-17-12, 7:54 AM

Offline
Joined: Apr 2009
Posts: 144
@Nickienator
This would require to change everything from px to % in the base layout.
But I don't think this is anywhere near easy.
 
08-18-12, 3:05 PM

Offline
Joined: Jul 2008
Posts: 270
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.


 
08-19-12, 12:27 PM

Offline
Joined: Sep 2011
Posts: 162
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?
 
09-27-12, 12:08 PM

Offline
Joined: Aug 2012
Posts: 1801
Thanks a lot for this!

 
10-11-12, 2:22 AM

Online
Joined: May 2008
Posts: 3934
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?
 
Top
Pages (11) [1] 2 3 » ... Last »
Help     FAQ     About     Contact     Terms     Privacy     AdChoices