MyAnimeList.net

Forums

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

[CSS] Square Layout

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

Offline
Joined: Apr 2009
Posts: 156
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


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.



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
Modified by Shishio-kun, 04-30-15, 4:06 PM
 
#2
07-03-12, 2:47 AM

Offline
Joined: Apr 2009
Posts: 156
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: 3073
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: 168
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: 3536
Wow, it looks really great, gonna try it for my anime list with slight modifications.
Tnx for sharing the code.
 
#7
07-13-12, 10:21 PM

Offline
Joined: Feb 2010
Posts: 3073
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: 261
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: 113
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: 191
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: 156
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: 300
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: 156
@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: 300
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: 261
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: 2011
Thanks a lot for this!
 
10-11-12, 2:22 AM

Offline
Joined: May 2008
Posts: 3977
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?
 
10-11-12, 5:30 AM

Offline
Joined: Aug 2012
Posts: 2011
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
 
10-11-12, 9:17 AM

Offline
Joined: May 2008
Posts: 3977
^^Thanks a lot, it works :D
 
10-11-12, 11:23 AM

Offline
Joined: Aug 2012
Posts: 2011
sayami said:
^^Thanks a lot, it works :D


No problem :)
 
10-22-12, 8:03 AM
Manga Moderator
Offline
Joined: Aug 2012
Posts: 2701
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.^^
Modified by Youjinbou, 10-22-12, 8:08 AM
 
10-23-12, 3:35 AM

Offline
Joined: Apr 2011
Posts: 742
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.
 
10-23-12, 5:23 AM
Manga Moderator
Offline
Joined: Aug 2012
Posts: 2701
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^^
 
10-23-12, 6:44 AM

Offline
Joined: Apr 2011
Posts: 742
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.
 
11-05-12, 1:57 AM

Offline
Joined: Jun 2011
Posts: 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?
 
11-06-12, 12:34 AM

Offline
Joined: Apr 2012
Posts: 168
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...
 
11-06-12, 12:48 AM

Offline
Joined: Jun 2011
Posts: 2
That's unfortunate. But I appreciate the quick reply and direct answer. Thanks :)
 
11-30-12, 4:55 AM

Offline
Joined: Feb 2012
Posts: 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
 
11-30-12, 11:56 AM

Offline
Joined: Feb 2010
Posts: 3073
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);
 
11-30-12, 5:41 PM

Offline
Joined: Feb 2012
Posts: 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)
}
 
11-30-12, 6:03 PM
Manga Moderator
Offline
Joined: Aug 2012
Posts: 2701
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.
Modified by Youjinbou, 11-30-12, 6:19 PM
 
11-30-12, 6:37 PM

Offline
Joined: Feb 2012
Posts: 4
ok...thx a lot
 
12-02-12, 12:27 PM

Offline
Joined: Oct 2012
Posts: 506
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/
 
12-09-12, 12:02 PM

Offline
Joined: May 2012
Posts: 1600
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.
 
12-09-12, 1:27 PM

Offline
Joined: Feb 2010
Posts: 3073
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;
 
12-23-12, 7:37 AM

Offline
Joined: Sep 2012
Posts: 357
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?
 
12-23-12, 10:31 AM

Offline
Joined: Feb 2010
Posts: 3073
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
 
12-23-12, 11:27 AM

Offline
Joined: Sep 2012
Posts: 357
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)
 
12-23-12, 11:53 AM

Offline
Joined: Feb 2010
Posts: 3073
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
 
12-23-12, 12:01 PM

Offline
Joined: Sep 2012
Posts: 357
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!
 
01-10-13, 6:31 PM

Offline
Joined: Jul 2007
Posts: 5829
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.
It is absolutely a sin to be an anime fan and not at least experience "Akira" once in your life time.



 
01-11-13, 1:37 AM

Offline
Joined: Apr 2009
Posts: 156
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.
 
01-11-13, 2:33 PM

Offline
Joined: Jul 2007
Posts: 5829
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.
Modified by link9us, 01-11-13, 3:44 PM
It is absolutely a sin to be an anime fan and not at least experience "Akira" once in your life time.



 
01-19-13, 3:27 PM

Offline
Joined: Feb 2010
Posts: 3073
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.
 
01-26-13, 11:08 AM

Offline
Joined: Jan 2013
Posts: 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
 
01-26-13, 1:47 PM

Offline
Joined: Feb 2010
Posts: 3073
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.
 
01-26-13, 2:33 PM

Offline
Joined: Jan 2013
Posts: 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 =)
 
Top
Pages (7) [1] 2 3 » ... Last »