Forum Settings
Forums
Pages (5) [1] 2 3 » ... Last »
Must be a Club Member to Reply 
#1
Aug 18, 2016 9:55 AM

Offline
Joined: Feb 2015
Posts: 96
This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial.

If there are problems: install the latest version, or check the Repair Sticky for patches and updates (found here).

All premade modern layouts can be found in the gallery by clicking here.

Updated : New code version! This version contains a fix for the recent cover issue, and enable more customizations (cover size, render)


I created this layout in order to help me choose which anime to watch from my "plan to watch" list : hovering a cover displays various information such as the synopsis and the genres of the anime (see previews below), so I don't need to go on each anime's specific page to make my choice.


Preview




List settings


Before installing this layout, make sure that your settings are the same as follow, because otherwise the list won't work correctly (don't forget to save -> button "Submit" !). You can find your settings here : List settings




Installation guide (Beginner - without synopsis and genres)


Copy/paste the code in the spoiler below in the "Add Custom CSS" section of your selected theme. Make sure that both cover and background are set to "No" (see below). Don't forget to click on "Save" !



Source Code



Add synopsis and genre (Advanced)
This part has been moved here : Advanced part


FAQ
This part has been moved here : FAQ
Modified by Shishio-kun, Apr 6, 5:38 PM
 
#2
Aug 31, 2016 7:29 PM

Offline
Joined: Feb 2010
Posts: 5969
How to change the background






How to add a character





Modified by Shishio-kun, Sep 11, 2018 8:35 PM
 
#3
Sep 12, 2016 6:54 AM
Offline
Joined: May 2015
Posts: 7
Thanks for it. It's so beautiful and I like it, but one thing. In my MangaList doens't appear many covers. What can I do with this? Thanks for the help!
Modified by AnimalSpec, Sep 12, 2016 7:03 AM
 
#4
Sep 12, 2016 10:31 AM

Offline
Joined: Feb 2015
Posts: 96
AnimalSpec said:
Thanks for it. It's so beautiful and I like it, but one thing. In my MangaList doens't appear many covers. What can I do with this? Thanks for the help!


