Forum Settings
Forums
New
Jul 3, 2012 2:47 AM
#1

Offline
Apr 2009
159
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, and is the first Square layout. For a full list of all Square layouts and their spin-offs:
http://myanimelist.net/forum/?topicid=1226163

For alternative mirrors, use these rehosted versions you copy to your CSS edit box:
http://myanimelist.net/forum/?topicid=1198609


Fall 2015 loading fix
If your list is suddenly loading slow, go to your CSS code and change http to https in any imports that use Dropbox. Imports are lines in your code that start off with @import.

So for example you would change this
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css);

to this:
@import url(https://dl.dropbox.com/u/49469857/MAL/premade/square/style.css);

Change all the dropbox import links in your code like this. Thanks Kiokuzoku for this tip!


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:
Don't forget to replace type by either anime or manga and username by your username.
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 required 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.
It uses Fellow Writer but you can use something else if you want.

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: https://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.[/spoiler]



Fixes, mirrors, and alternative styles
If you have further problems with the layout not answered in the topic, you can ask in this topic to see if someone can help you.

For alternative mirrors, try these rehosted Square layouts codes. You can use these if the Dropbox for the layout crashes:
http://myanimelist.net/forum/?topicid=1198609
Just click the link to the style you want, and copy the CSS there to your CSS edit box here on MAL.

For other Square layout styles, see the full list of Square-styled layouts this one inspired:
http://myanimelist.net/forum/?topicid=1226163
u531355Jan 12, 2016 5:28 PM
Reply Disabled for Non-Club Members
Pages (7) [1] 2 3 » ... Last »
Jul 3, 2012 2:47 AM
#2

Offline
Apr 2009
159
Feel free to share your themes, top-bars, addons, whatever.
u531355Jan 14, 2016 9:47 AM
Jul 3, 2012 3:33 AM
#3

Offline
Feb 2010
11292
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.
Jul 3, 2012 2:20 PM
#4

Offline
Jun 2009
30
wow really awesome just playing around with the codes now^^



..............................................................
I'll do things just like you Yakuza!
Jul 5, 2012 9:50 PM
#5

Offline
Apr 2012
181
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
Jul 7, 2012 10:29 PM
#6

Offline
Aug 2009
3452
Wow, it looks really great, gonna try it for my anime list with slight modifications.
Tnx for sharing the code.
Jul 13, 2012 10:21 PM
#7

Offline
Feb 2010
11292
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!
Jul 15, 2012 1:20 PM
#8

Offline
Sep 2011
235
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. ^^
Jul 22, 2012 8:21 PM
#9

Offline
Mar 2012
126
Wow it's awesome, thanks for sharing and nice job.
Keep it up !
Jul 22, 2012 8:36 PM
Offline
Apr 2012
562
Woah, I fell in love with this list style. I'll be using (and customizing) it, thanks!
Jul 27, 2012 5:13 PM
Offline
Jan 2011
36
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?
Aug 2, 2012 9:53 AM

Offline
Mar 2012
205
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
Aug 4, 2012 4:40 AM

Offline
Apr 2009
159
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
Aug 9, 2012 2:44 PM

Offline
Aug 2009
281
Damn, this is sick. Nice job! Gonna use it for my manga list with some slight changes. Love it. :D
Aug 16, 2012 3:22 PM

Offline
Jul 2008
421
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. :)


Aug 17, 2012 7:54 AM

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

Offline
Jul 2008
421
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.


Aug 19, 2012 12:27 PM

Offline
Sep 2011
235
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?
Sep 27, 2012 12:08 PM

Offline
Aug 2012
2023
Thanks a lot for this!
I never go back on my words... that's my NINDO... MY NINJA WAY!!!
Visit my deviantART Gallery
Oct 11, 2012 2:22 AM

Offline
May 2008
3861
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?
Oct 11, 2012 5:30 AM

Offline
Aug 2012
2023
sayami said:
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?


Here's the solution:

http://myanimelist.net/forum/?topicid=442261
I never go back on my words... that's my NINDO... MY NINJA WAY!!!
Visit my deviantART Gallery
Oct 11, 2012 9:17 AM

Offline
May 2008
3861
^^Thanks a lot, it works :D
Oct 11, 2012 11:23 AM

Offline
Aug 2012
2023
sayami said:
^^Thanks a lot, it works :D


No problem :)
I never go back on my words... that's my NINDO... MY NINJA WAY!!!
Visit my deviantART Gallery
Oct 22, 2012 8:03 AM
Manga DB Admin
Offline
Aug 2012
2476
This is awesome, and looks easy to customize. Thanks for sharing it!


u531355 said:

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:


One question: While all the animes which doesnt have cover link in the css file shows the default no cover picture, "Another", "Kimi to Boku. 2" and "Kimi to Boku. 3" doesnt show any picture, its blank. It's no big deal but why is that happening?

Edit:
I noticed those 3 animes have a cover link, but those links aren't opening. I guess i will try to generate my own CSS to fix it some other time. Thanks for the great layout again.^^
JinbouOct 22, 2012 8:08 AM
Oct 23, 2012 3:35 AM

Offline
Apr 2011
358
Youjinbou said:
This is awesome, and looks easy to customize. Thanks for sharing it!


u531355 said:

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:


One question: While all the animes which doesnt have cover link in the css file shows the default no cover picture, "Another", "Kimi to Boku. 2" and "Kimi to Boku. 3" doesnt show any picture, its blank. It's no big deal but why is that happening?

Edit:
I noticed those 3 animes have a cover link, but those links aren't opening. I guess i will try to generate my own CSS to fix it some other time. Thanks for the great layout again.^^


I don't know how you write your CSS, but you can try this. I had the exact same problem, but if you follow this topic, it'll be solved. You can check my AnimeList for proof of showing the Another/Kimi to Boku 2 cover.
Courage is the magic that turns dreams into reality.

One of life's greatest blessings, is the freedom to pursue one's goals.

We are all walking through a wonderfull dream, a dream called youth.

The very key is needed to unlock the courage which resides in everyone.
Oct 23, 2012 5:23 AM
Manga DB Admin
Offline
Aug 2012
2476
Sudenri said:
Youjinbou said:
This is awesome, and looks easy to customize. Thanks for sharing it!


u531355 said:

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:


One question: While all the animes which doesnt have cover link in the css file shows the default no cover picture, "Another", "Kimi to Boku. 2" and "Kimi to Boku. 3" doesnt show any picture, its blank. It's no big deal but why is that happening?

Edit:
I noticed those 3 animes have a cover link, but those links aren't opening. I guess i will try to generate my own CSS to fix it some other time. Thanks for the great layout again.^^


I don't know how you write your CSS, but you can try this. I had the exact same problem, but if you follow this topic, it'll be solved. You can check my AnimeList for proof of showing the Another/Kimi to Boku 2 cover.


Uh i didnt know how i was going to write it actually. Worked like a charm, thanks^^
Oct 23, 2012 6:44 AM

Offline
Apr 2011
358
Youjinbou said:
Sudenri said:
Youjinbou said:
This is awesome, and looks easy to customize. Thanks for sharing it!


u531355 said:

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:


One question: While all the animes which doesnt have cover link in the css file shows the default no cover picture, "Another", "Kimi to Boku. 2" and "Kimi to Boku. 3" doesnt show any picture, its blank. It's no big deal but why is that happening?

Edit:
I noticed those 3 animes have a cover link, but those links aren't opening. I guess i will try to generate my own CSS to fix it some other time. Thanks for the great layout again.^^


I don't know how you write your CSS, but you can try this. I had the exact same problem, but if you follow this topic, it'll be solved. You can check my AnimeList for proof of showing the Another/Kimi to Boku 2 cover.


Uh i didnt know how i was going to write it actually. Worked like a charm, thanks^^


No prob ~
Courage is the magic that turns dreams into reality.

One of life's greatest blessings, is the freedom to pursue one's goals.

