New
Nov 13, 2015 12:08 AM
#3301
So I just swapped my browser from Firefox to chrome, and I noticed that my right side fast links to my list have been moved farther apart. Not sure how to fix this tbh. http://puu.sh/ljN7m.jpg - Chrome http://puu.sh/ljNcN.jpg - Firefox I'm trying to make it so that it looks the same for both. (I want it to look the way it does on Firefox. Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://i.imgur.com/fbWUOJi.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; background-size: cover; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:10px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-300px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #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:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #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:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #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:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #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:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { }}} #list_surround .header_title span { display: block !important; } |
Nov 13, 2015 1:40 AM
#3302
Tyrel said: So I just swapped my browser from Firefox to chrome, and I noticed that my right side fast links to my list have been moved farther apart. Not sure how to fix this tbh. http://puu.sh/ljN7m.jpg - Chrome http://puu.sh/ljNcN.jpg - Firefox I'm trying to make it so that it looks the same for both. (I want it to look the way it does on Firefox. Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://i.imgur.com/fbWUOJi.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; background-size: cover; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:10px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-300px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #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:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #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:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #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:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #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:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { }}} #list_surround .header_title span { display: block !important; } Tyrel Here the code I fixed for you: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://i.imgur.com/fbWUOJi.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; background-size: cover; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:10px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-300px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #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:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #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:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #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:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #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:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } /*Adjust here Tyrel */ #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ position:absolute; right:calc(1%/2 - 300px)!important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { }}} #list_surround .header_title span { display: block !important; } I did some minor changes to this code. You can search for it at the bottom of the code: /*Adjust here Tyrel */ #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ position:absolute; right:calc(1%/2 - 300px)!important; } |
SiriusNNov 13, 2015 1:45 AM
Nov 13, 2015 10:27 AM
#3303
Natsuru_S said: Thanks a lot :D. Looks the same now on both browsers.Tyrel said: So I just swapped my browser from Firefox to chrome, and I noticed that my right side fast links to my list have been moved farther apart. Not sure how to fix this tbh. http://puu.sh/ljN7m.jpg - Chrome http://puu.sh/ljNcN.jpg - Firefox I'm trying to make it so that it looks the same for both. (I want it to look the way it does on Firefox. Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://i.imgur.com/fbWUOJi.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; background-size: cover; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:10px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-300px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #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:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #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:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #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:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #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:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ right: -96.5% !important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { }}} #list_surround .header_title span { display: block !important; } Tyrel Here the code I fixed for you: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background:url(http://i.imgur.com/fbWUOJi.jpg) fixed center; background-size: 100% auto; cursor:url(http://i49.tinypic.com/2hehh5i.png) 1 2, auto; background-size: cover; } a:hover { cursor: url(http://www.fileden.com/files/2008/11/4/2172848/mikucurgif.gif) 1 2, auto; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:10px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; right:-300px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #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:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #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:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #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:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #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:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; left:0 px; top:0px; margin:239px 10px 30px; position:relative; width:618px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { -moz-background-inline-policy:continuous; text-align: center !important; color:#3a4358; height:15px; width:600px; position:absolute; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { } /*Adjust here Tyrel */ #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ position:absolute; right:calc(1%/2 - 300px)!important; } #copyright { width: 100% !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { }}} #list_surround .header_title span { display: block !important; } I did some minor changes to this code. You can search for it at the bottom of the code: /*Adjust here Tyrel */ #list_surround .status_selected, #list_surround .status_not_selected { /*right: -146.5% !important;*/ position:absolute; right:calc(1%/2 - 300px)!important; } |
Nov 16, 2015 1:12 PM
#3304
Nov 16, 2015 2:21 PM
#3305
Doomcat55 said: Someone help me... when I try to use a Dropbox import in my CSS, the code doesn't work and duplicates itself instead. Like this Had that problem before and it's easy to fix. Just put any code after you put the import link. Example: @import "........ Body { visibility: visible; } ****You can put anything, but it's best to make it something general so it won't interfere with your codes in the imports |
Nov 18, 2015 11:55 PM
#3307
Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. |
Nov 19, 2015 1:01 PM
#3308
Lagann_Taku said: Sorry that no one answered your question - I only just got Chrome, and didn't see your post since. Add this to the top of your CSS:Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. @import "https://dl.dropboxusercontent.com/s/t8dh9uc0jbgh365/SAO%20Topbar%20Profile.css?dl=0"; |
Nov 20, 2015 11:58 PM
#3309
Doomcat55 said: Lagann_Taku said: Sorry that no one answered your question - I only just got Chrome, and didn't see your post since. Add this to the top of your CSS:Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. @import "https://dl.dropboxusercontent.com/s/t8dh9uc0jbgh365/SAO%20Topbar%20Profile.css?dl=0"; Unfortunately , that doesn't seem to have worked :/ It just off-centered the my profile tab a bit. I just copy the link itself and not the contents of the link, right? Sometimes these things work when I copy them to under some other section in the code instead of on top, but I don't have a clue where for this one. Maybe I'm doing something wrong. |
Nov 21, 2015 4:03 PM
#3310
Lagann_Taku said: Ohhh, I see - it needs to go under the other import codes at the top. Sorry, I didn't realize that would make a difference.Doomcat55 said: Lagann_Taku said: Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. @import "https://dl.dropboxusercontent.com/s/t8dh9uc0jbgh365/SAO%20Topbar%20Profile.css?dl=0"; Unfortunately , that doesn't seem to have worked :/ It just off-centered the my profile tab a bit. I just copy the link itself and not the contents of the link, right? Sometimes these things work when I copy them to under some other section in the code instead of on top, but I don't have a clue where for this one. Maybe I'm doing something wrong. And yeah, add the entire line, not the contents |
Nov 23, 2015 1:17 PM
#3311
Hi, i have a question. why my header keeps repeating itself? I have CSS - Square layout thank you |
Nov 23, 2015 6:59 PM
#3312
kazurengan said: If your header image is smaller than the width of the page, it'll repeat until the page is filled. To fix it, go to this section of your CSS:Hi, i have a question. why my header keeps repeating itself? I have CSS - Square layout thank you /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/wb9pnJE.jpg);} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/wb9pnJE.jpg); background-repeat: no-repeat; background-position: center; height: 414px; } |
Doomcat55Nov 23, 2015 7:07 PM
Nov 24, 2015 12:20 AM
#3313
Doomcat55 said: Lagann_Taku said: Ohhh, I see - it needs to go under the other import codes at the top. Sorry, I didn't realize that would make a difference.Doomcat55 said: Lagann_Taku said: Sorry that no one answered your question - I only just got Chrome, and didn't see your post since. Add this to the top of your CSS:Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. @import "https://dl.dropboxusercontent.com/s/t8dh9uc0jbgh365/SAO%20Topbar%20Profile.css?dl=0"; Unfortunately , that doesn't seem to have worked :/ It just off-centered the my profile tab a bit. I just copy the link itself and not the contents of the link, right? Sometimes these things work when I copy them to under some other section in the code instead of on top, but I don't have a clue where for this one. Maybe I'm doing something wrong. And yeah, add the entire line, not the contents Ooooooo thanks man! That seems to have fixed it, looks nice. You're like the only person who bothered to reply to my question, so extra thanks. |
Nov 24, 2015 8:10 AM
#3314
Lagann_Taku said: Sure, no problem :)Doomcat55 said: Lagann_Taku said: Doomcat55 said: Lagann_Taku said: Sorry that no one answered your question - I only just got Chrome, and didn't see your post since. Add this to the top of your CSS:Been a month since I originally asked, but any help would still be appreciated. Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .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) { 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; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; 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; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); 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; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #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-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. @import "https://dl.dropboxusercontent.com/s/t8dh9uc0jbgh365/SAO%20Topbar%20Profile.css?dl=0"; Unfortunately , that doesn't seem to have worked :/ It just off-centered the my profile tab a bit. I just copy the link itself and not the contents of the link, right? Sometimes these things work when I copy them to under some other section in the code instead of on top, but I don't have a clue where for this one. Maybe I'm doing something wrong. And yeah, add the entire line, not the contents Ooooooo thanks man! That seems to have fixed it, looks nice. You're like the only person who bothered to reply to my question, so extra thanks. btw you might want to download the file and rehost it to your own Dropbox just in case I accidentally delete it. Probably won't happen, but it's good to be safe. Here's a tutorial if you don't know how Oh, and if you do this and make a new Dropbox account for it, tell me first bc if I invite you to join then we get extra space ;) |
Doomcat55Nov 24, 2015 4:43 PM
Nov 25, 2015 7:03 AM
#3315
I'd like to use the theme from my mangalist for my animelist, however, I want the image(s) on the left hand side to be randomized this time around. How would I go about doing that? |
"Be the change you wish to see in the world." |
Nov 25, 2015 10:01 AM
#3316
Toarujisuru said: http://myanimelist.net/forum/?topicid=519341I'd like to use the theme from my mangalist for my animelist, however, I want the image(s) on the left hand side to be randomized this time around. How would I go about doing that? |
Nov 25, 2015 5:29 PM
#3317
Hi, is there any way to display a specific animes more info without pressing the more link ? im trying to create a music player. right now it requires 2 clicks for the music to play. |
Nov 25, 2015 5:35 PM
#3318
Doomcat55 said: Toarujisuru said: http://myanimelist.net/forum/?topicid=519341I'd like to use the theme from my mangalist for my animelist, however, I want the image(s) on the left hand side to be randomized this time around. How would I go about doing that? Thank you. |
"Be the change you wish to see in the world." |
Nov 25, 2015 6:06 PM
#3319
isaychris said: I don't think you can, because the website uses a native function to change the box's display values on click, which can't be changed with CSS. Maybe if you know something about scripting, which I don't.Hi, is there any way to display a specific animes more info without pressing the more link ? im trying to create a music player. right now it requires 2 clicks for the music to play. |
Nov 26, 2015 12:05 AM
#3320
Hi, I just wonder what are the codes (or tips) for creating a border which surrounds the list. So far I haven't found any tuts in the club on how to do that :( |
Nov 26, 2015 12:15 AM
#3321
Takana_no_Hana said: Hi, I just wonder what are the codes (or tips) for creating a border which surrounds the list. So far I haven't found any tuts in the club on how to do that :( Will this tutorial help? |
Nov 29, 2015 11:33 PM
#3322
Hi, when designing the list layout, how do you exactly measure the distance and position to design the suitable pictures? For example, I want to insert a random image into the list but I don't know the precise width/length to scale/resize the picture. What tool should I use? Btw I'm using PTS to design pics. |
Nov 30, 2015 7:28 AM
#3323
Takana_no_Hana said: You can use the Inspect Element tool in your browser to find the dimensions of the element you want to put the picture into (tutorial here), then resize your image to match in PS with Image > Image Size.Hi, when designing the list layout, how do you exactly measure the distance and position to design the suitable pictures? For example, I want to insert a random image into the list but I don't know the precise width/length to scale/resize the picture. What tool should I use? Btw I'm using PTS to design pics. You can also resize the size of the element with width/height CSS. |
Dec 6, 2015 6:50 AM
#3324
Dec 6, 2015 8:59 AM
#3325
TakaMeiyo said: You mean background-attachment? It's already there in Method 2, or you can just add it to each section yourself with There is ''How to set a different wallpaper for each category page'' but couldn't find the codes for different attachments. Can anyone help me out? Much appreciated. background-attachment: fixed !important; |
Dec 6, 2015 10:02 AM
#3326
Doomcat55 said: TakaMeiyo said: You mean background-attachment? It's already there in Method 2, or you can just add it to each section yourself with There is ''How to set a different wallpaper for each category page'' but couldn't find the codes for different attachments. Can anyone help me out? Much appreciated. background-attachment: fixed !important; Oh my bad. I meant this; #inlineContent { background: url(image) no-repeat !important; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important;} How can I have a secondary background for each category? |
TakaMeiyoDec 6, 2015 10:19 AM
Dec 6, 2015 10:59 AM
#3327
There's more than one way. You could copy the codes from the tutorial twice, then change the :before parts of the second set to :after (you might also have to change z-index to get the background you want on top). A cleaner way would be to add a second background to each :before part without copying each section twice, like this: /* CURRENT BACKGROUND */ .status_selected a[href*="status=1"]:before { background-color: aquamarine; background-image: url(image1)[color=red], url(image2)[/color] !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; background-size: cover !important; display: block !important; content: "" !important; z-index: -1 !important; } |
Dec 6, 2015 2:34 PM
#3328
Dec 6, 2015 3:26 PM
#3329
Hatomike said: I'm not familiar with GitHub, but as long as you're directly importing the css file, it should be fine. What does your @import line look like?Hi everyone ! Just two simple questions: -Can I use "@import" with a GitHub Gist Raw URL ? (This don't seem to work, maybe I did something wrong ?) -Why my code is duplicating in "Edit Advanced CSS File" when I update it ? (There's only two "@import" here and nothing else) Thanks ! MAL will glitch if your code is just imports. You need to put something after it, like "body {}" |
Dec 6, 2015 4:58 PM
#3330
Doomcat55 said: I'm not familiar with GitHub, but as long as you're directly importing the css file, it should be fine. What does your @import line look like? MAL will glitch if your code is just imports. You need to put something after it, like "body {}" First of all, thanks for the "body {}" idea. And my import look like this: @import url(https://gist.githubusercontent.com/Hatomike/1f36b717ae570ee6d40d/raw/Dummy.css); The following URL can be used too: https://gist.githubusercontent.com/Hatomike/1f36b717ae570ee6d40d/raw/9b773cf34b5f4c126cae68482338cf6e1154a5ca/Dummy.css https://gist.githubusercontent.com/Hatomike/1f36b717ae570ee6d40d/raw/Dummy.css https://gist.githubusercontent.com/Hatomike/1f36b717ae570ee6d40d/raw The Gist is available here: https://gist.github.com/Hatomike/1f36b717ae570ee6d40d (Please take note that this is just a file example) |
HatomikeDec 6, 2015 5:01 PM
Dec 6, 2015 6:11 PM
#3331
Dec 6, 2015 6:39 PM
#3332
Doomcat55 said: Beats me why that isn't working. All I can do is suggest that you use Dropbox instead. Maybe Mal or Github are blocking the whole thing. Thanks a lot ! |
Dec 6, 2015 7:06 PM
#3333
is there a generator which can extract anime information such as genre, average score, anime rank, started/finished date, etc ? like this person's list (but I think he made it for himself) TakaMeiyo said: Oh my bad. I meant this; #inlineContent { background: url(image) no-repeat !important; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important;} How can I have a secondary background for each category? if you want to use .status_selected as a selector, use Doomcat55's code but for #inlinecontent, use this : /*--- all anime ---*/ table:nth-of-type(2) ~ [class^="header"] ~ #inlineContent { background: url(image) ; } /*--- currently watching, completed, on hold, etc... ---*/ .header_cw:nth-of-type(2) ~ #inlineContent { background: url(image) ; } .header_ptw:nth-of-type(2) ~ #inlineContent { background: url(image) ; } .header_onhold:nth-of-type(2) ~ #inlineContent { background: url(image) ; } .header_dropped:nth-of-type(2) ~ #inlineContent { background: url(image) ; } .header_completed:nth-of-type(2) ~ #inlineContent { background: url(image) ; } |
Dec 8, 2015 8:42 PM
#3334
D_Cuy said: There is now :)is there a generator which can extract anime information such as genre, average score, anime rank, started/finished date, etc ? http://burntjello.webs.com/m/MyAnimeListTools/ (I didn't test it very much, let me know how it goes.) |
Dec 8, 2015 8:44 PM
#3335
Hey guys, wondering how i can change my header colour (Completed; Watching... Those texts above the lists) i'll be glad to have some help Edit: I've found where i'm suposed to do it i think but i don't think it has a colour text to change maybe i have to add some code |
Dec 8, 2015 9:30 PM
#3336
Can someone look at my list and tell me how do I make the background stay and the list move when I scrolling down |
Dec 9, 2015 8:54 AM
#3337
OParadise said: In the section of your code titled "CATEGORY LINKS," this code controls the text color:Hey guys, wondering how i can change my header colour (Completed; Watching... Those texts above the lists) i'll be glad to have some help Edit: I've found where i'm suposed to do it i think but i don't think it has a colour text to change maybe i have to add some code color: #FFFFFF; bameed said: In the first section of your code, add the line in red (make sure to change the bracket the way it's shown):Can someone look at my list and tell me how do I make the background stay and the list move when I scrolling down body { background-image: url(http://i.imgur.com/iKzNFa2.jpg); background-size: cover; background-attachment: fixed; } |
Doomcat55Dec 9, 2015 9:01 AM
Dec 9, 2015 10:07 AM
#3338
Doomcat55 said: OParadise said: In the section of your code titled "CATEGORY LINKS," this code controls the text color:Hey guys, wondering how i can change my header colour (Completed; Watching... Those texts above the lists) i'll be glad to have some help Edit: I've found where i'm suposed to do it i think but i don't think it has a colour text to change maybe i have to add some code color: #FFFFFF; Not that text, check image pls. Thanks for your help btw http://postimg.org/image/4qbxdkk6x/ |
Dec 9, 2015 10:22 AM
#3339
OParadise said: Doomcat55 said: OParadise said: Hey guys, wondering how i can change my header colour (Completed; Watching... Those texts above the lists) i'll be glad to have some help Edit: I've found where i'm suposed to do it i think but i don't think it has a colour text to change maybe i have to add some code color: #FFFFFF; Not that text, check image pls. Thanks for your help btw http://postimg.org/image/4qbxdkk6x/ /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); color: #FFFFFF; /* Change the color to what you want here */ } |
Syaoran3Dec 9, 2015 10:28 AM
Best MAL Generator tool! |
Dec 9, 2015 6:17 PM
#3340
DRedDogPE said: OParadise said: Doomcat55 said: OParadise said: In the section of your code titled "CATEGORY LINKS," this code controls the text color:Hey guys, wondering how i can change my header colour (Completed; Watching... Those texts above the lists) i'll be glad to have some help Edit: I've found where i'm suposed to do it i think but i don't think it has a colour text to change maybe i have to add some code color: #FFFFFF; Not that text, check image pls. Thanks for your help btw http://postimg.org/image/4qbxdkk6x/ /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); color: #FFFFFF; /* Change the color to what you want here */ } Fixed thanks (: |
Dec 11, 2015 6:30 AM
#3341
BurntJelly said: There is now :) http://burntjello.webs.com/m/MyAnimeListTools/ (I didn't test it very much, let me know how it goes.) woa great! thx for sharing, I thought nobody has it... I'll try it later (seems complicated) ==a but, sure.. I'll give you my thought once I'm done.. |
Dec 11, 2015 8:19 AM
#3342
D_Cuy said: BurntJelly said: There is now :) http://burntjello.webs.com/m/MyAnimeListTools/ (I didn't test it very much, let me know how it goes.) woa great! thx for sharing, I thought nobody has it... I'll try it later (seems complicated) ==a but, sure.. I'll give you my thought once I'm done.. I think that stuff is set |
Best MAL Generator tool! |
Dec 11, 2015 2:13 PM
#3343
The banner thing that appears at the top on a default list is now showing up on my list. Is there any way to get rid of it? Code @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*********************************************************/ /* MAL Miku Style by b1o2r3i4s5 (2012) */ /* Special Thanks to Kyouhansha, al_exs, and Shishio-kun */ /*********************************************************/ /****************/ /* Icon top bar */ /****************/ @import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css"; /*********************/ /* Anime Cover Image */ /*********************/ @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /***************************************/ /* Background & Universal text Styling */ /***************************************/ body { background-image: url(http://i58.tinypic.com/2i0u7iq.png); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position:center; color: #fff; font-size: 14.20px; font-family: "Comic Sans MS", cursive, sans-serif; /*text-shadow: 2px 2px 6px #aaa;*/ } /*************/ /* List Area */ /*************/ #list_surround { margin-left:15px; margin-top:-60px; margin-bottom: 100px; width:800px; background: rgba(0, 0, 0, 0.6); /* Gradient Borders */ border: 20px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } /****************************/ /* Highlights Rows on Hover */ /****************************/ :hover tbody.td1,:hover tbody.td2 { background-image:url(https://dl.dropbox.com/s/mh1xxfqpkpebxm8/hl2.png); background-size:100% 100%; } /* Highlight Image for First Column */ :hover tbody.td1:first-of-type,:hover tbody.td2:first-of-type {background-image:url(https://dl.dropbox.com/s/1brcvy03yoln0eu/hl3.png);} /* Highlight Image for Last Column */ :hover tbody.td1:last-of-type,:hover tbody.td2:last-of-type {background-image:url(https://dl.dropbox.com/s/p58vjxqufjitetw/hl4.png);} /* Cover Image */ :hover+.hide { display:block !important; position:fixed; top:160px; left:830px; width:225px; height:350px; background-color: rgba(0, 0, 0, 0.6); border: 30px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; background-repeat: no-repeat; background-size: contain; } /* Preview text */ :hover+.hide:before { content:"Preview \a "; white-space: pre; display:block; font-weight: bold; padding: 6px; font-size: 18px; margin-top:-30px; } /*****************/ /* Styling */ /*****************/ /* Header Styling */ .header_title { font-weight: bold; padding: 3px; text-align:center; font-size: 20px; /* Highlight Headers */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 100%; } /* cell Styling */ .td1, .td2, .table_header {padding: 2px 3px;} /* Links Styling */ a {color: #fff; text-decoration: none;} a:hover {text-decoration: underline;} /*************************/ /* Hides category totals */ /*************************/ .category_totals {display:none;} /********************/ /* Grand Total Area */ /********************/ #grand_totals { padding:3px; margin-bottom:20px; text-align:center; font-size:12px; /* Highlight Grand total Header */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 70%; background-position:center top; background-repeat:no-repeat; } /*Grand total Header*/ #grand_totals:before { content:"Grand Totals \a "; white-space: pre; font-weight: bold; padding: 3px; text-align:center; font-size: 18px; } /******************/ /* Copyright Info */ /******************/ #copyright { padding:3px; font-size:12px; margin-bottom:5px; } /*****************/ /* Style Credits */ /*****************/ #copyright:before { content:"CSS Style created by b1o2r3i4s5 \a Special Thanks to Kyouhansha, al_exs, and Shishio-kun \a \a"; white-space: pre; } body { background-size: cover; } /* Tags Row Width */ .td1:nth-of-type(6), .td2:nth-of-type(6){ width: 200px; } body { background-size: cover; } /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding: 6px; } .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) { position: relative !important; right: 75px; } |
Dec 11, 2015 3:49 PM
#3344
CynicalWarner said: The banner thing that appears at the top on a default list is now showing up on my list. Is there any way to get rid of it? Code @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*********************************************************/ /* MAL Miku Style by b1o2r3i4s5 (2012) */ /* Special Thanks to Kyouhansha, al_exs, and Shishio-kun */ /*********************************************************/ /****************/ /* Icon top bar */ /****************/ @import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css"; /*********************/ /* Anime Cover Image */ /*********************/ @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /***************************************/ /* Background & Universal text Styling */ /***************************************/ body { background-image: url(http://i58.tinypic.com/2i0u7iq.png); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position:center; color: #fff; font-size: 14.20px; font-family: "Comic Sans MS", cursive, sans-serif; /*text-shadow: 2px 2px 6px #aaa;*/ } /*************/ /* List Area */ /*************/ #list_surround { margin-left:15px; margin-top:-60px; margin-bottom: 100px; width:800px; background: rgba(0, 0, 0, 0.6); /* Gradient Borders */ border: 20px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } /****************************/ /* Highlights Rows on Hover */ /****************************/ :hover tbody.td1,:hover tbody.td2 { background-image:url(https://dl.dropbox.com/s/mh1xxfqpkpebxm8/hl2.png); background-size:100% 100%; } /* Highlight Image for First Column */ :hover tbody.td1:first-of-type,:hover tbody.td2:first-of-type {background-image:url(https://dl.dropbox.com/s/1brcvy03yoln0eu/hl3.png);} /* Highlight Image for Last Column */ :hover tbody.td1:last-of-type,:hover tbody.td2:last-of-type {background-image:url(https://dl.dropbox.com/s/p58vjxqufjitetw/hl4.png);} /* Cover Image */ :hover+.hide { display:block !important; position:fixed; top:160px; left:830px; width:225px; height:350px; background-color: rgba(0, 0, 0, 0.6); border: 30px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; background-repeat: no-repeat; background-size: contain; } /* Preview text */ :hover+.hide:before { content:"Preview a "; white-space: pre; display:block; font-weight: bold; padding: 6px; font-size: 18px; margin-top:-30px; } /*****************/ /* Styling */ /*****************/ /* Header Styling */ .header_title { font-weight: bold; padding: 3px; text-align:center; font-size: 20px; /* Highlight Headers */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 100%; } /* cell Styling */ .td1, .td2, .table_header {padding: 2px 3px;} /* Links Styling */ a {color: #fff; text-decoration: none;} a:hover {text-decoration: underline;} /*************************/ /* Hides category totals */ /*************************/ .category_totals {display:none;} /********************/ /* Grand Total Area */ /********************/ #grand_totals { padding:3px; margin-bottom:20px; text-align:center; font-size:12px; /* Highlight Grand total Header */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 70%; background-position:center top; background-repeat:no-repeat; } /*Grand total Header*/ #grand_totals:before { content:"Grand Totals a "; white-space: pre; font-weight: bold; padding: 3px; text-align:center; font-size: 18px; } /******************/ /* Copyright Info */ /******************/ #copyright { padding:3px; font-size:12px; margin-bottom:5px; } /*****************/ /* Style Credits */ /*****************/ #copyright:before { content:"CSS Style created by b1o2r3i4s5 a Special Thanks to Kyouhansha, al_exs, and Shishio-kun a a"; white-space: pre; } body { background-size: cover; } /* Tags Row Width */ .td1:nth-of-type(6), .td2:nth-of-type(6){ width: 200px; } body { background-size: cover; } /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding: 6px; } .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) { position: relative !important; right: 75px; } Try @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; Also for automatic cover updating you can use @import "http://mal-image.appspot.com/anime/CynicalWarner"; |
Best MAL Generator tool! |
Dec 11, 2015 4:11 PM
#3345
DRedDogPE said: CynicalWarner said: The banner thing that appears at the top on a default list is now showing up on my list. Is there any way to get rid of it? Code @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*********************************************************/ /* MAL Miku Style by b1o2r3i4s5 (2012) */ /* Special Thanks to Kyouhansha, al_exs, and Shishio-kun */ /*********************************************************/ /****************/ /* Icon top bar */ /****************/ @import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css"; /*********************/ /* Anime Cover Image */ /*********************/ @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /***************************************/ /* Background & Universal text Styling */ /***************************************/ body { background-image: url(http://i58.tinypic.com/2i0u7iq.png); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position:center; color: #fff; font-size: 14.20px; font-family: "Comic Sans MS", cursive, sans-serif; /*text-shadow: 2px 2px 6px #aaa;*/ } /*************/ /* List Area */ /*************/ #list_surround { margin-left:15px; margin-top:-60px; margin-bottom: 100px; width:800px; background: rgba(0, 0, 0, 0.6); /* Gradient Borders */ border: 20px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } /****************************/ /* Highlights Rows on Hover */ /****************************/ :hover tbody.td1,:hover tbody.td2 { background-image:url(https://dl.dropbox.com/s/mh1xxfqpkpebxm8/hl2.png); background-size:100% 100%; } /* Highlight Image for First Column */ :hover tbody.td1:first-of-type,:hover tbody.td2:first-of-type {background-image:url(https://dl.dropbox.com/s/1brcvy03yoln0eu/hl3.png);} /* Highlight Image for Last Column */ :hover tbody.td1:last-of-type,:hover tbody.td2:last-of-type {background-image:url(https://dl.dropbox.com/s/p58vjxqufjitetw/hl4.png);} /* Cover Image */ :hover+.hide { display:block !important; position:fixed; top:160px; left:830px; width:225px; height:350px; background-color: rgba(0, 0, 0, 0.6); border: 30px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; background-repeat: no-repeat; background-size: contain; } /* Preview text */ :hover+.hide:before { content:"Preview a "; white-space: pre; display:block; font-weight: bold; padding: 6px; font-size: 18px; margin-top:-30px; } /*****************/ /* Styling */ /*****************/ /* Header Styling */ .header_title { font-weight: bold; padding: 3px; text-align:center; font-size: 20px; /* Highlight Headers */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 100%; } /* cell Styling */ .td1, .td2, .table_header {padding: 2px 3px;} /* Links Styling */ a {color: #fff; text-decoration: none;} a:hover {text-decoration: underline;} /*************************/ /* Hides category totals */ /*************************/ .category_totals {display:none;} /********************/ /* Grand Total Area */ /********************/ #grand_totals { padding:3px; margin-bottom:20px; text-align:center; font-size:12px; /* Highlight Grand total Header */ background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png); background-size:100% 70%; background-position:center top; background-repeat:no-repeat; } /*Grand total Header*/ #grand_totals:before { content:"Grand Totals a "; white-space: pre; font-weight: bold; padding: 3px; text-align:center; font-size: 18px; } /******************/ /* Copyright Info */ /******************/ #copyright { padding:3px; font-size:12px; margin-bottom:5px; } /*****************/ /* Style Credits */ /*****************/ #copyright:before { content:"CSS Style created by b1o2r3i4s5 a Special Thanks to Kyouhansha, al_exs, and Shishio-kun a a"; white-space: pre; } body { background-size: cover; } /* Tags Row Width */ .td1:nth-of-type(6), .td2:nth-of-type(6){ width: 200px; } body { background-size: cover; } /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding: 6px; } .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) { position: relative !important; right: 75px; } Try @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; Also for automatic cover updating you can use @import "http://mal-image.appspot.com/anime/CynicalWarner"; Didn't seem to work. Thanks for help though :D Edit: It actually mostly worked. The edge of some words still show up at the top. |
ZoeRyoeDec 11, 2015 4:17 PM
Dec 11, 2015 5:36 PM
#3346
DRedDogPE said: I think that stuff is set ah my bad.. his completed list is more accurate (sorry dzikibambus for my rudeness, your list is just awesome XD) he uses #xmenu[ID] as a selector for rank & popularity info. str_data3.css is from his personal generator... the "start/end dates" option is meant to be start/end "watching" dates, so if you set the option up, you need to input it all manually... what I mean is start/end "airing" dates of anime can be found here > e.g. elfen lied or in user's entry list > e.g. your list but I don't know where he got the popularity and rank info I see you've been developing a generator, so I give you these xml formats XD |
D_CuyDec 11, 2015 5:45 PM
Dec 11, 2015 7:05 PM
#3347
D_Cuy said: DRedDogPE said: <br /><br /> I think that stuff is set<br /> <br /> ah my bad.. his completed list is more accurate (sorry dzikibambus for my rudeness, your list is just awesome XD)<br /> he uses #xmenu[ID] as a selector for rank & popularity info.<br /> <br /> str_data3.css is from his personal generator...<br /> <br /> the "start/end dates" option is meant to be start/end "watching" dates, <br /> so if you set the option up, you need to input it all manually...<br /> <br /> what I mean is start/end "airing" dates of anime<br /> can be found here > e.g. elfen lied<br /> or in user's entry list > e.g. your list<br /> <br /> but I don't know where he got the popularity and rank info<br /> I see you've been developing a generator, so I give you these xml formats XD I can do it pretty easy, I'll do it tomorrow, its 3:04 am ATM, I'll message you with the link and how to use it when it is done. |
Best MAL Generator tool! |
Dec 11, 2015 8:35 PM
#3348
Heya folks, 1) Is it possible to breakdown the wall that is the anime list in multiple smaller walls through the score rating? I would like to visually separate the animes I liked, rated >5, to the animes I disliked rated <5. Right now it's messy and everything is listed together, one after another. Visually it looks like this once I click the score for a drop down style. 10 9 8 7 6 5 4 3 2 1 I would like it to be like this: >5 ------ space something =5 or <5 I'm not sure what kind of shenanigans you need, I would prefer having 2 distinct semi opaque backgrounds entirely, but a simple line break within the same background would be okay. 2) Is it possible to customize the default page that shows up when you click "my anime list" from the profile page? Right now, it shows "all anime" when I click it first, I would much prefer it showing either my "completed" animes with the score layout I talked about above list, or "my plan to watch" anime list, or my "watching now" list if I ever make one. thanks -- I'm not sure if the current CSS style I use matters, you can check my profile to see it, it's "Transparent menus w/wide list, long covers and no banner" from this link http://myanimelist.net/forum/?topicid=1198609 |
betterthansaladDec 11, 2015 8:41 PM
Dec 12, 2015 1:19 AM
#3349
@betterthansalad 1) I think, it's not possible... 2) go to > here. at the "Default Status Selected", change Show All with whatever you want... DRedDogPE said: I can do it pretty easy, I'll do it tomorrow, its 3:04 am ATM, I'll message you with the link and how to use it when it is done. oh.. that helps a lot ! thx... I'll try both BurntJelly's and yours... |
Dec 12, 2015 7:44 AM
#3350
D_Cuy said: @betterthansalad 1) I think, it's not possible... 2) go to > here. at the "Default Status Selected", change Show All with whatever you want... Hi, I didn't see 2) was an option, thanks. How about the order? Like type/score as a default. The url when unorganized is http://myanimelist.net/animelist/name and when organized with the score http://myanimelist.net/animelist/name?&order=4 Anyway I could add the 2nd url somewhere maybe? About 1) Does anyone else have an idea on how I could separate what I liked from what I disliked? Even if it's not the way I presented it, there may be another way to do it. Other than deleting everything hah. If I have everything I dislike thrown at my face every time I click my profile, I'm going to be physically sick. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |