New
Mar 11, 2012 3:20 PM
#1
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: http://myanimelist.net/forum/?topicid=419405 The design has a version for anime lists and another for manga lists. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b] Click for a full preview! The most futuristic layout ever! Its a very easy to navigate list with transitional hovers on the list with an amazingly unique top bar, you can see in this animated preview below (if you wanna add just the top bar, see the Bonus section at the bottom of the topic) When I move my cursor on the top icons, they have this awesome animated drop down menu! Customizing/differences between both versions! There's an anime list version and manga list version. The only difference between the two are the backgrounds and the heading at the top. The three codes you need to change out the images are all conveniently at the top! There are also many notes we put in the code to customize the style and fonts. Here's some extra info for questions you may have: Changing the heading: on the anime list it says My Anime List and the heading of the manga version it says My Manga List. This is a premade image that you can change out with your own logo or image with your name! The code with this image is under #list_surround. Customizing the anime list version's background image and background color is easy, all the codes are near the top of the CSS. #inlineContent has a rendered image of Black Rock Shooter with a transparent background. The background color behind her is body and its just a solid color with no background. Change #inlineContent's background image to change the render. You can change the background color by changing the color after background under body way at the top of the code. By default the color is #B9B9B9. Change it to another HTML color, or named color like black. You can add a background to body behind the #inlineContent image too. Get more renders here: http://myanimelist.net/forum/?topicid=400287 The icon-style toolbar is put into your layout by the very top line of CSS, so leave this alone. Check the bottom of the post for ways to change it. Here's the code for the anime version of the layout (Black Rock shooter): /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url(none) silver; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { background: url("http://i.imgur.com/lh8vuSc.png") center no-repeat; background-size: contain; display: inline-block !important; height: 100% !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100% !important; z-index: -1 !important;} /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* TABLE HEADER */ .table_header { background-color: rgba(65, 35, 95, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* TABLE ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* TABLE ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } table[class^="header_"] + table{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } Below is the manga version, featuring Rei Ayanami! Changing the manga list version background image is more traditional than changing the anime version. #inlineContent is blank, and body contains the background with the blue haired girl (Rei Ayanami). You can customize and mix it up as you please, like adding a render to #inlineContent. Manga version code (Evangelion) /* MAIN BACKGROUND COLOR AND IMAGE By default, a Rei Ayanami Wallpaper. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url(https://i.imgur.com/cMh0gLL.jpg) black; background-size: cover; background-attachment: fixed; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default its transparent here. You can change her with a render or even background image here! All the other codes should be left alone. */ #inlineContent { background: url("none") transparent; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important; } /* HEADER The List header which by default says My Manga List can be changed out here. */ #list_surround { background: url("http://i41.tinypic.com/34nh0e9.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* TABLE HEADER */ .table_header { background-color: rgba(65, 35, 95, 0.6); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } /* TABLE ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* TABLE ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } table[class^="header_"] + table{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before, #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: #333333 !important; } #mal_cs_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal_cs_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal_cs_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal_cs_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } } Change the icon-style toolbar! Even tho the icon style toolbar in this layout is really cool, there's actually eight versions of it. You can even add the category links to it or switch the icons with colorful Touhou icons! You can get them all in this topic, all you need to do is change the import link (the very top line of the CSS) with one of the others: http://myanimelist.net/forum/?topicid=449097 Add the icon-style top bar menu to any other list layout! In addition to being able to change the icon style toolbar, you can add it to any layout with the above link too! Here's an example of it on the TTGL style layout: How to fix the icons to your page This way, the icon style tool bar will stay with you when you scroll down the page. Just add the code to the bottom of you CSS edit box. #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered{ position: fixed !important; } Credit and thanks: This layout's original code is given with permission from Kyouhansha. I heavily modified their original code to fit both premade themes for anime and manga lists and added notes, new images, links, and added codes to make it more customizable. Veriti added cross-browser compatibility and did a massive amount of organization/clean-up to the code to make it extremely accessible to users of all levels and browsers. Big thanks to both of you, this wouldn't be possible without both of you! |
Shishio-kunNov 1, 2018 1:40 AM
Mar 11, 2012 4:35 PM
#2
Mar 11, 2012 6:00 PM
#3
LordSilen said: Wow, that top bars amazing. Great work!! Yes kyouhansha did a really good job on that. |
Mar 11, 2012 7:01 PM
#4
Mar 12, 2012 11:32 AM
#5
LordSilen said: How would I go about getting rid of the "All Anime" button? Then centering it over the list? .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected { display: none !important; } The buttons will center automatically once you remove the all anime button. Edit: This is not complete, check two posts down for complete code. |
Shishio-kunMar 12, 2012 12:52 PM
Mar 12, 2012 12:06 PM
#6
Shishio-kun said: LordSilen said: How would I go about getting rid of the "All Anime" button? Then centering it over the list? .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected { display: none !important; } The buttons will center automatically once you remove the all anime button. This will only work if All Anime is current category, no? |
Mar 12, 2012 12:50 PM
#7
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { display:none; } You're right, there's like 4 other codes I used I forgot to add lol. |
Mar 12, 2012 2:08 PM
#9
This looks awesome! He/She did a great job! |
Mar 21, 2012 1:56 PM
#10
I added a fix to this code for logged out users. People who used these codes before 3-21-12 may want to add this. Its been added to the originals in the first post since then. #mal\_control\_strip { background: transparent !important; } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } |
Shishio-kunApr 25, 2012 6:10 PM
Mar 22, 2012 2:27 PM
#11
How to change the background color of the anime list? |
Mar 23, 2012 1:02 AM
#12
Kogarashi said: How to change the background color of the anime list? Look at body near the top, go to background and you'll see silver. This is the background color, change it to what you want! |
Shishio-kunApr 25, 2012 6:11 PM
Mar 23, 2012 4:34 AM
#13
Thanks, Shishio-sama. |
Mar 23, 2012 10:59 AM
#15
Maybe code needs a little refactoring... Well, I'd say not a little: it's too browser-specific, filled with unnecessary selector and non-structured. |
Mar 23, 2012 11:16 AM
#16
What would you change about it? |
Mar 23, 2012 11:34 AM
#17
Whatever -moz- parts (especially -moz-border-sizing, there is fucking standard border-sizing property!), selectors like this:body #mal_cs_powered #search #searchBox:hover Also I'd re-arranged the whole code to several parts and added a comments showing what is what, so people don't have ask where to change bg pic for instance. |
Mar 23, 2012 8:10 PM
#18
I added notes to the code. An Opera/Chrome/Safari patch would be nice for the transitions but I tried to add opera and webkit transition codes to -moz-transition: all 0.4s ease 0s; they didn't seem to take effect. Transition in other browsers seems weird, even though its the same value. |
Shishio-kunMar 23, 2012 8:37 PM
Mar 23, 2012 9:04 PM
#19
It's better now. That's probably because it is still too draft, so some specific properties should be added, not just all value. |
Mar 23, 2012 9:43 PM
#20
VeriTi said: It's better now. That's probably because it is still too draft, so some specific properties should be added, not just all value. Oh my. lol I'm not sure what to do then, maybe I can just give opera/chrome transition the same as your list so they're not totally missing out on transition. |
Mar 23, 2012 10:12 PM
#21
I can try to tweak this at the next weekend when I'm done with all my tests. I just don't wanna see 1/3 of MAL using FF-specific code lol |
Mar 25, 2012 6:43 AM
#22
I cut out the top bar buttons (didn't see someone else do it), if people want to integrate it with other list designs (add to the first post?). I just love 'em, and the original list design, too, of course. Thanks a lot! :) Anyway, here's the code which you just simply add to the bottom of your list: #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } body #mal_cs_listinfo, body #mal_cs_links, body #mal_cs_otherlinks, body #mal_cs_powered { -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } body #mal_cs_listinfo:hover, body #mal_cs_links:hover, body #mal_cs_otherlinks:hover, body #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } body #mal_cs_listinfo div, body #mal_cs_links div, body #mal_cs_otherlinks div, body #mal_cs_powered div, body #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } body #mal_cs_listinfo:hover div, body #mal_cs_links:hover div, body #mal_cs_otherlinks:hover div, body #mal_cs_powered:hover div, body #mal_cs_powered:hover dd { opacity: 1; } body #mal_cs_listinfo div:nth-of-type(2), body #mal_cs_links div:nth-of-type(2), body #mal_cs_otherlinks div:nth-of-type(2), body #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } body #mal_cs_listinfo a, body #mal_cs_links a, body #mal_cs_otherlinks a, body #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; } body #mal_cs_listinfo a:nth-of-type(1), body #mal_cs_links a:nth-of-type(1), body #mal_cs_otherlinks a:nth-of-type(1), body #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } body #mal_cs_listinfo a:hover, body #mal_cs_links a:hover, body #mal_cs_otherlinks a:hover, body #mal_cs_powered a:hover { background-color: #403C5A; } body #mal_cs_listinfo strong a strong { font-weight: normal; } body #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; } body #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent; 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; } body #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } body #mal_cs_powered:hover a { opacity: 1; } body #mal_cs_powered a img { background: url("http://invise.s3.amazonaws.com/mal/mal.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; } body #mal_cs_powered a img:hover { background-color: #403C5A; } body #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } body #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%; } body #mal_cs_powered #search #searchBox:hover, body #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } body #mal_cs_powered #search #searchListButton { background: url("http://invise.s3.amazonaws.com/mal/icon-go.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; } body #mal_cs_listinfo { background-image: url("http://invise.s3.amazonaws.com/mal/icon1.png"); right: 106px; } body #mal_cs_listinfo:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon1-over.png"); } body #mal_cs_links { background-image: url("http://invise.s3.amazonaws.com/mal/icon2.png"); right: 72px; z-index: 9; } body #mal_cs_links:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon2-over.png"); } body #mal_cs_otherlinks { background-image: url("http://invise.s3.amazonaws.com/mal/icon3.png"); right: 38px; z-index: 8; } body #mal_cs_otherlinks:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon3-over.png"); } body #mal_cs_powered { background-image: url("http://invise.s3.amazonaws.com/mal/icon4.png"); right: 4px; z-index: 7; } body #mal_cs_powered:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon4-over.png"); } #mal_control_strip { background: transparent !important; } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } I don't need credit for this 'cause I didn't create it. :P Also, I'm not sure if everything in it is needed, but it works for me and I don't see any weird things using it together with my current list design. Take a look at my list for a preview. EDIT: Still can't see all of the buttons when logged out. :S |
RodnessMar 25, 2012 9:17 AM
Mar 25, 2012 12:12 PM
#23
Rodness said: I cut out the top bar buttons (didn't see someone else do it), if people want to integrate it with other list designs (add to the first post?). I just love 'em, and the original list design, too, of course. Thanks a lot! :) Anyway, here's the code which you just simply add to the bottom of your list: #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } body #mal_cs_listinfo, body #mal_cs_links, body #mal_cs_otherlinks, body #mal_cs_powered { -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } body #mal_cs_listinfo:hover, body #mal_cs_links:hover, body #mal_cs_otherlinks:hover, body #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } body #mal_cs_listinfo div, body #mal_cs_links div, body #mal_cs_otherlinks div, body #mal_cs_powered div, body #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } body #mal_cs_listinfo:hover div, body #mal_cs_links:hover div, body #mal_cs_otherlinks:hover div, body #mal_cs_powered:hover div, body #mal_cs_powered:hover dd { opacity: 1; } body #mal_cs_listinfo div:nth-of-type(2), body #mal_cs_links div:nth-of-type(2), body #mal_cs_otherlinks div:nth-of-type(2), body #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } body #mal_cs_listinfo a, body #mal_cs_links a, body #mal_cs_otherlinks a, body #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; } body #mal_cs_listinfo a:nth-of-type(1), body #mal_cs_links a:nth-of-type(1), body #mal_cs_otherlinks a:nth-of-type(1), body #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } body #mal_cs_listinfo a:hover, body #mal_cs_links a:hover, body #mal_cs_otherlinks a:hover, body #mal_cs_powered a:hover { background-color: #403C5A; } body #mal_cs_listinfo strong a strong { font-weight: normal; } body #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; } body #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent; 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; } body #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } body #mal_cs_powered:hover a { opacity: 1; } body #mal_cs_powered a img { background: url("http://invise.s3.amazonaws.com/mal/mal.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; } body #mal_cs_powered a img:hover { background-color: #403C5A; } body #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } body #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%; } body #mal_cs_powered #search #searchBox:hover, body #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } body #mal_cs_powered #search #searchListButton { background: url("http://invise.s3.amazonaws.com/mal/icon-go.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; } body #mal_cs_listinfo { background-image: url("http://invise.s3.amazonaws.com/mal/icon1.png"); right: 106px; } body #mal_cs_listinfo:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon1-over.png"); } body #mal_cs_links { background-image: url("http://invise.s3.amazonaws.com/mal/icon2.png"); right: 72px; z-index: 9; } body #mal_cs_links:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon2-over.png"); } body #mal_cs_otherlinks { background-image: url("http://invise.s3.amazonaws.com/mal/icon3.png"); right: 38px; z-index: 8; } body #mal_cs_otherlinks:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon3-over.png"); } body #mal_cs_powered { background-image: url("http://invise.s3.amazonaws.com/mal/icon4.png"); right: 4px; z-index: 7; } body #mal_cs_powered:hover { background-image: url("http://invise.s3.amazonaws.com/mal/icon4-over.png"); } #mal_control_strip { background: transparent !important; } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } I don't need credit for this 'cause I didn't create it. :P Also, I'm not sure if everything in it is needed, but it works for me and I don't see any weird things using it together with my current list design. Take a look at my list for a preview. EDIT: Still can't see all of the buttons when logged out. :S Oh this is fantastic, I think it will be useful in the customize top bar thread too. |
Mar 26, 2012 4:48 PM
#24
Hey, first off - great list design! ;) I have a little (big) problem though - I can't seem to get the "Progress" column to show up in my Anime List. It has "Score", "Type" and "Rated" but not "Episodes / Progress". I am using the code "as is" btw, and I also have that option selected in the "My List Settings" part of profile management. I have tried other list designs and the "Progress" column shows up just fine. Can someone help me out? |
Mar 26, 2012 5:30 PM
#25
Jonijonh said: Hey, first off - great list design! ;) I have a little (big) problem though - I can't seem to get the "Progress" column to show up in my Anime List. It has "Score", "Type" and "Rated" but not "Episodes / Progress". Can someone help me out? You need to scroll down in the code and remove the display: none; from these two parts. They're about in the middle. td.table_header:nth-of-type(5) { border-color: transparent; display: none; } td.td1:nth-of-type(5), td.td2:nth-of-type(5) { border-color: transparent; display: none; } |
Mar 26, 2012 5:32 PM
#26
td.table_header:nth-of-type(4) { border-radius: 0 0 0 0 !important; } Might want to add this to the bottom after removing those two lines of code. |
Mar 26, 2012 6:03 PM
#27
Shishio-kun said: td.table_header:nth-of-type(4) { border-radius: 0 0 0 0 !important; } Might want to add this to the bottom after removing those two lines of code. Thanks, it works like a charm now ;) |
Apr 25, 2012 6:23 PM
#28
These layout codes have been heavily updated: broken images replaced/all images moved to more reliable place the special effects now work in more browsers! renders in anime list version will be easier to move fonts throughout the list are easier to control and expanded on + additional codes with notes for new options more customizing notes much better organization, unnecessary text removed Special thanks Veriti for all contributing all that organization and cleanup to this update, and the cross-browser compatibility! |
May 9, 2012 3:39 PM
#29
Any way that I can eliminate the highlighting effect when you scroll over a series? Also, trying to figure out how to slightly increase the opacity and center the background image. I took the first part of the code from the manga list setup so I only had to worry about changing the background image and the rest came from the anime list setup. |
Harems don't exist in America. If one guy is constantly surrounded by beautiful girls, then he's probably the gay friend. |
May 11, 2012 7:05 AM
#30
how can i remove the animation effect when i hover on the list?? the black rock shooter one.. i love your layout, but i want to remove the animation.. |
May 13, 2012 9:44 PM
#31
uwinaako said: how can i remove the animation effect when i hover on the list?? the black rock shooter one.. i love your layout, but i want to remove the animation.. which animations are you talking about? if it about the text-size increase find /* ------ Size of text on all rows when hovered with cursor ------ */ tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } delete the bold |
May 14, 2012 12:23 PM
#33
itsthatguy said: Any way that I can eliminate the highlighting effect when you scroll over a series? Also, trying to figure out how to slightly increase the opacity and center the background image. I took the first part of the code from the manga list setup so I only had to worry about changing the background image and the rest came from the anime list setup. Remove tr:hover td.td1, tr:hover td.td2 tr:hover [class^="td"] and increase opacity, look for Row Options in your CSS, then find all lines with things like background-color: rgba(72, 64, 87, 0.6); the last number ( 0.6 in the example) is the opacity. You probably want 0.8 or so. 1 is opaque. .0 is completely transparent. Centering the image: http://myanimelist.net/forum/?topicid=419405&show=0#post1 How to adjust wallpaper tutorial. |
Jun 1, 2012 3:37 AM
#34
Hi, first of all, thank you for the code, I like the way icon-style top bar looks, so, I made little modifications and add a new Icon("Menu") with the "All Anime", "Currently Watching", etc.. and it works in the manga list too. and here is it in action in My Anime List the code: /* Menu: All Anime/All Manga, Watching/Reading, etc... Modified by Al_eXs */ div > table:first-of-type { background: url("http://img4.imageshack.us/img4/5885/iconmenu1.png") 100% 0px no-repeat transparent; display: block; height: 32px !important; overflow: hidden; padding-top: 32px !important; position: fixed; right: 4px; table-layout: fixed; text-align: center; top: 4px; width: 64px !important; z-index: 6; } div > table:first-of-type:hover { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: url("http://img23.imageshack.us/img23/3290/iconmenuhover1.png") 100% 0px no-repeat transparent !important; height: auto !important; width: auto !important; } div > table:first-of-type tbody { height: 32px !important; overflow: hidden; } div > table:first-of-type tr { background: rgba(255, 255, 255, 0.6); border-radius: 3px 0px 3px 3px; display: block; padding: 8px 0px 4px; } div > table:first-of-type td { display: block; width: 100%; } div > table:first-of-type a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px; color: #FFFFFF; display: block; font: 13px/17px 'Arial', sans-serif; margin: 0px 12px 4px; padding: 3px 16px 3px; text-decoration: none; } div > table:first-of-type a:hover { background-color: #403C5A; } /* Icon-style Top Bar */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; display: block; height: 32px !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed !important; right: 4px; text-align: center; top: 4px; width: 32px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: auto !important; padding-top: 32px !important; width: 150px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #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 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none !important; } #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 a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #403C5A !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #EEEEEE; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 1px 1px 1px #333333; } #mal_cs_otherlinks strong a { background: none 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 { background-color: rgba(255, 255, 255, 0.6) !important; 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 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://img708.imageshack.us/img708/4322/malzc.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 !important; position: relative; } #searchBox { box-sizing: border-box; -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 !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://imageshack.us/photo/my-images/832/icongo.png/") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; display: none; height: 0; margin: 0; padding: 16px 0 0 16px !important; right: 12px !important; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://img18.imageshack.us/img18/2899/icon1db.png"); right: 174px; } #mal_cs_listinfo:hover { background-image: url("http://img809.imageshack.us/img809/9025/icon1over.png"); } #mal_cs_links { background-image: url("http://img822.imageshack.us/img822/7759/icon2wx.png"); right: 140px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://img834.imageshack.us/img834/5844/icon2over.png"); } #mal_cs_otherlinks { background-image: url("http://img18.imageshack.us/img18/246/icon3tt.png"); right: 106px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://img716.imageshack.us/img716/6956/icon3over.png"); } #mal_cs_powered { background-image: url("http://img821.imageshack.us/img821/1820/icon4i.png"); right: 72px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://img696.imageshack.us/img696/1994/icon4over.png"); } #mal\_control\_strip { background: transparent !important; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } the minor changes are basically the fixed height of the displaying items(had 200px) and I change it to auto, and works better. oh, I almost forgot, I fixed the icons to the corner, they don't scroll with the page... |
al_exsJun 2, 2012 11:19 PM
Jun 1, 2012 11:07 AM
#35
al_exs said: Hi, first of all, thank you for the code, I like the way icon-style top bar looks, so, I made little modifications and add a new Icon("Menu") with the "All Anime", "Currently Watching", etc.. and it works in the manga list too. and here is it in action in My Anime List the code: /* Menu: All Anime/All Manga, Watching/Reading, etc... */ div > table:first-of-type { background: url("http://img4.imageshack.us/img4/5885/iconmenu1.png") 100% 0px no-repeat transparent; display: block; height: 32px !important; overflow: hidden; padding-top: 32px !important; position: fixed; right: 4px; table-layout: fixed; text-align: center; top: 4px; width: 64x !important; z-index: 6; } div > table:first-of-type:hover { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: url("http://img23.imageshack.us/img23/3290/iconmenuhover1.png") 100% 0px no-repeat transparent !important; height: auto !important; width: auto !important; } div > table:first-of-type tbody { height: 32px !important; overflow: hidden; } div > table:first-of-type tr { background: rgba(255, 255, 255, 0.6); border-radius: 3px 0px 3px 3px; display: block; padding: 8px 0px 4px; } div > table:first-of-type td { display: block; width: 100%; } div > table:first-of-type a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px; color: #FFFFFF; display: block; font: 13px/17px 'Arial', sans-serif; margin: 0px 12px 4px; padding: 3px 16px 3px; text-decoration: none; } div > table:first-of-type a:hover { background-color: #403C5A; } /* Icon-style Top Bar */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; display: block; height: 32px !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed !important; right: 4px; text-align: center; top: 4px; width: 32px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: auto !important; padding-top: 32px !important; width: 150px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #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 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none !important; } #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 a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #403C5A !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #EEEEEE; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 1px 1px 1px #333333; } #mal_cs_otherlinks strong a { background: none 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 { background-color: rgba(255, 255, 255, 0.6) !important; 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 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://img708.imageshack.us/img708/4322/malzc.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 !important; position: relative; } #searchBox { box-sizing: border-box; -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 !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://imageshack.us/photo/my-images/832/icongo.png/") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; display: none; height: 0; margin: 0; padding: 16px 0 0 16px !important; right: 12px !important; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://img18.imageshack.us/img18/2899/icon1db.png"); right: 174px; } #mal_cs_listinfo:hover { background-image: url("http://img809.imageshack.us/img809/9025/icon1over.png"); } #mal_cs_links { background-image: url("http://img822.imageshack.us/img822/7759/icon2wx.png"); right: 140px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://img834.imageshack.us/img834/5844/icon2over.png"); } #mal_cs_otherlinks { background-image: url("http://img18.imageshack.us/img18/246/icon3tt.png"); right: 106px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://img716.imageshack.us/img716/6956/icon3over.png"); } #mal_cs_powered { background-image: url("http://img821.imageshack.us/img821/1820/icon4i.png"); right: 72px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://img696.imageshack.us/img696/1994/icon4over.png"); } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } the minor changes are basically the fixed height of the displaying items(had 200px) and I change it to auto, and works better. oh, I almost forgot, I fixed the icons to the corner, they don't scroll with the page... Wow you read my mind, just yesterday I was trying to accomplish something like that, but i see you beat me to it. When i switched out the old code with your code the "menu" button you added doesn't show and the "All Anime", "Currently Watching", etc.. remains where they were previously. Am I missing something that should be added elsewhere? |
Jun 1, 2012 5:32 PM
#36
LordSilen said: Am I missing something that should be added elsewhere? umm, maybe some code are missing or something.. cuz my manga list only have this in the style sheet: @import url("http://dl.dropbox.com/u/61796201/css/source/menu.css") all; * {} and it works, so, you can use the @import line or copy the whole code in the menu style sheet. |
al_exsJun 2, 2012 11:22 PM
Jun 1, 2012 5:56 PM
#37
Jun 9, 2012 1:53 PM
#38
This layouts been updated again to take away the font-size transition in non-Firefox (since its laggy), and to better support the other icon style toolbars including the one from AL_exs. Now its linked through an import link at the top of the CSS. |
Jun 24, 2012 7:50 PM
#39
How do I make my main background (the 1 under body) align centre and not align left because that's what its showing me. Or you can suggest an alternate background. Also is black fade code compatible with this layout and if so how can I make it work so second background (with render(#inlineContent) is display. |
Jun 25, 2012 2:55 AM
#40
Soulful said: How do I make my main background (the 1 under body) align centre and not align left because that's what its showing me. Or you can suggest an alternate background. Also is black fade code compatible with this layout and if so how can I make it work so second background (with render(#inlineContent) is display. No the black fade is not compatible, in a way, since it will take away the render. But there's a simple work around for all three. That background looks like an elevator when you scroll down so its pretty cool, I would keep it. Go to MAIN BACKGROUND part at the top. Find body, then background:. Change that line to this: background: url("http://img94.imageshack.us/img94/4530/11thj.png") no-repeat fixed 0 0, url("http://img826.imageshack.us/img826/1097/freedatawallstagebackgr.jpg") repeat scroll center top transparent; Now body has the two images and the elevator is centered. One is the background you added the other is the render. After that, go down to the next section which is right under the body section. Its labeled SECOND BACKGROUND. Remove that whole section. Don't touch the TITLE section under it. Its separated by spaces. Now you can add the black fade add-on to the bottom. If it doesn't work out or if there something you still wanna change when done let me know here I tested it on your list tho so it should work ok. |
Jun 25, 2012 8:14 AM
#41
Shishio-kun said: Yes everything is working thank you very much! (^o^)/No the black fade is not compatible, in a way, since it will take away the render. But there's a simple work around for all three. That background looks like an elevator when you scroll down so its pretty cool, I would keep it. Go to MAIN BACKGROUND part at the top. Find body, then background:. Change that line to this: background: url("http://img94.imageshack.us/img94/4530/11thj.png") no-repeat fixed 0 0, url("http://img826.imageshack.us/img826/1097/freedatawallstagebackgr.jpg") repeat scroll center top transparent; Now body has the two images and the elevator is centered. One is the background you added the other is the render. After that, go down to the next section which is right under the body section. Its labeled SECOND BACKGROUND. Remove that whole section. Don't touch the TITLE section under it. Its separated by spaces. Now you can add the black fade add-on to the bottom. If it doesn't work out or if there something you still wanna change when done let me know here I tested it on your list tho so it should work ok. Can u view my anime list through internet explorer because for me it hangs or crashes. |
SoulfulJun 25, 2012 9:03 AM
Jun 25, 2012 12:41 PM
#42
Soulful said: Shishio-kun said: Yes everything is working thank you very much! (^o^)/No the black fade is not compatible, in a way, since it will take away the render. But there's a simple work around for all three. That background looks like an elevator when you scroll down so its pretty cool, I would keep it. Go to MAIN BACKGROUND part at the top. Find body, then background:. Change that line to this: background: url("http://img94.imageshack.us/img94/4530/11thj.png") no-repeat fixed 0 0, url("http://img826.imageshack.us/img826/1097/freedatawallstagebackgr.jpg") repeat scroll center top transparent; Now body has the two images and the elevator is centered. One is the background you added the other is the render. After that, go down to the next section which is right under the body section. Its labeled SECOND BACKGROUND. Remove that whole section. Don't touch the TITLE section under it. Its separated by spaces. Now you can add the black fade add-on to the bottom. If it doesn't work out or if there something you still wanna change when done let me know here I tested it on your list tho so it should work ok. Can u view my anime list through internet explorer because for me it hangs or crashes. Yeah it crashes for me as well in IE9 but looks perfect in other browsers. But I wouldn't worry about it. IE has been the shittiest browser for years and not a lot of people use it esp when they hear about Chrome of FF. 20% of the overall internet does use it but thats not a representation of a younger/tech-savy demographic like on MAL. Personally I think only like 2% of MAL uses IE. But if you want to attempt a fix, I would take out the top two imports you added. |
Jun 25, 2012 7:46 PM
#43
Shishio-kun said: Yeah it crashes for me as well in IE9 but looks perfect in other browsers. But I wouldn't worry about it. IE has been the shittiest browser for years and not a lot of people use it esp when they hear about Chrome of FF. 20% of the overall internet does use it but thats not a representation of a younger/tech-savy demographic like on MAL. Personally I think only like 2% of MAL uses IE. But if you want to attempt a fix, I would take out the top two imports you added. I agree, so I'll leave the code as it is. |
Jul 27, 2012 9:27 AM
#44
been wanting to try this layout for a while now, but is the code a copy paste sort of thing or do you need to manually put it in to each of the drop down boxes? explained in tutorial |
Angel_BeatsJul 27, 2012 9:40 AM
Aug 11, 2012 11:23 AM
#45
shmirkies said: shi-shio kun, how can you remove the red bar at the bottom? it doesnt look good at all, n doesnt match with the theme. its the copyright. if i you cant remove it hence its copyright but can i change the color? shmirkies said: nevermind i remove the red bar, but the text copyright is still there Their original choice of red was a good choice.. anyhow you can't remove text from the copyright only modify its look, add text and change the color behind it. |
Shishio-kunAug 12, 2012 9:19 AM
Aug 12, 2012 1:25 AM
#46
thanx for the code. this is my favorite layout so far, i like the color scheme, and of course the top bar is just amazing and look neat. i only changed the copyright text background to clear so its inconspicuous. |
Lyndon_OngAug 12, 2012 2:52 AM
Aug 30, 2012 8:55 PM
#47
how i can get different styles from the boxed ones like borders shadows and colors. i tried to put a border around the view more buttons but the border applies on all clickable fonts in the entire list page. i maybe asking too much but please bear with me. i'm reading css tutorial and just beginning to understand things about css. http://i46.tinypic.com/2njecmd.jpg |
Aug 30, 2012 9:37 PM
#48
@uwinaako If you need selectors for what you've outlined, then [class^="td"]:nth-child(1){background:red} [class^="td"] div a:first-child{background:blue} [class^="td"] div a:last-child{background:cyan} .animetitle{background:black} [class^="td"]:nth-child(3){background:white} .animetitle + small {background:magenta} [class^="td"]:nth-child(4){background:purple} [class^="td"]:nth-child(5){background:green} [id^="tagLinks"]{background: orange} [id^="tagChangeRow"]{background:yellow} This is the deepest way you can select text so that other user sees it (so you can't just select text in first cell without selecting cell itself) |
Aug 30, 2012 10:48 PM
#49
VeriTi said: @uwinaako If you need selectors for what you've outlined, then [class^="td"]:nth-child(1){background:red} [class^="td"] div a:first-child{background:blue} [class^="td"] div a:last-child{background:cyan} .animetitle{background:black} [class^="td"]:nth-child(3){background:white} .animetitle + small {background:magenta} [class^="td"]:nth-child(4){background:purple} [class^="td"]:nth-child(5){background:green} [id^="tagLinks"]{background: orange} [id^="tagChangeRow"]{background:yellow} This is the deepest way you can select text so that other user sees it (so you can't just select text in first cell without selecting cell itself) tnx Veriti for these selectors. |
Sep 27, 2012 10:33 PM
#50
More topics from this board
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
2 |
by karmashizzle
»»
Yesterday, 1:57 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
7 |
by orangc
»»
Apr 29, 8:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
1 |
by Zelathis
»»
Apr 29, 7:49 AM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
8 |
by takkun_
»»
Apr 28, 9:25 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7818 |
by takkun_
»»
Apr 28, 4:02 PM |