New
Oct 13, 2016 6:07 PM
#201
Shishio-kun said: I want the tags to show up. Also don't know how to fix the bold anime titles.VilkaTheWolf said: Shishio-kun said: VilkaTheWolf said: ShishiExample said: Which lines do I remove? "filter: alpha(opacity=50;" appears in my list a lot.VilkaTheWolf said: VilkaTheWolf said: My anime covers wont appear when I hover over them, but when i click 'more' it shows the covers... @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1000px; 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; } please help @Shishio-kun I did what you said. I added all the codes I needed, but it's still doing it. This is my new CSS @import url(https://storage.live.com/items/4A07C1EEED420167%21170); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(24, 24, 24, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 450px; left: 645px; position: fixed; top: 65px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; 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 { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 482px; left: 665px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } Please help. Add a closing bracket } below #copyright. Notice its missing one after its codes unlike the others. Remove these lines (2) filter: alpha(opacity=50; both of them It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). |
Oct 13, 2016 8:42 PM
#202
VilkaTheWolf said: Shishio-kun said: I want the tags to show up. Also don't know how to fix the bold anime titles.VilkaTheWolf said: Shishio-kun said: It seems to be working now. However now all the anime titles in my list are bold like the headers and my tags aren't showing up in the boxes (they were before). Thanks :) you're a big help.VilkaTheWolf said: ShishiExample said: Which lines do I remove? "filter: alpha(opacity=50;" appears in my list a lot.VilkaTheWolf said: VilkaTheWolf said: My anime covers wont appear when I hover over them, but when i click 'more' it shows the covers... @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1000px; 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; } please help @Shishio-kun I did what you said. I added all the codes I needed, but it's still doing it. This is my new CSS @import url(https://storage.live.com/items/4A07C1EEED420167%21170); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(24, 24, 24, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 450px; left: 645px; position: fixed; top: 65px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; 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 { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 482px; left: 665px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } Please help. Add a closing bracket } below #copyright. Notice its missing one after its codes unlike the others. Remove these lines (2) filter: alpha(opacity=50; both of them It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title |
Oct 14, 2016 1:46 AM
#203
Shishio-kun said: Everything works! Thank you! btw, is having the anime's english title show up in the hover possible? i looked up the tutorial stuff about having the titles in it but its only the original names.VilkaTheWolf said: Shishio-kun said: VilkaTheWolf said: Shishio-kun said: It seems to be working now. However now all the anime titles in my list are bold like the headers and my tags aren't showing up in the boxes (they were before). Thanks :) you're a big help.VilkaTheWolf said: ShishiExample said: Which lines do I remove? "filter: alpha(opacity=50;" appears in my list a lot.VilkaTheWolf said: VilkaTheWolf said: My anime covers wont appear when I hover over them, but when i click 'more' it shows the covers... @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1000px; 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; } please help @Shishio-kun I did what you said. I added all the codes I needed, but it's still doing it. This is my new CSS @import url(https://storage.live.com/items/4A07C1EEED420167%21170); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(24, 24, 24, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 450px; left: 645px; position: fixed; top: 65px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; 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 { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 482px; left: 665px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } Please help. Add a closing bracket } below #copyright. Notice its missing one after its codes unlike the others. Remove these lines (2) filter: alpha(opacity=50; both of them It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title |
Oct 14, 2016 3:18 AM
#204
VilkaTheWolf said: Shishio-kun said: Everything works! Thank you! btw, is having the anime's english title show up in the hover possible? i looked up the tutorial stuff about having the titles in it but its only the original names.VilkaTheWolf said: Shishio-kun said: I want the tags to show up. Also don't know how to fix the bold anime titles.VilkaTheWolf said: Shishio-kun said: It seems to be working now. However now all the anime titles in my list are bold like the headers and my tags aren't showing up in the boxes (they were before). Thanks :) you're a big help.VilkaTheWolf said: ShishiExample said: Which lines do I remove? "filter: alpha(opacity=50;" appears in my list a lot.VilkaTheWolf said: VilkaTheWolf said: My anime covers wont appear when I hover over them, but when i click 'more' it shows the covers... @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .hide { background-size: cover; left: 1000px; 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; } please help @Shishio-kun I did what you said. I added all the codes I needed, but it's still doing it. This is my new CSS @import url(https://storage.live.com/items/4A07C1EEED420167%21170); /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://myanimelist.net/images/userwalls/3283007.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; margin: 0; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color: #000000; } /* // Determines the positioning of your list */ #list_surround { margin-left: auto; margin-right: 20px; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #000000; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #000000; background-color: #FFFFFF; padding: 2px; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #000000; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #000000; padding: 2px; background-color: #FFFFFF; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(24, 24, 24, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 450px; left: 645px; position: fixed; top: 65px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; 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 { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 482px; left: 665px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } Please help. Add a closing bracket } below #copyright. Notice its missing one after its codes unlike the others. Remove these lines (2) filter: alpha(opacity=50; both of them It's cuz you're using the version of the CSS that shows tags on hover and it needs to be adjusted; see the opening posts on how to adjust them (or delete the codes added from this topic and start over with one that doesn't show tags on hover but still shows covers). then you adjust the tags as explained in post #2 and remove font-weight: bold; from under anime title Automatically in the hover? I never looked into that so I don't know. |
Dec 13, 2016 1:24 PM
#205
Thanks for the tutorial it worked really well, but I have one question. Is there a way to make the box in which the tags are written scale with the text? Basically can the box get bigger the more text there is so it can all fit? |
Dec 13, 2016 2:48 PM
#206
Kano said: Thanks for the tutorial it worked really well, but I have one question. Is there a way to make the box in which the tags are written scale with the text? Basically can the box get bigger the more text there is so it can all fit? You can remove height and width and just use padding codes to space the box around the text. Example: /* MINI REVIEW (HOVER TAG) */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 542px; left: 1232px; background-color: rgba(255, 255, 255, 1) !important; border-color: black; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 1px; font-size: 14px; padding: 5px 5px 5px 5px; color: white !important; z-index: 1; } |
Dec 13, 2016 3:26 PM
#207
Thank you so much, I'm gonna try and test this out and see how much I like it. Keep up the good work :D. |
Dec 19, 2016 4:24 PM
#208
This works well for the most part for my anime list, but it does not work at all for my manga list. I have checked that I am doing the right code for my manga list, but 90% of the time the covers don't show up, and when they do they are of anime and manga that do not correlate. My other problem is: My anime list also has covers that are not filled in, and I tried MalCat on both manga and anime lists but nothing happened. Am I doing something wrong? /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ @import "https://malcat-gen.appspot.com/series?preset=animetitlebefore"; @import url(https://storage.live.com/items/4A07C1EEED420167%21170); BODY { background-attachment: fixed; background-color: #000000; background-repeat: no-repeat; color: #919191; font-family: trebuchet ms; font-size: 18px; line-height: 13px; text-transform: lowercase; background-size: cover; } #list_surround tbody tr:hover{ background-color: transparent; border-bottom: 1px solid #BEBDBD; } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover{ background-color: transparent; border: 0 none; } #mal_cs_powered { bottom: auto !important; position: fixed !important; right: 0 !important; } # a { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 12px !important; text-decoration: none !important; text-transform: lowercase !important; } # { background: none repeat scroll 0 0 transparent !important; border-bottom: 0 solid #AA98A9 !important; color: #BEBDBD !important; font-family: trebuchet ms !important; height: 25px; line-height: 7px; text-transform: lowercase !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: medium none !important; } #mal_cs_otherlinks, #mal_cs_otherlinks div, #mal_cs_otherlinks span, #mal_cs_otherlinks strong { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 10px; font-weight: normal; text-transform: lowercase !important; } #inlineContent { background: url("http://imgur.com/DS34wJ1.jpg") no-repeat scroll right bottom / contain transparent; background-size: contain ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } * { cursor: url('http://media.tumblr.com/f4dc10a1d946a74b30865b0aba74bab0/tumblr_inline_mv6m8cAB8U1r63cto.gif'), auto; } div#list_surround { float: left; margin: 0 auto; padding-left: 310px; padding-top: 100px; width: 630px; } a { color: #AA98A9; font-size: 13px; text-decoration: none; text-transform: lowercase; } a:visited { color: #AA98A9; font-size: 13px; text-decoration: none; text-transform: lowercase; } a:hover { color: #BEBDBD; cursor: default; font-size: 13px; text-decoration: none; text-transform: lowercase; } .td1, .td2 { background-color: transparent; border: 1px dotted transparent; color: #919191; font-size: 10px; } .status_selected { color: #09245B; font-size: 11px; } .status_not_selected { color: #09245B; font-size: 11px; } .status_selected a { font-size: 11px; } .status_not_selected a { color: #BEBDBD; font-size: 11px; } .table_header { color: #AA98A9; font-size: 11px; padding-bottom: 10px; } .table_headerLink { color: #AA98A9; font-size: 11px; } .table_headerLink:visited { color: #AA98A9; font-size: 11px; } .table_headerLink:hover { color: #BEBDBD; font-size: 11px; } .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { color: #AA98A9; font-size: 30px; font-weight: bold; letter-spacing: -2px; padding-bottom: 30px; padding-top: 15px; text-align: center; text-transform: lowercase; } .category_totals { font-size: 9px; padding-top: 14px; text-align: center; } #grand_totals { font-size: 9px; text-align: center; } .header_al { } .header_al_links { } .animetitle { } small a { color: #919191; font-size: 10px; } small a:hover { color: #BEBDBD; font-size: 10px; } #copyright { font-size: 9px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px; text-align: center; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .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; } /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ @import "https://malcat-gen.appspot.com/series?preset=animetitlebefore"; @import url(https://dl.dropboxusercontent.com/s/cmne70lafm596xa/manga.css); BODY { background-attachment: fixed; background-color: #000000; background-repeat: no-repeat; color: #919191; font-family: trebuchet ms; font-size: 18px; line-height: 13px; text-transform: lowercase; background-size: cover; } #list_surround tbody tr:hover{ background-color: transparent; border-bottom: 1px solid #BEBDBD; } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover{ background-color: transparent; border: 0 none; } #mal_cs_powered { bottom: auto !important; position: fixed !important; right: 0 !important; } # a { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 12px !important; text-decoration: none !important; text-transform: lowercase !important; } # { background: none repeat scroll 0 0 transparent !important; border-bottom: 0 solid #AA98A9 !important; color: #BEBDBD !important; font-family: trebuchet ms !important; height: 25px; line-height: 7px; text-transform: lowercase !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: medium none !important; } #mal_cs_otherlinks, #mal_cs_otherlinks div, #mal_cs_otherlinks span, #mal_cs_otherlinks strong { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 10px; font-weight: normal; text-transform: lowercase !important; } #inlineContent { background: url("http://imgur.com/DS34wJ1.jpg") no-repeat scroll right bottom / contain transparent; background-size: contain ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } * { cursor: url('http://media.tumblr.com/f4dc10a1d946a74b30865b0aba74bab0/tumblr_inline_mv6m8cAB8U1r63cto.gif'), auto; } div#list_surround { float: left; margin: 0 auto; padding-left: 310px; padding-top: 100px; width: 630px; } a { color: #AA98A9; font-size: 13px; text-decoration: none; text-transform: lowercase; } a:visited { color: #AA98A9; font-size: 13px; text-decoration: none; text-transform: lowercase; } a:hover { color: #BEBDBD; cursor: default; font-size: 13px; text-decoration: none; text-transform: lowercase; } .td1, .td2 { background-color: transparent; border: 1px dotted transparent; color: #919191; font-size: 10px; } .status_selected { color: #09245B; font-size: 11px; } .status_not_selected { color: #09245B; font-size: 11px; } .status_selected a { font-size: 11px; } .status_not_selected a { color: #BEBDBD; font-size: 11px; } .table_header { color: #AA98A9; font-size: 11px; padding-bottom: 10px; } .table_headerLink { color: #AA98A9; font-size: 11px; } .table_headerLink:visited { color: #AA98A9; font-size: 11px; } .table_headerLink:hover { color: #BEBDBD; font-size: 11px; } .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { color: #AA98A9; font-size: 30px; font-weight: bold; letter-spacing: -2px; padding-bottom: 30px; padding-top: 15px; text-align: center; text-transform: lowercase; } .category_totals { font-size: 9px; padding-top: 14px; text-align: center; } #grand_totals { font-size: 9px; text-align: center; } .header_al { } .header_al_links { } .animetitle { } small a { color: #919191; font-size: 10px; } small a:hover { color: #BEBDBD; font-size: 10px; } #copyright { font-size: 9px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px; text-align: center; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ .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; } |
Dec 21, 2016 9:44 PM
#209
Can change the "tags section" for make reviews for the "comment section?"? |
Dec 21, 2016 10:10 PM
#210
Sokuno said: Can change the "tags section" for make reviews for the "comment section?"? You mean the comments when you click More, right? It's something we used to wonder about but from what I remember no one found a way because the comments are contained in the more section which requires you to click the button first. I can't recall exactly, but I think in one of @Nymphiae layouts she had a thing where they drew the text from the anime synopsis page to display on an anime list (which is very uncommon and amazing). Maybe there's a way to link to the comment section, if they are drawing text from the synopsis. Comments can contain BBcode, I believe you can display URL links written in the comments without clicking the more button. |
Dec 24, 2016 10:54 AM
#211
Shishio-kun said: Sokuno said: Can change the "tags section" for make reviews for the "comment section?"? You mean the comments when you click More, right? It's something we used to wonder about but from what I remember no one found a way because the comments are contained in the more section which requires you to click the button first. I can't recall exactly, but I think in one of @Nymphiae layouts she had a thing where they drew the text from the anime synopsis page to display on an anime list (which is very uncommon and amazing). Maybe there's a way to link to the comment section, if they are drawing text from the synopsis. Comments can contain BBcode, I believe you can display URL links written in the comments without clicking the more button. True, it was done manually with BurntJelly's generator, and displayed synopses as :before or :after elements. I don't know anything detailed about it, but I don't think it would be possible to retrieve the data from comments section. Maybe @Doomcat55 would know better cause he can actually code and knows about stuff like this. Though, again, I think BurntJelly's generator works with the anime information, and this would be user information. Btw, I believe @Cateinya's endless summer layout used the same synopses trick as my layout. Afaik, the best way to write mini reviews that can be displayed on a list is either in the tags section, thought the character limit is 255 and you might want to use the tag section for something else, or to do it manually like I did with the synopses, as :before or :after elements. |
Jan 12, 2017 7:25 PM
#212
Enseihar said: Sorry for the disturbances I really need some help regarding Layout design There is no guide for Cover+Tag with Zoom on your guide https://myanimelist.net/forum/?topicid=419405 Which why I'm having trouble to make it work. However, I managed to work Zoom+cover picture but the cover picture starts at the center which made me feel dizzy while browsing on my layout page so I had removed it whilst the tag, I had no idea how to make it work only the cover picture+zoom. I want to imitate your sample where the zoom out starts near the number But I wish the tag borders is also included with the cover picture while zooming out. I'm really sorry for the trouble I just had no idea on how to fix this issue. Animelist layout codes @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal\_cs\_listinfo a:hover, #mal\_cs\_links a:hover, #mal\_cs\_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd, #mal\_cs\_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal\_cs\_listinfo:hover:before, #mal\_cs\_links:hover:before, #mal\_cs\_otherlinks:hover:before, #mal\_cs\_powered:hover:before, #mal\_cs\_listinfo:hover:after, #mal\_cs\_links:hover:after, #mal\_cs\_otherlinks:hover:after, #mal\_cs\_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal\_cs\_otherlinks strong a { color: #333333 !important; } #mal\_cs\_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal\_control\_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal\_cs\_listinfo:hover div, #mal\_cs\_links:hover div, #mal\_cs\_otherlinks:hover div, #mal\_cs\_powered:hover div, #mal\_cs\_powered:hover dd { opacity: 1; } #mal\_cs\_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2), #mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal\_cs\_listinfo a, #mal\_cs\_links a, #mal\_cs\_otherlinks a, #mal\_cs\_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal\_cs\_listinfo a:nth-of-type(1), #mal\_cs\_links a:nth-of-type(1), #mal\_cs\_otherlinks a:nth-of-type(1), #mal\_cs\_powered a:nth-of-type(1) { margin-top: 0; } #mal\_cs\_listinfo strong a strong { font-weight: normal; } #mal\_cs\_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal\_cs\_powered:hover a { opacity: 1; } #mal\_cs\_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal\_cs\_powered a img:hover { background-color: #403C5A; } #mal\_cs\_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal\_cs\_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal\_cs\_powered #search #searchBox:hover, #mal\_cs\_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal\_cs\_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal\_cs\_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal\_cs\_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal\_cs\_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal\_cs\_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal\_cs\_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal\_cs\_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal\_cs\_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal\_cs\_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal\_cs\_pic a img { display: none; } #mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links { border-right: 0 none !important; } #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { padding: 32px 0 0 !important; } #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal\_cs\_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal\_cs\_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal\_cs\_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal\_cs\_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal\_cs\_listinfo:after, #mal\_cs\_links:after, #mal\_cs\_otherlinks:after, #mal\_cs\_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; transition: opacity .2s linear; -moz-transition: opacity .2s linear; -webkit-transition: opacity .2s linear; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Mangalist Layout Codes @import url(https://dl.dropboxusercontent.com/s/cmne70lafm596xa/manga.css); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal\_cs\_listinfo a:hover, #mal\_cs\_links a:hover, #mal\_cs\_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd, #mal\_cs\_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal\_cs\_listinfo:hover:before, #mal\_cs\_links:hover:before, #mal\_cs\_otherlinks:hover:before, #mal\_cs\_powered:hover:before, #mal\_cs\_listinfo:hover:after, #mal\_cs\_links:hover:after, #mal\_cs\_otherlinks:hover:after, #mal\_cs\_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal\_cs\_otherlinks strong a { color: #333333 !important; } #mal\_cs\_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal\_control\_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal\_cs\_listinfo:hover div, #mal\_cs\_links:hover div, #mal\_cs\_otherlinks:hover div, #mal\_cs\_powered:hover div, #mal\_cs\_powered:hover dd { opacity: 1; } #mal\_cs\_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2), #mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal\_cs\_listinfo a, #mal\_cs\_links a, #mal\_cs\_otherlinks a, #mal\_cs\_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal\_cs\_listinfo a:nth-of-type(1), #mal\_cs\_links a:nth-of-type(1), #mal\_cs\_otherlinks a:nth-of-type(1), #mal\_cs\_powered a:nth-of-type(1) { margin-top: 0; } #mal\_cs\_listinfo strong a strong { font-weight: normal; } #mal\_cs\_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal\_cs\_powered:hover a { opacity: 1; } #mal\_cs\_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal\_cs\_powered a img:hover { background-color: #403C5A; } #mal\_cs\_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal\_cs\_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal\_cs\_powered #search #searchBox:hover, #mal\_cs\_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal\_cs\_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal\_cs\_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal\_cs\_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal\_cs\_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal\_cs\_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal\_cs\_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal\_cs\_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal\_cs\_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal\_cs\_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal\_cs\_pic a img { display: none; } #mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links { border-right: 0 none !important; } #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { padding: 32px 0 0 !important; } #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal\_cs\_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal\_cs\_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal\_cs\_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal\_cs\_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal\_cs\_listinfo:after, #mal\_cs\_links:after, #mal\_cs\_otherlinks:after, #mal\_cs\_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Thanks in advance! So in short what you want is: When you move the cursor over the thumbnail preview, the tags zoom out of nowhere too, alongside the cover pic. If not let me know exactly. |
Jan 13, 2017 5:56 PM
#213
Enseihar said: Shishio-kun said: Enseihar said: Sorry for the disturbances I really need some help regarding Layout design There is no guide for Cover+Tag with Zoom on your guide https://myanimelist.net/forum/?topicid=419405 Which why I'm having trouble to make it work. However, I managed to work Zoom+cover picture but the cover picture starts at the center which made me feel dizzy while browsing on my layout page so I had removed it whilst the tag, I had no idea how to make it work only the cover picture+zoom. I want to imitate your sample where the zoom out starts near the number But I wish the tag borders is also included with the cover picture while zooming out. I'm really sorry for the trouble I just had no idea on how to fix this issue. Animelist layout codes @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal\_cs\_listinfo a:hover, #mal\_cs\_links a:hover, #mal\_cs\_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd, #mal\_cs\_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal\_cs\_listinfo:hover:before, #mal\_cs\_links:hover:before, #mal\_cs\_otherlinks:hover:before, #mal\_cs\_powered:hover:before, #mal\_cs\_listinfo:hover:after, #mal\_cs\_links:hover:after, #mal\_cs\_otherlinks:hover:after, #mal\_cs\_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal\_cs\_otherlinks strong a { color: #333333 !important; } #mal\_cs\_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal\_control\_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal\_cs\_listinfo:hover div, #mal\_cs\_links:hover div, #mal\_cs\_otherlinks:hover div, #mal\_cs\_powered:hover div, #mal\_cs\_powered:hover dd { opacity: 1; } #mal\_cs\_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2), #mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal\_cs\_listinfo a, #mal\_cs\_links a, #mal\_cs\_otherlinks a, #mal\_cs\_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal\_cs\_listinfo a:nth-of-type(1), #mal\_cs\_links a:nth-of-type(1), #mal\_cs\_otherlinks a:nth-of-type(1), #mal\_cs\_powered a:nth-of-type(1) { margin-top: 0; } #mal\_cs\_listinfo strong a strong { font-weight: normal; } #mal\_cs\_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal\_cs\_powered:hover a { opacity: 1; } #mal\_cs\_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal\_cs\_powered a img:hover { background-color: #403C5A; } #mal\_cs\_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal\_cs\_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal\_cs\_powered #search #searchBox:hover, #mal\_cs\_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal\_cs\_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal\_cs\_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal\_cs\_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal\_cs\_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal\_cs\_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal\_cs\_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal\_cs\_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal\_cs\_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal\_cs\_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal\_cs\_pic a img { display: none; } #mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links { border-right: 0 none !important; } #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { padding: 32px 0 0 !important; } #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal\_cs\_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal\_cs\_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal\_cs\_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal\_cs\_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal\_cs\_listinfo:after, #mal\_cs\_links:after, #mal\_cs\_otherlinks:after, #mal\_cs\_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; transition: opacity .2s linear; -moz-transition: opacity .2s linear; -webkit-transition: opacity .2s linear; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Mangalist Layout Codes @import url(https://dl.dropboxusercontent.com/s/cmne70lafm596xa/manga.css); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal\_cs\_listinfo a:hover, #mal\_cs\_links a:hover, #mal\_cs\_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd, #mal\_cs\_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal\_cs\_listinfo:hover:before, #mal\_cs\_links:hover:before, #mal\_cs\_otherlinks:hover:before, #mal\_cs\_powered:hover:before, #mal\_cs\_listinfo:hover:after, #mal\_cs\_links:hover:after, #mal\_cs\_otherlinks:hover:after, #mal\_cs\_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal\_cs\_otherlinks strong a { color: #333333 !important; } #mal\_cs\_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal\_control\_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal\_cs\_listinfo:hover div, #mal\_cs\_links:hover div, #mal\_cs\_otherlinks:hover div, #mal\_cs\_powered:hover div, #mal\_cs\_powered:hover dd { opacity: 1; } #mal\_cs\_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2), #mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal\_cs\_listinfo a, #mal\_cs\_links a, #mal\_cs\_otherlinks a, #mal\_cs\_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal\_cs\_listinfo a:nth-of-type(1), #mal\_cs\_links a:nth-of-type(1), #mal\_cs\_otherlinks a:nth-of-type(1), #mal\_cs\_powered a:nth-of-type(1) { margin-top: 0; } #mal\_cs\_listinfo strong a strong { font-weight: normal; } #mal\_cs\_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal\_cs\_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal\_cs\_powered:hover a { opacity: 1; } #mal\_cs\_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal\_cs\_powered a img:hover { background-color: #403C5A; } #mal\_cs\_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal\_cs\_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal\_cs\_powered #search #searchBox:hover, #mal\_cs\_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal\_cs\_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal\_cs\_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal\_cs\_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal\_cs\_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal\_cs\_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal\_cs\_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal\_cs\_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal\_cs\_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal\_cs\_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal\_cs\_pic a img { display: none; } #mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links { border-right: 0 none !important; } #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { padding: 32px 0 0 !important; } #mal\_cs\_listinfo:before, #mal\_cs\_links:before, #mal\_cs\_otherlinks:before, #mal\_cs\_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal\_cs\_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal\_cs\_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal\_cs\_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal\_cs\_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal\_cs\_listinfo:after, #mal\_cs\_links:after, #mal\_cs\_otherlinks:after, #mal\_cs\_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) { display: tab\le-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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Thanks in advance! So in short what you want is: When you move the cursor over the thumbnail preview, the tags zoom out of nowhere too, alongside the cover pic. If not let me know exactly. Ummmm... yes something like that but my design layout has no thumbnail preview, only the anime titles I still don't understand. So what you want is: 1. to use the layout you have now 2. when you point to an animetitle, you want the cover pic and tags (mini-review) to zoom out from the animetitle? |
Jan 14, 2017 4:16 PM
#214
Enseihar said: Shishio-kun said: Enseihar said: Shishio-kun said: Enseihar said: Sorry for the disturbances I really need some help regarding Layout design There is no guide for Cover+Tag with Zoom on your guide https://myanimelist.net/forum/?topicid=419405 Which why I'm having trouble to make it work. However, I managed to work Zoom+cover picture but the cover picture starts at the center which made me feel dizzy while browsing on my layout page so I had removed it whilst the tag, I had no idea how to make it work only the cover picture+zoom. I want to imitate your sample where the zoom out starts near the number But I wish the tag borders is also included with the cover picture while zooming out. I'm really sorry for the trouble I just had no idea on how to fix this issue. Animelist layout codes @import url(https://storage.live.com/items/4A07C1EEED420167%21170); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before, #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: #333333 !important; } #mal_cs_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal_cs_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal_cs_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal_cs_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; transition: opacity .2s linear; -moz-transition: opacity .2s linear; -webkit-transition: opacity .2s linear; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Mangalist Layout Codes @import url(https://dl.dropboxusercontent.com/s/cmne70lafm596xa/manga.css); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/azktRAB.png"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #inlineContent { background-image: url("http://i.imgur.com/vvEawWr.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: inline-block !important; height: 188px; margin: auto !important; position: fixed; top: 0 !important; width: 700px !important; z-index: 4 !important; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: red; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #3167A9; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i40.tinypic.com/opuveu.png"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: red; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #C41E0E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 200px; line-height: 24px; padding-bottom: 0; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: White; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s 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: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i41.tinypic.com/qp4ewj.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_completed { background-color: transparent; background-image: url("http://i41.tinypic.com/2iha269.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i39.tinypic.com/5fhwkz.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_dropped { background-color: transparent; background-image: url("http://i42.tinypic.com/f2n50y.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } .header_ptw { background-color: transparent; background-image: url("http://i39.tinypic.com/2ahh7t.png"); background-position: 50% 0; background-repeat: no-repeat no-repeat; height: 200px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/2vxnkhh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i42.tinypic.com/m7coxw.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i41.tinypic.com/10pww9e.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i40.tinypic.com/2mh96c6.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i43.tinypic.com/33nvsjo.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i41.tinypic.com/2r2q7ue.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } #copyright, #copyright:hover { background-color: #C41E0E; border-radius: 5px 5px 5px 5px; bottom: 0; color: white; padding: 2px; width: 100%; } #copyright:hover { } #copyright:before { color: white; content: " Design by Drazard Enseihar, Fuck off bitches!"; font-size: 12px; padding-right: 10px; } #copyright:after { color: gold; content: " "; padding-left: 20px; } #copyright a { } a[href=""], [href=""] { background-attachment: scroll; background-color: transparent; background-image: url("http://i41.tinypic.com/jsejw1.png"); background-position: left top; background-repeat: no-repeat; padding-bottom: 5px !important; padding-left: 29px; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before, #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: #333333 !important; } #mal_cs_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal_cs_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal_cs_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal_cs_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #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; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-size: cover; left: 670px; top: 160px; height: 350px; width: 226px; 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 { background: transparent; color: white; content: "Your Mom Taste Good!"; padding-bottom: 5px; position: absolute; text-align: center; width: 180px; top: -25px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 450px; left: 13px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 145px; width: 145px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 420px !important;} } Thanks in advance! So in short what you want is: When you move the cursor over the thumbnail preview, the tags zoom out of nowhere too, alongside the cover pic. If not let me know exactly. Ummmm... yes something like that but my design layout has no thumbnail preview, only the anime titles I still don't understand. So what you want is: 1. to use the layout you have now 2. when you point to an animetitle, you want the cover pic and tags (mini-review) to zoom out from the animetitle? Yup is that possible or nah? Well, I would write this for you, but I've noticed you are taking credit for the list design on the copyright section, when you didn't design 99% of your list (well, in a sense, none of it). Based on the "fuck you"attitude and the fact many of these layouts have the designer on it, I'll presume you removed whoever was on there previously as well. Anyways, bye and please leave our community alone |
Mar 22, 2017 4:55 PM
#215
Hi guys, I was using one of these layouts (see my profile here: https://myanimelist.net/animelist/lukemk1) and a few months back the covers stopped working/loading. I thought I followed the fix for this correctly but I guess not. Would anyone be able to help me get it working again because I love being able to quickly sort through just by looking at images. Any help is much appreciated! |
Nov 15, 2017 11:53 AM
#216
I've been using this for quite some time and it works perfectly, but I've been wondering, is there a way to make it so that during hover, the text shown will not be the 'tags' but the 'comments'? I still want the 'tags' section in the list and the more button to be invisible, just that the text during hover will be what I write in the 'comments' section of the anime info. Can you help me with that? |
Nov 15, 2017 3:41 PM
#217
Did2009 said: I've been using this for quite some time and it works perfectly, but I've been wondering, is there a way to make it so that during hover, the text shown will not be the 'tags' but the 'comments'? I still want the 'tags' section in the list and the more button to be invisible, just that the text during hover will be what I write in the 'comments' section of the anime info. Can you help me with that? I don't think anyone found a way to do this. 2023 update: comments are different today and can be targeted in classic with something like td div:nth-child(3){ background-color: red !important; } |
Shishio-kunJul 16, 2023 5:54 PM
Jul 16, 2023 3:56 PM
#218
Is there a way to pull from the 'notes' section for the mini-reviews? I've been trying to figure out how to grab that value, but with no success. With notes enabled in list settings the value of notes is right there underneath the anime title, so I'd imagine it shouldn't be that difficult to reference. It would be a huge improvement over using tags, since it doesn't cap out at 255 characters. Or is 'notes' synonymous with 'comments', which we haven't found a way to reference? |
Jul 16, 2023 5:53 PM
#219
ArbiterofWhim said: Is there a way to pull from the 'notes' section for the mini-reviews? I've been trying to figure out how to grab that value, but with no success. With notes enabled in list settings the value of notes is right there underneath the anime title, so I'd imagine it shouldn't be that difficult to reference. It would be a huge improvement over using tags, since it doesn't cap out at 255 characters. Or is 'notes' synonymous with 'comments', which we haven't found a way to reference? It's not an ideal solution but if you want to target the notes on your list I think you can just use these td div:nth-child(3){ background-color: red !important; } or this div:nth-child(3){ background-color: red !important; } and then they need the selectors for hover only in the front same as the reviews tr:hover div:nth-child(3){ background-color: red !important; display: block !important; } tr div:nth-child(3){ display: none; } |
Jul 16, 2023 6:39 PM
#220
Thanks, that works. I should be able to mess with positional values and whatnot to get it to match how tags currently looks. One thing I'm curious about is the random number that shows up in addition to the content of notes. I took a pair of screenshots (one without positional settings for the td div:nth-child(3) block, and one with top:10px;left:10px;) to illustrate how it moves around. The value doesn't seem to be tied to anything specific in the anime details, which you can see if you mouse over some of the other anime in my Currently Watching. https://imgur.com/a/MDZzhXy Also, is there any way to hide the "( Add notes)" bit by default, or is it just a limitation that there has to be something in the notes field before it can be hidden? Some of the anime that don't have anything in the notes field are hiding it by default, but most aren't. Not seeing a pattern. |
Jul 16, 2023 8:06 PM
#221
ArbiterofWhim said: Thanks, that works. I should be able to mess with positional values and whatnot to get it to match how tags currently looks. One thing I'm curious about is the random number that shows up in addition to the content of notes. I took a pair of screenshots (one without positional settings for the td div:nth-child(3) block, and one with top:10px;left:10px;) to illustrate how it moves around. The value doesn't seem to be tied to anything specific in the anime details, which you can see if you mouse over some of the other anime in my Currently Watching. https://imgur.com/a/MDZzhXy Also, is there any way to hide the "( Add notes)" bit by default, or is it just a limitation that there has to be something in the notes field before it can be hidden? Some of the anime that don't have anything in the notes field are hiding it by default, but most aren't. Not seeing a pattern. OK so that code is also targeting the progress section -that's what I meant by not perfect, its very general but I thought nothing else would have that selector- so it won't work for what you need. Maybe this will work better, can't find the random number you're referring to and the list lags a lot on All so I can't confirm tbody tr td.td1 div div{ background: orange; } or td div div or both td.td1 div div{ color: red !important; } td.td2 div div{ color: red !important; } hard to say since only one line has notes #noteLinks54398 would be the exact selector but you need a more general one that isn't too general (every anime with notes has something like that) I'd have to map the list out a bit as its classic and find the true note selector for classic, but I can't really look into something like this much until late August since I'm really pressed for time until then To find selectors you'd have to learn to use Inspect Element (bottom 2 videos) https://myanimelist.net/forum/?topicid=2077862&msgid=68651728#msg68651728 The other thing you asked I dont follow but I'm sure it can be hidden it might have been done in modern. There's probably a code for the modern version of notes which may be the same thing you should look in those same tutorials for that I might have mapped it before. |
Shishio-kunJul 16, 2023 8:13 PM
Jul 16, 2023 8:38 PM
#222
Shishio-kun said: Maybe this will work better, can't find the random number you're referring to and the list lags a lot on All so I can't confirm Here's a better look at the random number thing I'm talking about. I took screencaps with different entries hovered over and cobbled them into one image. Did an inspect on one of them: And then I noticed that the number is always exactly 1 more than the current episode progress number. So if it's at 1/12, the number will be 2 and so on. Not sure how that's getting caught up in the note field reference though. Oh also I viewed my list while not logged in and these weird numbers weren't visible. Seems to only be visible to the list owner. Shishio-kun said: Here's a more descriptive image of what I'm talking about regarding the notes section not being hidden, albeit inconsistently. Green and Orange are the behavior we want to see, Red is the weird behavior.The other thing you asked I dont follow but I'm sure it can be hidden it might have been done in modern. There's probably a code for the modern version of notes which may be the same thing you should look in those same tutorials for that I might have mapped it before. https://i.imgur.com/LWS9WXN.png EDIT: I think I found the cause. There's a code snippet in my CSS that adds parenthesis around small text stuff like "currently airing", which seems to also apply to the "Add notes" text that would otherwise be hidden. These forced parenthesis are causing some wonky override of the hide. A fix would require a way to differentiate small texts so that the parenthesis aren't applied to "Add notes" but are applied to "currently airing"/"Not yet aired"/etc. /* Brackets for small text like 'rewatching' or 'airing' */ .td1 small:before, .td2 small:before{ content:'('; } .td1 small:after, .td2 small:after{ content:')'; } Shishio-kun said: Of course, I'm already very grateful that you've helped point me in the right direction. If you can get around to looking into it a bit more when you have time that would be hugely appreciated, but this is definitely a low-priority thing. In the meantime, I'll try to figure out what I can on my own. And if Modern has the capability to replicate what my list currently looks like, then I might try to remake this style in modern. It'd be a lot easier to just let it go and find a new style among the premades but, since I've used this list style for a decade or so, I'm a bit too fond of it to change it without a fight lol.I'd have to map the list out a bit as its classic and find the true note selector for classic, but I can't really look into something like this much until late August since I'm really pressed for time until then |
ArbiterofWhimJul 17, 2023 5:32 PM
Jul 18, 2023 12:05 PM
#223
A bit more information about the weird number (henceforth referred to as "WN"). I went ahead and added some positional and border settings to the notes block so the CSS now looks like this:td div:nth-child(3){ position: fixed; top: 442px; left: 10px; background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; padding: 10px 10px 0px 24px; z-index: 3; } tr:hover div:nth-child(3){ background-color: red !important; display: block !important; } tr div:nth-child(3){ display: none; } This combined with a higher z-index essentially puts it on top of my existing tag-based mini-review. I learned something interesting through this. The WN, which is only visible to the list owner and seems to come from the progress counter updater stuff, is treated as a separate element from the contents of Notes. Manually deleting the "1" inside Inspect doesn't actually get rid of the bordered bubble, since the element still exists just empty. Also, by adding height/width that matches what my tag element is using: height: 145px; width: 312px; we get some more weird behavior. The width/height applies correctly to the WN, but doesn't seem to correctly apply the width to the Notes element. |
Jul 18, 2023 2:34 PM
#224
Classic lists are tough. xD I really think that your idea of recreating its style on mordern setup is a way better solution than actually trying to edit it. So, i read the topic and if i understood correctly, the problem right now is that 'random' number that is related to the episodes count. If you check up the inspect element, you will see that it's already set with 'display:none' property on its own HTML. But, the problem is that with the general hover code 'tr:hover div:nth-child(3)', it's setting it to reappears when hovered. Thankfully it has an id with a pattern, so you can add this code to your CSS to prevent it from showing when hovered: tr:hover div[id*="holdDynamicEpNum"] { display:none!important; } Other solution would be to remove the '!important' declaration from the 'display:block!important' on your previous hover code 'tr:hover div:nth-child(3)'. I've checked and, having it, doesn't seem to matter too much. About the WN being the only one to receive the properties, this happens because the used selector 'tr:hover nth-child(3)' matches for both the notes and the WN, so both of them are getting styled. Also, there is another element inside the notes div that is getting styled too. This one is related to the possibility to edit the notes text by just clicking on it. That's why i said classic lists are tough and, damn, it's my first time working with them. Brave warriors were the ones who started to style them. xD So, this problem is partially solved by whether adding the code i suggested or removing the '!important' declaration from the hover selector. By doing this, another red and white bordered square will appear in front of the notes text. This one, as i said before, is related to the edit tags text. The solution now depends on what you want to do. If you want to keep editing notes by also clicking the text, i would have to take a deeper look. If you want to simply remove it, you can add the code below to your CSS. The first one will remove the div and the second one will deabilitate clicking events. div[id*="noteRowEdit"] { display:none!important; } div[id*="noteLinks"] { pointer-events:none!important; } Also, for the notes width case, you should add an '!important' declaration after the value you want because, similarly to the WN case, the div of notes already have an width set within its HTML. So, if you want to overrule it, you need to add this declaration. width:200px!important; Don't know if i answered this correctly, so if you can, update me with your doubts. And, sorry for any english mistakes. It's not my native language. |
getNortedJul 19, 2023 7:22 AM
Jul 18, 2023 3:18 PM
#225
@ArbiterofWhim So did you get rid of the "add notes" with that? If not, I could probably look for the add notes selector in classic later Did you try the other codes to avoid the random numbers tbody tr td.td1 div div{ background: orange; } or td div div or both td.td1 div div{ color: red !important; } td.td2 div div{ color: red !important; } If not, can you give me the CSS that makes the random numbers and I will put it on my list and see if I can find them and a way to remove them Unfortunately all the other stuff is very confusing for me to read through, but notes and tags are different sections so tags width wont affect notes width notes need their own width. Could you maybe just do a mockup blueprint of what you want to do and I will look into it later. Like put an X over stuff you don't want and outline other stuff you do want |
Jul 18, 2023 4:08 PM
#226
@ArbiterofWhim After installing your layout, this is the code I would use to make notes hover I think as you want; I don't see the progress glitch number this way and I don't see any stretched out boxes. I'm using different codes from some that you're using, including the ones I suggested /* Notes hover - START */ td.td1 div div{ background-color: rgba(20, 30, 255, 0.85) !important; position: fixed; top: 442px; left: 80px; opacity: 0; width: 100px; } tr:hover td.td1 div div{ background-color: red !important; display: block !important; opacity: 1; } td.td2 div div{ background-color: rgba(20, 30, 255, 0.85) !important; position: fixed; top: 442px; left: 80px; opacity: 0; width: 100px; } tr:hover td.td2 div div{ background-color: purple !important; display: block !important; opacity: 1; } Remove "add notes", I think getnorted's would work too they seem more precise td.td1 div small:nth-child(2) {display: none !important;} td.td2 div small:nth-child(2) {display: none !important;} hover tags td[class^='td']:nth-of-type(6) { background-color: green !important; height: 0 !important; padding:0 !important; top: 82px; left: 320px; width: 100px !important; opacity: 0; position: fixed; border: none !important; } /* Tag hover */ tr:hover td[class^='td']:nth-of-type(6){ background-color: green !important; opacity: 1; padding:0 !important; } /* Tag edit */ td:nth-of-type(6) small { display: none !important; } Layout CSS: https://pastebin.com/raw/BN7W4Kcm This is how it looks testing on my own list, tags on the right of the cover when I have any and notes on the bottom. You could color both sections still I just didnt here, and the covers are off since they arent synced for this list If there's any width not working, you can try to use !important before the semicolon to force it in. Otherwise you might have to try/edit another selector which is overriding the one you're adding width to. https://www.youtube.com/watch?v=hPEXHvnCpxk |
Shishio-kunJul 18, 2023 4:11 PM
Jul 18, 2023 10:46 PM
#227
Shishio-kun said: This eliminated the progress number, so yeah it was probably just a quirk of the previous method of referencing the value. The alternating colors (red/purple) is an interesting behavior, but fortunately not an issue since I can just set both to have the desired color (or just remove their background color).@ArbiterofWhim After installing your layout, this is the code I would use to make notes hover I think as you want; I don't see the progress glitch number this way and I don't see any stretched out boxes. I'm using different codes from some that you're using, including the ones I suggested /* Notes hover - START */ td.td1 div div{ background-color: rgba(20, 30, 255, 0.85) !important; position: fixed; top: 442px; left: 80px; opacity: 0; width: 100px; } tr:hover td.td1 div div{ background-color: red !important; display: block !important; opacity: 1; } td.td2 div div{ background-color: rgba(20, 30, 255, 0.85) !important; position: fixed; top: 442px; left: 80px; opacity: 0; width: 100px; } tr:hover td.td2 div div{ background-color: purple !important; display: block !important; opacity: 1; } I also added in GetNorted's second set of code, which made it so the mini-reviews can't accidentally be edited by clicking on them. getNorted said: The explanation of how !important functions is also appreciated, didn't realize it was for overriding defaults.So, this problem is partially solved by whether adding the code i suggested or removing the '!important' declaration from the hover selector. By doing this, another red and white bordered square will appear in front of the notes text. This one, as i said before, is related to the edit tags text. The solution now depends on what you want to do. If you want to keep editing notes by also clicking the text, i would have to take a deeper look. If you want to simply remove it, you can add the code below to your CSS. The first one will remove the div and the second one will deabilitate clicking events. div[id*="noteRowEdit"] { display:none!important; } div[id*="noteLinks"] { pointer-events:none!important; } Also, for the notes width case, you should add an '!important' declaration after the value you want because, similarly to the WN case, the div of notes already have an width set within its HTML. So, if you want to overrule it, you need to add this declaration. width:200px!important; I can figure out the positioning changes I'm planning, but I am running into another issue. There doesn't seem to be an easy way to apply the same bordered review box, as adding the parameters from the old Tags mini-review block produces a wonky looking (and very tight) review box that's directly tied to the size of the notes text field. Here's an example of what I tried and the result: tr:hover td.td1 div div{ background-color: red !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; opacity: 1; } I definitely want the box to have the same behavior as the original (fixed size independent of text). Is there maybe a way to just create a purely visual element that's just a rounded box, which I could then layer underneath where I want the review text to be via positionals? Obviously it would also need to be invisible until an anime row is hovered over. |
Jul 19, 2023 8:40 PM
#228
@ArbiterofWhim Are you switching to modern and not needing help with this anymore? But for this question, you're just trying to give your hover notes a colored/bordered box that fits them dynamically, right? Or is it a separate box from the notes set behind the notes with a preset size/shape? |
Jul 19, 2023 9:16 PM
#229
@Shishio-kun It would be a separate box from the notes set behind the notes with a fixed size/shape. The box should be present even if the notes field is empty and should always be the same size regardless of the length of the notes text (I'll manually be making sure that it doesn't overflow). |
Jul 19, 2023 10:39 PM
#230
ArbiterofWhim said: @Shishio-kun It would be a separate box from the notes set behind the notes with a fixed size/shape. The box should be present even if the notes field is empty and should always be the same size regardless of the length of the notes text (I'll manually be making sure that it doesn't overflow). You can add this to the bottom and there will be a fixed box on row hover for the notes section. td.td1 div div:after, td.td2 div div:after { content: ""; display: block; background-color: purple !important; width: 200px !important; height: 100px; border: 1px solid white; z-index: -1 !important; position: fixed; top: 440px; left: 80px; } btw the td1 refers to all odd numbered rows, and td2 even numbered. So these selectors can be combined like I did there in one section and separated with a comma in between if you want them to have the same properties, so with the selector codes I gave earlier you could combine them like this to save space and make it a bit more manageable (I should have posted them like this earlier) td.td1 div div, td.td2 div div tr:hover td.td1 div div, tr:hover td.td2 div div |
Shishio-kunJul 19, 2023 10:42 PM
Jul 20, 2023 9:08 AM
#231
@Shishio-kun That worked to create the box, but for some reason it's layering it on top of the Notes text. I've tried adding/adjusting z-index values, swapping between :after and :before, and re-arranging the order of the blocks among other things, but haven't figured out a way to put the box behind the text. Here is the current state of the notes-related code./* Notes hover - START */ td.td1 div div, td.td2 div div { background-color: rgba(20, 30, 255, 0.85) !important; position: fixed; top: 445px; left: 80px; opacity: 0; width: 200px !important; z-index: 5 !important; font-weight: bold; } tr:hover td.td1 div div, tr:hover td.td2 div div { background-color: red !important; display: block !important; opacity: 1; z-index: 5 !important; } /* Make Notes mini-review non-interactable */ td.td1 div small:nth-child(2) {display: none !important;} td.td2 div small:nth-child(2) {display: none !important;} div[id*="noteRowEdit"] { display:none!important; } div[id*="noteLinks"] { pointer-events:none!important; } /* Floating rounded box behind Notes text*/ td.td1 div div:after, td.td2 div div:after { content: ""; display: block; background-color: purple !important; width: 200px !important; height: 100px; border: 1px solid white; border-radius: 25px 25px 25px 25px; z-index: -1 !important; position: fixed; top: 440px; left: 80px; } Here's what it looks like in action: |
Jul 20, 2023 1:21 PM
#232
@ArbiterofWhim OK it's because the notes look differently for you than for other users, since when viewing your list it seems fine. imo the layout REALLY needs to be mapped out to find the right codes for the notes (this is a newly added section added long after the old days where I mapped this once). starting the whole thing over with a proper mapping, needs some time (base code here for my own reference) /* note */ div[id*="noteLinks"] { background: orange; } /* note hover */ tr:hover div[id*="noteLinks"] { background: blue; } /* note hover box */ tr:hover div[id*="noteLinks"]:before { background: violet; display: block; content: ""; width: 200px; height: 200px; } /* tags */ td[class^='td']:nth-of-type(6) { background-color: red !important; } /* Tag hover */ tr:hover td[class^='td']:nth-of-type(6){ background-color: green !important; } /* Tag hover box*/ tr:hover td[class^='td']:nth-of-type(6):before { background: brown; display: block; content: ""; width: 200px; height: 200px; } /* Notes/Tag edit removal */ td.td1 div small:nth-child(2) { display: none !important; } td.td2 div small:nth-child(2) { display: none !important; } td:nth-of-type(6) small { display: none !important; } |
Shishio-kunJul 20, 2023 2:36 PM
Jul 20, 2023 1:37 PM
#233
@ArbiterofWhim This is a properly mapped code for those two parts. I also used one of GetNorted's it was very helpful and saved some time, thanks to them! You can see it temporarily on my list, and also there's an option to add a overlay box to tags too if you want. The boxes look to be working correctly in logged in and logged out view https://myanimelist.net/animelist/Shishio-kun You can probably just add what I added to the bottom here: /* Note and Note text */ div[id*="noteLinks"] { position: fixed; color: white !important; font-size: 14px; top: 450px; left: 95px; width: 180px !important; height: 100px; opacity: 0; } /* Note hover */ tr:hover div[id*="noteLinks"] { opacity: 1; } /* Note hover box */ tr:hover div[id*="noteLinks"]:before { content: ""; display: block; width: 200px !important; height: 300px; background-color: purple !important; border: 1px solid white; border-radius: 25px 25px 25px 25px; z-index: -1 !important; position: fixed; top: 440px; left: 80px; } /* Tags */ td[class^='td']:nth-of-type(6) { position: fixed; top: 100px; left: 305px; background-color: transparent !important; border: none !important; width: 180px !important; height: 100px; opacity: 0; } /* Tag text */ tr:hover td[class^='td']:nth-of-type(6) a{ color: white !important; font-size: 12px; font-weight: normal; } /* Tag hover */ tr:hover td[class^='td']:nth-of-type(6){ opacity: 1; } /* Tag box hover*/ tr:hover td[class^='td']:nth-of-type(6):before { content: ""; display: block; width: 200px !important; height: 100px; background-color: transparent !important; border: 1px solid transparent; border-radius: 25px 25px 25px 25px; z-index: -1 !important; position: fixed; top: 100px; left: 300px; } /* Notes/Tag edit removal */ td.td1 div small:nth-child(2) { display: none !important; } td.td2 div small:nth-child(2) { display: none !important; } td:nth-of-type(6) small { display: none !important; } ... but there was conflicting tags codes near the top in your CSS layout which was causing problems so in this version I took those out and the bottom codes now control the tags Fixed layout: https://pastebin.com/raw/SG75uuKH |
Shishio-kunJul 20, 2023 1:56 PM
Jul 20, 2023 2:36 PM
#234
@ArbiterofWhim I left out, you can also add this back to remove that tags header /* REMOVE TABLE HEADER Deletes the table header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none !important; } |
Jul 20, 2023 4:05 PM
#235
@Shishio-kun yeah I noticed that while I was fiddling with the positionals and added it back in lol. I think everything is fully complete, and I'm super happy with how much longer I can make the reviews now. As a test I trimmed down my BOFURI review and fit over 700 characters in 11pt bold font. Now I just need to transfer all the tags to notes for like 1000 anime (and probs do a bunch of partial rewatches to flesh out my old reviews). Thanks a ton for all your help! my finalized css (that hides tags completely) https://pastebin.com/KyGgdcVb |
ArbiterofWhimJul 20, 2023 4:16 PM
Jul 20, 2023 6:00 PM
#236
ArbiterofWhim said: @Shishio-kun yeah I noticed that while I was fiddling with the positionals and added it back in lol. I think everything is fully complete, and I'm super happy with how much longer I can make the reviews now. As a test I trimmed down my BOFURI review and fit over 700 characters in 11pt bold font. Now I just need to transfer all the tags to notes for like 1000 anime (and probs do a bunch of partial rewatches to flesh out my old reviews). Thanks a ton for all your help! my finalized css (that hides tags completely) https://pastebin.com/KyGgdcVb Awesome! 😊🙏 There was supposed to be an update that let you transfer your tags to notes, but I guess it never went through. There might be a userscript that does it but I would export the list first to be safe in case it deletes something. |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
17 |
by Shishio-kun
»»
Sep 25, 9:28 AM |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Sep 23, 12:11 AM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7863 |
by ShaggyZE
»»
Sep 22, 9:40 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |