New
Aug 18, 2014 1:54 PM
#51
shockzz1234 said: 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 Make sure you have the right setting: From what I see you seem to have "rating" activated which does not work with this layout. |
Aug 18, 2014 3:27 PM
#52
Lirina said: Make sure you have the right setting: From what I see you seem to have "rating" activated which does not work with this layout. AH! ......Who'd have thought it was something so simple, lol >.> Thanks!! =D |
Sep 6, 2014 6:55 PM
#53
Hello, The DVD covers on my manga list aren't working. @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"; @import "http://dl.dropbox.com/u/78340470/manga.css"; Also I'd like to center my list as well. |
Sep 6, 2014 9:34 PM
#54
He changed the URLs in the update, you'll have to change it to the new code or just change the URLs manually. |
Sep 6, 2014 10:18 PM
#55
Sourve said: He changed the URLs in the update, you'll have to change it to the new code or just change the URLs manually. Applied this code at the top and only one DVD Cover doesn't show up. @import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css"; |
Sep 9, 2014 12:04 PM
#56
Tieria-Shirin said: Applied this code at the top and only one DVD Cover doesn't show up. @import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css"; At the moment it's a bit difficult with the covers, if you have further problems I recommend waiting a bit or generating your own covers. If only one cover isn't showing up, it's probably a new anime/manga entry or one with a low popularity so it isn't within the code. |
Sep 9, 2014 5:25 PM
#57
This theme is amazing and very clean but I have a problem with the image cover, none of them show up. Is there a general code to fix that? |
Sep 9, 2014 5:42 PM
#58
1tru3g0d said: This theme is amazing and very clean but I have a problem with the image cover, none of them show up. Is there a general code to fix that? front page has what you can do to bring covers back, this is even stated in the current club title |
Sep 10, 2014 2:06 AM
#59
I notice that there is a difference between the animelist and manga list. Without any anime, completed/on-hold/watching/plantowatch/drop have a dark area while in mangalist, with no manga there is none of the dark area. How can I fix the animelist to be like the manga list? I have a bit of OCD and this difference bugs me |
1tru3g0dSep 10, 2014 4:59 AM
Sep 10, 2014 3:44 AM
#60
1tru3g0d said: You do realise double posting and postning big pictures without spoilers are against general forum rules, right?There is also a problem with Anime On-hold list too. There isnt any anime in the on-hold list but it still shows the dark area However in the MANGA list, under On-hold and Plan to read section, there is no manga and there is no dark area as well can you make the ANIME Completed and On-hold look like the rest? Thank you |
Sep 10, 2014 4:48 AM
#61
Oiomi-chan said: 1tru3g0d said: You do realise double posting and postning big pictures without spoilers are against general forum rules, right?There is also a problem with Anime On-hold list too. There isnt any anime in the on-hold list but it still shows the dark area However in the MANGA list, under On-hold and Plan to read section, there is no manga and there is no dark area as well can you make the ANIME Completed and On-hold look like the rest? Thank you hey thank you for telling me ^.* |
Sep 10, 2014 12:24 PM
#62
1tru3g0d said: Oiomi-chan said: 1tru3g0d said: There is also a problem with Anime On-hold list too. There isnt any anime in the on-hold list but it still shows the dark area http://i.imgur.com/yhIjcJw.png However in the MANGA list, under On-hold and Plan to read section, there is no manga and there is no dark area as well http://i.imgur.com/TxTmR4t.jpg can you make the ANIME Completed and On-hold look like the rest? Thank you hey thank you for telling me ^.* You could have also merged posts into one, since its not necessary to have two double posted in this case. Your manga list doesn't have a category totals on on-hold unlike the anime list (remove all CSS to see), not sure why but as I think as soon as you add or remove a title on manga on hold it will probably have the same issue. The only thing I can think of short of recoding the layout's list style would be to cover up the "dark area" with the same image and settings as the main background. example: .header_onhold:before { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/w5t7RdY.jpg%22"); background-origin: padding-box; background-position: center top, center top; background-repeat: repeat; background-size: cover; content: ""; height: 821px; left: -6px; position: absolute; top: 300px !important; width: 1028px !important; z-index: 0 !important; } You have to remove the extra leftover line of text at the bottom if you're going to add this, see "site problems" link under Information on front page if you don't know Someone could come up with a better solution- maybe by restructuring the height of the display table or something- or may have already posted on earlier in this same topic. Can also just simply add some titles too to on-hold. |
Sep 21, 2014 7:38 PM
#63
Covers aren't working at all |
Sep 21, 2014 7:41 PM
#64
The accounts that hosted these covers were generating too much traffic and have been taken down. I suggest next time they come up to copy that CSS code and put it into your own dropbox and occasionally update it from the actual list so that it wont generate a lot of traffic from a ton of users using the same CSS. I also have lost all of my covers and I plan to do this. |
Sep 21, 2014 7:48 PM
#65
I've posted how to make and host your own covers on the front page. Also another cover import is on the front page too to use, but I think ppl should generate their own. Since the MAL hacking public dropboxes crash like crazy. |
Sep 21, 2014 9:55 PM
#66
For some reason when I try to generate my own it never works out. Otherwise I would do so myself and I have no idea where to put the link either. |
Sep 21, 2014 9:58 PM
#67
Are you making sure the type of selector is correct? For this particular Layout you should choose the "more" option. |
Sep 21, 2014 10:30 PM
#68
I made some banners for this. I really like the layout, thanks Lirina! Warning: 26 30 banners inside. Click to enlarge. |
HakuneiiSep 21, 2014 11:52 PM
Sep 22, 2014 3:24 PM
#69
https://www.dropbox.com/s/g0kw8g6826ww8nj/CSSCovers.css?dl=0 is what I got for the share link. Is the CSS edit box something you're supposed to download or just put in the advanced edit box on here? When i clicked the link to that part it wasn't there. I'm using Lirina's otherwise I followed the steps till I got to five |
Sep 24, 2014 7:05 AM
#70
Tieria-Shirin said: https://www.dropbox.com/s/g0kw8g6826ww8nj/CSSCovers.css?dl=0 is what I got for the share link. Is the CSS edit box something you're supposed to download or just put in the advanced edit box on here? When i clicked the link to that part it wasn't there. I'm using Lirina's otherwise I followed the steps till I got to five That's how to use dropbox css: https://dl.dropbox.com/s/g0kw8g6826ww8nj/CSSCovers.css |
[size=0][/size] |
Oct 5, 2014 9:36 PM
#71
Lirina said: This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: All CSS tutorials and add-ons This design has different versions for anime and manga lists. To fix problems with covers try this Cover fixing topic. For more list layouts you can check the Full list of Premade Layouts. 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. Since you never know if images are working: The animelist needs number, score, type, episodes, start/end date and tags to be activated and for the mangalist you need to activate number, score, chapter, volume, start/end date and tags. Code for Animelist @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "http://dl.dropbox.com/u/78340470/anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.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"); } /*#################################################*/ /*#################################################*/ .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; } #list_surround >: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); } .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: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("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; } 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("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; } 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; } Code for Mangalist @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"; @import "http://dl.dropbox.com/u/78340470/manga.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; } Changelog 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 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. Hey i did ur Css and wonderful , thank you :) But i have a problem in the manga section heres pic , i dont know why it does that on the first page when i open the manga list. Also is their a way to move the middle layout where all anime and tabs etc are to the middle of page? instead of it being to left? Also i am new in Css and all and dont know how to make the pictures for each anime to appear etc? Thank You |
Loneliness of Innocence Gin a homeless man blackballed by his profession has convers from an old friend that his daughter Miyuki in levy is dying. He fight his bitterness and struggle to converse acquaintances, old business partners and government agencies. Later Society betrays he’s feeling’s therefore turns to crime. |
Oct 6, 2014 12:45 PM
#72
OtakuWatcher said: Hey i did ur Css and wonderful , thank you :) But i have a problem in the manga section heres pic , i dont know why it does that on the first page when i open the manga list. Also is their a way to move the middle layout where all anime and tabs etc are to the middle of page? instead of it being to left? Also i am new in Css and all and dont know how to make the pictures for each anime to appear etc? Thank You You need to go "Manga list setting" and look at "default status select". It will say "show all" which does not work with my layout, but you can select any of the other options. To display the covers add this to the top of your list: @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; Hope that helps! |
Oct 7, 2014 3:39 AM
#73
Lirina said: OtakuWatcher said: Hey i did ur Css and wonderful , thank you :) But i have a problem in the manga section heres pic , i dont know why it does that on the first page when i open the manga list. Also is their a way to move the middle layout where all anime and tabs etc are to the middle of page? instead of it being to left? Also i am new in Css and all and dont know how to make the pictures for each anime to appear etc? Thank You You need to go "Manga list setting" and look at "default status select". It will say "show all" which does not work with my layout, but you can select any of the other options. To display the covers add this to the top of your list: @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; Hope that helps! Hey yea thank you for your help :) I also read some forums and learned about blink and how to do covers but werent unsure if i did it correct or not but when i got ur manga cover scc and tried it, it worked then i tried mine and it worked then i tried to make the anime one but there was a problem it came out like this: and Heres css i use and top is what i put for anime covers: @import "http://dl.dropboxusercontent.com/s/0acfci1rera28zi/anime%20covers.css?dl=0"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "http://dl.dropbox.com/u/78340470/anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.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"); } /*#################################################*/ /*#################################################*/ .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; } #list_surround >: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); } .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: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("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; } 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("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; } 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; } |
Loneliness of Innocence Gin a homeless man blackballed by his profession has convers from an old friend that his daughter Miyuki in levy is dying. He fight his bitterness and struggle to converse acquaintances, old business partners and government agencies. Later Society betrays he’s feeling’s therefore turns to crime. |
Oct 7, 2014 11:33 AM
#74
OtakuWatcher said: Lirina said: OtakuWatcher said: Hey i did ur Css and wonderful , thank you :) But i have a problem in the manga section heres pic , i dont know why it does that on the first page when i open the manga list. Also is their a way to move the middle layout where all anime and tabs etc are to the middle of page? instead of it being to left? Also i am new in Css and all and dont know how to make the pictures for each anime to appear etc? Thank You You need to go "Manga list setting" and look at "default status select". It will say "show all" which does not work with my layout, but you can select any of the other options. To display the covers add this to the top of your list: @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; Hope that helps! Hey yea thank you for your help :) I also read some forums and learned about blink and how to do covers but werent unsure if i did it correct or not but when i got ur manga cover scc and tried it, it worked then i tried mine and it worked then i tried to make the anime one but there was a problem it came out like this: and Heres css i use and top is what i put for anime covers: @import "http://dl.dropboxusercontent.com/s/0acfci1rera28zi/anime%20covers.css?dl=0"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "http://dl.dropbox.com/u/78340470/anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.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"); } /*#################################################*/ /*#################################################*/ .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; } #list_surround >: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); } .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: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("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; } 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("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; } 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; } You made animetitle CSS, not #more CSS which is what this layout needs. If having trouble follow the tutorial exactly (esp steps 4 and 5) but make #more CSS when the program asks you http://myanimelist.net/forum/?topicid=1174347 |
Oct 8, 2014 1:09 AM
#75
Shishio-kun said: OtakuWatcher said: Lirina said: OtakuWatcher said: Hey i did ur Css and wonderful , thank you :) But i have a problem in the manga section heres pic , i dont know why it does that on the first page when i open the manga list. Also is their a way to move the middle layout where all anime and tabs etc are to the middle of page? instead of it being to left? Also i am new in Css and all and dont know how to make the pictures for each anime to appear etc? Thank You You need to go "Manga list setting" and look at "default status select". It will say "show all" which does not work with my layout, but you can select any of the other options. To display the covers add this to the top of your list: @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; Hope that helps! Hey yea thank you for your help :) I also read some forums and learned about blink and how to do covers but werent unsure if i did it correct or not but when i got ur manga cover scc and tried it, it worked then i tried mine and it worked then i tried to make the anime one but there was a problem it came out like this: and Heres css i use and top is what i put for anime covers: @import "http://dl.dropboxusercontent.com/s/0acfci1rera28zi/anime%20covers.css?dl=0"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"; @import "http://dl.dropbox.com/u/78340470/anime.css"; @import "https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.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"); } /*#################################################*/ /*#################################################*/ .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; } #list_surround >: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); } .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: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("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; } 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("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; } 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; } You made animetitle CSS, not #more CSS which is what this layout needs. If having trouble follow the tutorial exactly (esp steps 4 and 5) but make #more CSS when the program asks you http://myanimelist.net/forum/?topicid=1174347 Yep Thank You very Much, i finally fixed it and learned alot from your guides :) |
Loneliness of Innocence Gin a homeless man blackballed by his profession has convers from an old friend that his daughter Miyuki in levy is dying. He fight his bitterness and struggle to converse acquaintances, old business partners and government agencies. Later Society betrays he’s feeling’s therefore turns to crime. |
Oct 9, 2014 10:11 PM
#76
Oct 24, 2014 9:30 AM
#77
Hey there, Thank you for this amazing layout :) I have a problem though, you can check it in here: http://myanimelist.net/animelist/SuperSmashBros As you can see, the anime images aren't displaying, the watching, completed and others aren't placed correctly and so is the status bar for each (watchin, completed etc.) is also misplaced (the tv: 32, ovas: 10 bla bla). Also, I was wondering how can I replace the banner and the background(and the picture that is shown when no anime picture is found) and what size are all of them(and if you have a site which contains those images). Sorry if that's a lot to request. Thanks a lot in advance ^^ I'm not entering this site often so I would like it really much if you can email me to the address below and if not to write to me in a private message in MAL. Thanks in advance again ^^ Email: amit.toren12@gmail.com |
Oct 24, 2014 10:09 AM
#78
SuperSmashBros said: Hey there, Thank you for this amazing layout :) I have a problem though, you can check it in here: http://myanimelist.net/animelist/SuperSmashBros As you can see, the anime images aren't displaying, the watching, completed and others aren't placed correctly and so is the status bar for each (watchin, completed etc.) is also misplaced (the tv: 32, ovas: 10 bla bla). Also, I was wondering how can I replace the banner and the background(and the picture that is shown when no anime picture is found) and what size are all of them(and if you have a site which contains those images). Sorry if that's a lot to request. Thanks a lot in advance ^^ I'm not entering this site often so I would like it really much if you can email me to the address below and if not to write to me in a private message in MAL. Thanks in advance again ^^ Email: amit.toren12@gmail.com I'll email but I also answer here since other people might have the same questions. To get the cover images add replace second top line of the current code with this: These codes break quite often and Shishio puts a lot of effort into udating the club description if that happens. It's worth looking there before asking. Your list is not displayed correctly because displaying all categories is not supported by this layout. Go to your settings, "My list settings" and then "Default Status Selected". You can chose anything but "show all". To change images this is the section you have to look at, just replace the links. The banners size is 260x1016. /*#################################################*/ /*#############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"); } |
Nov 12, 2014 1:10 PM
#79
How can I do that the background was changing along with the screen resolution? http://i60.tinypic.com/15o75w1.jpg http://i62.tinypic.com/kei1y8.jpg |
Nov 15, 2014 10:36 AM
#80
OskarJanicki1997 said: You can add the bold code:How can I do that the background was changing along with the screen resolution? http://i60.tinypic.com/15o75w1.jpg http://i62.tinypic.com/kei1y8.jpg body { background-image: url("http://coolvibe.com/wp-content/uploads/2010/05/animewallpaper8-1024x576.jpg"); background-size: 100% !important; } |
Nov 16, 2014 1:02 PM
#82
Nov 16, 2014 1:24 PM
#83
In the resolution of the screen equal or higher 1920 x 1080 everything is ok, but on a laptop or a second computer with a lower screen resolution (1440 x 900) background is hiding behind. |
Nov 16, 2014 2:07 PM
#84
OskarJanicki1997 said: well, yes, because the list is that wide. You would have to make the list adapt to the resolution too but that is not as easily done with this kind of layouts.In the resolution of the screen equal or higher 1920 x 1080 everything is ok, but on a laptop or a second computer with a lower screen resolution (1440 x 900) background is hiding behind. |
Nov 17, 2014 2:05 PM
#85
OskarJanicki1997 said: In the resolution of the screen equal or higher 1920 x 1080 everything is ok, but on a laptop or a second computer with a lower screen resolution (1440 x 900) background is hiding behind. I notice you added background-size: 1920px 1080px !important; to the body code near the top, but its not taking effect- it has to be added to the bottom since there's a "body, background-size" code in the middle already which takes priority (code rules on priority here if you wanna know why: http://myanimelist.net/forum/?topicid=397909). Anyways if you add that to the bottom it will take effect, tho I don't know if it will make the layout as you want it cuz yeah the list is always 1000px+ wide no matter the screen so on a 1300px screen you only have 300px space for the pic to peek thru as compared to a 2000px screen where you'd have 1000px of space for it. |
Nov 18, 2014 9:12 PM
#87
Can someone help me, somehow the banner image for complete is not showing at all. I changed the link but it still not work, so I think the problem is with the code somewhere. |
Nov 20, 2014 2:40 AM
#88
ryuuji168 said: you don't have any background specified in the codeCan someone help me, somehow the banner image for complete is not showing at all. I changed the link but it still not work, so I think the problem is with the code somewhere. @import url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/topbar.css"); @import url("https://dl.dropboxusercontent.com/u/277286293/Anime's%20backgrounds.css"); @import url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/CSS/FixedCss.css"); .header_cw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner1_neutral.png") repeat scroll 0% 0% rgba(0, 0, 0, 0) ! important; } .header_completed { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner6.png") repeat scroll 0% 0% rgba(0, 0, 0, 0) ! important; } .header_onhold { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner7.png") repeat scroll 0% 0% rgba(0, 0, 0, 0) ! important; } .header_dropped { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner8.png") repeat scroll 0% 0% rgba(0, 0, 0, 0) ! important; } .header_ptw { background: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Banner/banner5_neutral.png") repeat scroll 0% 0% rgba(0, 0, 0, 0) ! important; } 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 0px 0px transparent; float: left; height: 274px ! important; margin-left: -10px ! important; opacity: 10; position: relative; width: 180px ! important; z-index: 1 ! important; } tr:hover { opacity: 1 ! important; } .table_header span { display: none ! important; } .table_header[width="125"] { display: none ! important; } .table_header { display: inline-block; position: absolute ! important; z-index: 2; } .table_header:hover .table_headerLink { opacity: 1 ! important; visibility: visible ! important; } .table_headerLink strong { font-weight: normal ! important; } .table_headerLink, .table_header:nth-of-type(2):before { background-color: rgba(0, 0, 0, 0.6); border-color: #000000; border-style: solid; border-width: 0px 1px 1px; color: #ffffff; display: inline-block; font-family: calibri; font-size: 11px; font-weight: normal ! important; line-height: 17px; padding: 7px 0px; text-align: center; text-decoration: none; width: 110px; } .table_headerLink { font-variant: small-caps; opacity: 0; position: relative ! important; text-shadow: 0px 0px 5px #000000; visibility: hidden; } .table_header:nth-of-type(2):before { border-radius: 0px 0px 0px 5px; content: "Sort List"; font-size: 12px; font-variant: small-caps; left: 381px; opacity: 1; position: fixed; top: 0px; visibility: visible; z-index: 2; } tr:hover .table_headerLink { opacity: 1; visibility: visible; } .table_headerLink:hover, tr:hover .table_header:nth-of-type(2):before { background-color: #000000; } .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 { background-color: rgba(0, 0, 0, 0.6); border-color: #000000; border-style: solid; border-width: 0px 0px 1px 1px; color: #ffffff; display: inline-block; font-family: calibri; font-size: 13px; font-variant: small-caps; padding: 7px 0px; text-decoration: none; width: 110px; } .status_selected:last-child, .status_not_selected:last-child { display: none ! important; } .status_selected a, .status_not_selected a:hover { background-color: #000000; } .hide { background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/coverimage.png"); background-size: 100% auto; border-color: #000000; border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0px 0px 5px #000000 inset; display: inline-block ! important; float: left; height: 265px ! important; margin-bottom: 8px; margin-left: -160px; padding-left: 0px; position: relative; visibility: visible ! important; width: 189px; z-index: 0; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-repeat: no-repeat; background-size: cover ! important; font-family: calibri; } a:hover { color: #ffffff ! important; } #list_surround { background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.7); border-left-style: solid; border-right-style: solid; border-width: 1px; box-shadow: 0px 0px 4px black; margin: 0px auto auto 30px; padding-top: 242px; position: absolute; width: 1016px; } .td1, .td2 { background: none repeat scroll 0px 0px transparent; 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, 0px 0px 4px #000000; top: 213px; white-space: nowrap; } td[class^="td"]:nth-of-type(3) { background: none repeat scroll 0% 0% transparent; color: #ffffe0; display: inline ! important; font-family: fantasy; font-size: 22px; left: 169px ! important; padding-right: 0px; position: relative; text-align: center ! important; text-decoration: none; text-shadow: 0px 0px 1px #ffd700, 0px 0px 2px #ffa500; top: 234px ! important; width: 30px ! important; } 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 0px 0px rgba(0, 0, 0, 0.6); border-bottom-style: none ! important; border-color: #000000; border-radius: 0px 0px 3px 3px; border-top: 1px solid #000000; border-width: 1px; box-shadow: 0px 0px 4px #000000 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; } 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 0px 0px rgba(0, 0, 0, 0.65); border-radius: 2px 2px 0px 0px; 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; } 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("https://dl.dropboxusercontent.com/u/97405770/Layout_DVDcover/Add.Images/star3.png") no-repeat scroll 0px 0px / 100% auto transparent; content: " "; display: inline; font-size: 0px; left: 168px; padding: 16px; position: relative ! important; top: 248px; } td[class^="td"]:nth-of-type(7) { background: none repeat scroll 0% 0% transparent; border-color: black; border-left: 1px solid black; border-radius: 4px 4px 0px 0px; border-right: 1px solid black; border-top: 1px solid black; border-width: 1px; display: inline; font-size: 0px; height: 5px; left: 20px; position: absolute; top: 0px; width: 174px; } td[class^="td"]:nth-of-type(8) { display: none; } .header_title { color: rgba(0, 0, 0, 0.6); font-family: century gothic; font-size: 93px; font-variant: small-caps; left: -30px; position: relative; top: 23px; } .header_cw { border-bottom: 1px solid #000000; border-color: #000000; border-width: 1px; height: 250px; padding-left: 25px; padding-top: 140px; position: absolute; top: 0px ! 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: 0px ! 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: 0px ! 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: 0px ! 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: 0px ! important; width: 1015px; } #list_surround small { background: none repeat scroll 0% 0% transparent; 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 { font-size: 40px; visibility: hidden; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { position: absolute; } .td1[align="center"][width="50"], .td2[align="center"][width="50"] { color: #ffffe0; font-family: century gothic; font-size: 13px; font-style: italic; font-variant: small-caps; margin-left: 1px; position: absolute; text-align: left; top: 232px ! important; width: 225px; z-index: 10; } .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: 0px 0px 0px ! important; } .td1[width="70"], .td2[width="70"] { text-align: left; } .td1[width="70"] a, .td2[width="70"] a { color: #ffffe0 ! important; font-family: century gothic; font-size: 13px; } .td1[width="70"]:before, .td2[width="70"]:before { color: #ffffff; content: " Progress: "; font-family: century gothic; font-size: 13px; font-style: normal; font-variant: small-caps; font-weight: normal; position: relative; } .td1[width="125"], .td2[width="125"] { background: none repeat scroll 0px 0px transparent; left: 4px; position: absolute; top: 178px; width: 225px; } .td1[width="125"]:before, .td2[width="125"]:before { } .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 0px 0px; border-style: solid solid none; border-width: 1px; box-shadow: 0px 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: 0px 3px 2px 22px; position: absolute; text-align: center; text-shadow: 0px 0px 3px #ffffff, -1px -1px 5px #ffffff; top: 192px ! important; visibility: visible ! important; z-index: 3; } #copyright:before { color: #ffffe0 ! important; content: "Design by Lirina. Topbar by Luxiamimi. "; display: block; font-size: 10px; font-style: normal; text-align: right; } #copyright { background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5); border-color: #000000; border-left: 1px solid #000000; border-radius: 5px 0px; border-top: 1px solid #000000; border-width: 1px; color: #ffffff; font-family: Tahoma; font-size: 10px; font-style: italic; left: 740px; margin: auto ! important; padding: 4px; position: absolute; right: 0px; 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; } input.inputtext, textarea.textarea, textarea.inputtext { background: none repeat scroll 0px 0px 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; } |
Pico-tanNov 20, 2014 2:48 AM
Nov 22, 2014 3:00 PM
#89
Incredible Layout, I changed a little for my liking, just a few stuff that i don't know how to do, but I think it looks awesome. http://myanimelist.net/animelist/DeathScyth31 |
Jan 18, 2015 1:00 PM
#90
Hey, first you have an amazing work here, but I got some problems using the code this is my major problem : http://i.gyazo.com/f7394de1292ffb2e70a07203b4bf8527.jpg Any ideas ? Ty for the great code is realy refreshing to see a new one... |
kojuro-kunJan 18, 2015 1:15 PM
Jan 18, 2015 2:51 PM
#91
This code does not work with the full list shown, you have to set it to only show one list. |
Jan 21, 2015 11:10 PM
#92
Beautiful layout! I love how the background and header automatically change in size. I don't have to bother with fixing widths and everything. XD I really appreciate the category totals that you can add on too (Thank you!!), and the little fixes Sourve did to the top bar. I do have a small problem though, which I can't figure out. The "Sort List" block scrolls with the page... even though its dropdown menu and the rest of the topbar doesn't. It looks like it's isolated/separated from the rest of the top-bar. I'm pretty sure it's the positioning (should be "absolute"?), but after fiddling with it I can't get it to stay in that spot. I think Sourve addressed this , but I'm not having much luck with it. Help is super appreciated. :D http://myanimelist.net/animelist/Mirorin (Scroll down on the page and I'm sure you'll see it.) |
MirorinJan 21, 2015 11:17 PM
Jan 22, 2015 8:44 AM
#93
Mirorin said: Beautiful layout! I love how the background and header automatically change in size. I don't have to bother with fixing widths and everything. XD I really appreciate the category totals that you can add on too (Thank you!!), and the little fixes Sourve did to the top bar. I do have a small problem though, which I can't figure out. The "Sort List" block scrolls with the page... even though its dropdown menu and the rest of the topbar doesn't. It looks like it's isolated/separated from the rest of the top-bar. I'm pretty sure it's the positioning (should be "absolute"?), but after fiddling with it I can't get it to stay in that spot. I think Sourve addressed this , but I'm not having much luck with it. Help is super appreciated. :D http://myanimelist.net/animelist/Mirorin (Scroll down on the page and I'm sure you'll see it.) For the sort list fix: .table_header:nth-of-type(2):before { content: "Sort List"; left: 0px; opacity: 1; position: relative; top: 4px; visibility: visible; z-index: 2; font-variant: small-caps; font-size: 12px; border-radius: 0 0 0 5px; } And for the list stacking: .table_header:nth-of-type(3) { margin-bottom: 32px; z-index: 2; } .table_header:nth-of-type(4) { margin-bottom: 32px; z-index: 2; } .table_header:nth-of-type(5) { margin-bottom: 32px; 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;} It should look like this (1 picture showing the scroll list, second picture showing it's not fixed anymore) |
SatiriquesJan 22, 2015 8:50 AM
Jan 22, 2015 12:51 PM
#94
Ah, so the position is relative. I added the fixes you gave me, and they worked. I did make it (top: 4px;) to (top: 0px;) though, because it made a gap on the top otherwise. And another thing I just noticed, Souve's section titles are white with a black outline. How would I do that? I would like to use it for darker headers. Thanks again for the help. :) |
MirorinJan 22, 2015 1:00 PM
Jan 22, 2015 3:27 PM
#95
Mirorin said: Ah, so the position is relative. I added the fixes you gave me, and they worked. I did make it (top: 4px;) to (top: 0px;) though, because it made a gap on the top otherwise. And another thing I just noticed, Souve's section titles are white with a black outline. How would I do that? I would like to use it for darker headers. Thanks again for the help. :) You can just inspect his list if you want to know the code, but there: .header_title{ text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: white; } |
Jan 22, 2015 4:38 PM
#96
Oh that completely slipped my mind. o.o Thanks again. :D |
Feb 11, 2015 5:58 PM
#97
Is there a way to change the "Watching" to like a different colour (e.g. white) |
Feb 12, 2015 3:45 PM
#98
Ophiu said: Is there a way to change the "Watching" to like a different colour (e.g. white) Just Watching? You can remove the color: rgba(255, 255, 255, 0.6) !important; from under .header_title, then just add to the bottom of the CSS edit box something like .header_cw { color: white !important; } You should color the other headers too or they'll be black too, I think |
Mar 6, 2015 2:55 AM
#99
Thanks for everything! This is such an awesome layout! Unfortunately, I am having a slight issue. For every other anime on my list, the box with the tags is not perfectly aligned with the anime cover; it's shifted a bit to the right. I assume there's a simple fix for this but I can't seem to figure it out. Any idea on how to do so? Screenshot for reference: Alternatively, you could just check out my list and start hovering over the covers to see the problem. Thanks again! |
Mar 6, 2015 4:11 AM
#100
kmt219 said: Thanks for everything! This is such an awesome layout! Unfortunately, I am having a slight issue. For every other anime on my list, the box with the tags is not perfectly aligned with the anime cover; it's shifted a bit to the right. I assume there's a simple fix for this but I can't seem to figure it out. Any idea on how to do so? Screenshot for reference: Alternatively, you could just check out my list and start hovering over the covers to see the problem. Thanks again! Do you see the problem when you use the default version of the layout? That would narrow the problem down to it being your CSS changes and not the original code itself (very helpful to know). |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
16 |
by AholePony
»»
26 minutes ago |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Sep 23, 12:11 AM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7863 |
by ShaggyZE
»»
Sep 22, 9:40 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |