New
Nov 1, 2018 5:12 PM
#1
This is a custom layout for classic template lists. If you don't know how to install the codes, use the Beginner's Tutorial: click here. If there are problems: install the latest version, or check the Repair Sticky for patches and updates (found here). All premade classic layouts can be found in the gallery by clicking here. A beautiful layout from Takana_no_Hana with animated intros and backgrounds which you can personalize! @\import "https://fonts.googleapis.com/css?family=Amaranth"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; /* HOW TO USE (go to this link) http://dl.dropboxusercontent.com/u/78340470/howtouse.txt */ /* MAIN BACKGROUND The space background by default. */ body { background-image: url(http://i.imgur.com/7SNp3N6.jpg); background-position:0 100%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important; } /* ANIMATED INTRO'S MAIN BACKGROUND (sliding, same for all category pages) Change and adjust the background images in the intro here. */ .header_cw:before { background-image: url(""); background-color: white; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; height: 100% !important; left: 0 !important; position: fixed !important; top: 0 !important; width: 100% !Important; z-index: 101; color: transparent; content: ""; pointer-events: none; opacity: 0; -moz-animation:mymove 2.5s; /* Firefox */ -webkit-animation:mymove 2.5s; /* Chrome */ } /* ANIMATED INTRO LEFT SIDE (images and text) By default, these are the logos and text. The character name is a premade image generated at Cooltext.com. "content:" controls the rest of the text on the left. Padding top % can be lowered to bring the content text above the logo- it can be increased to move the content text down away from the logo. Increase or decrease the top % to lower or raise the logo itself down the page. */ .header_cw span:before{ background: transparent url("http://i.imgur.com/obiluED.gif") no-repeat; background-position: 80% 10%; background-size: 80%; content: "" !important; color: black !important; font-size: 32px !important; font-family: Century Gothic; text-shadow: 1px 2px 3px white; padding-top: 10%; position: fixed; text-align: center; height: 100%; width: 40%; top: 10px !important; left: 10% !important; pointer-events: none; opacity: 0; z-index: 110 !Important; -moz-animation:mymove 2.5s; /* Firefox */ -webkit-animation:mymove 2.5s; /* Chrome */ } @-moz-keyframes mymove /* Firefox */ { 0% {opacity: 1} 80% {opacity: 1} 95% {opacity: 0} 99% {opacity: 0} } @-webkit-keyframes mymove /* Chrome */ { 0% {opacity: 1} 80% {opacity: 1} 95% {opacity: 0} 99% {opacity: 0} } /* ANIMATED INTRO RIGHT SIDE (renders) Background-size is the amount of percentage you see of the render. */ .header_cw span:after { background: transparent url("http://i.imgur.com/ATaU832.png") no-repeat scroll right bottom; background-size: 40% !important; content: ""; color: black !important; font-size: 32px !important; padding-top: 20%; background-position: 100% 0; position: fixed; height: 100%; width: 60%; right: 20% !important; top: 20% !important; z-index: 110; pointer-events: none; opacity: 0; -moz-animation:mymove2 2.5s; /* Firefox */ -webkit-animation:mymove2 2.5s; /* Chrome */ } @-moz-keyframes mymove2 /* Firefox */ { 0% {opacity: 1; background-position: -100% 0;} 40% {opacity: 1; background-position: 100% 0;} 80% {opacity: 1} 95% {opacity: 1} 99% {opacity: 0} } @-webkit-keyframes mymove2 /* Chrome */ { 0% {opacity: 1; background-position: -100% 0;} 40% {opacity: 1; background-position: 100% 0;} 80% {opacity: 1} 95% {opacity: 1} 99% {opacity: 0} } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ .header_cw:after { background-image: url("http://i.imgur.com/UzyzM4Q.png"); background-repeat: no-repeat; background-size: contain; background-position: right; 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; content: ""; } .header_completed:after { background-image: url("http://i.imgur.com/J6W8JJZ.png"); background-repeat: no-repeat; background-size: contain; background-position: right; 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; content: ""; } .header_onhold:after { background-image: url("http://i.imgur.com/lM2kQmU.png"); background-repeat: no-repeat; background-size: contain; background-position: right; 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; content: ""; } .header_dropped:after { background-image: url("http://i.imgur.com/yQDMHSS.png"); background-repeat: no-repeat; background-size: contain; background-position: right; 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; content: ""; } .header_ptw:after { background-image: url("http://i.imgur.com/lIKAVHK.png"); background-repeat: no-repeat; background-size: contain; background-position: right; 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; content: ""; } /* COLOR OF THE TOPBAR 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; } /* Animation */ @keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-webkit-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-moz-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-ms-keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } @keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-webkit-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-moz-keyframes move-clouds-back { from {background-position:0 0;} to {background-position:10000px 0;} } @-ms-keyframes move-clouds-back { from {background-position: 0;} to {background-position:10000px 0;} } /* Still thinking how to insert this. */ .stars, .twinkling, .clouds { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } .stars { background:#000 url(images/stars.png) repeat top center; z-index:0; } /* */ #inlineContent { pointer-events: none; position: fixed; display: block !important; left: 0; top: calc(100% - 400px); width: 100%; height: 600px; background-image: url(http://i.imgur.com/yB8QBAc.png); background-repeat: repeat-x; background-position: 0 0; -moz-animation:move-clouds-back 200s linear infinite; -ms-animation:move-clouds-back 200s linear infinite; -o-animation:move-clouds-back 200s linear infinite; - webkit-animation:move-clouds-back 200s linear infinite; animation:move-clouds-back 200s linear infinite; z-index: 5; } #inlineContent:before { position: fixed; display: block; content: ''; left: 0; bottom:0; width: 100%; height: 100%; background:transparent url(http://i.imgur.com/4Ku9eFe.png) repeat top center; -moz-animation:move-twink-back 200s linear infinite; -ms-animation:move-twink-back 200s linear infinite; -o-animation:move-twink-back 200s linear infinite; -webkit-animation:move-twink-back 200s linear infinite; animation:move-twink-back 200s linear infinite; z-index: -1 !important; } /* SIDE BUTTONS The first code controls the type of positioning of the buttons- if you change absolute to fixed, it will fix the buttons to the page. You'll have to change left: -300px; to left: 0px; after if you want them fixed. All the following codes control the background image for the buttons in this order: Current, Complete, On-hold, Dropped, Planned, and All Anime. If you don't want the All Anime button on your list, remove the X from display: Xnone; if you want the All Anime button back, add the X back or delete display:none; */ .status_selected, .status_not_selected { position:fixed; left: 10px; } .status_selected:first-of-type, .status_not_selected:first-of-type { background-image:url(http://i.imgur.com/Aq8f298.png); background-position:0 0; top:10px; } .status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { background-image:url(http://i.imgur.com/ADV0j0i.png); background-position:100% 0; top:96px; } .status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { background-image:url(http://i.imgur.com/ywNXBSV.png); background-position:0 0; top:182px; } .status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { background-image:url(http://i.imgur.com/eNtRAQG.png); background-position:100% 0; top:267px; } .status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { background-image:url(http://i.imgur.com/nnrbjKH.png); background-position:0 0; top:353px; } .status_selected:last-of-type, .status_not_selected:last-of-type { background-image:url(http://i.imgur.com/nnrbjKH.png); background-position:100% 0; top:440px; display: none; } /* MAGICA LOGO AND LIST TOP SPACING Background-image is the Magica logo at page top. You can move it with background position. Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will move farther down the page. */ #list_surround { background-image: url("http://i.imgur.com/LFY3iiq.png"); background-position:; background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat no-repeat; font-size: 100%; line-height: 1; top: 10px; padding-top: 270px; left: -10px !important; margin:auto !important; position:relative !important; right:0 !important; width: 650px; box-shadow: 0 2px 5px rgba(255,255,255, 0.85); } /* #list_surround:before, #list_surround:after { pointer-events: none; position: absolute; display: block; content: ''; } #list_surround:before { top: 0px; left: -2px; width: 650px; height: 99.7%; }*/ tr:hover [class^="td"] { transition: .5s linear; background-color: rgba(180, 32, 48, 0.6); } br:nth-of-type(-n+3) {display: none;} /* CUSTOM HEADERS */ [class^="header_"] * { height:59px; } .header_cw { background-image: url("http://i.imgur.com/mjurvNS.png"); background-position: 100% 22px; } .header_completed { background-image: url("http://i.imgur.com/3Z2CJhY.png"); background-position: 100% 22px; } .header_onhold { background-image: url("http://i.imgur.com/NESgUIt.png"); background-position: 100% 22px; } .header_dropped { background-image: url("http://i.imgur.com/Skcsglq.png"); background-position: 100% 22px; } .header_ptw { background-image: url("http://i.imgur.com/WpcDThu.png"); background-position: 100% 22px; } /* COVER PIC POSITION (hover) This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the right, take away from the amount below. */ .hide { pointer-events: none; visibility: hidden; opacity: 0; position: absolute; display: block !important; margin-left: 450px !important; margin-top: -95px !important; width: 122px; height: 180px; border: solid 1px #FFFFFF; box-shadow: 0 2px 5px rgba(255,255,255, 0.85); transform: scale(.4, .4); -webkit-transform: scale(.4, .4); -webkit-transition: opacity .5s linear, margin-left .5s ease, transform 1s ease-in-out; -moz-transition: opacity .5s linear, margin-left .5s ease, transform 1s ease-in-out; transition: opacity .5s linear, margin-left .5s ease, transform 1s ease-in-out; background-repeat: no-repeat; background-position: center 50%; background-size: 100% 100%; z-index: 5; } :hover +.hide { visibility: visible; opacity: 1; margin-left: 650px !important; transform: scale(1, 1); -webkit-transform: scale(1, 1); z-index: 5; } /* LIST TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel itself. Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background- color:". */ .table_header, .table_header a{ color: white; text-shadow: 0 0 3px #ef433b, 0 0 2px #ef433b, 0 1px 5px #ef433b, 0 0 1px #000000;} .table_header { background-color: rgba(0, 0,0, 0.5); } /* LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. */ .td1 { background-color:rgba(0, 0, 0, 0.4); height:80px; } .td2 { background-color:rgba(0, 0, 0, 0.4); height:80px; } .List_LightBox { color: white; } /* LIST BOTTOM COLORS The first set controls color for the category totals, and second for the copyright section. */ .category_totals { position: relative; display: inline-block; padding-top: 0px; width: 641px; font-size: 13px; text-align: center; background-color:rgba(180, 32, 48, 0.4); /* border-left: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; */ } #grand_totals { display:none; } #copyright { background-color:rgba(180, 32, 48, 0.4); color: #ffffff; display: inline-block; margin-top: -2.5% ! important; width: 649px; font-size: 11px; line-height:15px; text-align: middle !important; /* border-left: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-bottom: 1px solid #FFFFFF !important; */ } #copyright:hover { padding-top:10px; height:470px; background-attachment:scroll; background-image:url(http://i.imgur.com/KkZHQPv.png); background-repeat: no-repeat no-repeat; background-position: 0% 100%; transition:all 0.4s ease 0s; } #copyright:before, #copyright:after { position: fixed; display: block !important; content: ''; background-repeat: no-repeat; opacity: .5; -webkit-transition: opacity .5s linear; -moz-transition: opacity .5s linear; transition: opacity .5s linear; z-index: 7 !important; } #copyright:after { left: 10px; bottom: 20px; width: 260px; height: 160px; background-image: url(http://i.imgur.com/e3oXGlV.png); background-size: 100% 100%; } #copyright:before { position: fixed; left: 125px; bottom: 70px; width: 150px; height: 60px; line-height: 10px; text-align: justify; white-space: normal; } #copyright:hover:before, #copyright:hover:after { opacity: 1; -webkit-transition: opacity .5s linear; -moz-transition: opacity .5s linear; transition: opacity .5s linear; } /* LIST FONT COLOR AND TYPE You can control the font type and colors for the list here; for the anime titles and tags see after */ .td1, .td2, .category_totals { color:white !important; font-family: ; } /* ANIME TITLE/AIRING You can control the font-colors for anime titles here, and the Airing text on currently airing anime. */ .animetitle { color: #ffffff !important; font-family: Amaranth; font-size: 15px !important; text-decoration: none !important; } .animetitle + small { visibility: hidden !important; opacity: 0; position: absolute; display: block; right: -134px; margin-top: -22px; padding: 2px; color: #FFFFFF; text-shadow: 0 0 2px #F54EE7, 0 0 1px #F54EE7, 1px 1px 7px #E32BD4, 0 0 0 #F54EE7 !important; font-size: 12px; font-weight: bold !important; line-height: 14px; width: 40px; text-align: center; background-color: rgba(0, 0, 0, .8); transition: opacity .2s linear .9s; -webkit-transition: opacity .2s linear .9s; z-index: 6; } tr:hover .animetitle + small { visibility: visible !important; opacity: 1 !important; } /* Hide edit-more */ tr:hover td.td1 small, tr:hover td.td2 small { text-shadow: 0 0 2px #F54EE7, 0 0 1px #F54EE7, 1px 1px 7px #E32BD4, 0 0 0 #F54EE7 !important; font-size: 12px; font-weight: bold !important; opacity: 1; } .td1 small, .td2 small { font-size: 12px; opacity: 0; } tr:hover .animetitle { color: white !important; text-shadow: 0 0 2px #5c4ef5, 0 0 1px #5c4ef5, 0 1px 7px #5c4ef5, 0 0 0.5px #5c4ef5; letter-spacing: 0.5px; transition: all 0.4s ease 0s; } /* TAGS (mini-reviews) The first code controls the size/color of the font if you put in any tags/mini-reviews. The second can control how much the width of the list the tags take up- you must put a percentage in after "width:" and before !important (for example 85% ). */ span[id*="tagLinks"] { display:none !important; } span[id*="tagRow"] { position: absolute; display: block !important; padding: 0 4px; background-color: transparent; font-size: 12px !important; left: 50px; line-height: 16px !important; margin-top: 37px; text-align: justify !important; z-index: 2; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; } span[id*="tagRow"] { width: 87% !important; } /* TAGS EDIT BUTTON The button link "Edit" will show up under your anime title number. */ .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { color: #ffffff; font-size: 14px; left: 9px; margin-top: 20px; text-decoration: none; z-index: 1 !important; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ ::-webkit-scrollbar { width: 10px; background: -webkit-linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* For Firefox 3.6 to 15 */ background: linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* Standard syntax */ } ::-webkit-scrollbar-thumb { background: #5a57b0; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background-color: rgba(0, 0, 0, 0) !important; position: absolute; } .table_header:nth-of-type(6) { width: 1px !important; font-size: 0 !important; } .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 0 !important; width: 1px !important; } span[id*="tagLinks"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: rgba(0, 0, 0, 0); font-size: 13px !important; left: 25px !important; margin-top: 10px !important; position: absolute !important; } span[id*="tagLinks"] a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; left: 49px !important; position: relative !important; text-decoration: none !important; top: 6px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:79px; width:263px; } .status_selected, .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:contain; display:block; padding:0; width:263px; } .status_not_selected { opacity:0.8; } .status_not_selected:hover { color:transparent; opacity:1; box-shadow: 0 2px 5px rgba(255,255,255, 0.85); } [class^=status] a { display: block; font-size: 0px; color: rgba(255, 255, 255, .8) !important; white-space: nowrap; transition: color .4s; } [class^=status] a:hover { color: rgba(255, 255, 255, 1) !important; text-shadow: 0 0 2px #4200ff, 0 0 1px #4200ff, 0 1px 7px #4200ff, 0 0 0.5px #4200ff !important; -webkit-transition:all 0.1s ease-in-out 0s; transition:all 0.1s ease-in-out 0s; } [class^=status] a:after { font-size: 18px !important; font-family: Amaranth; position: fixed; display: none; padding-top: 50px; Left: 15px; -webkit-transition:all 0.2s ease-in-out 0s; transition:all 0.2s ease-in-out 0s; } [class^=status]:first-of-type a:after {content: "Watching";} [class^=status]:nth-of-type(2) a:after {content: "Completed";} [class^=status]:nth-of-type(3) a:after {content: "On Hold";} [class^=status]:nth-of-type(4) a:after {content: "Dropped";} [class^=status]:nth-of-type(5) a:after {content: "Plan to Watch";} [class^=status]:hover a:after { display: inline-block !important; } body { background-attachment:fixed; background-clip:border-box; background-color: black; font-family:calibri; } a { text-decoration: none; color: white; } body { background-color: rgba(0, 0, 0, 0); color: #ffffff; font-family: Candara; padding-bottom: 20px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-repeat: no-repeat; background-color: transparent; height: 59px; margin-bottom: 0; font-size: 0; background-position:0; display: block; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:15px; text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { border-bottom-left-radius:0px; border-bottom-right-radius:0px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:1px; min-height:1px; padding:1px; text-align:center; vertical-align:middle; } #copyright { border-bottom-left-radius:0px; border-bottom-right-radius:0px; border-top-left-radius:0px; border-top-right-radius:0px; } /* For list cover v1 */ .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:15px; text-align:left; } .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround small a:last-of-type { display: none !important; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround small a:last-of-type { display: none !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; } .td1:nth-of-type(5), .td2:nth-of-type(5){ text-shadow: 0 0 3px #5c4ef5, 0 0 2px #5c4ef5, 0 1px 5px #5c4ef5, 0 0 1px #000000; } .td1:nth-of-type(3), .td2:nth-of-type(3){ text-shadow: 0 0 3px #ef433b, 0 0 2px #ef433b, 0 1px 5px #ef433b, 0 0 1px #000000; font-size: 15px; font-weight: bold !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { opacity: 0.7; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { opacity: 1; } /* border list td[class^="td"]:first-child { border-left: 1px solid #FFFFFF !important; } td[class^="td"]:last-child { border-right: 1px solid #FFFFFF !important; } .table_header { border-top: 1px solid #FFFFFF !important; } .table_header:first-child { border-left: 1px solid #FFFFFF !important; } .table_header:last-child { border-right: 1px solid #FFFFFF !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; } }   |
Reply Disabled for Non-Club Members
Reply Disabled for Non-Club Members
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |