❓ Ask for help here + See Frequently Asked Questions

Offline

Mar 2017

91

YugureShadowmore said:

Valerio_Lyndon said:

Ah, sorry. I meant like, are you using Firefox, Chrome, Internet Explorer, Edge, etcetera. The version would help too.
This looks like it has directions for most browsers, so I'll link it instead of giving directions for every single one. http://www.wikihow.com/Find-Your-Browser-Type-and-Version

Thank you, I am suing Chrome BTW. I don't know which version though. I will try to find out but that is not the kind of thing I understand so I may just be lost there

Ummm, if you're on a Mac like me then open google chrome, the in the top left corner of your screen you should see "Chrome" in bold. Click on it and select "About Google Chrome" and it will tell you what version.

For windows use this guide.

• Kitsu - Waifu:Lilly Satou •

Insert Useless Text Here

Are you a female, speak a language outside of english, and have a lot of built up anger? Then why not send me a hurtful message full of your burning hate for my existence. Leaving an english translation is optional, all hate is appreciated.

Jun 28, 2017 7:30 PM

#4502

Offline

Dec 2015

292

Valerio_Lyndon said:

YugureShadowmore said:

CSS Modern Endless Summer Layout

Ah, sorry. I meant like, are you using Firefox, Chrome, Internet Explorer, Edge, etcetera. The version would help too.

This looks like it has directions for most browsers, so I'll link it instead of giving directions for every single one. http://www.wikihow.com/Find-Your-Browser-Type-and-Version

59.0.3071.115 is the version I am on

Jun 28, 2017 7:30 PM

#4503

Offline

Dec 2015

292

Kohta_ said:

YugureShadowmore said:

Thank you, I am suing Chrome BTW. I don't know which version though. I will try to find out but that is not the kind of thing I understand so I may just be lost there

Ummm, if you're on a Mac like me then open google chrome, the in the top left corner of your screen you should see "Chrome" in bold. Click on it and select "About Google Chrome" and it will tell you what version.

For windows use this guide.

Got it thanks

Jun 28, 2017 8:38 PM

#4504

Offline

Feb 2010

12649

YugureShadowmore said:

Valerio_Lyndon said:

Ah, sorry. I meant like, are you using Firefox, Chrome, Internet Explorer, Edge, etcetera. The version would help too.

This looks like it has directions for most browsers, so I'll link it instead of giving directions for every single one. http://www.wikihow.com/Find-Your-Browser-Type-and-Version

59.0.3071.115 is the version I am on

Can you see my covers? If so, are they fuzzy or normal quality?

https://myanimelist.net/animelist/Shishio-kun?status=2

Jun 28, 2017 8:47 PM

#4505

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

YugureShadowmore said:

Valerio_Lyndon said:

Ah, sorry. I meant like, are you using Firefox, Chrome, Internet Explorer, Edge, etcetera. The version would help too.

This looks like it has directions for most browsers, so I'll link it instead of giving directions for every single one. http://www.wikihow.com/Find-Your-Browser-Type-and-Version

59.0.3071.115 is the version I am on

Okay, so I am running the same Chrome version so hopefully the testing I did is accurate.

The first thing I found that seems to work is switching generators to MalCat, so you would replace the current @import code with

@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

This would be my preferred method if it were my list as MalCat seems to have way fewer issues.

But after a bit further testing I found that if I add a username variable to the generator you are currently using, it seemed to work for me. Like so. (I tested with my username of course, not yours)

@import url("https://mal-image.appspot.com/auto/YugureShadowmore/?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 code also seemed to work without the wrapping url(), but I left it in since it seems to be better form. If it didn't work, maybe try removing the beginning url( and also removing the ending ).

Try these solutions, and see if either of them work. I'll probably try looking more into it if they don't, but if they don't I really have no idea what is going on at that point.

Jun 28, 2017 9:01 PM

#4506

Offline

Dec 2015

292

Shishio-kun said:

YugureShadowmore said:

59.0.3071.115 is the version I am on

Can you see my covers? If so, are they fuzzy or normal quality?

https://myanimelist.net/animelist/Shishio-kun?status=2

yea I can see yours fine

Jun 28, 2017 9:04 PM

#4507

Offline

Dec 2015

292

Valerio_Lyndon said:

YugureShadowmore said:

59.0.3071.115 is the version I am on

Okay, so I am running the same Chrome version so hopefully the testing I did is accurate.

The first thing I found that seems to work is switching generators to MalCat, so you would replace the current @import code with

@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

This would be my preferred method if it were my list as MalCat seems to have way fewer issues.

But after a bit further testing I found that if I add a username variable to the generator you are currently using, it seemed to work for me. Like so. (I tested with my username of course, not yours)

@import url("https://mal-image.appspot.com/auto/YugureShadowmore/?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 code also seemed to work without the wrapping url(), but I left it in since it seems to be better form. If it didn't work, maybe try removing the beginning url( and also removing the ending ).

Try these solutions, and see if either of them work. I'll probably try looking more into it if they don't, but if they don't I really have no idea what is going on at that point.

Thank worked perfectly thanks! :)

Jun 28, 2017 9:05 PM

#4508

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

YugureShadowmore said:

Valerio_Lyndon said:

Okay, so I am running the same Chrome version so hopefully the testing I did is accurate.

The first thing I found that seems to work is switching generators to MalCat, so you would replace the current @import code with

@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

This would be my preferred method if it were my list as MalCat seems to have way fewer issues.

But after a bit further testing I found that if I add a username variable to the generator you are currently using, it seemed to work for me. Like so. (I tested with my username of course, not yours)

@import url("https://mal-image.appspot.com/auto/YugureShadowmore/?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 code also seemed to work without the wrapping url(), but I left it in since it seems to be better form. If it didn't work, maybe try removing the beginning url( and also removing the ending ).

Try these solutions, and see if either of them work. I'll probably try looking more into it if they don't, but if they don't I really have no idea what is going on at that point.

Thank worked perfectly thanks! :)

Glad to hear!

Jun 28, 2017 9:53 PM

#4509

AiKimi

Offline

Jun 2017

4

I am almost done with my layout, only to realize that my status menu is messed up when the list is longer D: I spent some time messing around with position but can't seem to fix it :/ Any insight would be great!

Current Layout -MAL

Issue -

CSS -

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Bad+Script');

body{
background-color: #EDD1CD;
margin: 0 auto;
padding-top: 0;
border: none;
font-family: 'Josefin Sans', sans-serif;
}

/* Cover */

.cover-block {
position:relative;
display: block;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background-color: #EDD1CD;
}

.cover-block .image-container {
display: block;
padding-top: 0;
margin: 0 auto;
background-color: #EDD1CD;
}


a {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

a:hover {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

.header {
position: relative;
display: none;
width: 100%;
margin: 0 auto;
border:none;
}

.header_title {
background-color: #EDD1CD !important;
}

/* List Container */

.list-container {
position: relative;
background-color: #EDD1CD !important;
border:none !important;
left: 0;
right: 0;
width: 100%;
}

/* Status Title */

.list-unit .list-status-title {
border: none;
margin: 0 auto;
width: 800px;
background-color: #F0DDD9;
text-decoration: none !important;
text-align: center;
margin-right: 0;
margin-left: 0;
}

.list-unit .list-status-title .text {
margin: 0 auto;
border: none;
color: #F0DDD9;
visibility: hidden;
}

.list-unit .list-status-title .stats {
border: none;
}

.list-unit .list-status-title .stats a {
    color: #FFFFFF;
    font-size: 14px;
}

.list-unit .list-status-title .stats a.filterd {
    text-shadow: 0px 0px 5px #CC9FAD;
}

/* Status Menu */

.status-menu-container {
border: none;
margin: 0 auto;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
text-decoration: none !important;
}

.status-menu-container .status-menu {
  position: relative;
  text-align: center;
  margin-left: 40px;
}

#status-menu a {
color: #694D75;
padding: 0px;
margin: 0 auto;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

#status-menu a:hover {
color: #694D75;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

/* List Block */

.list-block {
margin: 0 auto;
border: 0 !important;
min-height:265px;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
background-color: #F0DDD9;
}

/* List Details */

.list-table .list-table-data{
border: 0 !important;
background-color: #F0DDD9;
font-size: 14px;
color: #A277B5;
} 

.list-unit {
border: none;
color: #A277B5;
width: 860px;
background-color: #F0DDD9;
}

footer {
position: relative;
width: 964px;
margin: 0 auto;
margin-top: -10px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
}

#footer-block {
position: relative;
height:40px !important;
margin: 0 auto;
width: 100%;
padding: 0;
background-color: transparent;
}

#copyright {
font-size: 12px;
color: #CC9FAD;
margin: 0 auto;
text-align: center;
vertical-align: center;
}

#copyright::after {
content: "Layout by Cuteholic"
}

.list-table .list-table-header .header-title {
display: table-cell;
text-align: center;
background-color: #E0C0CA;
color: #FFFFFF;
font-size: 14px;
}

.list-table .list-table-header .header-title .link {
color: #FFFFFF !important;
padding: 10px !important;
text-align: center;
font-size: 14px;
transition: all 0.2s ease 0s !important;
}

.list-table-data .title a.link.sort {
color: #A277B5 !important;
}

.status-button:after {
    display: none !important;
}

.list-unit .list-stats{
  width: 865px;
  background-color: transparent;
  color: #CC9FAD;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  border: 0 !important;
}

.list-table-data:hover td {
  background-color: rgba(234, 213, 213, 0.7) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
font-size: 14px !Important;
-moz-transition: .4s ease;
-webkit-transition: .4.5s ease;
-o-transition: .4s ease;
}

/* SEARCH */

.status-menu-container .search-container {
  position: fixed;
  top: 0px;
  right: 10px;
  color: #EDD1CD;
  background-color: #transparent;
  z-index: 99;
}

.status-menu-container .search-container #search-button {
  background-color: #EDD1CD;
  border: 0 !important;
}

input[type=text] {
  background-color: #F4E3E1;
  outline: none;
  color: #694D75;
  border: 0 !important;
  padding: 5px;
	border-radius: 30px;
}

/* Data rows */

.list-table tbody.list-item {
  border: 0 !important;
}

.list-table .list-table-data .data {
/* All data cells */
border: 0 !important;
}

.list-table .list-table-data .data.score {
/* Specific data cell */
background-color: transparent;
border: 0 !important;
}

.list-table .list-table-data .data.score a {
/* Specific data cell */
background-color: transparent;
color: #A277B5;
border: 0 !important;
}

.list-table .list-table-data .data.title .link:hover {
/* Anime titles */
}

.add-edit-more a {
/* Duh */
background-color: transparent;
border: 0 !important;
color: #A277B5;
}

.list-table .list-table-data .tags .edit {
  color: #A277B5 !important;
}

a.icon-add-episode{
  color: #D3C0C0;
}

.list-table {
  border: 0 !important;
  outline: none;
}

.list-table .list-table-data .data.status.completed {
  background-color: transparent;
}

.list-table .list-table-data .data.status.watching {
    background-color: transparent;
}

.list-table .list-table-data .data.status.onhold {
    background-color: transparent;
}

.list-table .list-table-data .data.status.dropped {
    background-color: transparent;
}

.list-table .list-table-data .data.status.plantowatch {
    background-color: transparent;
}

.icon-watch, .icon-watch-pv {
   visibility: hidden;
}

.list-table .list-table-data .data.image {
}

/* LIST MENU */

.list-menu-float {
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu {
/* All list menu buttons */
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu.anime-list {
/* Specific list menu button */
  background-color: transparent;
  border: 0 !importtant;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.quick-add svg.icon-quick-add  {
  fill: #694D75;
}

.list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.history svg.icon-history {
   fill: #694D75;
}

.list-menu-float .icon-menu.export svg.icon-export {
   fill: #694D75;
}

.list-menu-float .icon-menu.logout svg.icon-logout{
  fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting 
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu:not(.profile):hover {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu .text {
  color: #694D75;
  font-family: 'Josefin Sans', sans-serif !important;
}

AiKimiJun 28, 2017 10:00 PM

Jun 29, 2017 12:05 AM

#4510

*hug noises*

Offline

May 2013

32061

Yeah I seem to have more or less the same problem as YugureShadowmore above. Also in Chrome 59.0.3071.115 and none of the covers are showing up. I'm already using MalCat since previously though so Valerio's solution doesn't seem to work in my case. Help please :/

And yes I tried all the "quick solutions" as well as all the different default cover imports; neither worked

HaXXspettenJun 29, 2017 12:35 AM

Jun 29, 2017 12:43 AM

#4511

Offline

Feb 2010

12649

HaXXspetten said:
Yeah I seem to have more or less the same problem as YugureShadowmore above. Also in Chrome 59.0.3071.115 and none of the covers are showing up. I'm already using MalCat since previously though so Valerio's solution doesn't seem to work in my case. Help please :/

And yes I tried all the "quick solutions" as well as all the different default cover imports; neither worked

Do you see my covers?

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

Jun 29, 2017 12:46 AM

#4512

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:
@irenevanessa133

OK now that the layout is installed and you have the backgrounds go to this page

https://myanimelist.net/ownlist/style

And click on the theme that has the bubble shaded next to Anime. It will be only one of the themes. It will take you to a new page.

On that page, you should see stuff like this on the left
See the two places where I marked it "1"? Set those to YES

Click the CHOOSE FILE buttons. I marked both as "2". After you click them select the Hellsing background images when the new window pops up.

When you're done, you can click Save at the bottom marked "3". let me know when you are done here by quoting me. There are ways to readjust the size of the background, btw so don't worry if they are too big or small.

Oh I made a change, I changed the layout to Kimi no Na wa and I already added the cover and the background but the background doesn't show up :c

OK no problem, go to Imgur.com and upload the background wallpaper you want to there. It will give you a bunch of links. Just give me one of the links it gives you after you upload it to there. You don't need to make an account I think.

Jun 29, 2017 12:49 AM

#4513

*hug noises*

Offline

May 2013

32061

Shishio-kun said:

HaXXspetten said:
Yeah I seem to have more or less the same problem as YugureShadowmore above. Also in Chrome 59.0.3071.115 and none of the covers are showing up. I'm already using MalCat since previously though so Valerio's solution doesn't seem to work in my case. Help please :/

And yes I tried all the "quick solutions" as well as all the different default cover imports; neither worked

Do you see my covers?

Yes

Jun 29, 2017 12:54 AM

#4514

Offline

Feb 2010

12649

HaXXspetten said:

Shishio-kun said:

Do you see my covers?

Yes

wtf so weird. Well try this CSS for yourself then:

@import url(https://malcat-gen.appspot.com/series?preset=more);

/*
HOW TO USE
Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes:
http://myanimelist.net/forum/?topicid=200320

When you're done with the tutorial copy and paste this entire page of codes (including this part and the codes above and below)
to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box.
Save with the blue button at the bottom.

If the layout looks weird on your list after installing, you can try to alter your settings here.
Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards):
http://myanimelist.net/editprofile.php?go=listpreferences

If your list still has problems you can ask us about it here, or other questions:
http://myanimelist.net/forum/?topicid=200323

And you'll find further ways to customize your list here:
http://myanimelist.net/forum/?topicid=419405

*/

/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-attachment:fixed;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
font-family:calibri;
}

/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page.
*/

#inlineContent {
background: url(http://a.random-image.net/carlfox/magica.jpg) no-repeat scroll right bottom transparent;
background-size: contain ;
display: inline-block !important;
height: 100%;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !important;
}

/*
LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.

Google RGBA color generator for easy to copy color and opacity numbers customized for you.
*/

.td1 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color:transparent;
}

/*
MAGICA LOGO
Background-image is the Magica logo at page top. You can move it with background position.
*/

#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image: url(http://i.imgur.com/Hv5dW9P.png);
background-position: -50px -40px;
background-repeat:no-repeat no-repeat;
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:320px;
position:absolute;
right:-4px !important;
width:700px;
}

/*
SIDE BUTTONS
*/

#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i.imgur.com/ojkU8rm.png);
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid transparent;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
left:-300px;
padding:0;
position:absolute;
top:20px;
width:263px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/4wWEuxL.png);
background-position:100% 0;
top:140px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/LzttEaG.png);
background-position:0 0;
top:260px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/iqoaVc2.png);
background-position:100% 0;
top:380px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/h4KC6ei.png);
background-position:0 0;
top:500px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/g0BYNOB.png);
background-position:100% 0;
top:620px;
}

/*
CUSTOM HEADERS
*/

.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/mWK77Ng.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 25px;
margin-top: -100px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i.imgur.com/wF8MQkE.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 25px;
margin-top: -100px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i.imgur.com/ZWprtND.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 25px;
margin-top: -100px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i.imgur.com/3ve4Yod.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 25px;
margin-top: -100px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i.imgur.com/zRGEVZy.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 25px;
margin-top: -100px;
}

/*
TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel iteself.
*/

.table_header {
background-color: rgba(25, 225, 255, 0.4);
}

.table_header, .table_header a{
color: white;}

/*
LIST FONT COLOR
*/

.td1, .td2, .category_totals {
color:white;
}

/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout.
*/

a {
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
}
a:hover {
color:#fff;
text-decoration:underline;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
.category_totals {
background-color:rgba(255, 0, 255, 0.4);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:white;
text-align:center;
}
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
height:200px;
line-height:24px;
padding-bottom:4px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:transparent;
border:0 none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(180, 32, 48, 0.6);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
#copyright::after {
}

.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}

.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}

.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
#list_surround {
left:0 !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
}

.animetitle {
font-weight: bold;}

.animetitle + small {
color:#CC33FF !important;
font-weight:bold;
}

* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;}

.table_header:nth-last-of-type(2) {
border-radius: 0 10px 0 0;}

.td1:nth-of-type(6), .td2:nth-of-type(6){
background-color: transparent !important;
font-family: helvetica;}

td:nth-of-type(6) small {
font-size: 0;
color: cyan;
left: 42px;
position: relative;
}

td:nth-of-type(6) small:after {
font-size: 12px !important;
content: "Tags"
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 77% !important;
}

.animetitle {
padding-left: 5px;
}

}

/* Media query for devices above 1000px */
@media all and (min-device-width:1001px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -270px;}

#list_surround {
left: 24% !important;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;
padding-top: 8px;}

}

/* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -300px;}

#list_surround {
left: 17% !important;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;}

}

/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -290px;}

#list_surround {
left: 17% !important;
width: 850px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 530px !important;}

}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -330px;}

#list_surround {
left: 18% !important;
width: 900px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 575px !important;}

}

/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -385px;}

#list_surround {
left: 17% !important;
width: 960px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 635px !important;}

#list_surround {
background-position: center -40px;}

}

/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -430px;}

#list_surround {
left: 16% !important;
width: 1050px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 720px !important;}

}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {

#list_surround .status_selected, #list_surround .status_not_selected {
left: -530px;}

#list_surround {
left: 10% !important;
width: 1100px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 770px !important;}

Jun 29, 2017 12:57 AM

#4515

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

HaXXspetten said:
Yeah I seem to have more or less the same problem as YugureShadowmore above. Also in Chrome 59.0.3071.115 and none of the covers are showing up. I'm already using MalCat since previously though so Valerio's solution doesn't seem to work in my case. Help please :/

And yes I tried all the "quick solutions" as well as all the different default cover imports; neither worked

Took me a while to get to this thread, I was busy. Anyway, right now your imports are kinda a mess, no offense. But you have way too many, and a couple redundant ones. Right now it looks like this:

@import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaFixedMenu.css";
@import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css";
@import "https://dl.dropboxusercontent.com/u/6631567/MAL%20CSS/Anime%20CSS.css";
@import url(http://storage.live.com/items/4A07C1EEED420167%21151);
@import "https://malcat-gen.appspot.com/series?preset=more";
@import "https://malgen.tk/auto/";
@import url(https://malcat-gen.appspot.com/series?template=TEMPLATE);

I got it working by removing the unneeded quotes from the MalCat import code and I also removed the other generators that will do nothing but slow the page load.

@import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaFixedMenu.css";
@import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css";
@import "https://dl.dropboxusercontent.com/u/6631567/MAL%20CSS/Anime%20CSS.css";
@import url(http://storage.live.com/items/4A07C1EEED420167%21151);
@import url(https://malcat-gen.appspot.com/series?preset=more);

I'm not going to check the other imports that aren't generators, but you may want to make sure those aren't redudant either.

If this doesn't work, tell me and I can look further into it.

Jun 29, 2017 12:58 AM

#4516

*hug noises*

Offline

May 2013

32061

@Shishio-kun
Err yeah okay that works. Not sure what was different between that and what I already had though :/

@Valerio_Lyndon
Yeah I was messing around a bit with different imports I've used in the past as well as ones I found in the possible solution examples here to try and find what the source of the problem might be

Jun 29, 2017 1:22 AM

#4517

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

AiKimi said:
I am almost done with my layout, only to realize that my status menu is messed up when the list is longer D: I spent some time messing around with position but can't seem to fix it :/ Any insight would be great!

Current Layout -MAL

Issue -

CSS -

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Bad+Script');

body{
background-color: #EDD1CD;
margin: 0 auto;
padding-top: 0;
border: none;
font-family: 'Josefin Sans', sans-serif;
}

/* Cover */

.cover-block {
position:relative;
display: block;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background-color: #EDD1CD;
}

.cover-block .image-container {
display: block;
padding-top: 0;
margin: 0 auto;
background-color: #EDD1CD;
}


a {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

a:hover {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

.header {
position: relative;
display: none;
width: 100%;
margin: 0 auto;
border:none;
}

.header_title {
background-color: #EDD1CD !important;
}

/* List Container */

.list-container {
position: relative;
background-color: #EDD1CD !important;
border:none !important;
left: 0;
right: 0;
width: 100%;
}

/* Status Title */

.list-unit .list-status-title {
border: none;
margin: 0 auto;
width: 800px;
background-color: #F0DDD9;
text-decoration: none !important;
text-align: center;
margin-right: 0;
margin-left: 0;
}

.list-unit .list-status-title .text {
margin: 0 auto;
border: none;
color: #F0DDD9;
visibility: hidden;
}

.list-unit .list-status-title .stats {
border: none;
}

.list-unit .list-status-title .stats a {
    color: #FFFFFF;
    font-size: 14px;
}

.list-unit .list-status-title .stats a.filterd {
    text-shadow: 0px 0px 5px #CC9FAD;
}

/* Status Menu */

.status-menu-container {
border: none;
margin: 0 auto;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
text-decoration: none !important;
}

.status-menu-container .status-menu {
  position: relative;
  text-align: center;
  margin-left: 40px;
}

#status-menu a {
color: #694D75;
padding: 0px;
margin: 0 auto;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

#status-menu a:hover {
color: #694D75;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

/* List Block */

.list-block {
margin: 0 auto;
border: 0 !important;
min-height:265px;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
background-color: #F0DDD9;
}

/* List Details */

.list-table .list-table-data{
border: 0 !important;
background-color: #F0DDD9;
font-size: 14px;
color: #A277B5;
} 

.list-unit {
border: none;
color: #A277B5;
width: 860px;
background-color: #F0DDD9;
}

footer {
position: relative;
width: 964px;
margin: 0 auto;
margin-top: -10px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
}

#footer-block {
position: relative;
height:40px !important;
margin: 0 auto;
width: 100%;
padding: 0;
background-color: transparent;
}

#copyright {
font-size: 12px;
color: #CC9FAD;
margin: 0 auto;
text-align: center;
vertical-align: center;
}

#copyright::after {
content: "Layout by Cuteholic"
}

.list-table .list-table-header .header-title {
display: table-cell;
text-align: center;
background-color: #E0C0CA;
color: #FFFFFF;
font-size: 14px;
}

.list-table .list-table-header .header-title .link {
color: #FFFFFF !important;
padding: 10px !important;
text-align: center;
font-size: 14px;
transition: all 0.2s ease 0s !important;
}

.list-table-data .title a.link.sort {
color: #A277B5 !important;
}

.status-button:after {
    display: none !important;
}

.list-unit .list-stats{
  width: 865px;
  background-color: transparent;
  color: #CC9FAD;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  border: 0 !important;
}

.list-table-data:hover td {
  background-color: rgba(234, 213, 213, 0.7) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
font-size: 14px !Important;
-moz-transition: .4s ease;
-webkit-transition: .4.5s ease;
-o-transition: .4s ease;
}

/* SEARCH */

.status-menu-container .search-container {
  position: fixed;
  top: 0px;
  right: 10px;
  color: #EDD1CD;
  background-color: #transparent;
  z-index: 99;
}

.status-menu-container .search-container #search-button {
  background-color: #EDD1CD;
  border: 0 !important;
}

input[type=text] {
  background-color: #F4E3E1;
  outline: none;
  color: #694D75;
  border: 0 !important;
  padding: 5px;
	border-radius: 30px;
}

/* Data rows */

.list-table tbody.list-item {
  border: 0 !important;
}

.list-table .list-table-data .data {
/* All data cells */
border: 0 !important;
}

.list-table .list-table-data .data.score {
/* Specific data cell */
background-color: transparent;
border: 0 !important;
}

.list-table .list-table-data .data.score a {
/* Specific data cell */
background-color: transparent;
color: #A277B5;
border: 0 !important;
}

.list-table .list-table-data .data.title .link:hover {
/* Anime titles */
}

.add-edit-more a {
/* Duh */
background-color: transparent;
border: 0 !important;
color: #A277B5;
}

.list-table .list-table-data .tags .edit {
  color: #A277B5 !important;
}

a.icon-add-episode{
  color: #D3C0C0;
}

.list-table {
  border: 0 !important;
  outline: none;
}

.list-table .list-table-data .data.status.completed {
  background-color: transparent;
}

.list-table .list-table-data .data.status.watching {
    background-color: transparent;
}

.list-table .list-table-data .data.status.onhold {
    background-color: transparent;
}

.list-table .list-table-data .data.status.dropped {
    background-color: transparent;
}

.list-table .list-table-data .data.status.plantowatch {
    background-color: transparent;
}

.icon-watch, .icon-watch-pv {
   visibility: hidden;
}

.list-table .list-table-data .data.image {
}

/* LIST MENU */

