❓ Ask for help here + See Frequently Asked Questions

Offline

Aug 2014

432

S-Z said:

Satiriques said:

You can change the color here:

or completely remove it with this:

sorry i meant lines over there http://screenshot.ru/90d75f1297c62d79896cf73067cbb7b9.png

The white borders are actually part of the image used for the category links. So unless you remake the picture, the white border are always gonna be there. However, I removed the borders by reducing the height for the button links and repositioned the background-position accordingly. There you go:

You could always use an image editor to remove the white borders so the circle part doesn't a sharp edge, but it's up to you.

Edit: Damn, I didn't even notice the lines you were talking about until veriti answered lol.

SatiriquesJan 31, 2015 11:37 PM

Jan 31, 2015 11:27 PM

#2552

VeriTi

Offline

Nov 2011

304

@S-Z
If you mean lines *above* text, I can't see them neither in Firefox, Chrome nor in IE so you might be the only one seeing those.
I can make a wild guess that your browser is bugged and it shows text-decoration even when color of the text is set to transparent. If I'm right, then you want

td[class^="status"] a { text-decoration: none }

Feb 3, 2015 12:44 AM

#2553

Offline

Nov 2014

205

Hi, is there a way to edit the already existing selector "#mal_control_strip"? I basically want to remove the property "left: 0;" and change the "padding: 0;" to "padding-right: 20px;". This should result in the top bar positioning directly over the list.

Feb 3, 2015 10:16 AM

#2554

VeriTi

Offline

Nov 2011

304

@Deisicarius
No, you can't. But you can override individual properties using !important or other things that affect specificity. And you'd probably want margin-right because padding won't affect the search bar.

#mal_control_strip {
left: auto !important;
margin-right: 20px !important;
}

Feb 3, 2015 10:16 AM

#2555

Enn-Vee

Offline

Aug 2014

13

Hahaido said:

Anonymoose-N said:
How do I make it so that longer names don't go to the 2nd line and instead, end with a "..."

.animetitle {
display: block;
min-width: 0;
max-width: /*your number*/px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

I did this and now I have a new problem. The shorter titles get highlighted even if I don't directly hover over them. I'm guessing it is based on the max-width. How do I make it so that the titles only get highlighted when I hover over their letters?

Feb 3, 2015 4:51 PM

#2556

Offline

Nov 2014

205

VeriTi said:
@Deisicarius
No, you can't. But you can override individual properties using !important or other things that affect specificity. And you'd probably want margin-right because padding won't affect the search bar.

#mal_control_strip {
left: auto !important;
margin-right: 20px !important;
}

Oh I see, thank you for your help.

Feb 4, 2015 6:05 AM

#2557

Offline

Feb 2015

27

Hello Shishio-Kun :D How's it going? I have 2 questions if you would like to help, first I wouldn't have accomplished anything if Iudex hadn't helped me, so a thanks to him!! My questions are; When I scroll down my list, I want my background to stay stable, no repetition, how do I get that to happen? The second is that When I go over a title of an anime/manga in my list it displays a pop up box right next to it, but it's transparent. How can I get an image of that anime/manga to pop up while I go over the title with the mouse? Thank you for reading this and taking your time to consider this! But please answer like you're gonna answer to a newbie lol, because I do not understand anything about this! Thank you once again! Bye

Feb 4, 2015 11:56 AM

#2558

Offline

Feb 2010

12661

moebond said:
Hello Shishio-Kun :D How's it going? I have 2 questions if you would like to help, first I wouldn't have accomplished anything if Iudex hadn't helped me, so a thanks to him!! My questions are; When I scroll down my list, I want my background to stay stable, no repetition, how do I get that to happen? The second is that When I go over a title of an anime/manga in my list it displays a pop up box right next to it, but it's transparent. How can I get an image of that anime/manga to pop up while I go over the title with the mouse? Thank you for reading this and taking your time to consider this! But please answer like you're gonna answer to a newbie lol, because I do not understand anything about this! Thank you once again! Bye

These are quick and easy fixes so I just made them for you in your code and posted it below. Would that be ok for you? Fixed the topbar too.

You have to copy everything in bold to your CSS edit box and replace the old codes.

@import url(http://storage.live.com/items/4A07C1EEED420167%21156);
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);

/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-attachment: fixed !important;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/Qw8WQS4.jpg?1);
background-position:0 0%, 0 0;
background-repeat:no-repeat yes-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 {
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;
background-size: contain !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.3);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.3);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color: rgba(0, 100, 205, 0.6);
}

