[CSS][Modern] ☀️ Endless Summer Layout by Cateinya

Offline

Feb 2015

123

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).

Sep 12, 2016 11:01 AM

AnimalSpec

Offline

May 2015

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!

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.

Sep 12, 2016 12:24 PM

Offline

Feb 2015

123

AnimalSpec said:

Cateinya said:

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 !

Sep 12, 2016 2:50 PM

AnimalSpec

Offline

May 2015

Cateinya said:

AnimalSpec said:

.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=***********);

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!

Sep 13, 2016 1:18 AM

Offline

Feb 2015

123

AnimalSpec said:

Cateinya said:

.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=***********);

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!

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)

Sep 21, 2016 1:22 PM

Offline

Feb 2015

123

Also see Valerio_Lyndon's full tutorial on adding synopsis:
https://myanimelist.net/forum/?topicid=1905478

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 (April 30, 2021) : New code available ! Thanks to Cry5talz and PurplishSocks for the fixes!

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

javascript: /* MyAnimeList Thumbnail CSS Generator and Tags updater by BurntJello http://burntjello.webs.com 2018-08-10 */
/* modify these to change your defaults */
CSS_TEMPLATE = '/* [TITLE] *[DEL]/ #tags-[ID]:before {content: "[TITLE]";}  #tags-[ID]:after {content:"[GENRES]";} #tags-[ID] .tags-[ID]:after {content: "[DESC]";}';
MATCH_TEMPLATE = "#tags-[ID]:";
DELAY = "500";
CHECK_EXISTING = false;
UPDATE_TAGS = false;
TAGS_ENGLISH_TITLE = false;
TAGS_SEASON = false;
TAGS_YEAR = false;
TAGS_STUDIO = false;
TAGS_GENRES = false;
TAGS_PRODUCERS = false;
TAGS_AIRED = false;
TAGS_SCORE = false;
TAGS_RANK = false;


/* CSS_TEMPLATE = "[ID] | [TITLE] | [ENGTITLE] | [IMGURL] | [GENRES] | [STUDIOS] | [PRODUCERS] | [SEASON] | [YEAR] | [RANK] | [SCORE] | [STARTDATE] | [ENDDATE] | [DESC]"; */

/* defines the start of certain sections on the anime page */
ENGLISH_START = "English:</span>";
SYN_START = "Synonyms:</span>";
GENRES_START = "Genres:</span>";
DESC_START = "Synopsis</h2>";
RANK_START = "Ranked:</span>";
SCORE_START = "\"ratingValue\">";

/* Anime page only */
STUDIOS_START = "Studios:</span>";
PRODUCERS_START = "Producers:</span>";
AIRED_START = "Aired:</span>";

/* Manga page only */
PUBLISHED_START = "Published:</span>";
AUTHORS_START = "Authors:</span>"; /* (To be added) */
SERIALIZATION_START = "Serialization:</span>"; /* (To be added) */

/* tool code */
moreIds = new Array();
modernStyle = (document.getElementById("list_surround")) ? false : true;

tempDiv = document.createElement("div");
document.body.appendChild(tempDiv);
tempDiv.style.position = "fixed";
tempDiv.style.left = "50px";
tempDiv.style.top = "50px";
tempDiv.style.bottom = "50px";
tempDiv.style.right = "50px";
tempDiv.style.backgroundColor = "#FFFFFF";
tempDiv.style.borderStyle = "solid";
tempDiv.style.zIndex = "99999";

thumbBtn = document.createElement("input");
tempDiv.appendChild(thumbBtn);
thumbBtn.type = "button";
thumbBtn.value = "Start";

statusText = document.createElement("span");
tempDiv.appendChild(statusText);
statusText.style.color = "#000000";

delay = document.createElement("input");
tempDiv.appendChild(delay);
delay.type = "text";
delay.value = DELAY;
delay.style.width = "50px";
delay.title = "Delay (ms) between requests to avoid spamming the server.";

matchTemplate = document.createElement("input");
tempDiv.appendChild(matchTemplate);
matchTemplate.type = "text";
matchTemplate.value = MATCH_TEMPLATE;
matchTemplate.title = "Line matching template.  Only matching on [ID] is not enough, include previous\/next characters to ensure the match is unique.";