.list-menu-float {
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu {
/* All list menu buttons */
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu.anime-list {
/* Specific list menu button */
  background-color: transparent;
  border: 0 !importtant;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.quick-add svg.icon-quick-add  {
  fill: #694D75;
}

.list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.history svg.icon-history {
   fill: #694D75;
}

.list-menu-float .icon-menu.export svg.icon-export {
   fill: #694D75;
}

.list-menu-float .icon-menu.logout svg.icon-logout{
  fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting 
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu:not(.profile):hover {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu .text {
  color: #694D75;
  font-family: 'Josefin Sans', sans-serif !important;
}

Okay, so your status menu is on the left of the screen because you set your list-container to 100% width. So the status menu is appearing at the top left of it. There are a couple ways we can fix this.

Also, on the topic of your status menu, your list gets bumped down the incorrect amount when the status menu becomes fixed. If you don't know what I mean, here's a video demonstrating it from another list that had this issue. It basically just means when scrolling it looks real jerky instead of smooth.

You can fix by adding this code:

.status-menu-container.fixed + div.list-block {
    margin-top: 46px;
}

The margin value just needs to be the same as the status menu height.

Valerio_LyndonJun 29, 2017 1:29 AM

Jun 29, 2017 1:22 AM

#4518

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

HaXXspetten said:
@Valerio_Lyndon
Yeah I was messing around a bit with different imports I've used in the past as well as ones I found in the possible solution examples here to try and find what the source of the problem might be

Alright, that brings me comfort, haha. Well good that it's fixed now.

Jun 29, 2017 1:22 AM

#4519

Offline

Feb 2010

12649

HaXXspetten said:
@Shishio-kun
Err yeah okay that works. Not sure what was different between that and what I already had though :/

@Valerio_Lyndon
Yeah I was messing around a bit with different imports I've used in the past as well as ones I found in the possible solution examples here to try and find what the source of the problem might be

There's a couple little differences with the import. btw can you please tell me if you see my covers on either list here? I'm trying to narrow down the problem a bit.

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

https://myanimelist.net/mangalist/Shishio-kun

Jun 29, 2017 1:28 AM

#4520

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Shishio-kun said:

HaXXspetten said:
@Shishio-kun
Err yeah okay that works. Not sure what was different between that and what I already had though :/

@Valerio_Lyndon
Yeah I was messing around a bit with different imports I've used in the past as well as ones I found in the possible solution examples here to try and find what the source of the problem might be

There's a couple little differences with the import. btw can you please tell me if you see my covers on either list here? I'm trying to narrow down the problem a bit.

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

https://myanimelist.net/mangalist/Shishio-kun

Those are both broken on my end. I am pretty sure using MalCat with url() and no quotes is the way to fix it most of the time. It doesn't appear to be working on your mangalist with that though, which I don't understand, but MalCat didn't work on my mangalist either when I was testing so that may be a different problem.

Jun 29, 2017 1:33 AM

#4521

*hug noises*

Offline

May 2013

32061

Shishio-kun said:

HaXXspetten said:
@Shishio-kun
Err yeah okay that works. Not sure what was different between that and what I already had though :/

@Valerio_Lyndon
Yeah I was messing around a bit with different imports I've used in the past as well as ones I found in the possible solution examples here to try and find what the source of the problem might be

There's a couple little differences with the import. btw can you please tell me if you see my covers on either list here? I'm trying to narrow down the problem a bit.

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

https://myanimelist.net/mangalist/Shishio-kun

I can see the first but not the second

Jun 29, 2017 1:33 AM

#4522

Offline

Feb 2010

12649

Valerio_Lyndon said:

Shishio-kun said:

There's a couple little differences with the import. btw can you please tell me if you see my covers on either list here? I'm trying to narrow down the problem a bit.

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

https://myanimelist.net/mangalist/Shishio-kun

Those are both broken on my end. I am pretty sure using MalCat with url() and no quotes is the way to fix it most of the time. It doesn't appear to be working on your mangalist with that though, which I don't understand, but MalCat didn't work on my mangalist either when I was testing so that may be a different problem.

How do they look now?

Jun 29, 2017 1:38 AM

#4523

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Shishio-kun said:

Valerio_Lyndon said:

Those are both broken on my end. I am pretty sure using MalCat with url() and no quotes is the way to fix it most of the time. It doesn't appear to be working on your mangalist with that though, which I don't understand, but MalCat didn't work on my mangalist either when I was testing so that may be a different problem.

How do they look now?

Both working perfectly.

Jun 29, 2017 1:38 AM

#4524

Offline

Mar 2017

91

Both are visible for me, using Google Chrome on the same version as Hax and Valerio.

• Kitsu - Waifu:Lilly Satou •

Insert Useless Text Here

Are you a female, speak a language outside of english, and have a lot of built up anger? Then why not send me a hurtful message full of your burning hate for my existence. Leaving an english translation is optional, all hate is appreciated.

Jun 29, 2017 1:44 AM

#4525

Offline

Feb 2010

12649

Valerio_Lyndon said:

Shishio-kun said:

How do they look now?

Both working perfectly.

Oh ok ty. Yeah the parenthesis fixes it but it looks like you can break that with a bad import. Can you look one last time please, that would verify if you can break it with a bad import:

https://myanimelist.net/animelist/Shishio-kun?status=2&tag=

https://myanimelist.net/mangalist/Shishio-kun

Jun 29, 2017 1:50 AM

#4526

Offline

Mar 2017

91

The images for the different anime series are missing for me now.

• Kitsu - Waifu:Lilly Satou •

Insert Useless Text Here

Are you a female, speak a language outside of english, and have a lot of built up anger? Then why not send me a hurtful message full of your burning hate for my existence. Leaving an english translation is optional, all hate is appreciated.

Jun 29, 2017 1:55 AM

#4527

Offline

Feb 2010

12649

Kohta_ said:
The images for the different anime series are missing for me now.

Ok thanks but is it broken on both lists or just the anime list?

Jun 29, 2017 2:00 AM

#4528

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Shishio-kun said:

Kohta_ said:
The images for the different anime series are missing for me now.

Ok thanks but is it broken on both lists or just the anime list?

Yup, both broken here. So it seems it's also a problem if you have other broken imports too? Good to know...

Jun 29, 2017 2:00 AM

#4529

Offline

Mar 2017

91

Both links were missing the images for the anime series, but the rest of it was there.

• Kitsu - Waifu:Lilly Satou •

Insert Useless Text Here

Are you a female, speak a language outside of english, and have a lot of built up anger? Then why not send me a hurtful message full of your burning hate for my existence. Leaving an english translation is optional, all hate is appreciated.

Jun 29, 2017 2:02 AM

#4530

*hug noises*

Offline

May 2013

32061

Both broken now ye

Jun 29, 2017 2:56 AM

#4531

Offline

Feb 2010

12649

Ok ty all!

Valerio_Lyndon said:

Shishio-kun said:

Ok thanks but is it broken on both lists or just the anime list?

Yup, both broken here. So it seems it's also a problem if you have other broken imports too? Good to know...

Yeah thats why it was so confusing before. It gets broken by the bad import, I never seen that before. but it only breaks for you still not for me. I haven't any clue why it doesn't happen to me, the only difference I can think of is location.

Jun 29, 2017 3:41 AM

#4532

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

OK no problem, go to Imgur.com and upload the background wallpaper you want to there. It will give you a bunch of links. Just give me one of the links it gives you after you upload it to there. You don't need to make an account I think.

I would like this background http://imgur.com/DIcsW2F

ok good; go to this page again
https://myanimelist.net/ownlist/style
and once again click on the theme where you have the bubble shaded next to "Anime"

On that page do u see the black box with codes under Add Custom CSS?

body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
}

Jun 29, 2017 4:36 AM

#4533

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

ok good; go to this page again
https://myanimelist.net/ownlist/style
and once again click on the theme where you have the bubble shaded next to "Anime"

On that page do u see the black box with codes under Add Custom CSS?

body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
}

What should I do now? :o I didn't understand :c I'm so dumb, sorry :c

OK copy and paste this into the bottom of the black box
body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
}

Then click the save button at the bottom. It should set the alucard wallpaper

Jun 29, 2017 6:30 AM

#4534

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:

irenevanessa133 said:

Shishio-kun said:
@irenevanessa133

OK now that the layout is installed and you have the backgrounds go to this page

https://myanimelist.net/ownlist/style

And click on the theme that has the bubble shaded next to Anime. It will be only one of the themes. It will take you to a new page.

On that page, you should see stuff like this on the left
See the two places where I marked it "1"? Set those to YES

Click the CHOOSE FILE buttons. I marked both as "2". After you click them select the Hellsing background images when the new window pops up.

When you're done, you can click Save at the bottom marked "3". let me know when you are done here by quoting me. There are ways to readjust the size of the background, btw so don't worry if they are too big or small.

Oh I made a change, I changed the layout to Kimi no Na wa and I already added the cover and the background but the background doesn't show up :c

OK no problem, go to Imgur.com and upload the background wallpaper you want to there. It will give you a bunch of links. Just give me one of the links it gives you after you upload it to there. You don't need to make an account I think.

I would like this background http://imgur.com/DIcsW2F

ok good; go to this page again
https://myanimelist.net/ownlist/style
and once again click on the theme where you have the bubble shaded next to "Anime"

On that page do u see the black box with codes under Add Custom CSS?

body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
}

What should I do now? :o I didn't understand :c I'm so dumb, sorry :c

OK copy and paste this into the bottom of the black box
body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
}

Then click the save button at the bottom. It should set the alucard wallpaper

Oh no it changed the theme ok Kimi no Wa :o It look like this now :c http://imgur.com/8A90ZB7
You know I just copy the code of the layout of kimi no wa so it doesn't have that big text of css you have in your pic :c Maybe I should make a new theme but Idk how to do it. I'm sorry for bother you ..

Oh did you delete the old code? You're supposed to add this to the bottom of the code for Kimi no Wa. We're trying to customize the theme of Kimi no Wa into an Alucard theme.

Can you bring your layout back to how it was before?

I didn't deleted but my CSS Code just appears like this:
" /* A custom made Kimi no Na wa layout basde on Shelter Style V2 by Takana no Hana
** Visit Shishio's club for more premade layouts
** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1567864
*/
@import 'https://dl.dropboxusercontent.com/s/jxhzg9keytxsmtt/KiminoNawaCustommade.css';
{} "

oh ok well then can you replace all the code in the box with this

/* A custom made Kimi no Na wa layout basde on Shelter Style V2 by Takana no Hana
** Visit Shishio's club for more premade layouts
** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1567864
*/
@import 'https://dl.dropboxusercontent.com/s/jxhzg9keytxsmtt/KiminoNawaCustommade.css';
{}