/*
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();
background-position: -50px -40px;
background-repeat:no-repeat no-repeat;
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:100px;
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://i61.tinypic.com/t03ku9.jpg);
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://i59.tinypic.com/2qdsdhc.jpg);
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://i57.tinypic.com/zjtdgw.jpg);
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://i61.tinypic.com/28sqa1u.jpg);
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://i59.tinypic.com/2vlsa2o.jpg);
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://i60.tinypic.com/307tbio.jpg);
background-position:100% 0;
top:620px;
}

/*
CUSTOM HEADERS
*/

.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/Ve9nDsh.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_completed {
background-color: transparent;
background-image: url("http://imgur.com/rhGif5A.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://imgur.com/fzAkofz.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://imgur.com/JrB2Hgx.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://imgur.com/Oeqwh7g.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}

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

.table_header {
background-color:rgba(0, 100, 205, 0.6);
}

.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(0, 100, 205, 0.6);
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: pink;
left: 42px;
position: relative;
text-shadow: black 1px 1px 5px;
}

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

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

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 73% !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: 12pt !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;}

}

If you want in-depth explanations on how, search and try the CSS tutorials first and then post back if one of those doesn't make sense then I can try to break it down more. You don't have to do and read them all. Just find the one relevant to what you're trying to do, like the "filling in your missing covers tutorial". I'm only redirecting you here cuz understand I'm REALLY pressed for time and don't want to write explanations when the tutorials might cover that already, but like I said if one doesn't make sense post back or in the tutorial and tell us what you had trouble with:
http://myanimelist.net/forum/?topicid=419405

Feb 4, 2015 12:31 PM

#2559

Offline

Feb 2015

27

Shishio-kun said:

moebond said:
Hello Shishio-Kun :D How's it going? I have 2 questions if you would like to help, first I wouldn't have accomplished anything if Iudex hadn't helped me, so a thanks to him!! My questions are; When I scroll down my list, I want my background to stay stable, no repetition, how do I get that to happen? The second is that When I go over a title of an anime/manga in my list it displays a pop up box right next to it, but it's transparent. How can I get an image of that anime/manga to pop up while I go over the title with the mouse? Thank you for reading this and taking your time to consider this! But please answer like you're gonna answer to a newbie lol, because I do not understand anything about this! Thank you once again! Bye

These are quick and easy fixes so I just made them for you in your code and posted it below. Would that be ok for you? Fixed the topbar too.

You have to copy everything in bold to your CSS edit box and replace the old codes.

@import url(http://storage.live.com/items/4A07C1EEED420167%21156);
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);

/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-attachment: fixed !important;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/Qw8WQS4.jpg?1);
background-position:0 0%, 0 0;
background-repeat:no-repeat yes-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 {
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;
background-size: contain !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.3);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.3);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color: rgba(0, 100, 205, 0.6);
}

/*
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();
background-position: -50px -40px;
background-repeat:no-repeat no-repeat;
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:100px;
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://i61.tinypic.com/t03ku9.jpg);
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://i59.tinypic.com/2qdsdhc.jpg);
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://i57.tinypic.com/zjtdgw.jpg);
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://i61.tinypic.com/28sqa1u.jpg);
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://i59.tinypic.com/2vlsa2o.jpg);
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://i60.tinypic.com/307tbio.jpg);
background-position:100% 0;
top:620px;
}

/*
CUSTOM HEADERS
*/

.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/Ve9nDsh.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_completed {
background-color: transparent;
background-image: url("http://imgur.com/rhGif5A.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://imgur.com/fzAkofz.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://imgur.com/JrB2Hgx.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://imgur.com/Oeqwh7g.png");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}

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

.table_header {
background-color:rgba(0, 100, 205, 0.6);
}

.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(0, 100, 205, 0.6);
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: pink;
left: 42px;
position: relative;
text-shadow: black 1px 1px 5px;
}

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

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

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 73% !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: 12pt !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;}

}

If you want in-depth explanations on how, search and try the CSS tutorials first and then post back if one of those doesn't make sense then I can try to break it down more. You don't have to do and read them all. Just find the one relevant to what you're trying to do, like the "filling in your missing covers tutorial". I'm only redirecting you here cuz understand I'm REALLY pressed for time and don't want to write explanations when the tutorials might cover that already, but like I said if one doesn't make sense post back or in the tutorial and tell us what you had trouble with:
http://myanimelist.net/forum/?topicid=419405

That's perfect!!! Thank you so much!!! :D :D There are no notifications here they should fix that :( I'm sure you could lol! Thanks so much!!

Feb 4, 2015 12:47 PM

#2560

Offline

Feb 2010

12661

Great, btw I think u can follow (watch?) a topic to get notifications? Never tried it tho

Feb 4, 2015 12:53 PM

#2561

Offline

Feb 2015

27

Hey, sorry but I have a bit of trouble, I see I mastered it on your list lol gotta admit that's a hot background!! How can I display pics when I go over a title with the mouse? And that top left hand bar? I just want those 2 left and everything is perfect! Can you help please? :)

Feb 4, 2015 1:11 PM

#2562

Offline

Feb 2010

12661

Remove top two lines from the fixed CSS, then use the top bar you want from this page, under imported topbars (read instructions):
http://myanimelist.net/forum/?topicid=449097

Now search your CSS for codes named "hide" in them and remove them, and the codes in the brackets after, then you can try the cover tutorial that causes covers to appear on title point (see the list of topics I linked you to).

Feb 4, 2015 1:13 PM

#2563

Offline

Feb 2015

27

Ok thanks, I'll do that tomorrow :) time to get kinky right now lol. Bye bye!! I'll keep on touch on all updates!!

Feb 4, 2015 6:33 PM

#2564

CheckMateBassy

Offline

Jun 2014

447

I have a question. How do people add youtube videos straight onto their profile design? I know how to add the code to the page, but how do they make it look like this?

Sorry if this has been answered, I looked everywhere, but couldn't find anything!

music is life...

Feb 4, 2015 11:57 PM

#2565

Offline

Feb 2015

27

Shishio-kun said:
Remove top two lines from the fixed CSS, then use the top bar you want from this page, under imported topbars (read instructions):
http://myanimelist.net/forum/?topicid=449097

Now search your CSS for codes named "hide" in them and remove them, and the codes in the brackets after, then you can try the cover tutorial that causes covers to appear on title point (see the list of topics I linked you to).

I cant find anything to help me with the images poping up when I go over it with the cursor! I dont know what to do

CheckMateBassy said:
I have a question. How do people add youtube videos straight onto their profile design? I know how to add the code to the page, but how do they make it look like this?

Sorry if this has been answered, I looked everywhere, but couldn't find anything!

Ive seen a post how you can add youtube videos when you edit the "about me" Im sure you use the same could, see if that can help, I dont really know myself!

Feb 5, 2015 1:34 AM

#2566

Offline

Feb 2010

12661

Smexy-Kun said:

Shishio-kun said:
Remove top two lines from the fixed CSS, then use the top bar you want from this page, under imported topbars (read instructions):
http://myanimelist.net/forum/?topicid=449097

Now search your CSS for codes named "hide" in them and remove them, and the codes in the brackets after, then you can try the cover tutorial that causes covers to appear on title point (see the list of topics I linked you to).

I cant find anything to help me with the images poping up when I go over it with the cursor! I dont know what to do

Hmm curious, why aren't you using the entire code I posted? You still have the problem of the background skipping, and if you leave all those codes at the bottom which I took out for you, you will have errors if you use other topbars. You need to replace your entire code with the whole code I gave you to fix the errors with the background and future topbars.

Like I said, go to the link I gave you before:
http://myanimelist.net/forum/?topicid=419405
theres a part for covers (DVD and manga covers for your list). There's a topic name that says "Display covers when pointing to title"

Shishio-kunFeb 5, 2015 1:43 AM

Feb 5, 2015 1:42 AM

#2567

Offline

Feb 2010

12661

CheckMateBassy said:
I have a question. How do people add youtube videos straight onto their profile design? I know how to add the code to the page, but how do they make it look like this?

Sorry if this has been answered, I looked everywhere, but couldn't find anything!

Most of those profile graphics are made in a graphic design program and split into pieces there. Then the pieces are posted to the profile one by one. If you look at the images in the graphic by right clicking or dragging them out you'll see that. So when you make that profile graphic, you need to leave a gap in it (for the player) before you cut it into pieces with Guillotine or Slice tool. The gap must be equal to a video player's height and width (posted the dimensions on the front page recently). Now when you post the pieces to your profile graphic, you will post that Youtube player as one of the pieces in your profile, to fill the gap you originally made.

We might also discuss it in this topic, and it has the video on making/slicing the profile graphic for beginners. I don't think I explained Youtube players within graphics in the video tho:
http://myanimelist.net/forum/?topicid=544347&show=0

Shishio-kunFeb 5, 2015 1:45 AM

Feb 5, 2015 4:47 PM

#2568

CheckMateBassy

Offline

Jun 2014

447

Shishio-kun said:

CheckMateBassy said:
I have a question. How do people add youtube videos straight onto their profile design? I know how to add the code to the page, but how do they make it look like this?

Sorry if this has been answered, I looked everywhere, but couldn't find anything!

Most of those profile graphics are made in a graphic design program and split into pieces there. Then the pieces are posted to the profile one by one. If you look at the images in the graphic by right clicking or dragging them out you'll see that. So when you make that profile graphic, you need to leave a gap in it (for the player) before you cut it into pieces with Guillotine or Slice tool. The gap must be equal to a video player's height and width (posted the dimensions on the front page recently). Now when you post the pieces to your profile graphic, you will post that Youtube player as one of the pieces in your profile, to fill the gap you originally made.

We might also discuss it in this topic, and it has the video on making/slicing the profile graphic for beginners. I don't think I explained Youtube players within graphics in the video tho:
http://myanimelist.net/forum/?topicid=544347&show=0

Thank you so much, I understand now. Would you happen to know the dimensions of a standard youtube video? or how I would find that out?

music is life...

Feb 5, 2015 4:57 PM

#2569

Offline

Feb 2010

12661

Copied from the front page

Looks like 425 high 355 wide

Feb 5, 2015 5:04 PM

#2570

CheckMateBassy

Offline

Jun 2014

447

Thank you for your help. Your tutorials are amazing! <3

music is life...

Feb 6, 2015 9:17 AM

#2571

masterpax1

Offline

Jan 2015

50

Can you make requests for making a custom list with an anime of my choice?

Feb 6, 2015 4:12 PM

#2572

Offline

Aug 2013

520

masterpax1 said:
Can you make requests for making a custom list with an anime of my choice?

yes, in the request topic, might not be taken though

Feb 7, 2015 4:14 AM

#2573

Offline

Nov 2014

205

Hi, I have two questions:
1. Can someone tell me if shared anime is showing and if, link a screenshot please.
2. How do I align the search box and search button? I have tested out the few methods that I known, but it doesn't seem to fix it.

Thanks in advance and sorry for asking so many questions. ^^

BalphagoreFeb 7, 2015 8:36 AM

Feb 7, 2015 4:15 PM

#2574

Offline

Feb 2010

12661

Deisicarius said:
Hi, I have two questions:
1. Can someone tell me if shared anime is showing and if, link a screenshot please.
2. How do I align the search box and search button? I have tested out the few methods that I known, but it doesn't seem to fix it.

Thanks in advance and sorry for asking so many questions. ^^

1. Not sure if you meant the actual page or the link on your list, its all showing normally tho in Firefox
list link: http://i.imgur.com/vsec31g.png
our shared anime: http://i.imgur.com/SHGFCcM.png

2. Remove the colors when done moving them around

img#searchListButton
{
background: red !important;
margin-top: 2px !important;
position: relative !important;
}

#mal_cs_powered #search #searchBox
{
background: blue !important;
top: -6px !important;
position: relative !important;
}

Feb 8, 2015 4:16 AM

#2575

Offline

Nov 2014

205

Shishio-kun said:

Deisicarius said:
Hi, I have two questions:
1. Can someone tell me if shared anime is showing and if, link a screenshot please.
2. How do I align the search box and search button? I have tested out the few methods that I known, but it doesn't seem to fix it.

Thanks in advance and sorry for asking so many questions. ^^

1. Not sure if you meant the actual page or the link on your list, its all showing normally tho in Firefox
list link: http://i.imgur.com/vsec31g.png
our shared anime: http://i.imgur.com/SHGFCcM.png

2. Remove the colors when done moving them around

img#searchListButton
{
background: red !important;
margin-top: 2px !important;
position: relative !important;
}

#mal_cs_powered #search #searchBox
{
background: blue !important;
top: -6px !important;
position: relative !important;
}

Yes I meant list link, I just wanted to check if it showed normally. Either way thanks for the help, everything worked perfectly.

A little bit off topic but does my list count as a minimalist list layout? I was thinking of entering the contest.

Feb 8, 2015 9:03 AM

#2576

Offline

Aug 2013

520

Deisicarius said:

Shishio-kun said:

1. Not sure if you meant the actual page or the link on your list, its all showing normally tho in Firefox
list link: http://i.imgur.com/vsec31g.png
our shared anime: http://i.imgur.com/SHGFCcM.png

2. Remove the colors when done moving them around

img#searchListButton
{
background: red !important;
margin-top: 2px !important;
position: relative !important;
}

#mal_cs_powered #search #searchBox
{
background: blue !important;
top: -6px !important;
position: relative !important;
}

Yes I meant list link, I just wanted to check if it showed normally. Either way thanks for the help, everything worked perfectly.

A little bit off topic but does my list count as a minimalist list layout? I was thinking of entering the contest.