Do all covers not appearing correspond to mangas you recently added ? If so, you may need to wait a little until the whole server is udpated and your changes are saved (I don't know exactly how long, but the anime I added yesterday has its cover showing, so it should not take too long).
 
#5
Sep 12, 2016 11:01 AM
Offline
Joined: May 2015
Posts: 7
Cateinya said:
AnimalSpec said:
Thanks for it. It's so beautiful and I like it, but one thing. In my MangaList doens't appear many covers. What can I do with this? Thanks for the help!


Do all covers not appearing correspond to mangas you recently added ? If so, you may need to wait a little until the whole server is udpated and your changes are saved (I don't know exactly how long, but the anime I added yesterday has its cover showing, so it should not take too long).

Yes, I'm talking about all covers aren't appearing. For been more exact, the covers aren't appearing are the covers that correspond to mangas I added recently. Why I have to wait? When I was using the Classic, exactly a CSS with covers, I could update them when I want, using Blink in my dropbox folder. So I only can wait? I can't do anything? Thanks again.
 
#6
Sep 12, 2016 12:24 PM

Offline
Joined: Feb 2015
Posts: 96
AnimalSpec said:
Cateinya said:


Do all covers not appearing correspond to mangas you recently added ? If so, you may need to wait a little until the whole server is udpated and your changes are saved (I don't know exactly how long, but the anime I added yesterday has its cover showing, so it should not take too long).

Yes, I'm talking about all covers aren't appearing. For been more exact, the covers aren't appearing are the covers that correspond to mangas I added recently. Why I have to wait? When I was using the Classic, exactly a CSS with covers, I could update them when I want, using Blink in my dropbox folder. So I only can wait? I can't do anything? Thanks again.


Unfortunately Blink only works with the classic designs so you can't use it to generate covers for this design, and there isn't another easy generator like this which work on modern designs.

However, if you want to display your cover a lot faster after updating your list (there is still a delay after adding entries but it seems to update more frequently) you can do the following (there is some work to do, that's why I didn't use it in the tutorial) :

First you need to create a file in dropbox in which you have to paste this line inside :

.list-item .data.image a[href*="/&id/"]:before {background-image: url(&img);}


Then you have to replace the @import link at the start of the css by this one :

@import url(https://mal-fellow-writer.appspot.com/manga/AnimalSpec/?covers=***********);


Replace the *********** by the dropbox link to the file you just created, and save your changes.

This code generates you covers for your manga list only. The one for your anime list is :

@import url(https://mal-fellow-writer.appspot.com/anime/AnimalSpec/?covers=***********);

(with the same dropbox link)

Since you use this design for both your lists, and in order not to have conflicts between anime and manga covers, I suggest you to select different designs for your lists, like the picture below (don't forget to save)



Edit both themes, copy/paste the css code and replace the import by the corresponding line. Again don't forget to save !
 
#7
Sep 12, 2016 2:50 PM
Offline
Joined: May 2015
Posts: 7
Cateinya said:
AnimalSpec said:

Yes, I'm talking about all covers aren't appearing. For been more exact, the covers aren't appearing are the covers that correspond to mangas I added recently. Why I have to wait? When I was using the Classic, exactly a CSS with covers, I could update them when I want, using Blink in my dropbox folder. So I only can wait? I can't do anything? Thanks again.


Unfortunately Blink only works with the classic designs so you can't use it to generate covers for this design, and there isn't another easy generator like this which work on modern designs.

However, if you want to display your cover a lot faster after updating your list (there is still a delay after adding entries but it seems to update more frequently) you can do the following (there is some work to do, that's why I didn't use it in the tutorial) :

First you need to create a file in dropbox in which you have to paste this line inside :

.list-item .data.image a[href*="/&id/"]:before {background-image: url(&img);}


Then you have to replace the @import link at the start of the css by this one :

@import url(https://mal-fellow-writer.appspot.com/manga/AnimalSpec/?covers=***********);


Replace the *********** by the dropbox link to the file you just created, and save your changes.

This code generates you covers for your manga list only. The one for your anime list is :

@import url(https://mal-fellow-writer.appspot.com/anime/AnimalSpec/?covers=***********);

(with the same dropbox link)

Since you use this design for both your lists, and in order not to have conflicts between anime and manga covers, I suggest you to select different designs for your lists, like the picture below (don't forget to save)



Edit both themes, copy/paste the css code and replace the import by the corresponding line. Again don't forget to save !

Thanks you, but other thing. Why the mangalist covers need more time to update? I don't have this problem with the animelist covers. Thanks again!
 
#8
Sep 13, 2016 1:18 AM

Offline
Joined: Feb 2015
Posts: 96
AnimalSpec said:


I don't really know why, since I'm not the one who created this generator. Maybe you can ask directly to the creator here : [TOOLS] MAL-Image Automatic CSS Generator (by Syaoran3)
 
#9
Sep 21, 2016 1:22 PM

Offline
Joined: Feb 2015
Posts: 96
Advanced part moved here due to lack of space

Add synopsis and genre (Advanced)

This part is only for advanced users : you have to generate your own CSS.
Updated : New code available ! I added support for modern style, and it's now easier to use !

  1. Create a bookmark, and paste the code below on the location field.




  2. Then go to your anime page, and more precisely to your "All anime" category. Be careful to load all the page (scroll to the bottom until the loading button does not appear anymore).


  3. Open your bookmarks and click on the one you just created. A window covering all the screen will appear with a popup.
  4. Click on the "Ok" button of the popup, then click on the "start" button on the top-left corner. The generation begins. It may take some time if your list is long (it has a small delay between each generation in order not to flood the server). Just check that the processing number (next to the button is increasing regularly. If it does not increase, reload the page and reopen the bookmark.


  5. Wait until the buttons text is "Done (close)". Copy the text generated on the big section at the bottom of the window. This is your generated CSS.


  6. Save it somewhere (for example a text file on your desktop).

Now you can either add the generated CSS like this where indicated at the start of the layout code in the "Add Custom CSS" section (not recommended) or host it somewhere on the web and then import the file (just add the @import line before the layout code). To do the later, check this tutorial on how to host your CSS online : How to Import CSS easily with Dropbox (updated for 2014) (Don't forget to change the extension of the file hosted on Dropbox to ".css", otherwise it won't work!)

How to update your generated CSS

If you have made changes to your list (adding anime) or if the informations are no longer up-to-date, you can update the generated CSS easily by following step 2 to 6 (go to your list, start the generator and copy the generated CSS). Just before starting the generator, copy/paste the generated CSS you already have in the big section on the middle : it will update the CSS faster (only changing what is wrong and adding what is missing).

Special thanks to BurntJelly for his generator

Modified by Cateinya, Jan 22, 12:28 PM
 
Sep 21, 2016 1:23 PM

Offline
Joined: Feb 2015
Posts: 96
FAQ moved here due to lack of space

FAQ


The layout is broken / won't display.
First, make sure that the code you copied is complete, and you are using the latest version. Just forgetting one line can totally break it, and it won't work anymore.
Also, make sure that you have saved the changes you made in your list setting (you need to click on save for both the theme selection page and the theme customization page !).


When hovering the cover, then hovering the title, the white overlay isn't showing / some informations are missing / some informations are overlapping.
To work properly, this layout needs specific list settings (available in the "List Settings" section). Make sure that your list settings are the same as the picture and don't forget to save (button "submit").


The covers won't show at all.
Make sure the @import line at the start of the code you copied is https and not http. If it still won't show, maybe the cover generator is not working for the moment. Since I'm not the one who created this generator, you'll have more information on the corresponding topic, available here : [TOOLS] MAL-Image Automatic CSS Generator (by Syaoran3)


After adding an anime / manga, the cover won't show.
When you update your list, it can take some time for the modification to be saved everywhere. That's why there is a little delay before the cover is available (it seems it won't take more than 1 day).

 
Sep 27, 2016 3:15 AM
Offline
Joined: Apr 2012
Posts: 6
I love the look of this theme, but for some reason none of the anime I've watched is showing up at all :( It's like I haven't watched anything at all.



I could have sworn I followed all of the steps, any idea where I could have gone wrong?

EDIT: Nevermind, I fixed it! :) Turns out I didn't have any of the Modern check-boxes ticked off in my list settings. They used to be greyed out, but I guess they opened up once I chose new settings. Thanks!
Modified by MizukiTakashima, Sep 27, 2016 3:22 AM
 
Sep 27, 2016 3:32 AM

Offline
Joined: Feb 2015
Posts: 96
MizukiTakashima said:
I love the look of this theme, but for some reason none of the anime I've watched is showing up at all :( It's like I haven't watched anything at all.



I could have sworn I followed all of the steps, any idea where I could have gone wrong?

EDIT: Nevermind, I fixed it! :) Turns out I didn't have any of the Modern check-boxes ticked off in my list settings. They used to be greyed out, but I guess they opened up once I chose new settings. Thanks!


I've checked your list and saw nothing wrong with your installation, and your list is showing correctly for me.

Have you tried reloading the page ? And going to your animelist via the links on your profile or via the dropdown menu of the main page ? I know this can be stupid but for exemple searching a term (using filters) could result in no anime showing at all.

Also, what browser are you using ? Unfortunately, I didn't check the compatibility with all the existing browsers but it should display the list, or at least a warning saying that the list can't be displayed (which is not the case in your screenshot)
 
Sep 27, 2016 3:37 AM
Offline
Joined: Apr 2012
Posts: 6
Cateinya said:

I've checked your list and saw nothing wrong with your installation, and your list is showing correctly for me.

Have you tried reloading the page ? And going to your animelist via the links on your profile or via the dropdown menu of the main page ? I know this can be stupid but for exemple searching a term (using filters) could result in no anime showing at all.

Also, what browser are you using ? Unfortunately, I didn't check the compatibility with all the existing browsers but it should display the list, or at least a warning saying that the list can't be displayed (which is not the case in your screenshot)


I made an edit in my original post saying that I managed to fix it :) Turns out I didn't have everything check-marked in my list settings. The "Modern" stuff used to be greyed out, so I thought I just didn't have access to them. But when I changed to a modern theme, I suddenly did and didn't realize it until just a little while ago.

Thanks for helping anyway!
 
Oct 1, 2016 11:34 PM

Offline
Joined: Apr 2014
Posts: 1606
Hey, I love your list, it looks great and works perfectly.. Except for one small problem.
I love the idea of having the synopsis of the anime/manga, so I did all the steps to add the synopsis yet it's not showing up.
This is what I did for the anime list:
/* generated informations (copy your generated CSS below) */
@import "https://dl.dropboxusercontent.com/s/i2ypx1n8sq6muft/MyAnimeSynopsis.css";

This is what I did for the manga list:
/* generated informations (copy your generated CSS below) */
@import"https://dl.dropboxusercontent.com/s/a5b180wy606nxqd/MyMangaSynopsis.css";

Yet in both lists the synopsis isn't showing up, no matter how many times I reload the page.
((go join them))




deliveries here please
 
Oct 2, 2016 1:15 AM

Offline
Joined: Feb 2015
Posts: 96
estta said:
Hey, I love your list, it looks great and works perfectly.. Except for one small problem.
I love the idea of having the synopsis of the anime/manga, so I did all the steps to add the synopsis yet it's not showing up.
This is what I did for the anime list:
/* generated informations (copy your generated CSS below) */
@import "https://dl.dropboxusercontent.com/s/i2ypx1n8sq6muft/MyAnimeSynopsis.css";

This is what I did for the manga list:
/* generated informations (copy your generated CSS below) */
@import"https://dl.dropboxusercontent.com/s/a5b180wy606nxqd/MyMangaSynopsis.css";

Yet in both lists the synopsis isn't showing up, no matter how many times I reload the page.


The CSS code you import looks like this :
{\rtf1\ansi\ansicpg1252\cocoartf1404\cocoasubrtf470
{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fnil\fcharset134 PingFangSC-Regular;\f2\fnil\fcharset128 HiraginoSans-W3;
}
{\colortbl;\red255\green255\blue255;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* Generated by MAL List Tool http://burntjello.webs.com\
Template=/* [TITLE] *[DEL]/ #tags-[ID]:before \{content: "[TITLE]";\}  #tags-[ID]:after \{content:"[GENRES]";\} #tags-[ID] .tags-[ID]:after \{content: "[DESC]";\}\
MatchTemplate=#more[ID] \
...


These first lines (and the random \'s) are messing up the CSS code, that's why it doesn't show up. This is due to the file being saved in RTF format, which adds theses lines and additional \ in the file.

Here are the steps to remove this markup :
  1. open the file with the same text editor you used to save it. Normally you will not see this markup.
  2. copy the plain text and close the editor.
  3. open the file with notepad (you will normally see the markup in the file).
  4. replace the current messed up text by the one you copied and save.
 
Oct 3, 2016 10:09 AM

Offline
Joined: Apr 2014
Posts: 1606
Cateinya said:

Here are the steps to remove this markup :
  1. open the file with the same text editor you used to save it. Normally you will not see this markup.
  2. copy the plain text and close the editor.
  3. open the file with notepad (you will normally see the markup in the file).
  4. replace the current messed up text by the one you copied and save.


I opened the file with TextEdit (which is what I used to save it with), yet I can still see the markup.
I'm on a mac btw maybe that has something to do with it.
Should I re-generate the synopsis and save it using Atom (a Notepad++ alternative) ?
((go join them))




deliveries here please
 
Oct 3, 2016 10:31 AM

Offline
Joined: Feb 2015
Posts: 96
estta said:
Cateinya said:

Here are the steps to remove this markup :
  1. open the file with the same text editor you used to save it. Normally you will not see this markup.
  2. copy the plain text and close the editor.
  3. open the file with notepad (you will normally see the markup in the file).
  4. replace the current messed up text by the one you copied and save.


I opened the file with TextEdit (which is what I used to save it with), yet I can still see the markup.
I'm on a mac btw maybe that has something to do with it.
Should I re-generate the synopsis and save it using Atom (a Notepad++ alternative) ?


Maybe you can try these steps first if you are on Mac (I found it on the web but did not test it) :

  1. Launch TextEdit from within the /Applications/ directory and open a new blank document
  2. Paste the rich text you want converted to plain text into the blank document
  3. Pull down the “Format” menu and choose “Make Plain Text”, or just hit Command+Shift+T
  4. Click “OK” and then re-save the file into a txt document


Otherwise yes, you can re-generate the CSS (it should not take too long).
 
Oct 3, 2016 11:21 AM

Offline
Joined: Apr 2014
Posts: 1606
Cateinya said:


Maybe you can try these steps first if you are on Mac (I found it on the web but did not test it) :

  1. Launch TextEdit from within the /Applications/ directory and open a new blank document
  2. Paste the rich text you want converted to plain text into the blank document
  3. Pull down the “Format” menu and choose “Make Plain Text”, or just hit Command+Shift+T
  4. Click “OK” and then re-save the file into a txt document



That worked like a charm thank you so much for you help!
Modified by estta, Oct 3, 2016 11:24 AM
((go join them))




deliveries here please
 
Oct 3, 2016 11:39 AM

Offline
Joined: Feb 2015
Posts: 96
estta said:
Cateinya said:


Maybe you can try these steps first if you are on Mac (I found it on the web but did not test it) :

  1. Launch TextEdit from within the /Applications/ directory and open a new blank document
  2. Paste the rich text you want converted to plain text into the blank document
  3. Pull down the “Format” menu and choose “Make Plain Text”, or just hit Command+Shift+T
  4. Click “OK” and then re-save the file into a txt document



That worked like a charm thank you so much for you help!


You're welcome. I'm glad it works now =)
 
Oct 7, 2016 10:40 PM

Offline
Joined: Dec 2015
Posts: 274
I really like it I do but, I don't like the colors for doped or on hold. Anyway I can change droped shows to red and on hold ones to yellow?
 
Oct 8, 2016 1:43 AM

Offline
Joined: Feb 2015
Posts: 96
YugureShadowmore said:
I really like it I do but, I don't like the colors for doped or on hold. Anyway I can change droped shows to red and on hold ones to yellow?


Yes, you can. Find the following lines (~ l.626) in the CSS code :
/* ON-HOLD SECTION */

.data.status.onhold ~ .data:nth-of-type(n+5):first-letter,
.data.status.onhold ~ .data.score .link,
.data.status.onhold ~ .data.progress .link,
.data.status.onhold ~ .data.chapter .link,
.data.status.onhold ~ .data.volume .link {
	color: #FA882D !important; /* text and first letters */
	font-weight: bold;
}

.data.status.onhold ~ .data.title .link {
	background: #FA882D; /* background for the title */
	border-bottom: 15px solid #FA882D; /* same background */
}

.data.status.onhold ~ .data.title .link:before { /* small triangle on the left of the title background */
	border-bottom-color: #AB4C00;
	border-right-color: #AB4C00;
}

.data.status.onhold ~ .data.title .link:after { /* also a small triangle */
	border-right-color: #AB4C00;
	border-top-color: #AB4C00;
}

/* DROPPED SECTION */

.data.status.dropped ~ .data:nth-of-type(n+5):first-letter,
.data.status.dropped ~ .data.score .link,
.data.status.dropped ~ .data.progress .link,
.data.status.dropped ~ .data.chapter .link,
.data.status.dropped ~ .data.volume .link {
	color: #B48A3D !important;
	font-weight: bold;
}

.data.status.dropped ~ .data.title .link {
	background: #B48A3D;
	border-bottom: 15px solid #B48A3D;
}

.data.status.dropped ~ .data.title .link:before {
	border-bottom-color: #654203;
	border-right-color: #654203;
}

.data.status.dropped ~ .data.title .link:after {
	border-right-color: #654203;
	border-top-color: #654203;
}

and change the color, background, and borders attributes by another color. I added annotation in the previous code to help you know exactly what color you are changing.

I think it should remain a light color, to have a strong contrast with the dark background and text, but it can be the one you like. Concerning the small triangles, they should be of the same color but darker (to keep the same effect as the current one).
 
Oct 8, 2016 7:34 AM

Offline
Joined: Dec 2015
Posts: 274
Cateinya said:
YugureShadowmore said:
I really like it I do but, I don't like the colors for doped or on hold. Anyway I can change droped shows to red and on hold ones to yellow?


Yes, you can. Find the following lines (~ l.626) in the CSS code :
/* ON-HOLD SECTION */

.data.status.onhold ~ .data:nth-of-type(n+5):first-letter,
.data.status.onhold ~ .data.score .link,
.data.status.onhold ~ .data.progress .link,
.data.status.onhold ~ .data.chapter .link,
.data.status.onhold ~ .data.volume .link {
	color: #FA882D !important; /* text and first letters */
	font-weight: bold;
}

.data.status.onhold ~ .data.title .link {
	background: #FA882D; /* background for the title */
	border-bottom: 15px solid #FA882D; /* same background */
}

.data.status.onhold ~ .data.title .link:before { /* small triangle on the left of the title background */
	border-bottom-color: #AB4C00;
	border-right-color: #AB4C00;
}

.data.status.onhold ~ .data.title .link:after { /* also a small triangle */
	border-right-color: #AB4C00;
	border-top-color: #AB4C00;
}

/* DROPPED SECTION */

.data.status.dropped ~ .data:nth-of-type(n+5):first-letter,
.data.status.dropped ~ .data.score .link,
.data.status.dropped ~ .data.progress .link,
.data.status.dropped ~ .data.chapter .link,
.data.status.dropped ~ .data.volume .link {
	color: #B48A3D !important;
	font-weight: bold;
}

.data.status.dropped ~ .data.title .link {
	background: #B48A3D;
	border-bottom: 15px solid #B48A3D;
}

.data.status.dropped ~ .data.title .link:before {
	border-bottom-color: #654203;
	border-right-color: #654203;
}

.data.status.dropped ~ .data.title .link:after {
	border-right-color: #654203;
	border-top-color: #654203;
}

and change the color, background, and borders attributes by another color. I added annotation in the previous code to help you know exactly what color you are changing.

I think it should remain a light color, to have a strong contrast with the dark background and text, but it can be the one you like. Concerning the small triangles, they should be of the same color but darker (to keep the same effect as the current one).
Thank you. That is going to help quite a bit. :)
 
Oct 10, 2016 7:11 PM

Offline
Joined: Dec 2015
Posts: 274
I need help. Go ahea and check my list. I have Ghost Stories on it but there is no image for it. Please help.
 
Oct 11, 2016 3:16 AM

Offline
Joined: Feb 2015
Posts: 96
YugureShadowmore said:
I need help. Go ahea and check my list. I have Ghost Stories on it but there is no image for it. Please help.

I've checked your list and I can see the cover for the said anime. Does it correspond to an anime you added recently (less than one day ago) ? If yes, it is normal as there is a delay for the covers to be updated after you add an entry to your list, like I said in the FAQ :

Cateinya said:
After adding an anime / manga, the cover won't show.
When you update your list, it can take some time for the modification to be saved everywhere. That's why there is a little delay before the cover is available (it seems it won't take more than 1 day).



If you really can't stand the delay, and want to have your covers load more quickly (with still a little delay), you can try this, but I do not recommend this for people who are not familiar with CSS :

 
Oct 11, 2016 6:46 AM

Offline
Joined: Dec 2015
Posts: 274
sorry I did not read that part. My bad. The picture is there now.
 
Nov 12, 2016 1:06 AM
Offline
Joined: Jan 2016
Posts: 15
I followed your steps but my list shows nothing :

http://imgur.com/iZc40aW

Can you help me to fix it ?
 
Nov 12, 2016 2:27 AM

Offline
Joined: Feb 2015
Posts: 96
Pweenzor said:
I followed your steps but my list shows nothing :

http://imgur.com/iZc40aW

Can you help me to fix it ?

Make sure that you have the same settings checked as specified in the tutorial :

Cateinya said:
List settings


Before installing this layout, make sure that your settings are the same as follow, because otherwise the list won't work correctly (don't forget to save -> button "Submit" !). You can find your settings here : List settings




Someone had exactly the same problem and it turned out that some settings were not correctly checked.
 
Nov 12, 2016 2:37 AM
Offline
Joined: Jan 2016
Posts: 15
Cateinya said:
Pweenzor said:
I followed your steps but my list shows nothing :

http://imgur.com/iZc40aW

Can you help me to fix it ?

Make sure that you have the same settings checked as specified in the tutorial :

Cateinya said:


Someone had exactly the same problem and it turned out that some settings were not correctly checked.


i forgot to change the modern list settings, tanks !!
Now i just have to make some minor modifications :P
 
Nov 12, 2016 2:46 AM

Offline
Joined: Feb 2015
Posts: 96
@Pweenzor If you do not mind, can you tell me what modifications you want to make ? I noticed that there were some people that asked for the same modifications, so I plan to gather them all and write a customization tutorial soon.
 
Nov 12, 2016 6:34 AM
Offline
Joined: Jan 2016
Posts: 15
Cateinya said:
@Pweenzor If you do not mind, can you tell me what modifications you want to make ? I noticed that there were some people that asked for the same modifications, so I plan to gather them all and write a customization tutorial soon.


I want to :
- Always show the names (and maybe scores)
- Maybe add like a "+" button to show storage, start and finish dates, days, etc...
 
Nov 12, 2016 6:48 AM
Offline
Joined: Jan 2016
Posts: 15
@Cateinya And it seems there is no "+1" button
 
Nov 12, 2016 6:54 AM
Offline
Joined: Jan 2016
Posts: 15
@Cateinya It will be good to sort anime in "watching", "completed" category when we choose to see all the anime
 
Nov 12, 2016 11:36 AM

Offline
Joined: Feb 2015
Posts: 96
@Pweenzor The names and the +1 button are already planned in the tutorial.

I am also currently working on a tutorial to separate the different categories on the all anime page =)
 
Dec 10, 2016 5:41 AM

Offline
Joined: Feb 2016
Posts: 34
I'm confused on what to do for the synopsis part.

I don't know where to place the imported file, nor do I know what's wrong with the text if there even is something wrong with the text. ;-;

This is where I placed the imported text:

This is what my text file looks like:


I know it said for advanced users only, but how can anyone just do it halfway. It was messing with my head!

I was also wondering what I'd substitute here:


What I mean is... What would I put instead of fixed or no-repeat, etc.

And for the last thing!
Where do I edit the color for the text here:


I changed the background image and now I can't see my text due to the color.

I actually figured this one out somehow.


Sorry for asking so much
Modified by xMazzy, Dec 10, 2016 6:49 AM
“One ought to hold on to one's heart; for if one lets it go, one soon loses control of the head too.”
 
Dec 10, 2016 7:10 AM

Offline
Joined: Feb 2015
Posts: 96
@MazzySenpai I see nothing wrong with the generated code itself.

Is the imported file a ".txt" one ? If yes, try changing the extension of the file to ".css" and reimport it via dropbox. I think it should solve the issue.

Regarding the background code, here are the explanations :
  • background-color: it is a fallback for when the image can't be loaded or if it takes some time to load it because it is too big. You can leave it as it is or change to another color.
  • background-position: sets the position of the background inside the div (here the div covers the entire screen). By default, it is 0%, 0% : that means the image's top left corner will be put at the top left corner of the div. You can either set it with a keyword (top, bottom, left, right, center), with percentages, or even with direct values (in px, cm, etc.). Here I used center, so that the background is properly centered on the screen.
  • background-repeat: tells if the background should be repeated for example when scrolling. It can be set to repeat or no-repeat. Here I don't need it to be repeated because the background stays in the same place when scrolling, due to the fixed positon.
  • background-size: the size of the background. It can be cover (the background overflows in order to cover all the div), contain (the background is as big as possible without overflowing), or a defined size (in px or percentage for example)
  • content, left, top, height, width, position: used to create a div to display the background. Content creates the div, left and top sets the div to begin at the top left corner of the screen, height and width sets the div to be 100% of the screen's size. Position sets the type of position to use for the div : "fixed" means that the left, top, height and width properties will be based on the screen. It can also be set to absolute, so the background will stay at the top of the list when scrolling, and also to other non relevant values (but I assume you do not want this for a background)
  • filter: applies a transformation to the div (and thus to the background). There are many possible transformations, so I suggest you to look here where they are all listed with examples. I use it to make a blur effect to add a contrast between the list and the background.
  • will-change, z-index: will-change optimises the blurring effect, and z-index position the div under the rest of the content. I suggest you not to change them.
 
Dec 10, 2016 7:28 AM

Offline
Joined: Feb 2016
Posts: 34
Wow, that worked!
Also, thank you so much for the detailed description. I couldn't of asked for a better answer.

The tutorial was very helpful as well. I'm not even remotely familiar with any coding or even setting up MAL, So I'm surprised the only mistake I made was with the text document needing to be changed into a .css file.


Anyways, thank you so much for the help!
“One ought to hold on to one's heart; for if one lets it go, one soon loses control of the head too.”
 
Dec 10, 2016 7:40 AM

Offline
Joined: Feb 2015
Posts: 96
@MazzySenpai You're welcome =) I'm always open to feedback on my tutorials as it helps me improve them.
 
Dec 29, 2016 3:14 AM

Offline
Joined: Jan 2016
Posts: 11
Hey, awesome theme! I was just wondering if there was anyway to change the background wallpaper?
 
Dec 29, 2016 6:27 AM

Offline
Joined: Feb 2015
Posts: 96
VibesEdits said:
Hey, awesome theme! I was just wondering if there was anyway to change the background wallpaper?


In your code (~ l. 21), change the url link inside the parentheses by the one of the background you want. I marked below exactly which line you need to change:
/* BACKGROUND */

body:before {
	background-color: #9492C8;
	background-image: url(http://i.imgur.com/7JzFw1n.jpg); /* <----- here */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	...
}

You can also change the background-color displayed when the background has not loaded yet by changing the value of the previous line (background-color).
 
Dec 29, 2016 10:34 PM

Offline
Joined: Jan 2016
Posts: 11
I am looking to change the font colors as well for the text in the wheel pop ups. When I hover over my AVI at the top, the font is black but I would like to change it to white. Same goes for the settings wheel in the middle.
 
Dec 30, 2016 3:25 AM

Offline
Joined: Feb 2015
Posts: 96
VibesEdits said:
I am looking to change the font colors as well for the text in the wheel pop ups. When I hover over my AVI at the top, the font is black but I would like to change it to white. Same goes for the settings wheel in the middle.

You can change the font color by changing the color value (from "black" to "white" in your case) in the following lines in your code :

  • For the profile menu (rounded bar) (~ l. 197) :
    .list-menu-float .icon-menu .text {
    /* text display on button hover */
    	color: black; /* <----- here */
    	...
    }

  • For the category menu (semi-circular) (~ l. 343) :
    .status-menu .status-button:before {
    /* category text on hover */
    	bottom: -8.25em !important;
    	color: black; /* <----- here */
    	...
    }

 
Dec 30, 2016 3:36 AM

Offline
Joined: Jan 2016
Posts: 11
Cateinya said:
VibesEdits said:
I am looking to change the font colors as well for the text in the wheel pop ups. When I hover over my AVI at the top, the font is black but I would like to change it to white. Same goes for the settings wheel in the middle.

You can change the font color by changing the color value (from "black" to "white" in your case) in the following lines in your code :

  • For the profile menu (rounded bar) (~ l. 197) :
    .list-menu-float .icon-menu .text {
    /* text display on button hover */
    	color: black; /* <----- here */
    	...
    }

  • For the category menu (semi-circular) (~ l. 343) :
    .status-menu .status-button:before {
    /* category text on hover */
    	bottom: -8.25em !important;
    	color: black; /* <----- here */
    	...
    }

Thank you very much!
 
Jan 2, 2017 11:57 PM

Offline
Joined: Sep 2016
Posts: 3
Hello, I have a little problem with the synopsis, when I try to make the text, pops up an error
Go, Bird!
 
Jan 3, 2017 10:50 AM

Offline
Joined: Feb 2015
Posts: 96
uSourFox said:
Hello, I have a little problem with the synopsis, when I try to make the text, pops up an error

I checked the generation code with both firefox and chrome and it still work for me. I even tested it with your list and it works fine.

Can you tell me what browser you are using (and if possible its version) ? I can't think of anything else that could cause this problem...
 
Jan 3, 2017 12:16 PM

Offline
Joined: Dec 2015
Posts: 274
None of my images are showing up, what is going on?
 
Jan 3, 2017 12:35 PM

Offline
Joined: Feb 2015
Posts: 96
YugureShadowmore said:
None of my images are showing up, what is going on?
As you can see with this link, the cover generator used in the layout is currently down. I hope it will be back online soon, but since it's not mine, I can't assure it.

Until it is fixed, you can replace the import link by this one :
@import "https://malcat-gen.appspot.com/series?template=.list-item .data.image a[href*=\"/${id}/\"]:before {background-image: url(${series_image});}";
 
Jan 3, 2017 1:14 PM

Offline
Joined: Dec 2015
Posts: 274
Cateinya said:
YugureShadowmore said:
None of my images are showing up, what is going on?
As you can see with this link, the cover generator used in the layout is currently down. I hope it will be back online soon, but since it's not mine, I can't assure it.

Until it is fixed, you can replace the import link by this one :
@import "https://malcat-gen.appspot.com/series?template=.list-item .data.image a[href*=\"/${id}/\"]:before {background-image: url(${series_image});}";


Thank you. now where do I paste the ling you gave me.
 
Jan 3, 2017 1:44 PM

Offline
Joined: Dec 2015
Posts: 274
Cateinya said:
YugureShadowmore said:
None of my images are showing up, what is going on?
As you can see with this link, the cover generator used in the layout is currently down. I hope it will be back online soon, but since it's not mine, I can't assure it.

Until it is fixed, you can replace the import link by this one :
@import "https://malcat-gen.appspot.com/series?template=.list-item .data.image a[href*=\"/${id}/\"]:before {background-image: url(${series_image});}";
Now I don't have a background image. Wtf
 
Jan 3, 2017 2:44 PM

Offline
Joined: Dec 2015
Posts: 274
any updates on the image thing being fixed? I tried that link you gave me but it took away my background image
 
Jan 3, 2017 3:17 PM

Offline
Joined: Feb 2015
Posts: 96
YugureShadowmore said:
any updates on the image thing being fixed? I tried that link you gave me but it took away my background image

You need to keep all the code for the layout, but change the first import link (~ l. 10) by the new one. Below is a copy of the beginning of the code where I specified which line you need to replace.

/*
    Endless Summer Layout by Cateinya
	
	Thanks to Syaoran3 (covers) and BurntJelly (genres, synopsis) for their generators
*/

/* GENERATED STUFF */

/* generated cover */
@import "https://mal-image.appspot.com/auto/?code=.list-item%20.data.image%20a%5Bhref*%3D%22%2F%5BID%5D%2F%22%5D%3Abefore%20%7Bbackground-image%3A%20url(%5BIMG%5D)%3B%7D"; /* <----- this link */

/* generated informations (copy your generated CSS below) */

... (the rest of the code stays the same)
 
Top
Pages (5) [1] 2 3 » ... Last »