We are all walking through a wonderfull dream, a dream called youth.

The very key is needed to unlock the courage which resides in everyone.
Nov 5, 2012 1:57 AM
Offline
Jun 2011
2
I'm curious, is there any way that I can modify the style.css to get my DROPPED anime to show up at the bottom of my list? I reorganized the sections in the css that had those things listed so that my dropped would be at the end of all the lists

#list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
#list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
#list_surround > table:nth-of-type(n+4) ~ .header_ptw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_dropped + table {

(i'm not going to post the rest, but the example above shows what I mean. Coder should catch my drift)

It doesn't work to reorganize it, however. So I'm looking for a solution that may have to do with something else completely. I don't want anime that I've dropped to show up in the middle of my list. I want it on the bottom of the page...

Any help?
Nov 6, 2012 12:34 AM

Offline
Apr 2012
181
You can't reorganize the list this way.

What you did in CSS means only that all the headders had the properties that you specify between the brackets { }, not the order to show the table.

It is almost impossible to move a section to the bottom, as far as the list is not made fot things like that, 'cause all single row in the list is a separate table, so to move the entire Dropped section, you need to move all the tables instead and is not as simple as everyone wish...
Nov 6, 2012 12:48 AM
Offline
Jun 2011
2
That's unfortunate. But I appreciate the quick reply and direct answer. Thanks :)
Nov 30, 2012 4:55 AM
Offline
Feb 2012
4
may i ask a question? where do i put the picture of asuka in both sides? i tried it in many ways but it doesnt work.. plz help me
Nov 30, 2012 11:56 AM

Offline
Feb 2010
11292
SnailActive said:
may i ask a question? where do i put the picture of asuka in both sides? i tried it in many ways but it doesnt work.. plz help me


Try to add this to the top of your CSS:

@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/asuka/addon.css);
Nov 30, 2012 5:41 PM
Offline
Feb 2012
4
.... i tried to do as u saiid but it doesnt work either... anway this is my list style you can tell me where to put the url



/*
Square Layout
u531355 - 2012
*/

/* 1) Generated covers */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css);

/* 2) Base layout */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css);

/* 3) Top-bar icons */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css);

/* 4) Layout theme */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/theme.css);

/* 5) Addons -


/* 6) Options */
/* Determines the number of covers on each row, it should be a multiple of 242px */
body {max-width: 1452px;}

/* Header picture */
#inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/nge.jpg);}

/* Default picture when no cover is found */
.hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/nge.jpg);}

/* Links color */
a {color: ;}

body{
background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/asuka/addon.css)
}
Nov 30, 2012 6:03 PM
Manga DB Admin
Offline
Aug 2012
2476
Like Shishio-kun said, on top of CSS.

edit: Also, it works anyway but there should be a */ at the end of the line starting with "5) Addons", I think.

Like this;


I tried it on my list, it works for me.
JinbouNov 30, 2012 6:19 PM
Nov 30, 2012 6:37 PM
Offline
Feb 2012
4
ok...thx a lot
Dec 2, 2012 12:27 PM

Offline
Oct 2012
465
Thanks! I really liked it

But, i know i'm being lazy. But can someone resize this image for me to put as head picture? Because i'm trying but i can't:

http://imageshack.us/photo/my-images/7/wallpaperdeaththekidbyn.jpg/
Dec 9, 2012 12:02 PM

Offline
May 2012
1921
Is it possible to make the layout theme invisible or rather to influence the opacity of the layout? Like making the list see-through?
With layout theme I refer to the part in the code where you can choose between light or dark theme (so on), btw.
Dec 9, 2012 1:27 PM

Offline
Feb 2010
11292
SylakentH_ said:
Is it possible to make the layout theme invisible or rather to influence the opacity of the layout? Like making the list see-through?
With layout theme I refer to the part in the code where you can choose between light or dark theme (so on), btw.


You can try to add opacity codes to parts you want more see-through. Firebug add on makes it easier to test and find names of parts you want to add the code too.