Nope it does not, because you have multiple characters on screen simultaneously.

Feb 8, 2015 1:27 PM

#2577

Ukatoid

Offline

Jan 2013

259

Parts of my list design that are on dropbox are often not loading. How can I fix this? Any better services to keep list designs?

Feb 8, 2015 2:06 PM

#2578

Offline

Aug 2013

520

Ukatoid said:
Parts of my list design that are on dropbox are often not loading. How can I fix this? Any better services to keep list designs?

is it your dropbox or somebody else's? Further more is it pictures or codes?

Feb 8, 2015 2:13 PM

#2579

goodshitgoOdshit

Offline

Dec 2013

10536

Hello, I have a problem with my list. Quite a few covers do not appear in it and it's kinda annoying. I checked the section in this club about this problem and tried a few methods suggested there but they didn't work or I just messed up somewhere. If there's a solution, could someone tell me how to fix?

http://myanimelist.net/animelist/robis798

Here's my list, the layout I'm using should be familiar.

Feb 8, 2015 2:16 PM

#2580

Offline

Aug 2013

520

robis798 said:
Hello, I have a problem with my list. Quite a few covers do not appear in it and it's kinda annoying. I checked the section in this club about this problem and tried a few methods suggested there but they didn't work or I just messed up somewhere. If there's a solution, could someone tell me how to fix?

http://myanimelist.net/animelist/robis798

Here's my list, the layout I'm using should be familiar.

well when you generate your own cover codes you have to be sure to use the right format, i.e. #more .animetitle etc.

Feb 8, 2015 2:20 PM

#2581

goodshitgoOdshit

Offline

Dec 2013

10536

Oiomi-chan said:

robis798 said:
Hello, I have a problem with my list. Quite a few covers do not appear in it and it's kinda annoying. I checked the section in this club about this problem and tried a few methods suggested there but they didn't work or I just messed up somewhere. If there's a solution, could someone tell me how to fix?

http://myanimelist.net/animelist/robis798

Here's my list, the layout I'm using should be familiar.

well when you generate your own cover codes you have to be sure to use the right format, i.e. #more .animetitle etc.

Well, I did not generate anything yet. I tried using the '#more' but either it didn't work or I don't know how and at what part of the large code should I place it.

Feb 8, 2015 2:42 PM

#2582

Offline

Aug 2013

520

robis798 said:

Oiomi-chan said:

well when you generate your own cover codes you have to be sure to use the right format, i.e. #more .animetitle etc.

Well, I did not generate anything yet. I tried using the '#more' but either it didn't work or I don't know how and at what part of the large code should I place it.

there should be an import at the top of the code for the covers, you'll have to replace that one with one you make yourself.

Feb 9, 2015 2:13 PM

#2583

Ukatoid

Offline

Jan 2013

259

Oiomi-chan said:

Ukatoid said:
Parts of my list design that are on dropbox are often not loading. How can I fix this? Any better services to keep list designs?

is it your dropbox or somebody else's? Further more is it pictures or codes?

My dropbox. It's both pictures and (some) code. They load about 50% of the time.

Feb 9, 2015 2:22 PM

#2584

xXFearTheGuestX

Offline

Feb 2015

4

Hey guys, sorry if I'm not posting this in the correct place, but I saw a profile and would really like to emulate it.

http://myanimelist.net/animelist/lez_derp

I really like the simplicity of it and the small circular pictures next to the names in the list. The only thing i would change is the top bar color. I tried to ask the profile owner how they did it but never received a reply. Could someone show me how to do this, I'm familiar with the beginners guide and viewing the page source, but i couldn't figure it out.

Please and Thank You

Feb 9, 2015 2:31 PM

#2585

Offline

Aug 2013

63

the category link " currently watching" is not showing the color white

Feb 9, 2015 2:35 PM

#2586

Offline

Aug 2013

520

Ukatoid said:

Oiomi-chan said:

is it your dropbox or somebody else's? Further more is it pictures or codes?

My dropbox. It's both pictures and (some) code. They load about 50% of the time.

well that's interesting... I would recommend moving the pics to imgur or some other picture host, but concerning the codes I don't really know, are they MAL-safe? if so paste them in the MAL css section... though I have never seen any problems such as those before.. edit: I have now tried viewing your list about 10 times using using complete refresh and haven't encountered the problem. It might be that your connection to dropbox times out due to large files or the like.

tanoshiibear said:

the category link " currently watching" is not showing the color white

that is because of MAL's illogical way of numbering the buttons and the fact that you have selected status 2 through 7 for white background, but MAL uses 1 through 4 an 6 and 7 meaning number 5 was rendered redundant.

@import "https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE";
@import "https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM";
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
@import "http://fonts.googleapis.com/css?family=Qwigley";
@import "http://fonts.googleapis.com/css?family=Henny+Penny";
@import "http://fonts.googleapis.com/css?family=Ceviche+One";
body {
    background: url("https://aningabeta.files.wordpress.com/2014/01/ibkaau83u4aqrd.jpg") no-repeat fixed right bottom / 100% 100% rgba(0, 0, 0, 0);
}
.table_header {
    background-color: green;
    border-radius: 10px;
}
.animetitle, .animetitle:visited {
    color: brown;
    font-family: ceviche one;
    font-size: 24px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
    color: black;
    font-family: Qwigley;
    font-size: 22px;
}
#list_surround {
    background-image: url("http://images4.fanpop.com/image/photos/17500000/K-ON-k-on-17593122-1167-583.jpg");
    background-position: 1px 740px;
    background-repeat: no-repeat;
    background-size: 870px 390px;
    border-radius: 30px;
    opacity: 0.8;
    padding-top: 1000px;
    width: 870px;
}
.td1 {
    background: none repeat scroll 0 0 rgba(51, 153, 204, 0.5) !important;
}
.td2 {
    background: none repeat scroll 0 0 rgba(220, 50, 153, 0.5) !important;
}
.category_totals {
    background: none repeat scroll 0 0 rgba(20, 200, 25, 0.5) !important;
}
#grand_totals {
    background: none repeat scroll 0 0 rgba(0, 150, 185, 0.5) !important;
}
#copyright {
    background: none repeat scroll 0 0 rgba(150, 10, 15, 0.5) !important;
}
.header_title {
    border-radius: 30px 30px 10px 10px;
}
.td1, #grand_totals, #copyright, .status_not_selected, .table_header {
    border-radius: 30px;
}
.td2 {
    opacity: 0.99;
}
:hover + .hide {
    background-color: rgba(200, 5, 200, 0.75);
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    border-color: black;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    display: block !important;
    height: 375px;
    left: 1000px;
    padding-bottom: 0;
    position: fixed;
    top: 160px;
    width: 251px;
}
.hide:before {
    background: none repeat scroll 0 0 transparent;
    border-radius: 25px 25px 0 0;
    color: white;
    padding-bottom: 5px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 250px;
}
:hover + .hide {
    opacity: 1;
    visibility: visible;
}
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"],
.status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"],
.status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"],
.status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"],
.status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"],
.status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]
{
    background-color: white;
}

Pico-tanFeb 9, 2015 2:50 PM

Feb 9, 2015 8:33 PM

#2587

Offline

Aug 2014

432

When I hover over the wallpaper in this list I made, I get this:

here's the list: http://myanimelist.net/animelist/tearz1d

Feb 9, 2015 8:41 PM

#2588

Offline

Feb 2010

12661

Satiriques said:
When I hover over the wallpaper in this list I made, I get this:

here's the list: http://myanimelist.net/animelist/tearz1d

Hmm I don't see that? Maybe its a Chrome or super widescreen thing. I see just the amazing Jirbil pic

Feb 9, 2015 9:49 PM

#2589

Offline

Aug 2014

432

Shishio-kun said:

Satiriques said:
When I hover over the wallpaper in this list I made, I get this:

here's the list: http://myanimelist.net/animelist/tearz1d

Hmm I don't see that? Maybe its a Chrome or super widescreen thing. I see just the amazing Jirbil pic

Weird, doesn't seem to do it anymore :|. Closing the browser seems to have fixed the problem for now I guess.

Edit: nevermind, it did it again. The "clickable" zone seems to grow over time. I'm not quite sure what cause this, I'll try to find a way to easily reproduce it tommorow.

Edit2: I found the way to reproduce it, you need to scroll down the list and put your cursor on the wallpaper. I also noticed that the clickable zone is after 1080 pixels (or the vertical size of your window), not sure if it has something to do with the wallpapers. I'm really tired I'll try to check it out tommorow

Edit3: It has something to do with that code and it also does it on firefox.:

Here's the wallpaper if you wanted it: http://i.imgur.com/1OzqhY7.png

SatiriquesFeb 10, 2015 8:10 AM

Feb 10, 2015 11:14 AM

#2590

Offline

Aug 2013

63

Oiomi-chan said:

Ukatoid said:

My dropbox. It's both pictures and (some) code. They load about 50% of the time.

well that's interesting... I would recommend moving the pics to imgur or some other picture host, but concerning the codes I don't really know, are they MAL-safe? if so paste them in the MAL css section... though I have never seen any problems such as those before.. edit: I have now tried viewing your list about 10 times using using complete refresh and haven't encountered the problem. It might be that your connection to dropbox times out due to large files or the like.

tanoshiibear said:

the category link " currently watching" is not showing the color white

that is because of MAL's illogical way of numbering the buttons and the fact that you have selected status 2 through 7 for white background, but MAL uses 1 through 4 an 6 and 7 meaning number 5 was rendered redundant.

@import "https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE";
@import "https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM";
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
@import "http://fonts.googleapis.com/css?family=Qwigley";
@import "http://fonts.googleapis.com/css?family=Henny+Penny";
@import "http://fonts.googleapis.com/css?family=Ceviche+One";
body {
    background: url("https://aningabeta.files.wordpress.com/2014/01/ibkaau83u4aqrd.jpg") no-repeat fixed right bottom / 100% 100% rgba(0, 0, 0, 0);
}
.table_header {
    background-color: green;
    border-radius: 10px;
}
.animetitle, .animetitle:visited {
    color: brown;
    font-family: ceviche one;
    font-size: 24px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
    color: black;
    font-family: Qwigley;
    font-size: 22px;
}
#list_surround {
    background-image: url("http://images4.fanpop.com/image/photos/17500000/K-ON-k-on-17593122-1167-583.jpg");
    background-position: 1px 740px;
    background-repeat: no-repeat;
    background-size: 870px 390px;
    border-radius: 30px;
    opacity: 0.8;
    padding-top: 1000px;
    width: 870px;
}
.td1 {
    background: none repeat scroll 0 0 rgba(51, 153, 204, 0.5) !important;
}
.td2 {
    background: none repeat scroll 0 0 rgba(220, 50, 153, 0.5) !important;
}
.category_totals {
    background: none repeat scroll 0 0 rgba(20, 200, 25, 0.5) !important;
}
#grand_totals {
    background: none repeat scroll 0 0 rgba(0, 150, 185, 0.5) !important;
}
#copyright {
    background: none repeat scroll 0 0 rgba(150, 10, 15, 0.5) !important;
}
.header_title {
    border-radius: 30px 30px 10px 10px;
}
.td1, #grand_totals, #copyright, .status_not_selected, .table_header {
    border-radius: 30px;
}
.td2 {
    opacity: 0.99;
}
:hover + .hide {
    background-color: rgba(200, 5, 200, 0.75);
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    border-color: black;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    display: block !important;
    height: 375px;
    left: 1000px;
    padding-bottom: 0;
    position: fixed;
    top: 160px;
    width: 251px;
}
.hide:before {
    background: none repeat scroll 0 0 transparent;
    border-radius: 25px 25px 0 0;
    color: white;
    padding-bottom: 5px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 250px;
}
:hover + .hide {
    opacity: 1;
    visibility: visible;
}
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"],
.status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"],
.status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"],
.status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"],
.status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"],
.status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]
{
    background-color: white;
}

Thanks!

Feb 11, 2015 5:37 AM

#2591

blob

Offline

Mar 2013

287

@Satiriques
Yeah, if you CTRL+A your list, we clearly see the delimitations of this invisible link on the background : [spoiler]

http://i.imgur.com/cdL7WsP.jpg

_____________________________________________________________

Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T

Here is the Official Rec Club list of Recommendations!

Feb 11, 2015 6:11 AM

#2592

Offline

Aug 2014

432

blob said:
@Satiriques
Yeah, if you CTRL+A your list, we clearly see the delimitations of this invisible link on the background : [spoiler]

http://i.imgur.com/cdL7WsP.jpg

That's a great way to show it, thanks.

Feb 13, 2015 11:00 AM

#2593

Offline

Aug 2013

63

Oiomi-chan said:

Ukatoid said:

My dropbox. It's both pictures and (some) code. They load about 50% of the time.

well that's interesting... I would recommend moving the pics to imgur or some other picture host, but concerning the codes I don't really know, are they MAL-safe? if so paste them in the MAL css section... though I have never seen any problems such as those before.. edit: I have now tried viewing your list about 10 times using using complete refresh and haven't encountered the problem. It might be that your connection to dropbox times out due to large files or the like.

tanoshiibear said:

the category link " currently watching" is not showing the color white

that is because of MAL's illogical way of numbering the buttons and the fact that you have selected status 2 through 7 for white background, but MAL uses 1 through 4 an 6 and 7 meaning number 5 was rendered redundant.

@import "https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE";
@import "https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM";
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
@import "http://fonts.googleapis.com/css?family=Qwigley";
@import "http://fonts.googleapis.com/css?family=Henny+Penny";
@import "http://fonts.googleapis.com/css?family=Ceviche+One";
body {
    background: url("https://aningabeta.files.wordpress.com/2014/01/ibkaau83u4aqrd.jpg") no-repeat fixed right bottom / 100% 100% rgba(0, 0, 0, 0);
}
.table_header {
    background-color: green;
    border-radius: 10px;
}
.animetitle, .animetitle:visited {
    color: brown;
    font-family: ceviche one;
    font-size: 24px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
    color: black;
    font-family: Qwigley;
    font-size: 22px;
}
#list_surround {
    background-image: url("http://images4.fanpop.com/image/photos/17500000/K-ON-k-on-17593122-1167-583.jpg");
    background-position: 1px 740px;
    background-repeat: no-repeat;
    background-size: 870px 390px;
    border-radius: 30px;
    opacity: 0.8;
    padding-top: 1000px;
    width: 870px;
}
.td1 {
    background: none repeat scroll 0 0 rgba(51, 153, 204, 0.5) !important;
}
.td2 {
    background: none repeat scroll 0 0 rgba(220, 50, 153, 0.5) !important;
}
.category_totals {
    background: none repeat scroll 0 0 rgba(20, 200, 25, 0.5) !important;
}
#grand_totals {
    background: none repeat scroll 0 0 rgba(0, 150, 185, 0.5) !important;
}
#copyright {
    background: none repeat scroll 0 0 rgba(150, 10, 15, 0.5) !important;
}
.header_title {
    border-radius: 30px 30px 10px 10px;
}
.td1, #grand_totals, #copyright, .status_not_selected, .table_header {
    border-radius: 30px;
}
.td2 {
    opacity: 0.99;
}
:hover + .hide {
    background-color: rgba(200, 5, 200, 0.75);
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    border-color: black;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    display: block !important;
    height: 375px;
    left: 1000px;
    padding-bottom: 0;
    position: fixed;
    top: 160px;
    width: 251px;
}
.hide:before {
    background: none repeat scroll 0 0 transparent;
    border-radius: 25px 25px 0 0;
    color: white;
    padding-bottom: 5px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 250px;
}
:hover + .hide {
    opacity: 1;
    visibility: visible;
}
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"],
.status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"],
.status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"],
.status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"],
.status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"],
.status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]
{
    background-color: white;
}

wait, but it stills does not work.
currently watching is still not white, why?

Feb 13, 2015 11:12 AM

#2594

Offline

Aug 2014

432

.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{
background-color: white!important;
}

something above your normal code is changing it, !important takes priority

Feb 13, 2015 12:27 PM

#2595

Offline

Aug 2013

63

Satiriques said:
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{
background-color: white!important;
}

something above your normal code is changing it, !important takes priority

:(
!important
doesnt work!!! its still the same! HELP!! PLZ!!!

Feb 13, 2015 12:37 PM

#2596

Offline

Aug 2014

432

tanoshiibear said:

Satiriques said:
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{
background-color: white!important;
}

something above your normal code is changing it, !important takes priority

:(
!important
doesnt work!!! its still the same! HELP!! PLZ!!!

Actually, you don't need the !important, just remove the "Read more at http://myanimelist.net/forum/?topicid=563993#ZCX8orfOiUZdQzcJ.99" above your code. Be careful when you copy and paste cause that link is sometimes gonna be there if you copy from myanimelist.net

Feb 13, 2015 12:46 PM

#2597

Offline

Aug 2013

63

Satiriques said:

tanoshiibear said:

:(
!important
doesnt work!!! its still the same! HELP!! PLZ!!!

Actually, you don't need the !important, just remove the "Read more at http://myanimelist.net/forum/?topicid=563993#ZCX8orfOiUZdQzcJ.99" above your code. Be careful when you copy and paste cause that link is sometimes gonna be there if you copy from myanimelist.net

I feel stupid O_O.

thanks bro! btw did you use my code for your list to check the errors? I was freaking out when I realized you had the same list as mine! :D

Feb 13, 2015 1:21 PM

#2598

Offline

Aug 2014

432

I feel stupid O_O.

thanks bro! btw did you use my code for your list to check the errors? I was freaking out when I realized you had the same list as mine! :D

Yeah, that's what I usually do because google chrome's inspect feels janky

Feb 15, 2015 10:07 AM

#2599

zoropp

Offline

Feb 2014

123

For some reason, things like tags and types of anime are broken. Moreover, instead of an episode counting, it keeps showing me a chapter one:

...Do you know what's wrong?Here are the codes:

Feb 15, 2015 1:04 PM

#2600