body {
background-image: url(http://i.imgur.com/igwkLmU.jpg) !important;
background-size: cover !important;
}

Oh it worked now! Thank you so much! Can know we change that part where appears the gifs and that image above when say for example "all anime" ? And that mini profile gif pic, can we change it to? And in the theme it appears a sentence, can we delete it to?
Thank you so much for your help! I really appreciate!

Can I ask you to delete that link when I showed you the appearence of the theme? When you quoted, I added a link and I deleted but now it appears when you quoted :c Because I deleted that image because it showed my name in something I don't want people to see and I forgot to cut it on the image ..

Yeah but what link do you want me to delete?

When I said " Oh no it changed the theme ok Kimi no Wa :o It look like this now :c " and then it appears a link!

ok they were like three posts but I deleted them

Copy and paste this to your CSS to remove the sentence. It has to go on the bottom of the black box under Add Custom CSS. Make sure you scroll to the bottom of the black box before you paste.

.cover-block::before {
content: "" !important;
}

You can also add this to move the wallpaper down more so it's showing Alucard's head

body{
background-position: top center !important;
}

yeah the GIFs can be changed and stuff later

Jun 29, 2017 6:53 AM

#4535

Offline

May 2017

1288

@Shishio-kun you can delete all the posts about this of changing the theme and start again please? Like just delete all the posts, I already understand that first part! So you can delete that posts, to be more organized, I'm sorry If I'm bother you for real.

I already copied what did you said and worked!

So now I would like to change GIFS and that mini profile gif pic!

JustSomeoneYKJun 29, 2017 6:58 AM

Jun 29, 2017 10:35 AM

#4536

AiKimi

Offline

Jun 2017

4

Valerio_Lyndon said:

AiKimi said:
I am almost done with my layout, only to realize that my status menu is messed up when the list is longer D: I spent some time messing around with position but can't seem to fix it :/ Any insight would be great!

Current Layout -MAL

Issue -

CSS -

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Bad+Script');

body{
background-color: #EDD1CD;
margin: 0 auto;
padding-top: 0;
border: none;
font-family: 'Josefin Sans', sans-serif;
}

/* Cover */

.cover-block {
position:relative;
display: block;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background-color: #EDD1CD;
}

.cover-block .image-container {
display: block;
padding-top: 0;
margin: 0 auto;
background-color: #EDD1CD;
}


a {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

a:hover {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

.header {
position: relative;
display: none;
width: 100%;
margin: 0 auto;
border:none;
}

.header_title {
background-color: #EDD1CD !important;
}

/* List Container */

.list-container {
position: relative;
background-color: #EDD1CD !important;
border:none !important;
left: 0;
right: 0;
width: 100%;
}

/* Status Title */

.list-unit .list-status-title {
border: none;
margin: 0 auto;
width: 800px;
background-color: #F0DDD9;
text-decoration: none !important;
text-align: center;
margin-right: 0;
margin-left: 0;
}

.list-unit .list-status-title .text {
margin: 0 auto;
border: none;
color: #F0DDD9;
visibility: hidden;
}

.list-unit .list-status-title .stats {
border: none;
}

.list-unit .list-status-title .stats a {
    color: #FFFFFF;
    font-size: 14px;
}

.list-unit .list-status-title .stats a.filterd {
    text-shadow: 0px 0px 5px #CC9FAD;
}

/* Status Menu */

.status-menu-container {
border: none;
margin: 0 auto;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
text-decoration: none !important;
}

.status-menu-container .status-menu {
  position: relative;
  text-align: center;
  margin-left: 40px;
}

#status-menu a {
color: #694D75;
padding: 0px;
margin: 0 auto;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

#status-menu a:hover {
color: #694D75;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

/* List Block */

.list-block {
margin: 0 auto;
border: 0 !important;
min-height:265px;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
background-color: #F0DDD9;
}

/* List Details */

.list-table .list-table-data{
border: 0 !important;
background-color: #F0DDD9;
font-size: 14px;
color: #A277B5;
} 

.list-unit {
border: none;
color: #A277B5;
width: 860px;
background-color: #F0DDD9;
}

footer {
position: relative;
width: 964px;
margin: 0 auto;
margin-top: -10px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
}

#footer-block {
position: relative;
height:40px !important;
margin: 0 auto;
width: 100%;
padding: 0;
background-color: transparent;
}

#copyright {
font-size: 12px;
color: #CC9FAD;
margin: 0 auto;
text-align: center;
vertical-align: center;
}

#copyright::after {
content: "Layout by Cuteholic"
}

.list-table .list-table-header .header-title {
display: table-cell;
text-align: center;
background-color: #E0C0CA;
color: #FFFFFF;
font-size: 14px;
}

.list-table .list-table-header .header-title .link {
color: #FFFFFF !important;
padding: 10px !important;
text-align: center;
font-size: 14px;
transition: all 0.2s ease 0s !important;
}

.list-table-data .title a.link.sort {
color: #A277B5 !important;
}

.status-button:after {
    display: none !important;
}

.list-unit .list-stats{
  width: 865px;
  background-color: transparent;
  color: #CC9FAD;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  border: 0 !important;
}

.list-table-data:hover td {
  background-color: rgba(234, 213, 213, 0.7) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
font-size: 14px !Important;
-moz-transition: .4s ease;
-webkit-transition: .4.5s ease;
-o-transition: .4s ease;
}

/* SEARCH */

.status-menu-container .search-container {
  position: fixed;
  top: 0px;
  right: 10px;
  color: #EDD1CD;
  background-color: #transparent;
  z-index: 99;
}

.status-menu-container .search-container #search-button {
  background-color: #EDD1CD;
  border: 0 !important;
}

input[type=text] {
  background-color: #F4E3E1;
  outline: none;
  color: #694D75;
  border: 0 !important;
  padding: 5px;
	border-radius: 30px;
}

/* Data rows */

.list-table tbody.list-item {
  border: 0 !important;
}

.list-table .list-table-data .data {
/* All data cells */
border: 0 !important;
}

.list-table .list-table-data .data.score {
/* Specific data cell */
background-color: transparent;
border: 0 !important;
}

.list-table .list-table-data .data.score a {
/* Specific data cell */
background-color: transparent;
color: #A277B5;
border: 0 !important;
}

.list-table .list-table-data .data.title .link:hover {
/* Anime titles */
}

.add-edit-more a {
/* Duh */
background-color: transparent;
border: 0 !important;
color: #A277B5;
}

.list-table .list-table-data .tags .edit {
  color: #A277B5 !important;
}

a.icon-add-episode{
  color: #D3C0C0;
}

.list-table {
  border: 0 !important;
  outline: none;
}

.list-table .list-table-data .data.status.completed {
  background-color: transparent;
}

.list-table .list-table-data .data.status.watching {
    background-color: transparent;
}

.list-table .list-table-data .data.status.onhold {
    background-color: transparent;
}

.list-table .list-table-data .data.status.dropped {
    background-color: transparent;
}

.list-table .list-table-data .data.status.plantowatch {
    background-color: transparent;
}

.icon-watch, .icon-watch-pv {
   visibility: hidden;
}

.list-table .list-table-data .data.image {
}

/* LIST MENU */