not see thru (default setting)
opacity: 1;

half see thru
opacity: .5;

all see thru
opacity: .0;
Dec 23, 2012 7:37 AM
Offline
Sep 2012
219
I have some problem with this layout: It won´t work on my Manga list.

If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga.

How do I fix it?
Dec 23, 2012 10:31 AM

Offline
Feb 2010
11292
QueenCythia said:
I have some problem with this layout: It won´t work on my Manga list.

If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga.

How do I fix it?


You don't have any CSS on your manga list atm so its hard to identify what's wrong without seeing.

It sounds like you added the anime list to both lists or used the anime cover for the manga list. Try to add the manga style with manga covers CSS to the manga list separate.

If you don't know how to add the manga covers, look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css

Also you learn how to add manga list style CSS separately here:
http://myanimelist.net/forum/?topicid=485001
Dec 23, 2012 11:27 AM
Offline
Sep 2012
219
Shishio-kun said:
QueenCythia said:
I have some problem with this layout: It won´t work on my Manga list.

If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga.

How do I fix it?


You don't have any CSS on your manga list atm so its hard to identify what's wrong without seeing.

It sounds like you added the anime list to both lists or used the anime cover for the manga list. Try to add the manga style with manga covers CSS to the manga list separate.

If you don't know how to add the manga covers, look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css

Also you learn how to add manga list style CSS separately here:
http://myanimelist.net/forum/?topicid=485001


I changed it to the list style again so you can see what I mean.

When I add the style to my Manga list, Random pictures shows up that dosen´t have anything to do with the Manga. While my Anime list works fine?

(Sorry I´m rather confused about this...But I´m not that good with CCS codes)
Dec 23, 2012 11:53 AM

Offline
Feb 2010
11292
QueenCythia said:
Shishio-kun said:
QueenCythia said:
I have some problem with this layout: It won´t work on my Manga list.

If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga.

How do I fix it?


You don't have any CSS on your manga list atm so its hard to identify what's wrong without seeing.

It sounds like you added the anime list to both lists or used the anime cover for the manga list. Try to add the manga style with manga covers CSS to the manga list separate.

If you don't know how to add the manga covers, look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css

Also you learn how to add manga list style CSS separately here:
http://myanimelist.net/forum/?topicid=485001


I changed it to the list style again so you can see what I mean.

When I add the style to my Manga list, Random pictures shows up that dosen´t have anything to do with the Manga. While my Anime list works fine?

(Sorry I´m rather confused about this...But I´m not that good with CCS codes)


OK it looks like you're using the anime list CSS on the manga list. You can do that you just need to have the CSS you put on the manga list with a switched out code (see below). You do have- two different CSS edit boxes right- one for the anime list and one for the manga list?

In the manga list's CSS edit box you have to switch the part I told you about, go to the box where you put in the manga list code and look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css
Dec 23, 2012 12:01 PM
Offline
Sep 2012
219
Shishio-kun said:
QueenCythia said:
Shishio-kun said:
QueenCythia said:
I have some problem with this layout: It won´t work on my Manga list.

If I try to add the style, the right pictures won´t show, and random pictures is present instead. Like the Cover for Full Metal Panic shows up instead of the cover for a Shoujo Manga.

How do I fix it?


You don't have any CSS on your manga list atm so its hard to identify what's wrong without seeing.

It sounds like you added the anime list to both lists or used the anime cover for the manga list. Try to add the manga style with manga covers CSS to the manga list separate.

If you don't know how to add the manga covers, look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css

Also you learn how to add manga list style CSS separately here:
http://myanimelist.net/forum/?topicid=485001


I changed it to the list style again so you can see what I mean.

When I add the style to my Manga list, Random pictures shows up that dosen´t have anything to do with the Manga. While my Anime list works fine?

(Sorry I´m rather confused about this...But I´m not that good with CCS codes)


OK it looks like you're using the anime list CSS on the manga list. You can do that you just need to have the CSS you put on the manga list with a switched out code (see below). You do have- two different CSS edit boxes right- one for the anime list and one for the manga list?

In the manga list's CSS edit box you have to switch the part I told you about, go to the box where you put in the manga list code and look in the parenthesis under Generated Covers, replace whats in parenthesis with this
http://dl.dropbox.com/u/49469857/MAL/premade/manga.css


So many thanks! ^_^ Now it works!
Jan 10, 2013 6:31 PM

Offline
Jul 2007
6101
I was wondering when you are going to update your premade code beyond 4500 entries for the anime and manga lists. Or is their a way for us to do that manually? For the photo's that have the default pictures displayed instead of the correct images.



Jan 11, 2013 1:37 AM

Offline
Apr 2009
159
You can generate your own CSS file with all your personal entries with the following program:
http://myanimelist.net/forum/?topicid=436031

Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links.

But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons.
Jan 11, 2013 2:33 PM

Offline
Jul 2007
6101
u531355 said:
You can generate your own CSS file with all your personal entries with the following program:
http://myanimelist.net/forum/?topicid=436031

Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links.

But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons.


Thanks but the link to the generator is broken.

http://dl.dropbox.com/u/78340470/MALmoreCSSgenerator.zip

Also the one you have linked on that thread contains malicious file.

http://dl.dropbox.com/u/49469857/MAL/premade/MALmoreCSSgenerator.zip

I tired to use Hahaido's Generator since it alot user friendly, but i can't get it to work either. I followed the tutorial and i got an entire huge line of @more codes for my entire list that have been updated with the generator when i click on "Go"




I added these entries right after /* 1) Generated covers */

then the rest of the code for the square layout.

/* 2) Base layout */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css);

/* 3) Top-bar icons */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css);

/* 4) Layout theme */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/theme.css);

/* 5) Addons - Add as many as you want */

/* 6) Options */
/* Determines the number of covers on each row, it should be a multiple of 242px */
body {max-width: 1452px;}

/* Header picture */
#inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);}

/* Default picture when no cover is found */
.hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/seasons.jpg);}

/* Links color */
a {color: ;}

/* More infos on http://myanimelist.net/forum/?topicid=459189 */

I also tried using the dropbox installation to create a separate
@import compiled file, but when i installed the application i was confused exactly where to put the CSS entry files and how to compile them. All it shown was a folder that displayed but when i tried copying the CSS files nothing happened.


Something is definitively wrong, i am a noobie at this, its my first time. It doesn't display my list style at all so if you find out what problems i am having, that would be great, thanks!


In any case i returned my original CSS code with the square layout so my list does not looked all screwed up.
ArtimesGamerJan 11, 2013 3:44 PM



Jan 19, 2013 3:27 PM

Offline
Feb 2010
11292
link9us said:
u531355 said:
You can generate your own CSS file with all your personal entries with the following program:
http://myanimelist.net/forum/?topicid=436031

Also I see people having trouble with dead links in the premade code. It's because sometimes MAL changes the pictures of an entry and the old one is no longer available. I update this file from time to time (last update was the 24th of december) so that there is no more dead links.

But if you want you can update it yourself with the program. All you need to do is delete the 4 CSS files coming in the ZIP archive. It'll then regenerate all the CSS links from scratch and ensure there is no dead links. Otherwise if you generate your personal CSS it'll search for the links already existing in the other CSS files, for performance reasons.


Thanks but the link to the generator is broken.

http://dl.dropbox.com/u/78340470/MALmoreCSSgenerator.zip

Also the one you have linked on that thread contains malicious file.

http://dl.dropbox.com/u/49469857/MAL/premade/MALmoreCSSgenerator.zip

I tired to use Hahaido's Generator since it alot user friendly, but i can't get it to work either. I followed the tutorial and i got an entire huge line of @more codes for my entire list that have been updated with the generator when i click on "Go"




I added these entries right after /* 1) Generated covers */

then the rest of the code for the square layout.

/* 2) Base layout */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css);

/* 3) Top-bar icons */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css);

/* 4) Layout theme */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/theme.css);

/* 5) Addons - Add as many as you want */

/* 6) Options */
/* Determines the number of covers on each row, it should be a multiple of 242px */
body {max-width: 1452px;}

/* Header picture */
#inlineContent {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/headers/seasons.jpg);}

/* Default picture when no cover is found */
.hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/seasons.jpg);}

/* Links color */
a {color: ;}

/* More infos on http://myanimelist.net/forum/?topicid=459189 */

I also tried using the dropbox installation to create a separate
@import compiled file, but when i installed the application i was confused exactly where to put the CSS entry files and how to compile them. All it shown was a folder that displayed but when i tried copying the CSS files nothing happened.


Something is definitively wrong, i am a noobie at this, its my first time. It doesn't display my list style at all so if you find out what problems i am having, that would be great, thanks!


In any case i returned my original CSS code with the square layout so my list does not looked all screwed up.


You need to add the import link similar to this:
http://dl.dropbox.com/u/78340470/shishio-kun_anime.css

under the Generated Covers line and nothing else, or at the very top of the CSS. Making your own import CSS is an expert level tactic because so many ppl have trouble with it, so you just have to keep doing it till its right. You can use this tutorial to make your own cover CSS and import it, I've updated it for all the recent changes to Dropbox and this U5's generator. You should start with a new generator and begin from step 1 again.
http://myanimelist.net/forum/?topicid=443333&show=0#post1

I have a new link with the new generator too.
http://dl.dropbox.com/u/78340470/Past%20Stuff/MALmoreCSSgenerator.zip


btw if his link says malicious file, don't worry its just a misread. Browsers and virus programs read certain files (especially self extracting ones) as malicious but it doesn't mean they contain a virus from the site unknown to the uploader or something like that. If it says malicious file and the uploader or website are unknown, then its more likely there could be a problem but thats not the case here.
Jan 26, 2013 11:08 AM
Offline
Jan 2013
7
Is it posible to align the covers to the center because when its a smaller screen and it shows only 3 covers there will be empty space on the side because it could just barley not fit a 4th cover in there.

Example
Jan 26, 2013 1:47 PM

Offline
Feb 2010
11292
Fynov said:
Is it posible to align the covers to the center because when its a smaller screen and it shows only 3 covers there will be empty space on the side because it could just barley not fit a 4th cover in there.

Example


Try adding this at the bottom of the CSS edit box:

#list_surround {
margin: 526px 0 43px 105px !important;
width: 70% !important;
}


Let me know if it works for you, not sure since most of the CSS is imported.
Jan 26, 2013 2:33 PM
Offline
Jan 2013
7
Shishio-kun said:


Try adding this at the bottom of the CSS edit box:

#list_surround {
margin: 526px 0 43px 105px !important;
width: 70% !important;
}


Let me know if it works for you, not sure since most of the CSS is imported.


Nope, did not have the desired effect all it did was make the area for the cover smaller so it could only fit 2 per row and it still had the empty area. My biggest problem is i have 2 screens difrent sizes and i also want for it to always neatly fit no matter the screen size so i can't do it by just massing with the margins. I'm looking if there is a way to just align the covers to the center like there is with text-align, if there isn't i'm just gona have to deal with my ocd =)
Reply Disabled for Non-Club Members
Pages (7) [1] 2 3 » ... Last »

More topics from this board

» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )

Shishio-kun - Feb 3, 2012

158 by KeyiOs »»
Yesterday, 8:32 AM

» [MODERN - CSS] ⭐ Sailor Moon layout by 5cm

Shishio-kun - Sep 7, 2020

32 by Y3337 »»
Yesterday, 6:17 AM

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Jul 21, 2017

351 by claymorwan »»
Yesterday, 5:56 AM

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Apr 15, 2010

7808 by Gippy »»
Mar 25, 12:45 AM

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

Shishio-kun - Jul 15, 2019

16 by XxTHEncsEXPERTxX »»
Mar 12, 3:17 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login