Forum Settings
Forums
New
Feb 11, 2014 7:30 AM
#1

Offline
May 2012
1921
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
All CSS tutorials and add-ons

This design is intended for anime lists. To fix problems with covers try this Cover fixing topic.
For more list layouts you can check the Full list of Premade Layouts.


Info Box

This layout is optimized for Mozilla Firefox, cant guarantee if it works for any other browser.
The Pics implemented in this layout have mostly high resolutions so laggs are to be expected if you have a bad internet connection/ bad pc or a long list.

My tip:
Change your default settings to avoid laggs.
Check this link: http://myanimelist.net/editprofile.php?go=listpreferences
Change your default watching status to "Watching" for example

Also important for this list are the following settings:
http://i.imgur.com/cxy2swR.png


Hey guys,
this is another Haganai Layout and wanted to post it here so ppl can use it.
Make sure to read the Info box above.

Preview pics:

Overview:


Top bar(nvm the "add to list" pic I'll edit it... for sure)


Hover effect


Hover Preview


Code:




Thanks again to al_exs and UsakoMoon for inspiration and codes
Shishio-kunFeb 18, 2018 11:23 AM
Reply Disabled for Non-Club Members
May 3, 2015 10:07 AM
#2

Offline
Jan 2014
180
It`s awesome, but the link is dead.
May 3, 2015 11:17 AM
#3

Offline
May 2012
1921
ryu17v said:
It`s awesome, but the link is dead.


The link is not dead, you simply cant click on it. Copy and paste the link in the quotation marks for editing.
But for using the link to its full potential you need to copy and paste everything in the spoiler.

I'll edit the first post a bit, if you have any further problems just ask again
Feb 15, 2016 1:45 PM
#4

Offline
Feb 2016
15
Some images are dead, one of images is a pistol silencer now. Look my list http://myanimelist.net/animelist/HentaiNoKami
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Feb 15, 2016 3:29 PM
#5

Offline
May 2012
1921
HentaiNoKami said:
Some images are dead, one of images is a pistol silencer now. Look my list http://myanimelist.net/animelist/HentaiNoKami


Please try importing the code. If you're not importing the code, the layout will be displayed incorrectly.

Most errors should be fixed by this

Importing means copying just the following code (in the spoiler, everything)
Feb 15, 2016 4:00 PM
#6

Offline
Feb 2016
15
SylakentH said:
HentaiNoKami said:
Some images are dead, one of images is a pistol silencer now. Look my list http://myanimelist.net/animelist/HentaiNoKami


Please try importing the code. If you're not importing the code, the layout will be displayed incorrectly.

Most errors should be fixed by this

Importing means copying just the following code (in the spoiler, everything)
I know, i had that at first, some images were missing so tried the other way.
It's again imported. The missing images are in the hoovering menu. http://myanimelist.net/animelist/HentaiNoKami
HentaiNoKamiFeb 15, 2016 4:16 PM
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Feb 15, 2016 4:22 PM
#7

Offline
May 2012
1921
HentaiNoKami said:
SylakentH said:


Please try importing the code. If you're not importing the code, the layout will be displayed incorrectly.

Most errors should be fixed by this

Importing means copying just the following code (in the spoiler, everything)
I know, i had that at first, some images were missing so tried the other way.
It's again imported. The missing images are in the hoovering menu. http://myanimelist.net/animelist/HentaiNoKami


Oh do you mean the top bar? If yes, about a year ago MAL changed the code for their top menu iirc, I'll try to look into it in the next days. There shouldnt be much code to be fixed but let's see if I can collect my wits to fix this.
Feb 15, 2016 6:18 PM
#8

Offline
May 2012
1921
@HentaiNoKami I party fixed the code for the top bar. Two images and links were messed up so I got rid of these. The top bar is now less cluttered (thus less is being displayed sadly).

Tell me if this wasnt your problem!
Feb 16, 2016 10:29 AM
#9

Offline
Feb 2016
15
SylakentH said:
@HentaiNoKami I party fixed the code for the top bar. Two images and links were messed up so I got rid of these. The top bar is now less cluttered (thus less is being displayed sadly).

Tell me if this wasnt your problem!

It's ok now. Thanks.
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.
Mar 17, 2017 1:38 PM
Offline
Mar 2014
12
Thanks! I've been using this style since 2014, I'm specifically after the notes section cause I leave notes, as you may see

https://myanimelist.net/animelist/Obamu

Also, is it just me or my anime/manga covers are blank?
Mar 17, 2017 3:09 PM

Offline
Feb 2010
11293
Obamu said:
Thanks! I've been using this style since 2014, I'm specifically after the notes section cause I leave notes, as you may see

https://myanimelist.net/animelist/Obamu

Also, is it just me or my anime/manga covers are blank?


I see your covers. You still don't see them now?
Mar 17, 2017 3:52 PM

Offline
May 2012
1921
Obamu said:
Thanks! I've been using this style since 2014, I'm specifically after the notes section cause I leave notes, as you may see

https://myanimelist.net/animelist/Obamu

Also, is it just me or my anime/manga covers are blank?

I can also see your covers, do you still have this problem?
Mar 18, 2017 4:17 AM
Offline
Mar 2014
12
Shishio-kun said:


I see your covers. You still don't see them now?

SylakentH said:

I can also see your covers, do you still have this problem?


Still I don't.. https://snag.gy/e3AqhZ.jpg
Mar 18, 2017 7:00 AM

Offline
May 2012
1921
Obamu said:
Shishio-kun said:


I see your covers. You still don't see them now?

SylakentH said:

I can also see your covers, do you still have this problem?


Still I don't.. https://snag.gy/e3AqhZ.jpg


What browser are you using? If you're using Chrome and have your AdBlocker enabled you need to set an exception for the Myanimelist domain. The adblocker might block the imports from your animelist. Shishio and me can see your covers though
Mar 18, 2017 11:13 AM
Offline
Mar 2014
12
SylakentH said:
Obamu said:



Still I don't.. https://snag.gy/e3AqhZ.jpg


What browser are you using? If you're using Chrome and have your AdBlocker enabled you need to set an exception for the Myanimelist domain. The adblocker might block the imports from your animelist. Shishio and me can see your covers though


Firefox 52.0.1 64 bit

I had already animelist unblocked but to no avail, but that does not stop me from trying other stuff
Mar 19, 2017 2:18 PM

Offline
May 2012
1921
Obamu said:
SylakentH said:


What browser are you using? If you're using Chrome and have your AdBlocker enabled you need to set an exception for the Myanimelist domain. The adblocker might block the imports from your animelist. Shishio and me can see your covers though


Firefox 52.0.1 64 bit

I had already animelist unblocked but to no avail, but that does not stop me from trying other stuff


I'm really sorry for this inconvenience, however I dont know of any solution right now. Tbh this is the first time I've heard of someone having this kind of problem.

Adblock is a common problem but if you already installed an exception then there must be something affecting the import links to work. I mean for visitors the covers are being displayed. I cant help but think that something in your browser or even firewall settings is preventing you from seeing your own covers.

Either check it on your own or ask again in this thread, hopefully something works out for you https://myanimelist.net/forum/?topicid=200323&show=4400
Mar 20, 2017 8:58 AM

Offline
Feb 2015
123
SylakentH said:
Obamu said:


Firefox 52.0.1 64 bit

I had already animelist unblocked but to no avail, but that does not stop me from trying other stuff


I'm really sorry for this inconvenience, however I dont know of any solution right now. Tbh this is the first time I've heard of someone having this kind of problem.

Adblock is a common problem but if you already installed an exception then there must be something affecting the import links to work. I mean for visitors the covers are being displayed. I cant help but think that something in your browser or even firewall settings is preventing you from seeing your own covers.

Either check it on your own or ask again in this thread, hopefully something works out for you https://myanimelist.net/forum/?topicid=200323&show=4400


@Obamu I could not see your covers either, so I had a look.

The problem comes from the place where you put the cover generator import link. For the moment it is located inside a Dropbox hosted file called "HaganaiChibiPublic.css". For it to work, you have to move it directly in the MAL form where you put your custom css (so just above the dropbox import link).

The way the generator works (afaik) is that when the import link is called, it receives the URL that is calling it (in this case your anime list address) and parses it to retrieve the type of list (anime or manga) and your username. Given these info, it can then generate the appropriate css containing the needed covers. It can't work the way it is right now, because the address it receives is the Dropbox link where it is located and not the MAL one.

I think this issue is going to be reported more often from now on, since more and more people are using the new generators we now have (thanks to our fellow developers). A simple way to detect it is to use the element inspector, then the CSS editor (the "{ }" tab on firefox, "Sources" on Chrome) and to open the generated css file. If it is mostly empty with a message such as "Argument is missing or invalid: list", then this means the import link is not correctly placed. We should also prevent it by stating directly in the installation tutorials that the cover import link should always be placed in the MAL form.
Mar 20, 2017 10:19 AM

Offline
May 2012
1921
@Cateinya thanks for checking this!

So basically, we need to exclude the cover links to the layouts from the actual CSS? Like you said, parsing the cover import link in the editing box just above the anime list CSS code. However why did it worked before just finely and why is it working for me and Shishio? I mean we can see the covers, most layouts included the cover links in their CSS file.

The new generators are using the same indicators and code as the old ones or am I wrong?

In any case, every user would need to fix this problem on their own since I as the dropbox link provider cant fix it on my own
Mar 20, 2017 11:47 AM

Offline
Feb 2015
123
SylakentH said:
@Cateinya thanks for checking this!

So basically, we need to exclude the cover links to the layouts from the actual CSS? Like you said, parsing the cover import link in the editing box just above the anime list CSS code. However why did it worked before just finely and why is it working for me and Shishio? I mean we can see the covers, most layouts included the cover links in their CSS file.

The new generators are using the same indicators and code as the old ones or am I wrong?

In any case, every user would need to fix this problem on their own since I as the dropbox link provider cant fix it on my own

Are you using Chrome? I mainly use Firefox, but for programming purposes I also have Chrome installed, and I found out that the cover generator works fine as it is right now (inside the Dropbox file).

I had a look at malcat source code and it is indeed parsing the calling URL. So the problem should only come from the browsers.

Below is a screenshot of the page loaded in the two browsers (Chrome on the left, Firefox on the right):

As you can see, Chrome is displaying the covers, whereas Firefox isn't.

Using the inspector in both browsers I looked at the requests sent to the generator. If you look at the "referrer" line (the "calling address" mentioned above), you can see that Chrome is using the "root" URL (the page which is loading) whereas Firefox is only using the direct parent (the Dropbox file where the link is). I think this is the reason why it won't work (unless you can see the covers using Firefox). I don't know why Firefox behave differently though. It may be a different policy or something internal, I have no clue...

So the fix I mentioned (moving the link out of the CSS) should do the trick, and it should still work with Chrome.

For Blink and Genku, you need to provide your username and list type (if I remember correctly).
Fellow Writer and Mal-tool need them as well in their URL:
@import url(https://mal-fellow-writer.appspot.com/type/username/?parameters);
@import url(https://mal-image.appspot.com/anime/BurntJelly/?code=.....)
But for Malgen and Malcat, they are not needed because they use the calling URL (you can still add them in the generator URL)

Of course every user will have to fix it on their own (like every time there is a change in something like Dropbox of Google did. What I meant is to also add a warning on the layout tutorials for the new users who want to install the layouts.
Mar 20, 2017 12:36 PM

Offline
May 2012
1921
@Cateinya I see, so it's the difference of browsers. I'll try to add this in my FAQ in my layout thread, hardly anyone will read and try it though sadly. User will just install the layout and notice that there are no covers and install another one or just go for modern layouts
Mar 20, 2017 1:36 PM

Offline
Feb 2015
123
@SylakentH In this case, it won't work for the modern ones either.

@Shishio-kun Could you please add this warning in the most appropriate places? (I'm thinking about the cover generator list topic, the general cover topic, maybe the FAQ as well, and any place where you think it should appear...)
Mar 20, 2017 8:30 PM

Offline
Feb 2010
11293
Cateinya said:
@SylakentH In this case, it won't work for the modern ones either.

@Shishio-kun Could you please add this warning in the most appropriate places? (I'm thinking about the cover generator list topic, the general cover topic, maybe the FAQ as well, and any place where you think it should appear...)


What warning exactly needs to be added? I don't understand what you guys are discussing sorry
Mar 20, 2017 8:56 PM

Offline
Nov 2009
1632
Shishio-kun said:
Cateinya said:
@SylakentH In this case, it won't work for the modern ones either.

@Shishio-kun Could you please add this warning in the most appropriate places? (I'm thinking about the cover generator list topic, the general cover topic, maybe the FAQ as well, and any place where you think it should appear...)


What warning exactly needs to be added? I don't understand what you guys are discussing sorry


I ran into the same problem, basically Firefox browser doesn't read the cover generator which is placed inside the dropbox link for whatever reason, while other browsers can.

So if you want the cover generator to work on Firefox, you have to put the code directly in the MAL's css editor.
Mar 20, 2017 10:13 PM

Offline
Feb 2010
11293
Takana_no_Hana said:
Shishio-kun said:


What warning exactly needs to be added? I don't understand what you guys are discussing sorry


I ran into the same problem, basically Firefox browser doesn't read the cover generator which is placed inside the dropbox link for whatever reason, while other browsers can.

So if you want the cover generator to work on Firefox, you have to put the code directly in the MAL's css editor.


I see what you mean now, it's the layouts that are straight-up Dropbox links.
Shishio-kunMar 20, 2017 10:27 PM
Mar 20, 2017 10:26 PM

Offline
Feb 2010
11293
@sylakentH:
I think a simple solution is just to add
@import "https://malcat-gen.appspot.com/series?preset=more";
to the top of the CSS for these one-link layouts. I can mass message this out next week.

I edited your post and added that to this code here. I'll try to remember to look through your other layouts and add it if you don't later
Mar 21, 2017 2:34 AM

Offline
May 2012
1921
Shishio-kun said:
@sylakentH:
I think a simple solution is just to add
@import "https://malcat-gen.appspot.com/series?preset=more";
to the top of the CSS for these one-link layouts. I can mass message this out next week.

I edited your post and added that to this code here. I'll try to remember to look through your other layouts and add it if you don't later


Thanks for doing this, this might be an easy solution.
Mar 25, 2017 11:19 AM
Offline
Mar 2014
12
Thanks guys! it all looks good now, and a practical looking list, I prefer, what do you call this? classic? cause I always use ctrl+F to find and update an anime, so it will find all the page,

Contrary to the recommended settings, I have more ticked on than what's recommended, I have "Default Status Selected" at "Show All" since 2014, and it never occurred to me that it's slow. only here that I know that Oh it can go a bit faster? anyway, since "Currently Watching" it always at the top, it doesn't bother me if it ever loads a little slow.

If ever one day, Modern styles will get a search function, I may try that, for now, it can't beat the search function I use for classic styles, cause I use tags on what I want to watch.

Now I just need to know how to change background

https://myanimelist.net/animelist/Obamu
Mar 31, 2017 3:33 AM

Offline
May 2012
1921
Obamu said:
Thanks guys! it all looks good now, and a practical looking list, I prefer, what do you call this? classic? cause I always use ctrl+F to find and update an anime, so it will find all the page,

Contrary to the recommended settings, I have more ticked on than what's recommended, I have "Default Status Selected" at "Show All" since 2014, and it never occurred to me that it's slow. only here that I know that Oh it can go a bit faster? anyway, since "Currently Watching" it always at the top, it doesn't bother me if it ever loads a little slow.

If ever one day, Modern styles will get a search function, I may try that, for now, it can't beat the search function I use for classic styles, cause I use tags on what I want to watch.

Now I just need to know how to change background

https://myanimelist.net/animelist/Obamu


Yeah setting your list on Currently watching or something else always helps speeding up the loading time of the content.

Installed a modern layout once, but I rather stick to the classic layouts haha

If you want to change your background search for the code (almost at the top)
body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
   background-image: url("http://i.imgur.com/ZjJPpam.jpg"); // <-- this url needs to be replaced
    background-position: 0 83%;
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    cursor: url("http://i42.tinypic.com/dc3pdc.png") 1 2, auto;
    font-family: Autour One;
}


and replace the background-image url, however you need to download the code, edit the said line and upload the edited css code to your own dropbox. The layouts needs to be imported, you cannot paste the edited code in your MAL CSS editor. In the past there were display errors, not sure about today.

After uploading the code to your dropbox you just need to share the file and repalce the url to the file in your the MAL CSS editor. Sounds a bit difficult, if you encounter any problems let me know

Apr 3, 2017 9:00 AM
Offline
Mar 2014
12
SylakentH said:
Obamu said:
Thanks guys! it all looks good now, and a practical looking list, I prefer, what do you call this? classic? cause I always use ctrl+F to find and update an anime, so it will find all the page,

Contrary to the recommended settings, I have more ticked on than what's recommended, I have "Default Status Selected" at "Show All" since 2014, and it never occurred to me that it's slow. only here that I know that Oh it can go a bit faster? anyway, since "Currently Watching" it always at the top, it doesn't bother me if it ever loads a little slow.

If ever one day, Modern styles will get a search function, I may try that, for now, it can't beat the search function I use for classic styles, cause I use tags on what I want to watch.

Now I just need to know how to change background

https://myanimelist.net/animelist/Obamu


Yeah setting your list on Currently watching or something else always helps speeding up the loading time of the content.

Installed a modern layout once, but I rather stick to the classic layouts haha

If you want to change your background search for the code (almost at the top)
body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
   background-image: url("http://i.imgur.com/ZjJPpam.jpg"); // <-- this url needs to be replaced
    background-position: 0 83%;
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    cursor: url("http://i42.tinypic.com/dc3pdc.png") 1 2, auto;
    font-family: Autour One;
}


and replace the background-image url, however you need to download the code, edit the said line and upload the edited css code to your own dropbox. The layouts needs to be imported, you cannot paste the edited code in your MAL CSS editor. In the past there were display errors, not sure about today.

After uploading the code to your dropbox you just need to share the file and repalce the url to the file in your the MAL CSS editor. Sounds a bit difficult, if you encounter any problems let me know



THanks! also, I like putting dates, it kinda gives you a nostalgia that it's already like a year ago,
Nov 1, 2020 10:27 PM
Offline
Jan 2020
1
The Layout doesn't work for me, only the background pics are showing
Nov 1, 2020 11:19 PM

Offline
Feb 2010
11293
TheOmniMan said:
The Layout doesn't work for me, only the background pics are showing


It's classic CSS, so it has to be installed the old way. You have a Modern theme right now and the codes won't work on it.
https://myanimelist.net/forum/?topicid=419405#msg56132846
Reply Disabled for Non-Club Members

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

159 by RackOrRuin »»
2 hours ago

» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by Hahaido

Shishio-kun - Dec 27, 2015

8 by Valerio_Lyndon »»
Apr 12, 7:34 PM

» [CSS-MODERN] ⭐️ Takana_No_Hana's Layouts

Shishio-kun - Jun 5, 2021

6 by NemuSanjou »»
Apr 9, 7:21 PM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1204 by blickrella »»
Apr 9, 4:55 PM

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

Shishio-kun - Sep 7, 2020

34 by Y3337 »»
Mar 31, 11:45 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login