.list-menu-float {
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu {
/* All list menu buttons */
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu.anime-list {
/* Specific list menu button */
  background-color: transparent;
  border: 0 !importtant;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.quick-add svg.icon-quick-add  {
  fill: #694D75;
}

.list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.history svg.icon-history {
   fill: #694D75;
}

.list-menu-float .icon-menu.export svg.icon-export {
   fill: #694D75;
}

.list-menu-float .icon-menu.logout svg.icon-logout{
  fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting 
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu:not(.profile):hover {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu .text {
  color: #694D75;
  font-family: 'Josefin Sans', sans-serif !important;
}

Okay, so your status menu is on the left of the screen because you set your list-container to 100% width. So the status menu is appearing at the top left of it. There are a couple ways we can fix this.

Also, on the topic of your status menu, your list gets bumped down the incorrect amount when the status menu becomes fixed. If you don't know what I mean, here's a video demonstrating it from another list that had this issue. It basically just means when scrolling it looks real jerky instead of smooth.

You can fix by adding this code:

.status-menu-container.fixed + div.list-block {
    margin-top: 46px;
}

The margin value just needs to be the same as the status menu height.

Thank you so much for all your help!!! Also wanted to say that I really like your list layout! I like how compact/clean and functional it is :)

Jun 29, 2017 11:57 AM

#4537

WaleedAbbasVd

Offline

Jun 2016

12

Hi guys!

How do I change the number of animes displayed in a single line?

Jun 29, 2017 6:21 PM

#4538

kazurengan

Offline

Dec 2011

241

https://myanimelist.net/animelist/kazurengan

can someone help me i still cannot see any covers :/

Jun 29, 2017 6:37 PM

#4539

nymphiae

Offline

Jul 2013

381

kazurengan said:
https://myanimelist.net/animelist/kazurengan

can someone help me i still cannot see any covers :/

probably something wrong with the cover generator. replace

@import "https://mal-image.appspot.com/all/kazurengan";

with

@import url(https://malcat-gen.appspot.com/series?preset=more);

✦ anime list | manga list | css list layouts ✦

Jun 29, 2017 6:44 PM

#4540

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

AiKimi said:

Valerio_Lyndon said:

AiKimi said:
I am almost done with my layout, only to realize that my status menu is messed up when the list is longer D: I spent some time messing around with position but can't seem to fix it :/ Any insight would be great!

Current Layout -MAL

Issue -

CSS -

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Bad+Script');

body{
background-color: #EDD1CD;
margin: 0 auto;
padding-top: 0;
border: none;
font-family: 'Josefin Sans', sans-serif;
}

/* Cover */

.cover-block {
position:relative;
display: block;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background-color: #EDD1CD;
}

.cover-block .image-container {
display: block;
padding-top: 0;
margin: 0 auto;
background-color: #EDD1CD;
}


a {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

a:hover {
border: 0 !important;
box-shadow: none;
text-decoration: none !important;
}

.header {
position: relative;
display: none;
width: 100%;
margin: 0 auto;
border:none;
}

.header_title {
background-color: #EDD1CD !important;
}

/* List Container */

.list-container {
position: relative;
background-color: #EDD1CD !important;
border:none !important;
left: 0;
right: 0;
width: 100%;
}

/* Status Title */

.list-unit .list-status-title {
border: none;
margin: 0 auto;
width: 800px;
background-color: #F0DDD9;
text-decoration: none !important;
text-align: center;
margin-right: 0;
margin-left: 0;
}

.list-unit .list-status-title .text {
margin: 0 auto;
border: none;
color: #F0DDD9;
visibility: hidden;
}

.list-unit .list-status-title .stats {
border: none;
}

.list-unit .list-status-title .stats a {
    color: #FFFFFF;
    font-size: 14px;
}

.list-unit .list-status-title .stats a.filterd {
    text-shadow: 0px 0px 5px #CC9FAD;
}

/* Status Menu */

.status-menu-container {
border: none;
margin: 0 auto;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
text-decoration: none !important;
}

.status-menu-container .status-menu {
  position: relative;
  text-align: center;
  margin-left: 40px;
}

#status-menu a {
color: #694D75;
padding: 0px;
margin: 0 auto;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

#status-menu a:hover {
color: #694D75;
text-shadow: 2px 2px #EDD1CD;
text-decoration: none;
border: none !important;
background-color: #F2DEDB;
text-align: center;
font-weight: none;
display: inline-block;
margin-left: 30px;
font-size: 22px;
font-family: 'Bad Script', cursive;
}

/* List Block */

.list-block {
margin: 0 auto;
border: 0 !important;
min-height:265px;
width: 964px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
background-color: #F0DDD9;
}

/* List Details */

.list-table .list-table-data{
border: 0 !important;
background-color: #F0DDD9;
font-size: 14px;
color: #A277B5;
} 

.list-unit {
border: none;
color: #A277B5;
width: 860px;
background-color: #F0DDD9;
}

footer {
position: relative;
width: 964px;
margin: 0 auto;
margin-top: -10px;
background-image: url(http://i.imgur.com/5nWn6S5.png);
background-repeat: repeat-y;
}

#footer-block {
position: relative;
height:40px !important;
margin: 0 auto;
width: 100%;
padding: 0;
background-color: transparent;
}

#copyright {
font-size: 12px;
color: #CC9FAD;
margin: 0 auto;
text-align: center;
vertical-align: center;
}

#copyright::after {
content: "Layout by Cuteholic"
}

.list-table .list-table-header .header-title {
display: table-cell;
text-align: center;
background-color: #E0C0CA;
color: #FFFFFF;
font-size: 14px;
}

.list-table .list-table-header .header-title .link {
color: #FFFFFF !important;
padding: 10px !important;
text-align: center;
font-size: 14px;
transition: all 0.2s ease 0s !important;
}

.list-table-data .title a.link.sort {
color: #A277B5 !important;
}

.status-button:after {
    display: none !important;
}

.list-unit .list-stats{
  width: 865px;
  background-color: transparent;
  color: #CC9FAD;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  border: 0 !important;
}

.list-table-data:hover td {
  background-color: rgba(234, 213, 213, 0.7) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
font-size: 14px !Important;
-moz-transition: .4s ease;
-webkit-transition: .4.5s ease;
-o-transition: .4s ease;
}

/* SEARCH */

.status-menu-container .search-container {
  position: fixed;
  top: 0px;
  right: 10px;
  color: #EDD1CD;
  background-color: #transparent;
  z-index: 99;
}

.status-menu-container .search-container #search-button {
  background-color: #EDD1CD;
  border: 0 !important;
}

input[type=text] {
  background-color: #F4E3E1;
  outline: none;
  color: #694D75;
  border: 0 !important;
  padding: 5px;
	border-radius: 30px;
}

/* Data rows */

.list-table tbody.list-item {
  border: 0 !important;
}

.list-table .list-table-data .data {
/* All data cells */
border: 0 !important;
}

.list-table .list-table-data .data.score {
/* Specific data cell */
background-color: transparent;
border: 0 !important;
}

.list-table .list-table-data .data.score a {
/* Specific data cell */
background-color: transparent;
color: #A277B5;
border: 0 !important;
}

.list-table .list-table-data .data.title .link:hover {
/* Anime titles */
}

.add-edit-more a {
/* Duh */
background-color: transparent;
border: 0 !important;
color: #A277B5;
}

.list-table .list-table-data .tags .edit {
  color: #A277B5 !important;
}

a.icon-add-episode{
  color: #D3C0C0;
}

.list-table {
  border: 0 !important;
  outline: none;
}

.list-table .list-table-data .data.status.completed {
  background-color: transparent;
}

.list-table .list-table-data .data.status.watching {
    background-color: transparent;
}

.list-table .list-table-data .data.status.onhold {
    background-color: transparent;
}

.list-table .list-table-data .data.status.dropped {
    background-color: transparent;
}

.list-table .list-table-data .data.status.plantowatch {
    background-color: transparent;
}

.icon-watch, .icon-watch-pv {
   visibility: hidden;
}

.list-table .list-table-data .data.image {
}

/* LIST MENU */

.list-menu-float {
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu {
/* All list menu buttons */
  background-color: transparent;
  border: 0 !important;
  font-family: 'Josefin Sans', sans-serif;
}

.list-menu-float .icon-menu.anime-list {
/* Specific list menu button */
  background-color: transparent;
  border: 0 !importtant;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.anime-list svg.icon-anime-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.quick-add svg.icon-quick-add  {
  fill: #694D75;
}

.list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  fill: #694D75;
}

.list-menu-float .icon-menu.history svg.icon-history {
   fill: #694D75;
}

.list-menu-float .icon-menu.export svg.icon-export {
   fill: #694D75;
}

.list-menu-float .icon-menu.logout svg.icon-logout{
  fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting svg.icon-setting {
   fill: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting 
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu.setting:hover .text .link-style-setting
{
   font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu:not(.profile):hover {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #F4E3E1;
  color: #694D75;
}

.list-menu-float .icon-menu .text {
  color: #694D75;
  font-family: 'Josefin Sans', sans-serif !important;
}

Okay, so your status menu is on the left of the screen because you set your list-container to 100% width. So the status menu is appearing at the top left of it. There are a couple ways we can fix this.

Also, on the topic of your status menu, your list gets bumped down the incorrect amount when the status menu becomes fixed. If you don't know what I mean, here's a video demonstrating it from another list that had this issue. It basically just means when scrolling it looks real jerky instead of smooth.

You can fix by adding this code:

.status-menu-container.fixed + div.list-block {
    margin-top: 46px;
}

The margin value just needs to be the same as the status menu height.

Thank you so much for all your help!!! Also wanted to say that I really like your list layout! I like how compact/clean and functional it is :)

No problem, glad I could help. And thanks, I try. ;3

WaleedAbbasVd said:
Hi guys!

How do I change the number of animes displayed in a single line?

You'll need to set .list-table as display:block, and each .list-item as display:inline-block.

The problem of course with this, is it is going to break the entire table layout. So as well as that, you will need to set every .data with in each .list-item as either block or inline-block, depending on what you want. Then after that there is a lot of setting width/height, padding, margin, whatever else you need to position everything correctly.

Unfortunately this is rather time consuming.

Jun 29, 2017 6:51 PM

#4541

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

kazurengan said:
https://myanimelist.net/animelist/kazurengan

can someone help me i still cannot see any covers :/

Are you using the most recent version of Google Chrome? Try removing your current @import and replacing it with either one of these.

@import url(https://mal-image.appspot.com/all/kazurengan);

@import url(https://malcat-gen.appspot.com/series?preset=more);

If neither of these work and you are not using Chrome, could you tell me what browser you are using, as well as what version of that browser, so I can try and test for it better?

Valerio_LyndonJun 29, 2017 7:03 PM

Jun 29, 2017 8:31 PM

#4542

Offline

Feb 2010

12649

irenevanessa133 said:
@Shishio-kun you can delete all the posts about this of changing the theme and start again please? Like just delete all the posts, I already understand that first part! So you can delete that posts, to be more organized, I'm sorry If I'm bother you for real.

I already copied what did you said and worked!

So now I would like to change GIFS and that mini profile gif pic!

Ok good just upload one of the GIFs or pics you want to change to to imgur, and copy the Direct Link that Imgur gives you and paste it here

Jun 30, 2017 3:19 AM

#4543

Offline

May 2017

1288

Shishio-kun said:

irenevanessa133 said:
@Shishio-kun you can delete all the posts about this of changing the theme and start again please? Like just delete all the posts, I already understand that first part! So you can delete that posts, to be more organized, I'm sorry If I'm bother you for real.

I already copied what did you said and worked!

So now I would like to change GIFS and that mini profile gif pic!

Ok good just upload one of the GIFs or pics you want to change to to imgur, and copy the Direct Link that Imgur gives you and paste it here

There you have! I would like to use this GIF for example to that one where says "All Anime" http://imgur.com/BbBCDuB

Oh can you delete the past quotes please? I'm sorry for bother you with this but now it doesn't make sense having quotes without nothing because I deleted my posts until the one last night I tag you, I'm sorry!

Jun 30, 2017 3:44 AM

#4544

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

Ok good just upload one of the GIFs or pics you want to change to to imgur, and copy the Direct Link that Imgur gives you and paste it here

There you have! I would like to use this GIF for example to that one where says "All Anime" http://imgur.com/BbBCDuB

Oh can you delete the past quotes please? I'm sorry for bother you with this but now it doesn't make sense having quotes without nothing because I deleted my posts until the one last night I tag you, I'm sorry!

I don't think thats the one from Direct Link. So get the gif code that's under Direct Link. You might have to log in for that.

I don't want to delete the posts since other people might learn from them and they are there for your reference in case you need to remember what to do

Jun 30, 2017 3:54 AM

#4545

Offline

May 2017

1288

Shishio-kun said:

irenevanessa133 said:

There you have! I would like to use this GIF for example to that one where says "All Anime" http://imgur.com/BbBCDuB

Oh can you delete the past quotes please? I'm sorry for bother you with this but now it doesn't make sense having quotes without nothing because I deleted my posts until the one last night I tag you, I'm sorry!

I don't think thats the one from Direct Link. So get the gif code that's under Direct Link. You might have to log in for that.

I don't want to delete the posts since other people might learn from them and they are there for your reference in case you need to remember what to do

It's the direct link!! :o I'm already logged in :o

Oh okay okay, that's okay then! I deleted my posts sorry ;-;

Jun 30, 2017 4:04 AM

#4546

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

I don't think thats the one from Direct Link. So get the gif code that's under Direct Link. You might have to log in for that.

I don't want to delete the posts since other people might learn from them and they are there for your reference in case you need to remember what to do

It's the direct link!! :o I'm already logged in :o

Oh okay okay, that's okay then! I deleted my posts sorry ;-;

Are you sure? For me it's completely different. The direct link is supposed to have .jpg .gif .gifv or .png after it. Your link doesn't. Do you see something like this when you upload it?

Jun 30, 2017 4:15 AM

#4547

Offline

May 2017

1288

Shishio-kun said:

irenevanessa133 said:

It's the direct link!! :o I'm already logged in :o

Oh okay okay, that's okay then! I deleted my posts sorry ;-;

Are you sure? For me it's completely different. The direct link is supposed to have .jpg .gif .gifv or .png after it. Your link doesn't. Do you see something like this when you upload it?

Oh I'm so sorry :o I didn't mean it! When I upload the gif didn't appear that, but here it is the link: http://i.imgur.com/BbBCDuB.gifv
Sorry one more time ;-;

Jun 30, 2017 4:17 AM

#4548

Offline

Feb 2010

12649

irenevanessa133 said:

Shishio-kun said:

Are you sure? For me it's completely different. The direct link is supposed to have .jpg .gif .gifv or .png after it. Your link doesn't. Do you see something like this when you upload it?

Oh I'm so sorry :o I didn't mean it! When I upload the gif didn't appear that, but here it is the link: http://i.imgur.com/BbBCDuB.gifv
Sorry one more time ;-;

So you know where to get the direct link now on imgur?

Jun 30, 2017 4:22 AM

#4549

Offline

May 2017

1288

Shishio-kun said:

irenevanessa133 said:

Oh I'm so sorry :o I didn't mean it! When I upload the gif didn't appear that, but here it is the link: http://i.imgur.com/BbBCDuB.gifv
Sorry one more time ;-;

So you know where to get the direct link now on imgur?

Yes I know!

Jun 30, 2017 5:07 AM

#4550