New
Feb 23, 2014 2:33 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. Preview Or see it here if the image isn't working. Special Features + Tags are displayed if you hover the cover image + Each category has its own banner + Add your own banners & background easily + Variations of this layout available if you scroll down + Sort option Settings Please pay attention to this or the layout will not work. Code for Animelist @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; @\import "https://dl.dropboxusercontent.com/s/b8865vo9fojt2zl/topbar.css"; @\import "https://dl.dropboxusercontent.com/s/xqlcpk9pbigb7uo/FixedCss.css"; /*#################################################*/ /*#############Change Banner images below##############*/ /*#################################################*/ .header_cw { background: url("http://i.imgur.com/iFJPfQ2.png")!important; } .header_completed { background: url("http://i.imgur.com/iFJPfQ2.png")!important; } .header_onhold { background: url("http://i.imgur.com/iFJPfQ2.png")!important; } .header_dropped { background: url("http://i.imgur.com/iFJPfQ2.png")!important; } .header_ptw { background: url("http://i.imgur.com/iFJPfQ2.png")!important; } /*############Change background image below############*/ body { background-image: url("http://coolvibe.com/wp-content/uploads/2010/05/animewallpaper8-1024x576.jpg"); } /*#################################################*/ /*#################################################*/ .status_selected a:hover { } #list_surround:nth-of-type(n+4) .category_totals { } #list_surround:nth-of-type(n+4) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: left; height: 274px !important; margin-left: -10px !important; opacity: 10; position: relative; -layout: fixed; width: 180px !important; z-index: 1 !important; } tr:hover{ opacity: 1 !important; } /* SORT */ .table_header span { display: none !important; } /* Disable Tags in the Sort Options */ .table_header[width="125"] { display: none !important; } .header_cw +, .header_completed +, .header_onhold +, .header_dropped +, .header_ptw + { position: fixed; display: block !important; left: 381px; top: 32px; width: 110px !important; } .table_header { position: absolute !important; display: inline-block; z-index: 2; } .table_header:hover .table_headerLink { visibility: visible !important; opacity: 1 !important; } .table_headerLink strong { font-weight: normal !important; } .table_headerLink, .table_header:nth-of-type(2):before { display: inline-block; width: 110px; padding: 7px 0; font-family: calibri; line-height: 17px; font-size: 11px; color: #FFFFFF; text-align: center; text-decoration: none; font-weight: normal !important; border-style: solid; border-color: #000000; border-width: 0 1px 1px 1px; background-color: rgba(0, 0, 0, .6); } .table_headerLink { font-variant: small-caps; opacity: 0; position: relative !important; text-shadow: 0 0 5px #000000; visibility: hidden; } .table_header:nth-of-type(2):before { content: "Sort List"; left: 381px; opacity: 1; position: fixed; top: 0; visibility: visible; z-index: 2; font-variant: small-caps; font-size: 12px; border-radius: 0 0 0 5px; } tr:hover .table_headerLink { visibility: visible; opacity: 1 } .table_headerLink:hover, tr:hover .table_header:nth-of-type(2):before { background-color: rgba(0, 0, 0, 1); } .table_header:nth-of-type(3) { margin-top: 32px; z-index: 2; } .table_header:nth-of-type(4) { margin-top: 64px; z-index: 2; } .table_header:nth-of-type(5) { margin-top: 96px; z-index: 2; } .table_header:nth-of-type(6) { margin-top: 128px; z-index: 2; } .table_header:nth-of-type(7) { margin-top: 128px; z-index: 2;} .table_header:nth-of-type(8) { margin-top: 160px; z-index: 2; } .status_selected, .status_not_selected { position: relative !important; width: 110px !important; } .status_selected a, .status_not_selected a { display: inline-block; width: 110px; padding: 7px 0; font-family: calibri; font-size: 13px; color: #FFFFFF; font-variant: small-caps; text-decoration: none; border-style: solid; border-color: #000000; border-width: 0 0 1px 1px; background-color: rgba(0, 0, 0, .6); } .status_selected:last-child, .status_not_selected:last-child { display: none !important; } .status_selected a, .status_not_selected a:hover { background-color: rgb(0, 0, 0); } .hide { background-image: url("http://i.imgur.com/Gzy26Hd.png"); border-radius: 5px; background-size: 100%; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block !important; float: left; height: 265px !important; margin-bottom: 8px; margin-left: -160px; padding-left: 0; position: relative; visibility: visible !important; width: 189px; z-index: 0; box-shadow: 0 0 5px black inset; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: cover !important; font-family: calibri; } a:hover { color: white !important; } #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; margin: 0 auto auto 30px; padding-top: 242px; position: absolute; width: 1016px; box-shadow: 0 0 4px black; } /*############################COLUMNS#####################*/ .td1, .td2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-right: 15px; } .td1 a, .td2 a { color: #FFFFFF; } td[class^="td"]:nth-of-type(2) {} .animetitle { color: #D3D3D3 !important; font-family: century gothic; font-variant: small-caps; left: 25px; max-width: 180px; overflow: hidden; position: absolute; text-align: center; text-decoration: none; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000000, 0 0 4px #000000; top: 213px; white-space: nowrap; } td[class^="td"]:nth-of-type(3) { background: transparent; color: #FFFFE0; display: inline !important; font-family: fantasy; font-size: 22px; left: 169px !important; position: relative; text-align: center !important; text-decoration: none; text-shadow: 0 0 1px #FFD700, 0 0 2px #FFA500; top: 234px !important; width: 30px !important; padding-right: 0px ; } td[class^="td"]:nth-of-type(3) a { color: #FFFFE0 !important; font-family: century gothic; font-size: 22px; text-decoration: none; } td[class^="td"]:nth-of-type(4) { font-size: 14px; font-style: italic; font-weight: bold; left: 30px !important; position: relative; top: 239px !important; } td[class^="td"]:nth-of-type(5) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0 0px 4px black inset; color: #FFFFE0; font-family: century gothic; font-size: 14px; font-style: italic; font-weight: bold; height: 18px; left: 3px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 34px; position: absolute; top: 211px; width: 166px; z-index: -1; border-radius: 0px 0px 3px 3px; } td[class^="td"]:nth-of-type(5) a { font-style: italic; font-weight: bold; text-decoration: none; } td[class^="td"]:nth-of-type(6) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65); color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; height: 171px !important; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 40px; position: absolute; text-align: left; top: 1px !important; width: 162px; border-radius: 2px 2px 0 0; } td[class^="td"]:nth-of-type(6) a { color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; text-decoration: none; } td[class^="td"]:nth-of-type(6) a:hover { color: #FFFFE0 !important; } td[class^="td"]:nth-of-type(1) { background: url("") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); content: " "; display: inline; font-size: 0; left: 168px; padding: 16px; position: relative !important; top: 248px; } td[class^="td"]:nth-of-type(7) { display: inline; position: absolute; background: transparent; font-size: 0; width: 174px; height: 5px; left: 20px; top: 0px; border-top: solid; border-width: 1px; border-color: black; border-radius: 4px 4px 0 0; border-left-style: solid; border-right-style: solid; } td[class^="td"]:nth-of-type(8) { display: none; } /*############################BANNER CELLS######################*/ .header_title { color: rgba(0, 0, 0, 0.6); font-size: 93px; font-variant: small-caps; position: relative; top: 23px; left: -30px; font-family: century gothic; } .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_completed { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_onhold { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_dropped { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_ptw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } /*#####################EDIT################*/ #list_surround small { background: transparent; font-size: 10; left: 39px; text-decoration: none; top: 20px; visibility: hidden; } .td1 a.List_LightBox, .td2 a.List_LightBox { color: #808080; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 186px; opacity: 0.8; position: absolute; text-decoration: none; top: 1px; visibility: visible !important; width: 24px; z-index: 2; } #list_surround small a { visibility: hidden; font-size: 40px; } /*### RELATED TO SCORE ###*/ .td1[align="center"][width="45"], .td2[align="center"][width="45"] { position: absolute; } /*### TYPE ###*/ .td1[align="center"][width="50"], .td2[align="center"][width="50"] { color: #FFFFE0; font-family: century gothic; font-style: italic; font-variant: small-caps; position: absolute; text-align: left; top: 232px !important; width: 225px; z-index: 10; font-size: 13px; margin-left: 1px; } .td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before { color: #FFFFFF; content: " Type: "; font-style: normal; font-variant: small-caps; font-weight: normal; position: relative; text-shadow: 0 0 0 !important; } /*### PROGRESS ###*/ .td1[width="70"], .td2[width="70"] { text-align: left; } .td1[width="70"] a, .td2[width="70"] a { color: lightyellow !important; font-size: 13px; font-family: century gothic; } .td1[width="70"]:before, .td2[width="70"]:before { color: #FFFFFF; content: " Progress: "; font-variant: small-caps; position: relative; font-family: century gothic; font-size: 13px; font-weight: normal; font-style: normal; } /*### COMMENT ###*/ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } .td1[width="125"]:before, .td2[width="125"]:before { } /*### AIRING ###*/ .animetitle + small { background-color: rgba(0, 0, 0, 0.75) !important; background-image: url("http://i.imgur.com/YmqzJ9h.png") !important; background-position: -2px center !important; background-repeat: no-repeat no-repeat !important; background-size: 22px auto !important; border-color: #000000; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px; box-shadow: 0 2px 3px #808080 inset; color: #FFFFE0; font-family: century gothic; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 30px !important; letter-spacing: 0.3px; opacity: 1; padding: 0 3px 2px 22px; position: absolute; text-align: center; text-shadow: 0 0 3px #FFFFFF, -1px -1px 5px #FFFFFF; top: 192px !important; visibility: visible !important; z-index: 3; border-bottom-style: none; } /*### COPYRIGHT ###*/ #copyright:before { content: 'Design by Lirina. Topbar by Luxiamimi. '; display: block; font-size: 10px; color: lightyellow !important; text-align: right; font-style: normal; } #copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-family: Tahoma; font-size: 10px; left: 740px; margin: auto !important; padding: 4px; position: absolute; right: 0; text-align: right !important; top: 206px; width: 265px; z-index: 1 !important; border-radius: 5px 0 ; font-style: italic; } .category_totals { display: none; } #copyright a { color: #FFFFFF; text-decoration: none; } #copyright:before { color: #FFFFFF; } input.inputtext, textarea.textarea, textarea.inputtext { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6) !important; border-color: #000000; border-radius: 3px !important; border-style: solid; border-width: 1px; height: 125px; margin-left: 2px !important; padding: 3px 5px 5px !important; transition: box-shadow 0.2s linear 0s !important; width: 150px !important; } #mal_cs_links a[href="/"] { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/6HlGFdC.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; height: 38px !important; left: 0; padding-bottom: 2px !important; position: absolute; width: 40px !important; } #mal_cs_links a[href="/"]:hover { background-image: url("img/malh.png"), url("img/mal.png") !important; background-position: 0 0px, 0 0 !important; background-repeat: no-repeat, no-repeat !important; } #mal_cs_links a[href="/addtolist.php?hidenav=1"] { background: url("http://i.imgur.com/y5gRaGa.png") repeat scroll center center; height: 40px !important; width: 39px !important; } #mal_cs_links a[href*="/animelist/"] { background: url("http://i.imgur.com/gQKkAJs.png") repeat scroll center center; height: 40px !important; width: 39px !important; } #mal_cs_links a[href*="/mangalist/"] { background-attachment: scroll; background-clip: border-box; background-image: url("http://i.imgur.com/DJF303l.png"); background-origin: padding-box; background-position: 4px center !important; background-repeat: no-repeat !important; background-size: auto auto; height: 40px !important; width: 39px !important; } #mal_cs_otherlinks a[href*="/history/"] { background-image: url("http://i.imgur.com/iungOce.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/forum/"] { background-image: url("http://i.imgur.com/Ja2o9Bb.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/panel.php?go=export"] { background-image: url("http://i.imgur.com/hcSZzIJ.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/sharedanime.php?"], #mal_cs_otherlinks a[href*="/sharedmanga.php?"] { background-image: url("http://i.imgur.com/lJ4N8ta.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/mangalist/"] { background-image: url("http://i.imgur.com/DJF303l.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/animelist/"] { background-image: url("http://i.imgur.com/gQKkAJs.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/login.php"] { background-image: url("http://i.imgur.com/xYSgncB.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/register.php"] { background-image: url("http://i.imgur.com/t770slW.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/modules.php?go=faq"] { background-image: url("http://i.imgur.com/mTCwcka.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } .status_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=1"]:before { content: "Current"; font-size: 13px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{ font-size: 0px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .table_headerLink, .table_header:nth-of-type(2)::before { line-height: 15px;} } #list_surround small { background: transparent; font-size: 10; left: 25px !important; text-decoration: none; top: 5px !important; visibility: hidden; } Importable code here: http://pasted.co/04b4ce06 Code for Mangalist @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; @\import "https://dl.dropboxusercontent.com/s/b8865vo9fojt2zl/topbar.css"; @\import "https://dl.dropboxusercontent.com/s/xqlcpk9pbigb7uo/FixedCss.css"; /*#################################################*/ /*#############Change Banner images below##############*/ /*#################################################*/ .header_cw { background: url("http://i.imgur.com/mOaqHwo.png")!important; } .header_completed { background: url("http://i.imgur.com/mOaqHwo.png")!important; } .header_onhold { background: url("http://i.imgur.com/mOaqHwo.png")!important; } .header_dropped { background: url("http://i.imgur.com/mOaqHwo.png")!important; } .header_ptw { background: url("http://i.imgur.com/mOaqHwo.png")!important; } /*############Change background image below############*/ body { background-image: url("http://coolvibe.com/wp-content/uploads/2010/05/animewallpaper8-1024x576.jpg"); } /*#################################################*/ /*#################################################*/ .status_selected a:hover { } #list_surround:nth-of-type(n+4) .category_totals { } #list_surround:nth-of-type(n+4) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: left; height: 274px !important; margin-left: -10px !important; opacity: 10; position: relative; -layout: fixed; width: 180px !important; z-index: 1 !important; } tr:hover{ opacity: 1 !important; } /* SORT */ .table_header span { display: none !important; } /* Disable Tags in the Sort Options */ .table_header[width="125"] { display: none !important; } .header_cw +, .header_completed +, .header_onhold +, .header_dropped +, .header_ptw + { position: fixed; display: block !important; left: 381px; top: 32px; width: 110px !important; } .table_header { position: absolute !important; display: inline-block; z-index: 2; } .table_header:hover .table_headerLink { visibility: visible !important; opacity: 1 !important; } .table_headerLink strong { font-weight: normal !important; } .table_headerLink, .table_header:nth-of-type(2):before { display: inline-block; width: 110px; padding: 7px 0; font-family: calibri; line-height: 17px; font-size: 11px; color: #FFFFFF; text-align: center; text-decoration: none; font-weight: normal !important; border-style: solid; border-color: #000000; border-width: 0 1px 1px 1px; background-color: rgba(0, 0, 0, .6); } .table_headerLink { font-variant: small-caps; opacity: 0; position: relative !important; text-shadow: 0 0 5px #000000; visibility: hidden; } .table_header:nth-of-type(2):before { content: "Sort List"; left: 381px; opacity: 1; position: fixed; top: 0; visibility: visible; z-index: 2; font-variant: small-caps; font-size: 12px; border-radius: 0 0 0 5px; } tr:hover .table_headerLink { visibility: visible; opacity: 1 } .table_headerLink:hover, tr:hover .table_header:nth-of-type(2):before { background-color: rgba(0, 0, 0, 1); } .table_header:nth-of-type(3) { margin-top: 32px; z-index: 2; } .table_header:nth-of-type(4) { margin-top: 64px; z-index: 2; } .table_header:nth-of-type(5) { margin-top: 96px; z-index: 2; } .table_header:nth-of-type(6) { margin-top: 128px; z-index: 2; } .table_header:nth-of-type(7) { margin-top: 128px; z-index: 2;} .table_header:nth-of-type(8) { margin-top: 160px; z-index: 2; } .status_selected, .status_not_selected { position: relative !important; width: 110px !important; } .status_selected a, .status_not_selected a { display: inline-block; width: 110px; padding: 7px 0; font-family: calibri; font-size: 13px; color: #FFFFFF; font-variant: small-caps; text-decoration: none; border-style: solid; border-color: #000000; border-width: 0 0 1px 1px; background-color: rgba(0, 0, 0, .6); } .status_selected:last-child, .status_not_selected:last-child { display: none !important; } .status_selected a, .status_not_selected a:hover { background-color: rgb(0, 0, 0); } .hide { background-image: url("http://i.imgur.com/Gzy26Hd.png"); border-radius: 5px; background-size: 100%; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block !important; float: left; height: 265px !important; margin-bottom: 8px; margin-left: -160px; padding-left: 0; position: relative; visibility: visible !important; width: 189px; z-index: 0; box-shadow: 0 0 5px black inset; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: cover !important; font-family: calibri; } a:hover { color: white !important; } #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; margin: 0 auto auto 30px; padding-top: 242px; position: absolute; width: 1016px; box-shadow: 0 0 4px black; } /*############################COLUMNS#####################*/ .td1, .td2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-right: 15px; } .td1 a, .td2 a { color: #FFFFFF; } td[class^="td"]:nth-of-type(2) {} .animetitle { color: #D3D3D3 !important; font-family: century gothic; font-variant: small-caps; left: 25px; max-width: 180px; overflow: hidden; position: absolute; text-align: center; text-decoration: none; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000000, 0 0 4px #000000; top: 213px; white-space: nowrap; } td[class^="td"]:nth-of-type(3) { background: transparent; color: #FFFFE0; display: inline !important; font-family: fantasy; font-size: 22px; left: 169px !important; position: relative; text-align: center !important; text-decoration: none; text-shadow: 0 0 1px #FFD700, 0 0 2px #FFA500; top: 234px !important; width: 30px !important; padding-right: 0px ; } td[class^="td"]:nth-of-type(3) a { color: #FFFFE0 !important; font-family: century gothic; font-size: 22px; text-decoration: none; } td[class^="td"]:nth-of-type(4) { font-size: 14px; font-style: italic; font-weight: bold; left: 30px !important; position: relative; top: 239px !important; } td[class^="td"]:nth-of-type(5) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0 0px 4px black inset; color: #FFFFE0; font-family: century gothic; font-size: 14px; font-style: italic; font-weight: bold; height: 18px; left: 3px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 34px; position: absolute; top: 211px; width: 166px; z-index: -1; border-radius: 0px 0px 3px 3px; } td[class^="td"]:nth-of-type(5) a { font-style: italic; font-weight: bold; text-decoration: none; } td[class^="td"]:nth-of-type(6) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65); color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; height: 171px !important; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 40px; position: absolute; text-align: left; top: 1px !important; width: 162px; border-radius: 2px 2px 0 0; } td[class^="td"]:nth-of-type(6) a { color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; text-decoration: none; } td[class^="td"]:nth-of-type(6) a:hover { color: #FFFFE0 !important; } td[class^="td"]:nth-of-type(1) { background: url("") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); content: " "; display: inline; font-size: 0; left: 168px; padding: 16px; position: relative !important; top: 248px; } td[class^="td"]:nth-of-type(7) { display: inline; position: absolute; background: transparent; font-size: 0; width: 174px; height: 5px; left: 20px; top: 0px; border-top: solid; border-width: 1px; border-color: black; border-radius: 4px 4px 0 0; border-left-style: solid; border-right-style: solid; } td[class^="td"]:nth-of-type(8) { display: none; } /*############################BANNER CELLS######################*/ .header_title { color: rgba(0, 0, 0, 0.6); font-size: 93px; font-variant: small-caps; position: relative; top: 23px; left: -30px; font-family: century gothic; } .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_completed { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_onhold { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_dropped { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_ptw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } /*#####################EDIT################*/ #list_surround small { background: transparent; font-size: 10; left: 39px; text-decoration: none; top: 20px; visibility: hidden; } .td1 a.List_LightBox, .td2 a.List_LightBox { color: #808080; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 186px; opacity: 0.8; position: absolute; text-decoration: none; top: 1px; visibility: visible !important; width: 24px; z-index: 2; } #list_surround small a { visibility: hidden; font-size: 40px; } /*### RELATED TO SCORE ###*/ .td1[align="center"][width="45"], .td2[align="center"][width="45"] { position: absolute; } /*### TYPE ###*/ .td1[align="center"][width="50"], .td2[align="center"][width="50"] { color: #FFFFE0; font-family: century gothic; font-style: italic; font-variant: small-caps; position: absolute; text-align: left; top: 232px !important; width: 225px; z-index: 10; font-size: 13px; margin-left: 1px; } .td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before { color: #FFFFFF; content: " Type: "; font-style: normal; font-variant: small-caps; font-weight: normal; position: relative; text-shadow: 0 0 0 !important; } /*### PROGRESS ###*/ .td1[width="70"], .td2[width="70"] { text-align: left; } .td1[width="70"] a, .td2[width="70"] a { color: lightyellow !important; font-size: 13px; font-family: century gothic; } .td1[width="70"]:before, .td2[width="70"]:before { color: #FFFFFF; content: " Progress: "; font-variant: small-caps; position: relative; font-family: century gothic; font-size: 13px; font-weight: normal; font-style: normal; } /*### COMMENT ###*/ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } .td1[width="125"]:before, .td2[width="125"]:before { } /*### AIRING ###*/ .animetitle + small { background-color: rgba(0, 0, 0, 0.75) !important; background-image: url("http://i.imgur.com/YmqzJ9h.png") !important; background-position: -2px center !important; background-repeat: no-repeat no-repeat !important; background-size: 22px auto !important; border-color: #000000; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px; box-shadow: 0 2px 3px #808080 inset; color: #FFFFE0; font-family: century gothic; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 30px !important; letter-spacing: 0.3px; opacity: 1; padding: 0 3px 2px 22px; position: absolute; text-align: center; text-shadow: 0 0 3px #FFFFFF, -1px -1px 5px #FFFFFF; top: 192px !important; visibility: visible !important; z-index: 3; border-bottom-style: none; } /*### COPYRIGHT ###*/ #copyright:before { content: 'Design by Lirina. Topbar by Luxiamimi. '; display: block; font-size: 10px; color: lightyellow !important; text-align: right; font-style: normal; } #copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-family: Tahoma; font-size: 10px; left: 740px; margin: auto !important; padding: 4px; position: absolute; right: 0; text-align: right !important; top: 206px; width: 265px; z-index: 1 !important; border-radius: 5px 0 ; font-style: italic; } .category_totals { display: none; } #copyright a { color: #FFFFFF; text-decoration: none; } #copyright:before { color: #FFFFFF; } input.inputtext, textarea.textarea, textarea.inputtext { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6) !important; border-color: #000000; border-radius: 3px !important; border-style: solid; border-width: 1px; height: 125px; margin-left: 2px !important; padding: 3px 5px 5px !important; transition: box-shadow 0.2s linear 0s !important; width: 150px !important; } #mal_cs_links a[href="/"] { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/6HlGFdC.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; height: 38px !important; left: 0; padding-bottom: 2px !important; position: absolute; width: 40px !important; } #mal_cs_links a[href="/"]:hover { background-image: url("img/malh.png"), url("img/mal.png") !important; background-position: 0 0px, 0 0 !important; background-repeat: no-repeat, no-repeat !important; } #mal_cs_links a[href="/addtolist.php?hidenav=1"] { background: url("http://i.imgur.com/y5gRaGa.png") repeat scroll center center; height: 40px !important; width: 39px !important; } #mal_cs_links a[href*="/animelist/"] { background: url("http://i.imgur.com/gQKkAJs.png") repeat scroll center center; height: 40px !important; width: 39px !important; } #mal_cs_links a[href*="/mangalist/"] { background-attachment: scroll; background-clip: border-box; background-image: url("http://i.imgur.com/DJF303l.png"); background-origin: padding-box; background-position: 4px center !important; background-repeat: no-repeat !important; background-size: auto auto; height: 40px !important; width: 39px !important; } #mal_cs_otherlinks a[href*="/history/"] { background-image: url("http://i.imgur.com/iungOce.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/forum/"] { background-image: url("http://i.imgur.com/Ja2o9Bb.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/panel.php?go=export"] { background-image: url("http://i.imgur.com/hcSZzIJ.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/sharedanime.php?"], #mal_cs_otherlinks a[href*="/sharedmanga.php?"] { background-image: url("http://i.imgur.com/lJ4N8ta.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/mangalist/"] { background-image: url("http://i.imgur.com/DJF303l.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href*="/animelist/"] { background-image: url("http://i.imgur.com/gQKkAJs.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/login.php"] { background-image: url("http://i.imgur.com/xYSgncB.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/register.php"] { background-image: url("http://i.imgur.com/t770slW.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } #mal_cs_otherlinks a[href="/modules.php?go=faq"] { background-image: url("http://i.imgur.com/mTCwcka.png") !important; background-position: center center !important; background-repeat: no-repeat !important; } .status_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=1"]:before { content: "Current"; font-size: 13px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{ font-size: 0px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .table_headerLink, .table_header:nth-of-type(2)::before { line-height: 15px;} } .td1:nth-of-type(5), .td2:nth-of-type(5) { display: none !important;; } td[class^="td"]:nth-of-type(4) { top: 120px !important; left: 10px !important; background: ; width: 140px; color: #FFFFE0; } td[class^="td"]:nth-of-type(4):after { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0 0px 4px black inset; color: #FFFFE0; font-family: century gothic; font-size: 14px; font-style: italic; font-weight: bold; height: 18px; left: -25px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 34px; position: absolute; top: 90px; width: 180px; z-index: -1; border-radius: 0px 0px 3px 3px; content: ""; } .animetitle + small { left: 25px !important; top: 5px !important; } Importable codes: Found here: http://pasted.co/dce47060 Changelog 03/22/2017 (Shishio-kun) - Restored layouts - Changed Animelist and Mangalist to V4 04/07/2014 Updated Mangalist to V3 - Improved design - Now looks better if you don't use tags - Fixed some small things - Topbar fixed 02/07/2014 - Fixed topbar (again!) - Changed a few images 03/05/2014 Updated Animelist to V3 - Improved design - Now looks better if you don't use tags - Fixed some small things 11/04/2014 - Fixed the score, it's now visible to others 30/03/2014 Updated Mangalist to V2 - Code for mangalist added - Fixed font style of animelist 24/03/14 Updated Animelist to V2 - Category menu and sort option are fixed (thx to Hahaido's magic) - Tags can be edited directly - Each category has its own banner - Css has been cleaned up - Some improvements on the design FAQ My category headers are all over the place, how did this happen? You need to change your "default status selected". To do this go to your profile settings and you'll find this option under "my list settings". You can choose any but "show all". My cover image don't show up/have disappeared. How can I fix this? Most likely the import link broke. Check the club discription as Shishio usually writes a notification about what happened. There will also be replacement links. To avoid this problem alltogether you can generate your own covers. More will follow ... If you have trouble please activate the layout on your list so that I can actually see it. In case I don't respond let me know on my profile that you posted here. |
Shishio-kunOct 31, 2018 10:44 PM
Feb 23, 2014 3:29 PM
#2
I love how colorful it is ^^ |
Feb 23, 2014 10:26 PM
#3
Your code is something... I fixed category menu and sorting menu @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/topbar.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_SnK2/UnavailableAnime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/DVDcover/dvdcovers_anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/cssforinfo.css"; @import "http://dl.dropbox.com/u/78340470/anime.css"; @import url(https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/topbar_popup.css); /*#############Change Banner images below##############*/ .header_cw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/banner.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } .header_completed { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/banner4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } .header_onhold { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/banner4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } .header_dropped { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/banner4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } .header_ptw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/banner4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } /*###########################################################################*/ .hide { background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/coverimage.png"); } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://coolvibe.com/wp-content/uploads/2010/05/animewallpaper8-1024x576.jpg"); background-repeat: no-repeat; background-size: cover !important; } #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; margin: 0 auto auto 30px; padding-top: 242px; position: relative; width: 1016px; } td[class^="td"]:nth-of-type(1) { display: none; } td[class^="td"]:nth-of-type(2) { } td[class^="td"]:nth-of-type(3) a { color: lightgray; font-family: century gothic; font-size: 27px; text-decoration: none; text-shadow: 0 0 4px white; } td[class^="td"]:nth-of-type(3) { background: black !important; color: lightgrey; content: " "; display: inline !important; font-family: century gothic; font-size: 27px; height: 25px; left: 157px !important; padding-bottom: 8px !important; padding-left: 3px; position: relative; text-align: right !important; top: 240px !important; width: 23px !important; text-shadow: 0 0 4px white; } td[class^="td"]:nth-of-type(4) { font-size: 14px; font-style: italic; font-weight: bold; left: 30px !important; position: relative; top: 239px !important; } td[class^="td"]:nth-of-type(5) a { font-style: italic; font-weight: bold; text-decoration: none; } td[class^="td"]:nth-of-type(5) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-size: 14px; height: 17px; left: 4px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 38px; position: absolute; top: 214px; width: 164px; z-index: -1; } td[class^="td"]:nth-of-type(6) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; height: 144px; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 70px; position: absolute; text-align: center; top: 0; width: 162px; } td[class^="td"]:nth-of-type(7), td[class^="td"]:nth-of-type(8) { display: none; } td[class^="td"]:nth-of-type(6) a { color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; } .header_title { color: rgba(0, 0, 0, 0.6); font-size: 93px; font-variant: small-caps; position: relative; top: 23px; left: -30px; font-family: century gothic; } .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_completed { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_onhold { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_dropped { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_ptw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } body { background-color: #000000; font-family: calibri; } .hide { background-color: #800080; background-size: cover; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block !important; float: left; height: 272px !important; margin-bottom: 8px; margin-left: -160px; padding-left: 0; position: relative; visibility: visible !important; width: 189px; z-index: 0; } .animetitle { background-color: rgba(0, 0, 0, 0); font-variant: small-caps; font-weight: bold; left: 2px; max-width: 180px; overflow: hidden; padding: 0 0 0 22px; position: absolute; text-align: center; text-decoration: none; text-overflow: ellipsis; top: 220px; white-space: nowrap; } .td1, .td2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-right: 15px; } .td1 a, .td2 a { color: #FFFFFF; } .td1:nth-of-type(1), .td2:nth-of-type(1) { color: #FFFFFF; left: -6px; position: absolute; top: 2px !important; } #list_surround small { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); font-size: 0; left: 39px; position: absolute; text-decoration: none; top: -1px; } .td1 a.List_LightBox, .td2 a.List_LightBox { color: #808080; font-size: 12px; font-style: italic; font-variant: small-caps; left: 148px; opacity: 0.8; position: absolute; text-decoration: none; top: 4px; visibility: visible !important; width: 118px; z-index: 2; } .td1 a.List_LightBox:after, .td2 a.List_LightBox:after { } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; text-align: left; top: 63px; width: 225px; } .td1[align="center"][width="50"], .td2[align="center"][width="50"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; left: 4px; position: absolute; text-align: left; top: 82px; width: 225px; } .td1[width="70"], .td2[width="70"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #00FFFF; left: 4px; position: absolute; text-align: left; top: 101px; width: 225px; } td[class^="td"]:nth-of-type(7) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; position: absolute !important; top: 120px !important; } td[class^="td"]:nth-of-type(8) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF !important; left: 4px; position: absolute; text-align: left; top: 139px; width: 225px; } td[class^="td"]:nth-of-type(9) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF !important; left: 5px; position: absolute; text-align: left; top: 158px; width: 235px; } td[class^="td"]:nth-of-type(10) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF; left: 5px !important; position: absolute !important; top: 177px !important; } td[class^="td"]:nth-of-type(5) { font-size: 0; } td[class^="td"]:nth-of-type(11) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF !important; left: 4px; position: absolute; text-align: left; top: 195px; width: 225px; } .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } /* SORT */ .table_header span { display: none !important; } /* Disable Tags in the Sort Options */ .table_header[width="125"] { display: none !important; } .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { position: fixed; display: block !important; left: 381px; top: 32px; width: 110px !important; } .table_header { position: absolute !important; display: inline-block; } .table_header:hover .table_headerLink { visibility: visible !important; opacity: 1 !important; } .table_headerLink strong { font-weight: normal !important; } .table_headerLink, .table_header:nth-of-type(2):before { display: inline-block; width: 110px; padding: 7px 0; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; font-size: 11px; color: #FFFFFF; text-align: center; text-decoration: none; font-weight: normal !important; border-style: solid; border-color: #000000; border-width: 0 1px 1px 1px; background-color: rgba(0, 0, 0, .6); } .table_headerLink { visibility: hidden; opacity: 0; position: relative !important; } .table_header:nth-of-type(2):before { visibility: visible; opacity: 1; position: fixed; content: 'Sort List'; top: 0; left: 381px; } tr:hover .table_headerLink { visibility: visible; opacity: 1 } .table_headerLink:hover, tr:hover .table_header:nth-of-type(2):before { background-color: rgba(0, 0, 0, 1); } .table_header:nth-of-type(3) { margin-top: 32px; } .table_header:nth-of-type(4) { margin-top: 64px; } .table_header:nth-of-type(5) { margin-top: 96px; } .table_header:nth-of-type(6) { margin-top: 128px; } .table_header:nth-of-type(7) { margin-top: 128px; } .table_header:nth-of-type(8) { margin-top: 160px; } .td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before { color: #FFFFFF; content: " Type: "; font-style: italic; font-variant: small-caps; font-weight: normal; position: relative; } .td1[width="70"]:before, .td2[width="70"]:before { color: #FFFFFF; content: " Progress: "; font-style: italic; font-variant: small-caps; position: relative; } .td1[width="125"]:before, .td2[width="125"]:before { color: #FFFFE0; content: " COMMENT"; font-family: calibri; font-size: 16px; font-style: normal; } #list_surround small a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); visibility: hidden; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; font-family: Verdana; font-size: 11px; text-decoration: none; } #list_surround > table:first-of-type { position: fixed !important; left: 492px; top: 0; width: 550px; z-index: 2; } .status_selected, .status_not_selected { position: relative !important; width: 110px !important; } .status_selected a, .status_not_selected a { display: inline-block; width: 110px; padding: 7px 0; font-family: calibri; font-size: 13px; color: #FFFFFF; font-variant: small-caps; text-decoration: none; border-style: solid; border-color: #000000; border-width: 0 0 1px 1px; background-color: rgba(0, 0, 0, .6); } .status_selected:last-child, .status_not_selected:last-child { display: none !important; } .status_selected a, .status_not_selected a:hover { background-color: rgb(0, 0, 0); } td.table_header:nth-of-type(1) { display: none; } a:hover { text-decoration: none; } .table_header a:hover { color: #FFFFFF; } .animetitle + small { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7) !important; border-color: #000000; border-style: solid; border-width: 1px; color: lightgray; font-size: 12px !important; font-variant: small-caps; left: 30px !important; opacity: 1; padding: 1px; text-align: center; top: 195px !important; z-index: 3; padding-left: 2px; padding-right: 3px; border-bottom-style: none; border-left-style: solid; } #copyright:before { content: 'Design by Lirina. Topbar by Luxiamimi. '; display: block; font-size: 10px; color: lightyellow !important; text-align: right; } #copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-family: Tahoma; font-size: 10px; left: 740px; margin: auto !important; padding: 4px; position: absolute; right: 0; text-align: right !important; top: 206px; width: 265px; z-index: 1 !important; } .category_totals { display: none; } #copyright a { color: #FFFFFF; text-decoration: none; } #copyright:before { color: #FFFFFF; } td.table_header:nth-of-type(1) { color: rgba(0, 0, 0, 0); } |
Feb 24, 2014 5:29 AM
#4
Thanks a lot, you're amazing! Yeah, I had no idea how to build a dropdown menu so I just tried to imitate it. But I did a good job with that, didn't I? ^^" |
Feb 24, 2014 8:15 AM
#5
Feb 25, 2014 11:20 AM
#6
Haha thanks! But if I were I would have been able to do it properly. I was quite surprised it worked out myself. xD I don't know why I'm too lazy to really teach myself css, right now I just google codes whenever I need them ... and be somewhat creative when I don't find anything. ^^" |
Feb 25, 2014 8:37 PM
#7
Feb 25, 2014 11:41 PM
#8
This layout rocks! I love how the anime/manga compatibility is also displayed inside the layout. ^^ I tried viewing the layout using both Chrome and Firefox. I don't see any difference or any problems viewing the list using Chrome. (I'm more of a Chrome user, ahaha!) Although, I might have probably missed them. I'm thinking of using this layout. :) I wanna customize it with my own theme so I'll have to prepare my own banners and wallpaper first. As long as I keep the width, would the height of the banner affect the layout or not? |
Feb 26, 2014 10:46 AM
#9
LunyRed said: This layout rocks! I love how the anime/manga compatibility is also displayed inside the layout. ^^ I tried viewing the layout using both Chrome and Firefox. I don't see any difference or any problems viewing the list using Chrome. (I'm more of a Chrome user, ahaha!) Although, I might have probably missed them. I'm thinking of using this layout. :) I wanna customize it with my own theme so I'll have to prepare my own banners and wallpaper first. As long as I keep the width, would the height of the banner affect the layout or not? Good to know that it works in Chrome, I was a bit worried about that. The height of the banner is 260px, if you want to use a banner with a different height there are two things you need to change: #list_surround { padding-top: 242px !important; } #mal_control_strip { top: 257px !important; } You can probably just take these codes, override the values depending on the height of your banner and paste it to the rest of the code. |
Feb 26, 2014 11:46 PM
#10
I'm currently doing a few experiments with the code using a "test" banner with a height of 350 pixels. (It's just a sample!!) I was able to move all the rows of DVD covers downward by adjusting the px but even if I made the adjustments with the px for the "#mal_control_strip", nothing has changed from its current location. It's rooted on the spot while a fraction of the bottom of the banner has been cut off. I'm doing something wrong and I can't figure out how to fix it.. @@; If I can't figure this out, then I'll just stick with the standard banner height used for the layout. It won't make much of a difference. ^^" |
Mar 1, 2014 7:42 AM
#11
Maybe try this "#mal\_control\_strip" instead of "#mal_control_strip". |
Mar 25, 2014 2:31 PM
#12
Updated the code. Code for manga lists will be added shortly. |
Apr 27, 2014 6:18 AM
#13
Awesome layout, but why for me score is square and for you star? |
[size=0][/size] |
Apr 27, 2014 11:58 AM
#14
Pretty cool design. May choose this one once I tired with mine new design list I picked. |
Apr 27, 2014 1:46 PM
#15
SViper said: Awesome layout, but why for me score is square and for you star? I'm still working on this so I haven't published the new code, but I will do later as a v3 (probably next weekend as I have exams at the moment). DarknessOfEmo said: Pretty cool design. May choose this one once I tired with mine new design list I picked. Thank you! |
Jun 10, 2014 3:51 PM
#16
This looks amazing!! I'll probably mess around with it later. Btw is there any way to resize the cover images that are longer in width than they are in length? Because if the width is longer than the length you only get half of the image. A pic is in the spoiler to show what I mean. |
Sol_OuJun 10, 2014 6:49 PM
Jun 11, 2014 12:28 PM
#17
dragonlight said: This looks amazing!! I'll probably mess around with it later. Btw is there any way to resize the cover images that are longer in width than they are in length? Because if the width is longer than the length you only get half of the image. A pic is in the spoiler to show what I mean. I guess you could use .hide { background-size: contain !important; background-repeat: no-repeat; } But its not perfect since that will throw off other covers.. You could try sending the database ppl a proper vertical cover of those animes so they replace those shitty horizontal one, or requesting they use an alternative in their pictures if they have it like here: http://myanimelist.net/anime/2928/.hack//G.U._Returner/pics One time I noticed a dead cover that was causing problems for our generators and I sent Kineta a pic from the anime to use for the cover here and she replaced it real fast. |
Jun 11, 2014 5:20 PM
#18
Shishio-kun said: I tried the code and it's not worth it. Thanks though. I think I'll just try finding vertical images to give to the DB guys. Or maybe I'll just resize them depending how lazy I feel. :pI guess you could use .hide { background-size: contain !important; background-repeat: no-repeat; } But its not perfect since that will throw off other covers.. You could try sending the database ppl a proper vertical cover of those animes so they replace those shitty horizontal one, or requesting they use an alternative in their pictures if they have it like here: http://myanimelist.net/anime/2928/.hack//G.U._Returner/pics One time I noticed a dead cover that was causing problems for our generators and I sent Kineta a pic from the anime to use for the cover here and she replaced it real fast. |
Jun 11, 2014 6:25 PM
#19
I just remembered you can also individually change covers (manually changing at the bottom) http://myanimelist.net/forum/?topicid=443333&show=0#post1 You could change those few covers that aren't working right with your own. I also asked Kineta to change the .hack one with the pics one. |
Jun 12, 2014 4:03 PM
#20
I've been using this style for awhile and a big fan of it. These are the basic wallpapers and banners I'm currently using. Nothing special though mostly just things I've cropped to fit proper dimensions and such. My Anime list is currently themed after GitS SAC, Manga is mostly random favourites atm. Some of these obscure the headings, but I don't personally mind so anyhow. Banners - click for full size Wallpapers Laughing Man Logos Berserk |
Jun 12, 2014 9:14 PM
#21
I really like this list, and I'd like to customize it. One issue. When I put the code into my CSS box, once I update it on my list I don't see the banners except the first one (the currently watching) the rest look like this: And I have all my settings right and everything, I haven't changed any of the text, I just copy and pasted. So idk. qnq;; Help me? lol 2nd question, where do I edit the watching/completed/etc titles..it's hard to read with my current banner.. >3< |
a--ikoJun 12, 2014 10:07 PM
Jun 13, 2014 2:32 PM
#22
AboveAllSanity said: I really like this list, and I'd like to customize it. One issue. When I put the code into my CSS box, once I update it on my list I don't see the banners except the first one (the currently watching) the rest look like this: And I have all my settings right and everything, I haven't changed any of the text, I just copy and pasted. So idk. qnq;; Help me? lol 2nd question, where do I edit the watching/completed/etc titles..it's hard to read with my current banner.. >3< The first thing is you are viewing it on an All Anime page which I don't think this layouts intended for, much like other poster style layouts. Even on Lirina's all anime list you get a similar error: http://myanimelist.net/animelist/Lirina&status=7&order=0 but you're probably not supposed to start/go there in the first place- its why she has no All Anime button on this and its even deleted in the code it seems. So for you, don't start your list on All start on a single category (default status selected) http://myanimelist.net/editprofile.php?go=listpreferences The second thing, the codes to control the category links is in the FixedCss import but you can add the codes to recolor them all at once: .status_selected a, .status_not_selected a{ background-color: red !important; color: cyan !important; } This controls the sort list part at once: .table_headerLink, .table_header:nth-of-type(2):before{ background-color: red !important; color: cyan !important; } You can use your own color scheme of course tho. You can also search the layout for the table header codes which are in there and are control more individual parts. |
Jun 19, 2014 11:40 AM
#23
Oh yeah before I forget here are my banners. click for full size. |
Sol_OuJun 19, 2014 11:46 AM
Jun 27, 2014 8:09 AM
#24
Lovely list indeed<3 May i get a notification whenever you update the manga list? c: |
Jul 2, 2014 6:34 AM
#25
If you have a problem with your topbar please update your css. I don't know what happened (maybe I messed up something ^^°) but I managed to fix it. The mangalist update will come in the next days, I'm already working on it. EDIT: Mangalist is updated. |
LirinaJul 4, 2014 8:22 AM
Jul 3, 2014 1:43 PM
#26
How do I update it if all the links are 404'd? |
Jul 3, 2014 5:44 PM
#27
dragonlight said: How do I update it if all the links are 404'd? I think she means you replace the old imports with new ones. But I think most ppl will only need to replace the top bar import, since thats what broke @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; None of the links in first post are 404'd atm, it only appears that way when you click them in the import link on forum cuz it includes the quotations. But click here: https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css the actual imported CSS is there |
Jul 4, 2014 4:48 AM
#28
Shishio-kun said: I also relocated a few of the images in my dropbox as I had the oppertunity and improved some of the other codes. It would be good to replace the whole code but if that's too inconvenient replacing just the topbar will be fine as you said.dragonlight said: How do I update it if all the links are 404'd? I think she means you replace the old imports with new ones. But I think most ppl will only need to replace the top bar import, since thats what broke @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; None of the links in first post are 404'd atm, it only appears that way when you click them in the import link on forum cuz it includes the quotations. But click here: https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css the actual imported CSS is there |
Jul 4, 2014 8:14 AM
#29
Oh lol my bad. I should have checked the address first. |
Jul 5, 2014 9:48 PM
#30
I have fixed some things in your code that bugged me a little. (Sorry, I do think your code is wonderful though. I suggest using more comments for what does what though.) I have fixed where the page does not show the totals for the current page and made it fit to look nicely. Here is a picture to show what it looks like: http://i.imgur.com/wim0pjQ.png I have also fixed the top bar to now scroll with you so that "Sort List" box won't get in the way if you hover over it when trying to hover over something in your list that happens to be in the same spot. Here is the code for download: https://dl.dropboxusercontent.com/u/179669096/Full%20CSS.css Also you will notice that I have changed an import to my own code to edit the top bar so that it doesn't scroll with you so if you want a direct link to that here it is: https://dl.dropboxusercontent.com/u/179669096/MyFixedCSS.css Here is also a link to my profile to see the full code in use with my list: http://myanimelist.net/animelist/Sourve&status=1&order=0 Note: In the copyright I put "perfected by Sourve" on my profile, just ignore that. In the link I posted to the code it says "Edited by Sourve" Edits: I didn't update my topbar so I had to adjust it a little but it is now fixed. |
SourveJul 5, 2014 10:05 PM
Jul 12, 2014 5:01 AM
#31
Interesting idea. I have been thought about the sort menu a lot and in the new version I moved it to the end (I will upload this code soon): But your idea is a good option for an non-fixed topbar. I will link it in the first post later. ^^ I don't really like to display the totals but the code I have looks like this: Code if you (or someone else) woul'd like to use it .category_totals { color: white; position: relative; white-space: pre-line; padding: 0 0 0 35px; padding-bottom: 25px; font-size: 14px; font-variant: small-caps; } .category_totals:before { color: lightgray; content: "Totals"; display: block !important; font-size: 25px; text-align: center; font-family: century gothic; font-variant: small-caps; margin-left: -30px; text-shadow: 0 0 2px black; } |
Jul 14, 2014 1:23 PM
#32
Hey~ First, thanks for the layout! I've only started studying the HTML codes, so I couldn't do anything more than edit the banner and the wallpaper. Here there are: This is how it looks when paired up: [spoiler] |
Jul 20, 2014 12:55 PM
#33
Quick question: Am i the only one having problems generating my own covers? I might be making some sort of mistake while doing it, but i perfectly managed to generate my own cover in the manga layout used earlier before the recent update. It might just be me doing a minor mistake without being aware of it, but i just want to make sure. :) |
Jul 23, 2014 12:35 AM
#34
Toxicwolf said: What exactly is your problem?Quick question: Am i the only one having problems generating my own covers? I might be making some sort of mistake while doing it, but i perfectly managed to generate my own cover in the manga layout used earlier before the recent update. It might just be me doing a minor mistake without being aware of it, but i just want to make sure. :) |
Jul 24, 2014 3:53 AM
#35
The problem is that whenever i try generating my own covers all of them go missing (And i'm pretty sure my list uses more) I'm not sure if I'm doing any faults when i put the code itself in, but i tried following everything step for step with no luck. |
Jul 24, 2014 4:14 AM
#36
Toxicwolf said: The problem is that whenever i try generating my own covers all of them go missing (And i'm pretty sure my list uses more) I'm not sure if I'm doing any faults when i put the code itself in, but i tried following everything step for step with no luck. Post the link to your cover import or put it in your CSS, so we can narrow down where the problem might be |
Jul 25, 2014 4:35 AM
#37
Umm can someone plzz tell me how to add images for banner I have this banner with image link:https://dl-web.dropbox.com/get/AW6Hspa.jpg?_subject_uid=321198757&w=AACX0DgB4GWUeJaitX88NuaJbbaT0M6BEN7Ia47lAb-EIQ But when ever i add it nothing happens :( |
Jul 26, 2014 6:19 AM
#38
najmasakura said: This may be because the link is not working. Perhaps you could reupload the image?Umm can someone plzz tell me how to add images for banner I have this banner with image link:https://dl-web.dropbox.com/get/AW6Hspa.jpg?_subject_uid=321198757&w=AACX0DgB4GWUeJaitX88NuaJbbaT0M6BEN7Ia47lAb-EIQ But when ever i add it nothing happens :( |
Jul 26, 2014 12:08 PM
#39
Awesome job w/ this, Lirina. ^^ |
"Be the change you wish to see in the world." |
Jul 27, 2014 7:56 AM
#40
Toarujisuru said: Thank you!Awesome job w/ this, Lirina. ^^ |
Jul 29, 2014 1:23 PM
#41
Sorry for the slight delayed answer. https://www.dropbox.com/s/n2jym7qdbkwrph0/mangamoreafter.css but this is the link i attempted to use. I did also make sure to edit the link before placing it into the code. |
Aug 1, 2014 1:19 PM
#42
Toxicwolf said: I think it doesn't work because you use more:after whereas I use just more in my code. Try this one and see if it works:Sorry for the slight delayed answer. https://www.dropbox.com/s/n2jym7qdbkwrph0/mangamoreafter.css but this is the link i attempted to use. I did also make sure to edit the link before placing it into the code. @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/dvdcovers.css"; Not all images will show up but if it works we know that this was the problem. You can then generate your own covers. |
Aug 6, 2014 2:05 AM
#43
Hello! I was just wondering if there's a way to center the theme? :3 |
remaking my signature! lol I never actually ended up remaking it, oop. ; ; |
Aug 6, 2014 2:50 AM
#44
Aseylum said: Hello! I was just wondering if there's a way to center the theme? :3 You can replace "#list_surround" with this: #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; box-shadow: 0 0 4px black; margin: auto; padding-top: 242px; position: absolute; width: 1016px; right: 0; left: 0; } Then you have to ask Shishio, Hahaido or some other genius how to center the topbar and the category menu because I have no idea. ^^° |
Aug 7, 2014 1:38 AM
#45
Yay! Thanks. I figured out how to move the bars myself, after a lot of noodling around. I'm not quite done yet but I can post what I did / upload the edited stuff after if anyone wants me to! :3 // still working on my banners, too, ehe. |
remaking my signature! lol I never actually ended up remaking it, oop. ; ; |
Aug 10, 2014 9:51 AM
#46
Lirina said: I think it doesn't work because you use more:after whereas I use just more in my code. Try this one and see if it works: When i use the code all the covers end up missing and pushed at the far left side: http://i61.tinypic.com/14w6ckl.png Not sure if i'm making the coding error myself or not. The code used WITH the included cover link you just gave @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import @importurl(https://dl.dropboxusercontent.com/s/ar6xlkkqw6gedof/premadeanime.css); @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/dvdcovers.css"; /*#################################################*/ /*#############Change Banner images below##############*/ /*#################################################*/ .header_cw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner1_neutral.png")!important; } .header_completed { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner6.png")!important); } .header_onhold { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner7.png")!important; } .header_dropped { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner8.png")!important; } .header_ptw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner5_neutral.png")!important; } /*############Change background image below############*/ body { background-image: url("http://coolvibe.com/wp-content/uploads/2010/05/animewallpaper8-1024x576.jpg"); } /*#################################################*/ /*#################################################*/ .hide { background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/coverimage.png"); border-radius: 5px; background-size: 100%; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block !important; float: left; height: 265px !important; margin-bottom: 8px; margin-left: -160px; padding-left: 0; position: relative; visibility: visible !important; width: 189px; z-index: 0; box-shadow: 0 0 5px black inset; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: cover !important; font-family: calibri; } a { text-decoration: none; } #list_surround { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; margin: 0 auto auto 30px; padding-top: 242px; position: absolute; width: 1016px; box-shadow: 0 0 4px black; } /*############################COLUMNS#####################*/ td[class^="td"]:nth-of-type(1) { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/star3.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); content: " "; display: inline; font-size: 0; left: 168px; padding: 16px; position: relative !important; top: 248px; } .animetitle { color: #D3D3D3 !important; font-family: century gothic; font-variant: small-caps; left: 25px; max-width: 180px; overflow: hidden; position: absolute; text-align: center; text-decoration: none; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000000, 0 0 4px #000000; top: 213px; white-space: nowrap; } .td1, .td2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-right: 15px; } .td1 a, .td2 a { color: #FFFFFF; } td[class^="td"]:nth-of-type(2) {} td[class^="td"]:nth-of-type(3) { background: transparent; color: #FFFFE0; display: inline !important; font-family: fantasy; font-size: 22px; left: 169px !important; position: relative; text-align: center !important; text-decoration: none; text-shadow: 0 0 1px #FFD700, 0 0 2px #FFA500; top: 234px !important; width: 30px !important; padding-right: 0px ; } td[class^="td"]:nth-of-type(3) a { color: #FFFFE0 !important; font-family: century gothic; font-size: 22px; text-decoration: none; } td[class^="td"]:nth-of-type(4):before { color: #FFFFFF; content: " Chapter: "; font-style: normal; font-variant: small-caps; font-weight: normal; position: relative; text-shadow: 0 0 0 !important; } td[class^="td"]:nth-of-type(4) { color: lightyellow; font-family: century gothic; font-size: 13px; font-style: italic; font-variant: small-caps; font-weight: bold; margin-left: -90px; position: absolute; text-align: left; top: 232px !important; width: 225px; z-index: 10; } td[class^="td"]:nth-of-type(4) a { color: #FFFFE0; font-family: century gothic; font-style: italic; font-variant: small-caps; font-size: 13px; font-weight: bold; } td[class^="td"]:nth-of-type(5):before { content: "Volume: "; font-weight: normal; font-family: century gothic; font-size: 13px; font-variant: small-caps; color: #FFFFFF; font-style: normal; } td[class^="td"]:nth-of-type(5) a { color: lightyellow; font-size: 13px; font-weight: bold; font-family: century gothic; font-style: italic; } td[class^="td"]:nth-of-type(5) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-bottom-style: none !important; border-color: #000000; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0 0px 4px black inset; color: #FFFFE0; font-family: century gothic; font-size: 14px; font-style: italic; font-weight: bold; height: 18px; left: 3px; margin-left: 17px; padding-bottom: 3px; padding-left: 10px; padding-top: 34px; position: absolute; top: 211px; width: 166px; z-index: -1; border-radius: 0px 0px 3px 3px; } td[class^="td"]:nth-of-type(6) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; height: 144px; margin-left: 17px; opacity: 0; padding-left: 12px; padding-top: 70px; position: absolute; text-align: center; top: 0; width: 162px; } td[class^="td"]:nth-of-type(6) a { color: #FFFFE0; font-family: comic sans ms; font-size: 12px; font-style: italic; } td[class^="td"]:nth-of-type(7), td[class^="td"]:nth-of-type(8) { display: none; } /*############################BANNER CELLS######################*/ .header_title { color: rgba(0, 0, 0, 0.6); font-size: 93px; font-variant: small-caps; position: relative; top: 23px; left: -30px; font-family: century gothic; } .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_completed { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_onhold { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_dropped { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } .header_ptw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0 !important; width: 1015px; } /*#####################EDIT################*/ #list_surround small { background: transparent; font-size: 10; left: 39px; text-decoration: none; top: 20px; } .td1 a.List_LightBox, .td2 a.List_LightBox { color: #808080; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 186px; opacity: 0.8; position: absolute; text-decoration: none; top: 1px; visibility: visible !important; width: 118px; z-index: 2; } #list_surround small a { visibility: hidden; font-size: 40px; } /*### COMMENT ###*/ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } /*### AIRING ###*/ .animetitle + small { background-color: rgba(0, 0, 0, 0.75) !important; background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/airing.png") !important; background-position: -2px center !important; background-repeat: no-repeat no-repeat !important; background-size: 22px auto !important; border-color: #000000; border-radius: 5px 5px 0 0; border-style: solid; border-width: 1px; box-shadow: 0 2px 3px #808080 inset; color: #FFFFE0; font-family: century gothic; font-size: 12px !important; font-style: italic; font-variant: small-caps; left: 30px !important; letter-spacing: 0.3px; opacity: 1; padding: 0 3px 2px 22px; position: absolute; text-align: center; text-shadow: 0 0 3px #FFFFFF, -1px -1px 5px #FFFFFF; top: 192px !important; visibility: visible !important; z-index: 3; border-bottom-style: none; } /*### COPYRIGHT ###*/ #copyright:before { content: 'Design by Lirina. Topbar by Luxiamimi. '; display: block; font-size: 10px; color: lightyellow !important; text-align: right; font-style: normal; } #copyright { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-width: 1px; color: #FFFFFF; font-family: Tahoma; font-size: 10px; left: 740px; margin: auto !important; padding: 4px; position: absolute; right: 0; text-align: right !important; top: 206px; width: 265px; z-index: 1 !important; border-radius: 5px 0 ; font-style: italic; } .category_totals { display: none; } #copyright a { color: #FFFFFF; text-decoration: none; } #copyright:before { color: #FFFFFF; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; text-align: left; top: 63px; width: 225px; } .td1[align="center"][width="50"], .td2[align="center"][width="50"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; left: 4px; position: absolute; text-align: left; top: 82px; width: 225px; } .td1[width="70"], .td2[width="70"] { text-align: left; } /* td:nth-of-type(7) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; position: absolute !important; top: 120px !important; } td:nth-of-type(8) { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #FFFFFF !important; left: 4px; position: absolute; text-align: left; top: 139px; width: 225px; } td:nth-of-type(5) { font-size: 0; } */ .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); left: 4px; position: absolute; top: 178px; width: 225px; } .td1[align="center"][width="45"]:before, .td2[align="center"][width="45"]:before { } .td1[align="center"][width="50"]:before, .td2[align="center"][width="50"]:before { color: #FFFFFF; content: " Type: "; font-style: italic; font-variant: small-caps; font-weight: normal; position: relative; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; font-family: Verdana; font-size: 11px; text-decoration: none; } Read more at http://myanimelist.net/forum/?topicid=1071911&show=0#QjBZbul0xIgAK5vz.99 |
ToxicwolfAug 10, 2014 9:57 AM
Aug 10, 2014 10:36 AM
#47
You are missing this: @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"; If you add this code at the top of the css the list will return to normal. And I think my covers are working on your list, it's just that we have different entries. Where did you get the covers you wanted to use from? It's best if you generate your own covers, for example with this program. Make sure you chose "more" as selector. |
Aug 16, 2014 9:49 PM
#48
Can someone plzzz tell me which site i should use to upload a banner? I tried using photobucket but I dunno which link to copy and paste for the banner :( |
Aug 17, 2014 3:47 AM
#49
najmasakura said: Can someone plzzz tell me which site i should use to upload a banner? I tried using photobucket but I dunno which link to copy and paste for the banner :( You need the direct link. I don't use that site but usually it's right mouse click and then copy image address. |
Aug 18, 2014 11:18 AM
#50
Hi, this may seem silly or whatever, but there seems to be something wrong with my list? >.< I'm a noob to these kinda things, but basically, if you look at: my list You can see my 'type' (just below the name of the show), is all messed up, and also, there's a black line stretching to the right that's out of place? >.< Does anyone know how to fix it? Thanks =P |
More topics from this board
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
15 |
by Shishio-kun
»»
2 hours ago |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7855 |
by 23feanor
»»
12 hours ago |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Yesterday, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Yesterday, 4:43 AM |
|
» ✳️[NEWSLETTER] Any Broken Layouts? + Restored Designs so far + Frozen GIF Fix ( 1 2 )Shishio-kun - Nov 15, 2023 |
58 |
by AholePony
»»
Sep 19, 10:47 AM |