template = document.createElement("input");
tempDiv.appendChild(template);
template.type = "text";
template.value = CSS_TEMPLATE;
template.style.width = "50%";
template.title = "CSS template.  Replacements are [ID], [IMGURL], [IMGURLT], [IMGURLV], [TITLE], [ENGTITLE], [GENRES], [STUDIOS], [PRODUCERS], [SEASON], [YEAR], [RANK], [SCORE], [STARTDATE], [ENDDATE], and [DESC]. ([DEL] will just be deleted)";

chkExistingLabel = document.createElement("span");
tempDiv.appendChild(chkExistingLabel);
chkExistingLabel.style.color = "#000000";
chkExistingLabel.appendChild(document.createTextNode(" Check Existing Images:"));

chkExisting = document.createElement("input");
tempDiv.appendChild(chkExisting);
chkExisting.type = "checkbox";
chkExisting.title = "Attempt to load all images, updating the url if it fails. There is a 5 second delay to allow images to load.  I do not recommend using this while adding new anime or updating tags!";
chkExisting.checked = CHECK_EXISTING;

exitBtn = document.createElement("input");
tempDiv.appendChild(exitBtn);
exitBtn.type = "button";
exitBtn.value = "Exit";

br1 = document.createElement("br");
tempDiv.appendChild(br1);

chkTags = document.createElement("input");
tempDiv.appendChild(chkTags);
chkTags.type = "checkbox";
chkTags.title = "Update Tags";
chkTags.checked = UPDATE_TAGS;

tagsLabel = document.createElement("span");
tempDiv.appendChild(tagsLabel);
tagsLabel.style.color = "#000000";
tagsLabel.appendChild(document.createTextNode("Update Tags:"));

chkEnglish = document.createElement("input");
tempDiv.appendChild(chkEnglish);
chkEnglish.type = "checkbox";
chkEnglish.title = "English title";
chkEnglish.checked = TAGS_ENGLISH_TITLE;

chkSeason = document.createElement("input");
tempDiv.appendChild(chkSeason);
chkSeason.type = "checkbox";
chkSeason.title = "Season";
chkSeason.checked = TAGS_SEASON;

chkYear = document.createElement("input");
tempDiv.appendChild(chkYear);
chkYear.type = "checkbox";
chkYear.title = "Year";
chkYear.checked = TAGS_YEAR;

chkStudio = document.createElement("input");
tempDiv.appendChild(chkStudio);
chkStudio.type = "checkbox";
chkStudio.title = "Studio";
chkStudio.checked = TAGS_STUDIO;

chkGenres = document.createElement("input");
tempDiv.appendChild(chkGenres);
chkGenres.type = "checkbox";
chkGenres.title = "Genres";
chkGenres.checked = TAGS_GENRES;

chkProducers = document.createElement("input");
tempDiv.appendChild(chkProducers);
chkProducers.type = "checkbox";
chkProducers.title = "Producers";
chkProducers.checked = TAGS_PRODUCERS;

chkAired = document.createElement("input");
tempDiv.appendChild(chkAired);
chkAired.type = "checkbox";
chkAired.title = "Aired";
chkAired.checked = TAGS_AIRED;

chkScore = document.createElement("input");
tempDiv.appendChild(chkScore);
chkScore.type = "checkbox";
chkScore.title = "Score";
chkScore.checked = TAGS_SCORE;

chkRank = document.createElement("input");
tempDiv.appendChild(chkRank);
chkRank.type = "checkbox";
chkRank.title = "Rank";
chkRank.checked = TAGS_RANK;

existing = document.createElement("textarea");
tempDiv.appendChild(existing);
existing.style.height = "30%";
existing.style.width = "95%";
existing.style.display = "block";
existing.title = "Copy existing thumbnail/description styles here.  The style for one anime ID must all be on the same line.";

result = document.createElement("textarea");
tempDiv.appendChild(result);
result.style.height = "50%";
result.style.width = "95%";
result.style.display = "block";
result.title = "Updated styles are written here.";
result.readOnly = "readonly";

errorCount = 0;
i = 0;
function ProcessNext()
{
	if(i < moreIds.length)
	{
		moreId = moreIds[i];
		
		try
		{
			animeManga = window.location.href.replace("https://myanimelist.net/", "").split("/")[0].replace("list", "");
			id = moreId.replace("more", "");
			url = "https://myanimelist.net/" + animeManga + "/" + id;

			request = new XMLHttpRequest();
			request.open("get", url, false);
			request.send(null);
			str = request.responseText;
			doc = new DOMParser().parseFromString(request.responseText, "text/html");
		
			/* tags */
			tags = new Array();
			if(chkTags.checked)
			{
				if(modernStyle)
				{
					tagEl = document.getElementsByClassName("tags-" + id);
					if(tagEl.length > 0)
					{
						tagEl = tagEl[0].children;
						for(j = 0; j< tagEl.length; j++) { tags.push(tagEl[j].getElementsByTagName("a")[0].textContent); }
					}
					else
					{
						alert('Tags are not shown on your list!\n\nPlease uncheck the "Update tags" box, or check the "Tags" box at https://myanimelist.net/editprofile.php?go=listpreferences and try again.');
					}
					
				}
				else
				{
					tagEl = document.getElementById("tagRow" + id);
					if(tagEl)
					{
						tags = tagEl.innerHTML.split(",");
					}
					else
					{
						alert('Tags are not shown on your list!\n\nPlease uncheck the "Update tags" box, or check the "Tags" box at https://myanimelist.net/editprofile.php?go=listpreferences and try again.');
					}
				}
			}
			tagsLength = tags.length;
			
			for(j = 0; j < tagsLength; j++)
			{
				tags[j] = tags[j].replace(/^\s+|\s+$/g, "");
			}
			
			/* english title */
			englishHtml = null;
			englishHtmlStartIndex = str.indexOf(ENGLISH_START);
			if(str.indexOf(ENGLISH_START) != -1)
			{
				englishHtmlStartIndex += ENGLISH_START.length;
				englishHtmlEndIndex = str.indexOf("</div>", englishHtmlStartIndex);
				englishHtml = str.substring(englishHtmlStartIndex, englishHtmlEndIndex);
				
				englishHtml = englishHtml.replace(/^\s+|\s+$/g, "").replace(/,/g, "");
				englishUpper = englishHtml.toUpperCase();
				for(k = 0; k < tagsLength; k++)
				{
					if(tags[k].length == 0 || tags[k].toUpperCase() == englishUpper)
					{
						tags.splice(k, 1);
						tagsLength--;
						k--;
					}
				}
			}
			
			/* synonyms */
			if(englishHtml == null)
			{
				synHtmlStartIndex = str.indexOf(SYN_START);
				if(str.indexOf(SYN_START) != -1)
				{
					synHtmlStartIndex += SYN_START.length;
					synHtmlEndIndex = str.indexOf("</div>", synHtmlStartIndex);
					synHtml = str.substring(synHtmlStartIndex, synHtmlEndIndex);
					synArr = synHtml.split(",");
					if(synArr.length > 0)
					{
						englishHtml = synArr[0].replace(/^\s+|\s+$/g, "");
						synUpper = englishHtml.toUpperCase();
						for(k = 0; k < tagsLength; k++)
						{
							if(tags[k].length == 0 || tags[k].toUpperCase() == synUpper)
							{
								tags.splice(k, 1);
								tagsLength--;
								k--;
							}
						}
					}
				}
			}
			
			/* date */
			season = null;
			year = null;
			DATE_START = ( animeManga == "anime" ) ? AIRED_START : PUBLISHED_START;
			dateHtmlStartIndex = str.indexOf(DATE_START) + DATE_START.length;
			if(str.indexOf(DATE_START) != -1)
			{
				dateHtmlEndIndex = str.indexOf("</div>", dateHtmlStartIndex);
				dateHtml = str.substring(dateHtmlStartIndex, dateHtmlEndIndex);
				dateArr = dateHtml.split(" to ");
				date1Arr = dateArr[0].split(",");
				if(date1Arr.length == 2)
				{
					season = null;
					if(date1Arr[0].indexOf("Jan") != -1 || date1Arr[0].indexOf("Feb") != -1 || date1Arr[0].indexOf("Mar") != -1)
					{
						season = "Winter";
					}
					if(date1Arr[0].indexOf("Apr") != -1 || date1Arr[0].indexOf("May") != -1 || date1Arr[0].indexOf("Jun") != -1)
					{
						season = "Spring";
					}
					if(date1Arr[0].indexOf("Jul") != -1 || date1Arr[0].indexOf("Aug") != -1 || date1Arr[0].indexOf("Sep") != -1)
					{
						season = "Summer";
					}
					if(date1Arr[0].indexOf("Oct") != -1 || date1Arr[0].indexOf("Nov") != -1 || date1Arr[0].indexOf("Dec") != -1)
					{
						season = "Fall";
					}
					year = date1Arr[1].replace(/^\s+|\s+$/g, "");
					for(k = 0; k < tagsLength; k++)
					{
						if(tags[k].length == 0 || tags[k].toUpperCase() == season.toUpperCase() || tags[k] == year)
						{
							tags.splice(k, 1);
							tagsLength--;
							k--;
						}
					}
				}
			}
			
			/* studio (anime) */
			studios = null;
			studiosHtmlStartIndex = str.indexOf(STUDIOS_START);
			if(str.indexOf(STUDIOS_START) != -1)
			{
				studiosHtmlStartIndex += STUDIOS_START.length;
				studiosHtmlEndIndex = str.indexOf("</div>", studiosHtmlStartIndex);
				studiosHtml = str.substring(studiosHtmlStartIndex, studiosHtmlEndIndex);
				
				studios = studiosHtml.split(",");
				studiosLength = studios.length;
				for(j = 0; j < studiosLength; j++)
				{
					g1 = studios[j].indexOf("\">") + 2;
					g2 = studios[j].indexOf("</a>");
					if(g2 == -1) { studios = null; break; }
					studios[j] = studios[j].substring(g1, g2).replace(/^\s+|\s+$/g, "");
					studioUpper = studios[j].toUpperCase();
					
					for(k = 0; k < tagsLength; k++)
					{
						if(tags[k].length == 0 || tags[k].toUpperCase() == studioUpper)
						{
							tags.splice(k, 1);
							tagsLength--;
							k--;
						}
					}
				}
			}
			
			/* producers (anime) */
			producers = null;
			producersHtmlStartIndex = str.indexOf(PRODUCERS_START);
			if(str.indexOf(PRODUCERS_START) != -1)
			{
				producersHtmlStartIndex += PRODUCERS_START.length;
				producersHtmlEndIndex = str.indexOf("</div>", producersHtmlStartIndex);
				producersHtml = str.substring(producersHtmlStartIndex, producersHtmlEndIndex);
	
				producers = producersHtml.split(",");
				producersLength = producers.length;
				for(j = 0; j < producersLength; j++)
				{
					if(producers[j].indexOf("<sup>") == -1)
					{
						g1 = producers[j].indexOf("\">") + 2;
						g2 = producers[j].indexOf("</a>");
						if(g2 == -1) { producers = null; break; }
						producers[j] = producers[j].substring(g1, g2).replace(/^\s+|\s+$/g, "");
						studioUpper = producers[j].toUpperCase();
						
						for(k = 0; k < tagsLength; k++)
						{
							if(tags[k].length == 0 || tags[k].toUpperCase() == studioUpper)
							{
								tags.splice(k, 1);
								tagsLength--;
								k--;
							}
						}
					}
					else
					{
						producers.splice(j, 1);
						producersLength--;
						j--;
					}
				}
			}
			
			/* genres */
			genres = null;
			genresHtmlStartIndex = str.indexOf(GENRES_START);
			if(str.indexOf(GENRES_START) != -1)
			{
				genresHtmlStartIndex += RANK_START.length;
				genresHtmlEndIndex = str.indexOf("</div>", genresHtmlStartIndex);
				genresHtml = str.substring(genresHtmlStartIndex, genresHtmlEndIndex);
				
				genres = genresHtml.split(",");
				genresLength = genres.length;
				for(j = 0; j < genresLength; j++)
				{
					genres[j] = genres[j].replace(/<span itemprop=\"genre\" style=\"display:\s?none\">/, "").replace("</span>", "");
					g1 = genres[j].indexOf("\">") + 2;
					g2 = genres[j].indexOf("</a>");
					if(g2 == -1) { genres = null; break; }
					genres[j] = genres[j].substring(g1, g2).replace(/^\s+|\s+$/g, "").replace(/,/g, "");
					
					for(k = 0; k < tagsLength; k++)
					{
						if(tags[k].length == 0 || tags[k].toUpperCase() == genres[j].toUpperCase())
						{
							tags.splice(k, 1);
							tagsLength--;
							k--;
						}
					}
				}
			}
			
			/* rank */
			rankHtmlStartIndex = str.indexOf(RANK_START);
			if(rankHtmlStartIndex != -1)
			{
				rankHtmlStartIndex += RANK_START.length;
				rankHtmlEndIndex = str.indexOf("<sup>", rankHtmlStartIndex);
				rankHtml = str.substring(rankHtmlStartIndex, rankHtmlEndIndex);
				rankHtml = rankHtml.replace(/^\s+|\s+$/g, "").replace("#", "");
			}
			
			/* score */
			scoreHtml = "";
			scoreHtmlStartIndex = str.indexOf(SCORE_START);
			if(scoreHtmlStartIndex != -1)
			{
				scoreHtmlStartIndex += SCORE_START.length;
				scoreHtmlEndIndex = str.indexOf("</span>", scoreHtmlStartIndex);
				scoreHtml = str.substring(scoreHtmlStartIndex, scoreHtmlEndIndex);
				scoreHtml = scoreHtml.replace(/^\s+|\s+$/g, "");
			}

			if(chkTags.checked)
			{
				if(englishHtml && chkEnglish.checked) { tags.push(englishHtml); }
				if(season && chkSeason.checked) { tags.push(season); }
				if(year && chkYear.checked) { tags.push(year); }
				if(studios && chkStudio.checked) { tags = tags.concat(studios); }
				if(producers && chkProducers.checked) { tags = tags.concat(producers); }
				if(genres && chkGenres.checked) { tags = tags.concat(genres); }
				if(chkAired.checked) { tags.push("Aired: " + dateArr[0].replace(/^\s+|\s+$/g, "") + (dateArr.length == 2 ? " to " + dateArr[1].replace(/^\s+|\s+$/g, "") : "")); }
				if(chkScore.checked) { tags.push("Score: " + scoreHtml); }
				if(chkRank.checked) { tags.push("Ranked: " + rankHtml); }
				
				newTagStr = tags.join(", ");
				
				request2 = new XMLHttpRequest();
				request2.open("post", "https://myanimelist.net/includes/ajax.inc.php?t=22&tags=" + encodeURIComponent(newTagStr), false);
				request2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
				request2.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				var csrf = $('meta[name="csrf_token"]').attr('content');
				request2.send("aid=" + id + "&csrf_token=" + csrf);
			}
			
			/* thumbs */
			img = $(doc).find("img[itemprop=\"image\"]")[0];
			imgUrl = img.src;
			imgUrlt = imgUrl.replace(".jpg", "t.jpg");
			imgUrlv = imgUrl.replace(".jpg", "v.jpg");
			
			altText = img.alt;
			
			/* Synopsis (description) */
			desc = $(doc).find("[itemprop=\"description\"]").text().replace(/\r\n/g, " ").replace(/\n/g, " ").replace(/\"/g, "\\\"").replace(/^\s+|\s+$/g, "");
			
			cssLine = template.value
				.replace(/\[DEL\]/g, "")
				.replace(/\[ID\]/g, id)
				.replace(/\[IMGURL\]/g, imgUrl)
				.replace(/\[IMGURLT\]/g, imgUrlt)
				.replace(/\[IMGURLV\]/g, imgUrlv)
				.replace(/\[TITLE\]/g, altText)
				.replace(/\[ENGTITLE\]/g, englishHtml ? englishHtml : altText)
				.replace(/\[GENRES\]/g, genres ? genres.join(", ") : "")
				.replace(/\[STUDIOS\]/g, studios ? studios.join(", ") : "")
				.replace(/\[PRODUCERS\]/g, producers ? producers.join(", ") : "")
				.replace(/\[SEASON\]/g, season)
				.replace(/\[YEAR\]/g, year)
				.replace(/\[RANK\]/g, rankHtml)
				.replace(/\[SCORE\]/g, scoreHtml)
				.replace(/\[STARTDATE\]/g, dateArr[0].replace(/^\s+|\s+$/g, ""))
				.replace(/\[ENDDATE\]/g, dateArr.length == 2 ? dateArr[1].replace(/^\s+|\s+$/g, "") : "")
				.replace(/\[DESC\]/g, desc);
			
			result.value += cssLine + "\n";
		}
		catch(e)
		{
			/*alert("error " + moreId + ":" + e);*/
			console.log("error " + moreId, e);
			errorCount++;
		}
		
		i++;
		
		statusText.innerHTML = "Processed " + i + " of " + moreIds.length;
		
		setTimeout(ProcessNext, delay.value);
	}
	else
	{
		thumbBtn.value = "Done (close)";
		thumbBtn.onclick = function()
		{
			document.body.removeChild(tempDiv);
			if(chkTags.checked)
			{
				alert("Refesh the page for tag updates to show.");
			}
			if(errorCount > 0)
			{
				alert(errorCount + " errors occurred while processing.  See console for details.\n\n'Some' udpates were probably successful.\nYou may need to rerun the tool to catch the rest (with updated CSS as input and after refreshing your list page).");
			}
		};
	}
}

function Process()
{
	imageLoadDelay = 0;
	exitBtn.disabled = "disabled";
	thumbBtn.value = "Stop";
	thumbBtn.onclick = function(){ moreIds = new Array();};
	
	result.value += "\/* Generated by MAL List Tool http://burntjello.webs.com\nTemplate=" + template.value.replace(/\*\//g, "*[DEL]/") + "\nMatchTemplate=" + matchTemplate.value + "\n*\/\n";
	
	if(modernStyle) { ids = $("tr.more-info").map(function () { return this.id.replace("more-", ""); } ).get() ; } else { ids = $("div.hide").map(function () { return this.id.replace("more", ""); } ).get() ; }
	
	idsLength = ids.length;
	for(k = 0; k < idsLength; k++)
	{
		indexOf = -1;
		oldLines = existing.value.split("\n");
		oldLinesCount = oldLines.length;
		for(j = 0; j < oldLinesCount; j++)
		{
			oldId = matchTemplate.value.replace(/\[ID\]/g, ids[k]);
			indexOf = oldLines[j].indexOf(oldId);
			if(indexOf != -1)
			{
				break;
			}
		}

		if(indexOf != -1)
		{
			if(chkExisting.checked)
			{
				imageLoadDelay = 5000;
				urlStart = oldLines[j].indexOf("http");
				urlEnd = oldLines[j].indexOf(".jpg", urlStart);
				imgUrl = oldLines[j].substring(urlStart, urlEnd + 4);
				tempImg = document.createElement("img");
				tempImg.oldLine = oldLines[j];
				tempImg.animeId = ids[k];
				tempImg.onload = function(imgLoadEvent)
				{
					/*console.log("imgLoadEvent(" + imgUrl + ")", imgLoadEvent.target.naturalHeight);*/
					result.value += imgLoadEvent.target.oldLine + "\n";
				};
				tempImg.onerror = function(imgErrorEvent)
				{
					/*console.log("imgErrorEvent(" + imgUrl + ")", imgErrorEvent);*/
					moreIds.push(imgErrorEvent.target.animeId);
				};
				tempImg.src = imgUrl;
			}
			else
			{
				result.value += oldLines[j] + "\n";
			}
		}
		else
		{
			moreIds.push(ids[k]);
		}
	}

	setTimeout(ProcessNext, imageLoadDelay);
}

thumbBtn.onclick = function() { Process(); };
exitBtn.onclick = function() { document.body.removeChild(tempDiv); };

function Start()
{
	alert("It's best to use 'All Anime' view.\n\nCopy existing styles to the textarea before starting.\n\nThis script will remove what is no longer needed, skip what already exists, and add the rest.\n\nThe input controls have tooltips, hover over them to see what they are for.");
}

Start();

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).
Open your bookmarks and click on the one you just created. A window covering all the screen will appear with a popup.
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.
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.
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

Shishio-kunJun 6, 2021 8:30 AM

Sep 21, 2016 1:23 PM

#10

Offline

Feb 2015

123

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

#11

Mizulyn

Offline

Apr 2012

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!

MizulynSep 27, 2016 3:22 AM

Sep 27, 2016 3:32 AM

#12

Offline

Feb 2015

123

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'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

#13

Mizulyn

Offline

Apr 2012

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

#14

removed-user

Offline

Jul 2018

564616

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.

Oct 2, 2016 1:15 AM

#15

Offline

Feb 2015

123

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 :

open the file with the same text editor you used to save it. Normally you will not see this markup.
copy the plain text and close the editor.
open the file with notepad (you will normally see the markup in the file).
replace the current messed up text by the one you copied and save.

Oct 3, 2016 10:09 AM

#16

removed-user

Offline

Jul 2018

564616

Cateinya said:

Here are the steps to remove this markup :

open the file with the same text editor you used to save it. Normally you will not see this markup.
copy the plain text and close the editor.
open the file with notepad (you will normally see the markup in the file).
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) ?

Oct 3, 2016 10:31 AM

#17

Offline

Feb 2015

123

estta said:

Cateinya said:

Here are the steps to remove this markup :

open the file with the same text editor you used to save it. Normally you will not see this markup.
copy the plain text and close the editor.
open the file with notepad (you will normally see the markup in the file).
replace the current messed up text by the one you copied and save.

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

Launch TextEdit from within the /Applications/ directory and open a new blank document
Paste the rich text you want converted to plain text into the blank document
Pull down the “Format” menu and choose “Make Plain Text”, or just hit Command+Shift+T
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

#18

removed-user

Offline

Jul 2018

564616

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) :

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

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

removed-userOct 3, 2016 11:24 AM

Oct 3, 2016 11:39 AM

#19

Offline

Feb 2015

123

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) :

Launch TextEdit from within the /Applications/ directory and open a new blank document
Paste the rich text you want converted to plain text into the blank document
Pull down the “Format” menu and choose “Make Plain Text”, or just hit Command+Shift+T
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

#20

Offline

Dec 2015

285

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

#21

Offline

Feb 2015

123

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

#22

Offline

Dec 2015

285

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;
}

Thank you. That is going to help quite a bit. :)

Oct 10, 2016 7:11 PM

#23

Offline

Dec 2015

285

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

#24

Offline

Feb 2015

123

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:

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

#25

Offline

Dec 2015

285

sorry I did not read that part. My bad. The picture is there now.

Nov 12, 2016 1:06 AM

#26

Offline

Jan 2016

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

#27

Offline

Feb 2015

123

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

#28

Offline

Jan 2016

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

#29

Offline

Feb 2015

123

@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

#30

Offline

Jan 2016

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

#31

Offline

Jan 2016

@Cateinya And it seems there is no "+1" button

Nov 12, 2016 6:54 AM

#32

Offline

Jan 2016

@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

#33

Offline

Feb 2015

123

@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

#34

xMazzy

Offline

Feb 2016

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

xMazzyDec 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

#35

Offline

Feb 2015

123

@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

#36

xMazzy

Offline

Feb 2016

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

#37

Offline

Feb 2015

123

@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

#38

Yoshino

Offline

Jan 2016

Hey, awesome theme! I was just wondering if there was anyway to change the background wallpaper?

Dec 29, 2016 6:27 AM

#39

Offline

Feb 2015

123

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

#40

Yoshino

Offline

Jan 2016

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

#41

Offline

Feb 2015

123

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

#42

Yoshino

Offline

Jan 2016

Cateinya said:

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

#43

uSourFox

Offline

Sep 2016

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

#44

Offline

Feb 2015

123

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

#45

Offline

Dec 2015

285

None of my images are showing up, what is going on?

Jan 3, 2017 12:35 PM

#46

Offline

Feb 2015

123

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

#47

Offline

Dec 2015

285

Cateinya said:

YugureShadowmore said:
None of my images are showing up, what is going on?

@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

#48

Offline

Dec 2015

285

Cateinya said:

YugureShadowmore said:
None of my images are showing up, what is going on?

@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

#49

Offline

Dec 2015

285

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

#50